人気記事を取得・表示するプラグイン「WordPress Popular Posts」のカスタマイズ

人気の記事、アクセス数の多い記事のランキングを作るときに便利なプラグインに「JetPack（TOP Post）」と「WordPress Popular Posts」というのがあります。当サイトでは右サイドバーの人気事例ランキングで「WordPress Popular Posts」を使っています。
どちらのプラグインもインストールするとWordPress管理画面からウィジェットとして利用することができるので、すごく登録は簡単なんですが、出力するHTMLパターンは決まっちゃっています。そのため、自分のアレンジをゴリゴリ加えたウェブサイトでは、この機能では満足できるコンテンツが作れないことが多いんじゃないかと思います。

そんなわけで、JetPackのTOP Postのカスタマイズについては、以前、 Jetpackの「人気の投稿とページ」機能を使って、「よく読まれている記事」一覧をカスタマイズする という事例でご紹介しましたので、今回は、もうひとつの WordPress Popular Posts のほうのカスタマイズの仕方についてご紹介します。
　
WordPress Popular Posts では、人気投稿ランキングの表示内容をもっとカスタマイズしたいという方に、次の2つの方法が用意されています。

1. wpp_post にフィルターをかけてカスタマイズ
2. wpp_custom_html にフィルターをかけてカスタマイズ

　
1のほうはランキング投稿1つ1つの要素のHTMLをカスタマイズ、2のほうは投稿ランキング全体のHTMLをカスタマイズすることができます。
　
今回は1の方法を利用して、コラム（カスタム投稿タイプ名：column）というカスタム投稿記事の直近1週間の1位から5位の人気記事ランキングの中で、特に運営側がゴリ押ししたい記事に「要チェック！」という文字を表示させてみましょう。
コラム投稿にカスタムフィールド名「check_it_out」とするチェックボックスカスタムフィールドをアドバンストカスタムフィールドで用意し、それにチェックが入っていたら「要チェック！」と表示させる、という仕様とします。
　
テーマのfunctions.php に以下を追記します。

function custom_popular_post($content, $post, $instance)
{
  $check_it_out = '';
  if (get_field('check_it_out', $post->id)) {
    $check_it_out = '<span>要チェック！</span>';
  }
  $output = '<li>
    <a href="' . get_the_permalink($post->id) . '">
      <div>' . get_the_title($post->id) . '</div>' . $check_it_out . '
    </a>
  </li>';
  return $output;
}

add_filter('wpp_post', 'custom_popular_post', 10, 3);

　
これで出力HTMLのカスタマイズはできたので、表示させたい場所に以下のように記述します。

<?php
$args = array(
  'header' => '人気記事ランキング',
  'header_start' => '<h2>',
  'header_end' => '</h2>',
  'limit' => 5,
  'post_type' => 'column',
  'range' => 'last7days',
  'wpp_start' => '<div><ul>',
  'wpp_end' => '</ul></div>',
);
wpp_get_mostpopular($args);
?>

以上。

こういうのがサクッとできると、メディアサイトなんかのクオリティーがぐんっと上がりますね。

---