wordpressでプラグインを使わずに人気記事をサイドバーに表示する

はじめに

wordpressで人気記事をサイドバーなどに表示する際に、「WordPress Popular Posts」などのプラグインを使う場合が多いと思います。ただ、どうしてもカスタマイズがしにくい場面もあり、そういう場面ではプラグインを使わない方法が欲しくなります。
ここではプラグインを使わずにサイドバーに上位何件かの人気記事を表示するための作業手順をメモします。
なお、記事の表示回数を取得するために部分的にプラグインを使用しています。

やりたいこと

ここでは表示回数(閲覧回数)が多い記事を人気記事とし、以下の画像のようにサイドバーに人気記事何件かをリスト表示するのがゴールです。このサイトの右側サイドバーの「Popular Posts」部分を作ります。また、各人気記事の表示回数やコメント数、はてなブックマーク数も表示できるようにします。
popular-posts-view

環境

  • WordPress 4.4.2


手順概要

人気記事を表示する部分はプラグインを使用しませんが、各記事の表示回数(閲覧回数)の保存と取得には「WP-PostViews」というプラグインを使用します。そしてこのプラグインによって保存される各記事の表示回数を基に人気記事を抽出し、後は人気上位何件かをリストさせます。主な処理部分はfunction.phpに追記するショートコードによって行います。以降では以下の順番でメモします。

  • WP-PostViewsの導入と設定
  • ショートコードをfunction.phpに追記
  • wordpress管理画面からウィジェットにショートコード登録

なお、まずはじめに最低限必要な作業をメモし、2ページ目でコメント数やはてなブックマーク数の表示方法、さらに、今月投稿した記事の中での人気記事、今週投稿した記事の中での人気記事など、投稿日に基づく人気記事の条件の指定方法についてメモします。

WP-PostViewsの導入と設定

wordpress管理画面のプラグイン新規追加から、「WP-PostViews」を検索して以下のように目玉?っぽいサムネイルのプラグインをインストールします。
WP-PostViews

続いてwordpress管理画面左側の「設定」→「PostViews」からWP-PostViewsの設定画面に移動します。
すると、以下の様な画面が表示されるので、この画面内の設定を以下と同じように変更します。
Post-Views-option

上記の中でCount Views Fromは表示回数のカウント対象を誰にするかの選択になります。

  • Everyone : wordpress管理者を含む全てのユーザを対象とする
  • Guest Only : wordpress管理者、投稿者などwordpressのユーザ以外の一般ユーザを対象とする
  • Registerd Users Only : wordpress管理者、投稿者などwordpressのユーザのみを対象とする

Exclude Bot Viewsはボットによるクロールを表示回数にカウントするかの選択になります。Yesならばボットなどによるクロールを表示回数にカウントしないです。ここではYesにします。

その他の設定はそのままでOKです。もし他の設定についても知りたい方は以下のサイト様が参考になると思います。ここでは割愛します。

[WP]記事の閲覧数を表示できるWordPressプラグイン「WP-PostViews」の基本的な使い方 | ウェブアンテナ

WP-PostViewsの導入と設定は以上で完了です。WP-PostViewsの導入によって、以下のようにwordpress管理画面の投稿記事一覧で各記事の表示回数(以下画像内のViews)がカスタムフィールドとして保存されるようになります。
customfield-view


以降ではこのviewsの値を利用します。

ショートコードをfunction.phpに追記

WP-PostViewsで各記事の表示回数が保存されるようになったので、この表示回数を利用して人気上記5件の記事をリスト表示するショートコードをfunciton.phpに追記します。追記箇所はfunction.php冒頭の<?php以降ならばどこでも大丈夫です。
追記する内容は以下です。

上記により、ショートコード[most_viewed]をウィジェットで使用できるようになります。下のボタンで上記ショートコードの解説が展開しますので必要な方は参考にして頂ければと思います。

上記ショートコードの解説をメモします。
まずはじめに、冒頭と末尾でob_start();ob_get_clean();がありますが、これはhtml出力をバッファしています。詳しくは下記サイトが参考になると思いますのでここでは省略します。

PHPの出力バッファリング機能 | バシャログ

続いて以下の部分で各記事の表示回数の上位5件を取得しています。

WP_Queryで指定した条件を満たす投稿記事を取得しています。arrayの中身が条件になります。上記で指定している条件の意味はそれぞれ以下です。

  • meta_key : カスタムフィールドのキーを指定します。WP-PostViewsで導入されたカスタムフィールドviewsをここで指定しています。
  • orderby : 並び替え基準とする値の指定です。ここでは、meta_value_numを指定しています。meta_value_nummeta_keyの値そのものを意味します。すなわちviewsでの並び替えを指定しています。
  • order : 並び替え順です。DESC→降順、ASC→昇順。ASCを指定すれば、viewが少ない順、すなわち表示回数が少ない記事順に取得できます。
  • posts_per_page : 1ページあたりに表示する件数です。今回はサイドバーに表示するだけですが、もし上記のWP_Queryの結果をサイドバーではなく固定ページなどに表示した場合は、1ページ以降も表示できます。

WP_Queryを駆使すれば大体どんな条件指定も可能です。例えば、投稿日が今月である記事のうち表示回数上位5件を表示することも簡単に可能です。この方法については2ページ目に別途まとめて載せています。


あとはWP_Queryで条件指定して取得した記事をwhileループで処理するだけになります。whileループの中身についてはコメントにある通りです。
なお、見て分かる通りhtmlタグも自由に変更できるので適当にcssを作って指定すれば自由に見た目をカスタマイズ可能です。
上記では表示回数の表示部分のcssクラスとしてlabel label-dangerを指定していますが、これはBootstrapを使っているためにそのまま使用しています。もちろん自由にcssクラス作成して指定すれば自由に見た目変更可能です。

なお、上記のショートコードは下記の英語サイト様を参考にさせて頂きました。ありがとうございました。

How to Display Popular Posts Without a WordPress Plugin | websitetips4u
WP-PostViews | WordPress.org


wordpress管理画面からウィジェットにショートコード登録

あとはwordpress管理画面の「外観」→「ウィジェット」からサイドバーにテキストウィジェットを追加して、その内容を以下のようにショートコード[most_viewed]を書いて保存します。
shortcode-widget

すると、以下の様に表示回数に基づいた人気上位5件の記事タイトルとその日付、表示回数が表示されます。
example-widget-view

以上で作業は完了です。なお、上記では人気記事の投稿日と表示回数を表示していますが、日付や表示回数以外にも、コメント数、はてなブックマークの数なども表示可能です。これらの方法と、今月の人気記事、今週の人気記事などの表示方法について次ページにメモします。

このエントリーをはてなブックマークに追加

SPONSORED LINK

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL