【WordPress】プラグインなしで閲覧数をカウントして人気投稿TOP3を作る

ネットサーフィンをしていると、閲覧数の多い順に表示したランキングを見かけることが多いです。今や、ブログやYouTubeといったの動画サイト、ニュースのまとめサイトなどなど様々なウェブサイトでそのサイトで人気なコンテンツをさらに見てもらうために必須な項目の１つとも言えます。

せっかく時間をかけて書いた投稿をもっと見てもらうためにも、今回は閲覧数をカウントして人気投稿TOP3を表示することができるプログラムを作っていきます。

閲覧数をカウントするプログラムを作る

ランキングを作るために、まず投稿毎の閲覧数をカウントして行かなければいけません。閲覧数のデータはWordPressの機能の１つであるカスタムフィールドに格納していきます。カスタムフィールドは旧エディタでは投稿編集ページを下にスクロールした先に表示されていて、そこから編集することもできます。

それでは早速カスタムフィールドに閲覧数のメタデータを格納させるためのプログラムを作っていきます。

以下のコードをfunctions.phpかそれに対応するFunctionファイルに追加してください。

//  投稿の閲覧数を設定する
function set_post_views(){
  $post_id = get_the_ID();
  $custom_key = 'post_views_count';
  $view_count = get_post_meta( $post_id, $custom_key, true );
  // カスタムフィールドにメタデータが存在しているかどうかで分岐させる
  if( $view_count === '' ){    //存在しない
    delete_post_meta( $post_id,$custom_key );
    add_post_meta( $post_id,$custom_key,'0' );
  }else{    //存在する
    $view_count++;
    update_post_meta( $post_id,$custom_key,$view_count);
  }
}

このプログラムは投稿のループ内に置いておく関数set_post_views()を設定するプログラムです。投稿内でset_post_views()が呼び出される度にその投稿の閲覧数が+1される仕組みになっています。

もう少し仕組みを詳しくみていきます。プログラムの完成を急ぐ方は読み飛ばしてください。

必要な変数を宣言

$post_id変数には閲覧数を記録する投稿のIDを代入します。get_the_ID()を代入するので、ループ内である必要があることを注意しておきます。

次に$custom_key変数に文字列'post_views_count'を代入します。これはカスタムフィールドの閲覧数メタデータに対応するスラッグです。文字列はお好みで変更できますが、利便性のためにアルファベットと数字のみにしておきましょう。

メタデータを処理する4種類の関数

メタデータを必要に応じて取得・追加・変更することによって閲覧数を更新します。

まず、メタデータを取得するget_post_meta()関数を使ってメタデータを$view_count変数にメタデータを代入します。第一引数に投稿ID、第二に取得したいメタデータのスラッグ、第三はtrueを渡します。メタデータが存在しなかった場合は空データが代入されます。

次に、メタデータを削除するdelete_post_meta()関数と追加するadd_post_meta()関数ですが、第一・第二引数はgetのときと同様で、add_post_meta()関数は第三引数に追加するメタデータを渡します。ここでは閲覧数が存在しない処理の中で追加するのでメタデータは0を渡します。

最後に、メタデータを更新するupdate_post_meta()関数です。addの時と同様に第三引数に更新するメタデータを渡します。ここでは閲覧数が存在する、つまりメタデータが存在する処理の中で更新するので、まず取得したメタデータを+1した後にupdate_post_meta()を呼び出し閲覧数のメタデータを更新します。

閲覧数を出力するプログラムを作る

閲覧数は投稿のメタデータとしてカスタムフィールドに格納できたので、それを呼び出して閲覧数を出力するプログラムを作ります。

以下のコードを先ほど同様functions.phpに追加してください。

//  投稿の閲覧数を出力する
function get_post_views( $post_id = null ){
  $post_id = $post_id ? $post_id : get_the_ID();
  $custom_key = 'post_views_count';
  $view_count = get_post_meta( $post_id, $custom_key, true );
  //　メタデータが存在していなかった場合の処理をする
  if( $view_count === '' ){
    delete_post_meta( $post_id, $custom_key );
    add_post_meta( $post_id, $custom_key, '0' );
    $view_count = 0;
  }
  return $view_count.'views';
}

出力は、投稿ループ外からでもメタデータにアクセスできるように投稿IDを引数として渡すことでもメタデータを取得することができるように、引数を設定します。

最終行で閲覧数メタデータとviewsの文字列を返しているので、閲覧数を表示したいところで

<?php echo get_post_views( $post_id ); ?>

//結果：〇〇views

とechoすることで閲覧数を表示することができます。

ここでももう少し仕組みを詳しくみていきます。プログラムの完成を急ぐ方は読み飛ばしてください。

投稿IDを三項演算子を用いて設定する

関数の一行目の参考演算子は$post_id変数に、引数を渡されていればその引数の値を、渡されていなければget_the_ID()によって値を代入するという処理です。これによってループ内外で関数が使用可能になります。

次の下六行はset_post_views()と同様なので省略します。

閲覧数として$view_countを返す

メタデータが存在した場合は$view_count変数に閲覧数が代入されるので任意の文字列(ここでは'views'にしました。)とともにreturnで返します。メタデータが存在しなかった場合は$view_count変数に0を代入してから返します。

これでカスタムフィールドのメタデータから閲覧数を取得することができるようになりました。

投稿ページに関数をセットする

閲覧数をカウントさせたい投稿ページのファイル(page.phpやsingle.phpなど)にset_post_views()関数をセットしてカウントを開始します。

閲覧数のカウントは正確に記録するために、自分やGoogleなどのBotを除外する必要があります。

まずfunction.phpに以下のコードを追加してください。

// クローラーのアクセスを判断
function is_bot(){
  $ua = $_SERVER["HTTP_USER_AGENT"];
  $bot = array(
    "googlebot",
    "msnbot",
    "yahoo",
    "AdsBot-Google",       //必要ならば
    "AdsBot-Google-Mobile",//必要ならば
    "Twitterbot",
  );
  foreach( $bot as $bot ){
    if(stripos( $ua, $bot ) !== false ){
      return true;
    }
  }
  return false;
}

この関数は任意のBotを除外することができます。その他除外したいBotを追加する場合は$bot変数の配列に追加してください。

それでは投稿ページのループ内の好きな場所に次のコードを追加してください。

//投稿の閲覧数を更新
if( !is_user_logged_in() && !is_bot() ){
  set_post_views();
}

これでこのコードが挿入されているファイルの投稿が表示される度にカスタムフィールドの'post_view_count'のメタデータが更新されるようになります。

試しにプライベートウィンドウなどから投稿を表示してカスタムフィールドが更新されているか確認してみても良いかもしれません。

人気投稿ランキングTOP3を作る

ランキングはWP_Queryを用いてプログラムを組みます。このブログではPCではサイドバー、スマートフォンでは記事の下の方に「よく読まれている記事」としてランキングTOP4を表示しています。

今回はこのブログと同様に、サムネイルとタイトル、閲覧数を表示するランキングを作っていきます。

以下のコードをランキングを表示したい箇所に挿入してください。

<?php
$args = array(
  'post_type' => ***,//表示する投稿のスラッグを入れてください
  'posts_per_page' => 4,
  'meta_key' => 'post_views_count',
  'orderby' => 'meta_value_num',
);
$posts = new WP_Query( $args );
if( $posts->have_posts() ):
  while( $posts->have_posts() ):
    $posts->the_post();
    echo '<a href="'.get_permalink().'"><div class="famousThum">';
    the_post_thumbnail(array(250,130));
    echo '</div><span class="famousViews">'.
      get_post_views().
      '</span><span class="famousTitle">'.get_the_title().'</span></a>';
  endwhile;
  wp_reset_postdata();
endif;
?>

これで挿入箇所にサムネイルと閲覧数、タイトルが3つずつ表示されます。

WP_Queryクラスの使い方に関してはこちらの記事を参照してください。

WP_Queryの使い方

この記事を見る

WP_Queryクラスでよく使われる関数や引数を紹介しています。

'posts_per_page'の値を変えたり関数を変えたりすることで好きなようにカスタマイズできます。表示の順番は'meta_value_num'によって閲覧数の多い投稿から表示されるようになっています。

表示することができればお好みでCSSをあててランキングの完成です！

まとめ

今回はカスタムフィールドを使って閲覧数を格納して、閲覧数の多い順で人気投稿ランキングTOP3を作るプログラムを作成しました。

もしコードに誤植がありましたら、コメントかTwitterのDMなどからご連絡ください。また、質問は答えられる限りなんでもお答えしますので、コメントやTwitterのDMなどからご気軽にお問い合わせください。