人気記事を取得・表示するプラグイン「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);
?>

関連記事:

functions.phpでカスタム投稿とカスタムタクソノミーを作成する方法 イベントカレンダーをつくる 一覧ページの記事の並び順を複数のカスタムフィールドの値で制御する 記事の表示順をカスタムフィールドの値で制御する 親ページがある投稿のIDのリストを取得する メモリエラーの解決 ページ遷移しない投稿一覧のページネーションを、jQueryで手軽に実装する ページネーションのある投稿一覧ページで、最新の投稿１件だけレイアウトを変える 固定ページにページネーション機能を持たせる トップページに設定した固定ページでページネーションする カスタムフィールドを含む記事レコードの一括インポート アドバンストカスタムフィールドの複数選択チェックボックスの値をCSVインポートする ウィジェットをショートコードにして任意の場所で表示する カテゴリページの投稿一覧の取得条件をカテゴリごとに変える 言語設定が「英語」のブラウザからのアクセスの時、英語ページに強制的にリダイレクトさせる プラグインなしで多言語サイト（英語サイトなど）の作り方 【頻出】よく使う便利なテンプレートタグ一覧【WordPress入門】 WordPressカスタマイズ上級編その２（WebAPI） Vue.js を使って WP REST API で取得した他サイトの投稿データを自サイトに表示する 管理画面を使わず、Vue.js と WP REST API を使って、Webページから直接記事データ等を更新する WP REST API でアドバンストカスタムフィールドの値を取得する WordPress製 売上管理システム （専用テーマ販売）の事例 予約システム クラウドソーシング オンラインスクール WordPressカスタマイズ上級編その１（関数）
,,,