WordPress Popular Postsの設定やカスタマイズの方法まとめ！人気記事をランキング形式で表示

2017年10月30日 2018年5月24日

webcode編集部

Webサイトによくある「人気のある記事一覧」。

WordPressで実現させるためには、「WordPress Popular Posts」というプラグインを使うことで実装することができます。

そこで今回は、「WordPress Popular Posts」の使い方を紹介します。

CONTENTS

1 WordPress Popular Postsとは？
2 WordPress Popular Postsの使い方と設定方法
- 2.1 日本語化させる
- 2.2 固定ページに表示させる
3 WordPress Popular Postsをカスタマイズする方法
- 3.1 任意の箇所に設置する
4 WordPress Popular Postsのトラブル対応方法
5 WordPress Popular Postsの使い方まとめ

WordPress Popular Postsとは？

「WordPress Popular Posts」は、ページビューの多い記事を表示できるプラグインです。

このプラグインを使うことで、難しいコードを書かなくてもサイトの中に追加することができます。

https://ja.wordpress.org/plugins/wordpress-popular-posts/

人気にある記事を表示するプラグインは他にも様々なプラグインが用意されていますが、代表的なプラグインが「WordPress Popular Posts」です。

評価も高く、頻繁に更新されているので、安心して利用できます。

サイトバーに実装するためにはプラグインの設定だけでなく、ウィジェットの設定が必要になります。ウィジェットについて詳しく知りたいという方はこちらの記事をご覧ください。

表示されない?!Wordpressウィジェットの作成・編集方法・おすすめまで完全解説

2017.09.11

Wordpressの「ウィジェット」という言葉を耳にしたことはあるでしょうか？実は、Wordpressではウィジェットを使うことで、コードを書き直さなくても簡単に機能を追加するこ...

WordPress Popular Postsの使い方と設定方法

「WordPress Popular Posts」の使い方と設定方法をお伝えします。

今回説明することは、プラグインのインストールと有効化をした後にやるべきことになります。説明を読み始める前に、プラグインのインストールと有効化をしておきましょう。

日本語化させる

「WordPress Popular Posts」は、デフォルトの状態だと英語表記になっています。英語のままだとうまく使いこなせる自信がないという方も多いのではないでしょうか？

WordPressでよく使われるプラグインは日本語化するための翻訳ファイルが用意されています。「WordPress Popular Posts」もその一つです。用意されたファイルを使って日本語化させていきます。

手順は以下の3つがあります。

翻訳ファイルをダウンロードする
ダウンロードしたファイルを解凍する
翻訳ファイルをアップロードする

1．翻訳ファイルをダウンロードする

まずは以下のURLから日本語の翻訳ファイルをダウンロードしましょう。

http://pasonal.com/wordpress-popular-posts-jp-download/

2．ダウンロードしたファイルを解凍する

ダウンロードしたファイルは、zip形式になっているので解凍しておきましょう。

3．翻訳ファイルをアップロードする

解凍後、翻訳ファイルはFTPソフトを使ってアップロードします。

アップロードする場所は、WordPressをインストールしたディレクトリの「wp-content/languages/plugins/」の中に入れてください。

その後、WordPressを再読み込みさせましょう。問題なく日本語で表示されればOKです。

固定ページに表示させる

「WordPress Popular Posts」は、固定ページでも表示させることができます。その方法について紹介します。

まずは、WordPressの管理画面から「固定ページ」→「新規追加」をクリックしましょう。「テキスト」に以下のコードをコピペしてください。

[wpp range="monthly" 
 order_by="views" 
 limit=30 
 thumbnail_width=120
 thumbnail_height=120
 excerpt_format=0
 excerpt_length=120
 wpp_start='<ol class="wpp-list2">'
 wpp_end="</ol>" 
 post_html='<li style="list-style:none;border-bottom:1px gray dotted;"><p style="margin-right:1em;float:left">{thumb}</p><p><b><a href="{url}">{text_title}</a></b><br /><span>{summary}</span></p><p style="clear:both"></p></li>']

<style>
.wpp-list2{
margin: 0!important;
counter-reset: no;
}

.wpp-list2 li:before{
content: counter(no);
counter-increment: no;
color: white; /*文字色*/
background-color: black; /*背景色*/
text-align: center;
opacity: .999;
float: left;
line-height: 30px;
width: 30px;
height: 30px;
border-radius: 2px;
-moz-border-radius: 2px;
margin-right: -25px;
}
</style>

[wpp range="monthly"

order_by="views"

limit=30

thumbnail_width=120

thumbnail_height=120

excerpt_format=0

excerpt_length=120

wpp_start='<ol class="wpp-list2">'

wpp_end="</ol>"

post_html='<li style="list-style:none;border-bottom:1px gray dotted;">{thumb}<a href="{url}">{text_title}</a> {summary}</li>']

<style>

.wpp-list2{

margin: 0!important;

counter-reset: no;

}

.wpp-list2 li:before{

content: counter(no);

counter-increment: no;

color: white; /*文字色*/

background-color: black; /*背景色*/

text-align: center;

opacity: .999;

float: left;

line-height: 30px;

width: 30px;

height: 30px;

border-radius: 2px;

-moz-border-radius: 2px;

margin-right: -25px;

}

</style>

CSSはstyleタグの中に書き込むことで、デザインをカスタマイズできます。

コード部分の項目は以下の意味を表しています。

range：集計期間（「daily」、「weekly」、「monthly」、「all」）
order_by：集計方法（「comments」、「views」、「avg」）
limit：表示する順位（何位まで表示するのか）
pid：除外する記事番号
cat：特定のカテゴリのランキングを表示する（カテゴリIDを指定する）
thumbnail_width：サムネイルの幅（単位：px）
thumbnail_height：サムネイルの高さ（単位：px）
except_format：抜粋する文にhtmlの装飾やリンクを反映する（1：反映させる、0：反映させない）
except_length：抜粋する文の文字数

例えば、「range=weekly」にすると1週間の中での人気記事ランキングを表示できます。また、「limit=10」にすると人気のある記事を10位まで表示できます。

WordPress Popular Postsをカスタマイズする方法

ここからは「WordPress Popular Posts」のカスタマイズ方法をお伝えします。

任意の箇所に設置する

任意の箇所に設置する方法としては、以下の3つの方法があります。

ウィジェットを使用する
ショートコードを使用する
PHPファイルにテンプレートタグを記述する

それぞれの場合の表示方法をお伝えします。

ウィジェットを使って表示させる

ウィジェットを使うことでサイドバーに簡単に表示することができます。

管理画面を表示した上で、「外観」→「ウィジェット」をクリックすると、ウィジェットの設定画面が表示されます。

サイドバーウィジェットや固定ページ、フッターなどそれぞれの場所ごとにドラッグアンドドロップでどの項目を追加するのか設定することができます。

「▼」をクリックすると以下のように、集計期間などの細かな設定をすることができます。

ショートコードを使って表示させる

ショートコードを使うことでサイドバーではなく、投稿記事の中に表示することができます。

「WordPress Popular Posts」のショートコードのパラメータは、WordPressの「設定」→「WordPress Popular Posts」→「パラメータ」で以下のように確認することができます。

ここに表示されているパラメータを使って記述していきます。ショートコードを記述する際には、「テキスト」にしてから記述してくださいね。

PHPファイルにテンプレートタグを記述する

PHPの知識がないと難しい操作になるので、上の2つの方法に比べて少し難易度が高くなります。ただし、上の2つよりは自由にレイアウトを設定することができるので、場合によっては設定しやすくなることもあります。

とは言っても、「固定ページに表示させる」で紹介したショートコードに似たようなコードを記述するだけなので、基本的にパラメータはコピペでOKです。

まずはテンプレートタグの基本形を紹介します。

<?php wpp_get_mostpopular(); ?>

1	<?php wpp_get_mostpopular(); ?>

「( )」の中でパラメータに値を与えることによって表示を変えることができます。パラメータを複数設定する場合は、以下のように記述します。

<?php
 $wpp = array (
 'range' => 'daily',
 'limit' => 5,
 'post_type' => 'post',
 'title_length' => '35',
 'stats_comments' => '0',
 'stats_views' => '1',
 'thumbnail_width' => '50',
 'thumbnail_height' => '50',
 'post_html' => '<li>{thumb}<span>{title}</span></li>',
); ?>

<?php wpp_get_mostpopular($wpp); ?>