Advanced Custom Fieldsを使って人気記事を表示する方法

公開日:2021/1/18

WordPressで人気記事を表示させるには「WordPress Popular Posts」などの便利なプラグインがありますが、できるだけプラグインを利用したくないというシーンもあります。

「wordpress 人気記事 プラグインなし」などの検索で出回っている情報は、WordPressのカスタムフィールドを利用する方法なのですが、Advanced Custom Fields(ACF)を使っているサイトだと上手くできなかったので、ならばいっそ、Advanced Custom Fieldsを使って実装しようというのが本記事の目的です。

仕組みはシンプルで、「ページにアクセスがあったらACFで用意したカスタムフィールドの数値を「+1」して、そのカスタムフィールドの数値の多い順に表示する」という方法です。

Advanced Custom Fieldsの設定

Advanced Custom Fieldsで以下のようなフィールドを作ります。
フィールドラベル、フィールド名は任意の内容で問題ありません。

フィールドラベル ページビュー
フィールド名 pv
フィールドタイプ 数値
デフォルト値 0

今回は対象を「投稿」にしますので、フィールドグループのルールで「投稿タイプ」「等しい」「投稿」を設定しておきます。

カスタム投稿タイプやタクソノミーなど、集計したいページ群ごとに別のフィールドを用意すれば、特定の投稿タイプの人気記事一覧もサクッと作れます。

クローラーのアクセスを判定する

Googlebotなどのクローラーのアクセスを除外するため、以下のコードをfunctions.phpに追加します。
ブロックしたいクローラーがある場合には、UAを判定できる文字を$botの配列に追加しておきます。


function is_bot() {
  $ua = $_SERVER['HTTP_USER_AGENT'];

  $bot = array(
    'googlebot',
    'msnbot',
    'yahoo',
  );
  foreach( $bot as $bot ) {
    if (stripos( $ua, $bot ) !== false){
      return true;
    }
  }
  return false;
}

PVを計測したいページのテンプレートを修正

今回は「投稿」のPVを計測しますので「single.php」に以下のコードを追加します。
コードは、メインループ内であればどこに追加しても大丈夫です。



//ログインユーザーとクローラーを除く
if( !is_user_logged_in() && !is_bot() ) {

//フィールド「PV」の現在の値を取得
$pv = get_field('pv');

//PVの値に1を追加
$pv++;

//フィールド「PV」の内容を上書き
update_field('pv', $pv);

}

これでログインユーザーとis_bot関数で指定したクローラー以外のアクセスがカウントされます。

人気記事の一覧を表示する

ここでは5件表示させていますが、任意の件数表示が可能です。


<?php
$args = array(
  'posts_per_page' => 5, //5件表示
  'post_type' => 'post',
  'post_status' => 'publish',
  'orderby' => 'meta_value',
  'meta_key' => 'pv' //カスタムフィールドのキーを指定
);

$the_query = new WP_Query($args);
if( $the_query->have_posts() ) :
  echo '<ul>';
  while ($the_query->have_posts()) : $the_query->the_post();
    echo '<li><a href="'.get_the_permalink().'"><p>'.get_the_title().'</p></a></li>';
  endwhile;
  echo '</ul>';
endif;
wp_reset_postdata();
?>

サイドバーなど好きな場所で人気記事を表示させることができます。

この記事を書いた人

井上 憲作

1975年生まれ。PCパーツの通販サイト管理者から、大手インターネット広告代理店にて、100社以上のコンサルティングやSEO施策に従事したのち、2018年に独立。趣味はスキューバダイビング。

カテゴリー

人気の記事

  1. 株式会社Revery
  2. ブログ
  3. WordPressカスタマイズ
  4. Advanced Custom Fieldsを使って人気記事を表示する方法