サイトアイコン はまとりねっと

ランキングを作成するプラグイン WordPress Popular Posts (WPP)

Popularposts-logo

投稿にランキングを付けているサイトがよくあるので、興味本位で私もやってみました。ランキングを作るにはWordPress Popular Posts (WPP)というプラグインを使えばかなり簡単にできます。インストール/有効化から設定までまとめましたので参考にしてください。

1. WordPress Popular Posts とは?

サイドバーにPVの多い投稿を表示する機能をもつランキング作成プラグインです。ランキングを作成することで、訪問者に他の投稿も参照してもらうのが狙いですが、見た目も良くなりますね。

ただ単に表示するだけであれば、とても簡単にできるようになっています。表示をきれいにする方法はいくつかありますが、やはり多少はCSSをいじる必要は出てくるという感想です。

ウィジェットを配置せずに、ただPV数を拾った結果を参照することもできますが、それだけであればSlimstat Analyticsを使った方が良いでしょう。

2. WordPress Popular Posts のインストール/有効化

WordPressのプラグインとしてインストールができます。

ダッシュボード>プラグイン>新規追加

”WordPress Popular Posts”でキーワード検索をかけると見つかります。

見つかったら右上の”インストール”ボタンを押下、インストールが終わったら”有効化”ボタンを押下で終わりです。

3. WordPress Popular Posts の設定

WordPress Popular Postsの設定には、”設定”から行う設定”ウィジェット”で行う設定があります。

”設定”から行う設定は主にデータの取得方法、保存方法に対するものです。”ウィジェット”で行う設定は、取得したデータの表示方法に対するものになります。

3.1. 設定

以下の設定画面から設定します。

ダッシュボード>設定>WordPress Popular Posts

統計情報(このタブは設定する項目ではありません)

2017/09/22修正

4.0.2以降はタブではなくてリンクのようなものになりました。

統計情報の設定項目の下には、実際にカウントされた結果が表示されています。あくまで統計情報を参照する目的だけで利用します。(つまり、実際に表示するための設定ではなく、統計情報を自分が参照することが目的のページです。)

統計情報は”過去24時間”、”過去7日間”、”過去30日間”、”全期間”の4つから選択して参照ができます。この情報を参照して、実際にウィジェットに表示する項目を検討します。

項目 内容
順位の指標

4.0.2で見当たりません。ウィジェットでは選択できます。@2017/09/22

順位の指標を”コメント数の順”、”閲覧数の順”(デフォルト)、”1日の平均閲覧数の順”から選択します。
投稿タイプ ”post,page”がデフォルトとなっています。固定ページ不要の場合は”post”にします。
上限 表示する件数の上限を指定します。
選択期間内に公開された投稿のみを表示 期間内に公開された投稿だけを表示するか、全期間にするかのチェックです。

3.1.1. ツール(設定の項目)

項目としては多いのですが、最初に気にするのは”アイキャッチ画像””閲覧を記録する対象者”だけで良いと思います。”プラグインのスタイルシートを使う”の設定はあとでどうするかを考えてください。

項目 内容
アイキャッチ画像 画像を表示する場合のデフォルトの画像、また、投稿内のどの画像を選択するかを指定します。アイキャッチ画像が無い投稿を想定している場合、アイキャッチ画像以外を表示したい場合には設定が必要です。
ツール 閲覧を記録する対象者 デフォルトで”全員”になっていますが、通常は”訪問者”に変更します。(カウントに自分のアクセスが含まれてしまうため)
ログ上限 ディスク容量の問題がなければ、”無制限”のままで良いと思います。”データ保存期間”を選択した場合は、保存日数(デフォルト180日)を変更します。
ウィジェットを AJAX 化 既にアクセスをキャッシュするようなプラグイン(説明上は”WP Super Cache”)がある場合、それを利用する設定です。デフォルトは”無効”です。
WPP キャッシュ期限ポリシー 一時的に人気記事のリストを保存する機能のオンオフの設定です。キャッシュがどの程度再利用されるかに関しては記載が無いのでわかりませんが、キャッシュすることで、毎回データベースにアクセスすることを防ぎ、パフォーマンスを向上させます。デフォルトは”キャッシュしない”です。ページ表示速度に問題がある場合に使うとよいと思います。
データサンプリング 全データを保管せず、サンプリングされたデータから人気記事の傾向を読み取り、ランキングできます。アクセスが多いサイトで、アクセスログが大量になり、パフォーマンス劣化やディスクの問題が発生するような場合に有効な設定となります。
その他 リンクの開き方 デフォルトは”現在のウィンドウ”です。”新しいタブまたはウィンドウ”にすると今の記事を見せつつ別の記事を見せることができます。各記事の傾向により変更するとよいかもしれません。特殊なケースでない限りデフォルト設定で良いと思います。
プラグインのスタイルシートを使う プラグイン付属のwpp.cssを使うかどうかを設定します。私は最初にWordPress Popular Postをお試し的に入れたので、付属のwpp.cssを使っています。WordPress Popular Postを使わなくなった場合を想定すると別のcssになっていた方がわかりやすいとは思います。
キャッシュを空にする 一日の人気のある投稿情報を削除する場合はこちらのボタンを押下して削除します。試していませんが、説明からするとその日1日のアクセス頻度を減らすためのキャッシュ削除なので、元データ(元の人気記事のリストとカウント)が消えるわけではありません。どういう条件でこれを使用すべきなのかはわかりませんでした。
すべてのデータを削除する 今までのカウントをすべてリセットする際に利用します。通常、使用することは無いかもしれませんが、初期設定では自分のアクセスを含めてカウントされてしまうので、すべての設定が完了したのちに、カウントをリセットするのに使うとよいと思います。完全削除でない場合は”ログ上限”の設定で古い情報を消すことになります。

3.1.2. パラメーター(このタブは設定する項目ではありません)

ここには各パラメータと使い方の例が載っています。1個1個パラメータを使う場合に参照します。

また、ウィジェットの設定で”HTMLマークアップ設定”を使いたい場合にも参照します。

3.2. ウィジェットの設置

ウィジェットをサイドバーに設置します。

3.3. ウィジェットの設定

ウィジェットの設定は実際に設定しながら実画面を参照して調整していきましょう。

表示が思った通りに行かないと思いますので、HTMLマークアップ設定、wpp.cssのカスタマイズを行って、最終的な調整とします。

項目 内容
タイトル ウィジェットのタイトルです。”人気の投稿”、”おすすめ記事”など付けるような感じです。
最大表示数 ランキングをいくつまで表示するかを指定します。5~10ぐらいでしょうか。
ソート順 ランキングの指標を選択します。コメント(数)、総閲覧数、1日の平均閲覧数から選びます。
フィルター ランキングの元情報を”過去24時間”、”過去7日間”、”過去30日間”、”全期間”の4つから選択できます。
投稿タイプ 投稿、固定ページの場合は”post,page”、投稿だけの場合は”post”を指定します。
除外する投稿ID ランキングに載せたくない投稿がある場合は投稿IDを記載します。複数の場合はカンマ区切りです。空であれば全投稿が対象になります。

エディターを開いている状態でURLに”post=xxxx”のように表示されていると思います。このxxxxが投稿IDです。

カテゴリーID ランキングで使用するカテゴリーIDを指定します。空であれば全カテゴリーが対象となります。

カテゴリのID取得には”Reval IDs”というプラグインを使うように推奨されています。

尚、カテゴリーのIDはカテゴリーを表示する際のURLから読み取れます。(tag_ID=xx

投稿者ID ランキングで使用する投稿者IDを指定します。空であれば全投稿者が対象となります。

投稿者を限定することは無いと思いますが、もし限定したい場合、投稿者のIDはURLから取れないので、”Reval IDs”を入れた方が良いかもしれません。

タイトルを短縮 タイトルを短縮表示する機能です。
アイキャッチ画像を表示 アイキャッチ画像を表示する機能です。
サイズの選択 アイキャッチ画像のサイズを指定する機能です。固定のサイズもありますが、ご自分でサイズ指定することになると思います。
統計タグの設定 表示される記事に、

HTMLマークアップ設定では表示機能のON/OFFの設定になるので、HTMLマークアップ設定で表示されないようなケースはここにチェックされていない場合があります。

HTMLマークアップ設定 この設定は”一度チェックを入れて、保存する”ことでHTMLが記載できる枠が出てきます。保存しないと枠が出てこないので、最初は少し戸惑うかもしれません。

(おそらく)HTMLであれば何でも書き込めるので、簡単なことであればその枠内で処理できます。

3.4. HTML マークアップ設定のカスタマイズ

本サイトの場合、画像、日付、タイトルの順に表示していますが、HTMLマークアップ設定を使わないとできません。以下のように書き換えています。

投稿のHTMLマークアップ 意味
デフォルトの記載 <li>{thumb} {title} {stats}</li> アイキャッチ画像、投稿タイトル、統計タグの順に表示する。
私の記載 <li>{thumb} <br>{date} {title}</li> アイキャッチ画像、日付、投稿タイトルの順に表示する。

私が変えている理由は、テーマで使われている”最新の投稿”の表示形式に近づけたかったからです。(その方がきれいにみえそうなので)

表示順序は予約語の順序を入れ替えることで簡単に変更できました。

もう一つ、{stats}で表示すると「20xx/xx/xx に投稿されました。」という表示になってしまうので、{date}を使うことで「20xx/xx/xx」という単純表示に変えました。

完璧ではないですが、wpp.cssのカスタマイズと合わせて「最近の投稿」と似た感じにはなりました。

 💡 ここで{}で囲まれているのはWordPress Popular Postsで定義されている予約語です。

{stats}は統計タグの設定でチェックした項目が羅列されている内容です。WordPress Popular Postsの”設定”で表示される”パラメーター”タブのpost_htmlパラメーターに使える予約語のリスト記載がありますので参照してください。

3.5. wpp.cssのカスタマイズ

残念ながらデフォルトのwpp.cssで表示すると、他のテーマで定義されている表示と形式が合いません。従って、wpp.cssを修正して、テーマに合わせてあげる必要が多少なりとも出てきます

簡単に言うと、テーマで定義しているものをぱくって、wpp.cssに入れ込んであげればよいわけです。

場所は<plugin_dir>/wordpress-popular-posts/public/css/wpp.cssです。多分4.0.2からだと思うのですが、プラグインの編集から見えなくなりました。

これはどこを直せばよいかはテーマによって異なりますが、私の場合は”最近の投稿”のスタイルに合わせて、アイキャッチ画像、タイトル、リンクを直しています。

尚、WordPress Popular PostsのUpdateでwpp.cssは上書きされてしまうので、何らかの形で保管しておいた方が良いです。FAQではテーマのフォルダーに入れたら良いように言っています。(私は何となく手元にコピーを置いてあるだけですが)

Each time WordPress Popular Posts is updated the wpp.css stylesheet gets reset and I lose all changes I made to it. How can I keep my custom CSS?

Copying your modified wpp.css file into your theme’s folder will prevent future plugin updates from overwriting it with the default wpp.css file.

WordPress Popular Posts FAQより抜粋

3.6. ランキング番号を付ける(2017/08/22追記)

デフォルトではランキングの番号が表示されません。これもwpp.cssのカスタマイズが必要ですが、思ったより簡単につけることができます。

別投稿で書いているので、参照してください。

まとめ

若干、設定項目が多いような感じを受けますが、意外に難しくはありません。寧ろ表示をそれだけカスタマイズすることができるというプラス要素だと思います。

  • ランキングをサイドバーに表示するだけなら直ぐにできる
  • 見た目を調整するにはwpp.cssのカスタマイズが必要となる
  • テーマに合わせるにはHTMLマークアップ設定の変更が必要となる
  • Updateでwpp.cssが上書きされるので保管しておく

wpp.cssの修正に若干難しいこともあるかもしれませんが、最初の一度だけです。後はWordPress Popular Postsに任せておけば勝手ランキングを更新してくれるので頑張りましょう。

見た目だけでなく、直帰率を下げる効果もありますので、是非WordPress Popular Postsをインストールしてみてください。

モバイルバージョンを終了