WordPress
カスタマイズ事例

WORDPRESS CUSTOMIZATION

Jetpackの「人気の投稿とページ」機能を使って、「よく読まれている記事」一覧をカスタマイズする

様々な機能を持つJetpackというプラグイン。
当サイトでも一度事例を紹介しています。
Jetpackのパブリサイズ共有をカスタム投稿タイプでも使えるようにする
  
さて、このJetpackには、TOP Postという人気記事を表示してくれるウィジェット機能があり、ウィジェット「人気の投稿とページ(Jetpack)」を選択することで利用が可能です。
たまに見かけますよね、「よく読まれている記事」とかいってアクセスの多い記事を上位5位とかサイドバーに表示しているサイト。当サイトも右サイドバーに置いているやつです(もっとも当サイトでは「Jetpack」ではなく「WordPress Popular Posts」というプラグインで人気記事を取得していますが)。
ただ、このJetpackウィジェット「人気の投稿とページ(Jetpack)」、出力するHTMLが3パターンのみと決まってしまっていて、フィルターフックもアクションフックもないため、HTMLのカスタマイズができません。レイアウトを調整するには、出力されるHTMLを前提にCSSを調整してそれっぽく見せるのが一般的な妥協点だろうと思います。

ただ今回はそれではつまらないので、完全に自由にHTMLを組みたいという方のために、Jetpackプラグインを導入したサイトで、レイアウトを自由にカスタマイズした人気記事リストをページに出力する事例についてご紹介しようと思います。
 
Jetpackで人気記事リストを取得する関数のひとつに stats_get_csv という関数があって、今回はこれを使います。
関数の説明は以下のページにあるので割愛します。
https://stats.wordpress.com/csv.php
 
作る機能は
『stats_get_csv を使ってJetpackから直近2週間のアクセス上位記事を5件取得し、ページのどこにでも自由に人気記事TOP5を掲載できるようにショートコード化する』
です。
テーマのfunctions.phpに以下を追記します。

if (!function_exists('display_top_popular_posts')) {
  function display_top_popular_posts()
  {
    $html = '';
    $top_posts = stats_get_csv('postviews', 'period=week&days=2&limit=5'); //2週間のアクセス上位5件を取得
    if (!empty($top_posts)) {
      foreach ($top_posts as $top_post) {
        setup_postdata($top_post);
        $time = get_post_time('Y年n月j日', false, $top_post->ID);
        $html .= '<div><h4 class="media-heading entry-title">
            <a href="' . get_permalink($top_post->ID) . '">' . get_the_title($top_post->ID) . '</a>
          </h4>
          <div class="entry-meta">' . $time . '</div>
        </div>';
      }
    }
    return $html;
  }
  add_shortcode('display_top_popular_posts', 'display_top_popular_posts');
}

生成する $html のHTML部分を自由にカスタマイズして自分好みのレイアウトを作ってください。
あとは、ショートコード display_top_popular_posts を任意の場所で呼び出せばOKです。
 
ポイントは「stats_get_csv」ですね。
この関数の存在を知れば実装自体はどうってことないです。

【100ウェブ新着情報メルマガ】

WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!