「WordPress Popular Posts」はWordPressサイトの人気投稿記事を閲覧数と合わせてリスト表示ができる、とても便利なプラグインです。特にコードを書かなくてもデフォルトのウィジェットに組み合わせて使うことにより簡単ですぐに実装することができます。   さらに、テンプレート内やfunctions.phpファイルに直接コードを書くことで、より細かくカスタマイズすることも可能です。今回はそのカスタマイズ例をまとめていきたいと思います。  

ウィジェットを使って手軽に使用する

まずはWordPressのウィジェット機能を使って簡単に早く実装する方法です。ウィジェット機能を使うことで管理画面から表示設定を行うことができます。ただし、あらかじめ用意されている設定項目の範囲になるので少し柔軟性に欠けます。でも普通のブログであれば特に不自由することはないかと思います。 【functions.php】

<?php
   register_sidebar();　　　// サイドバーウィジェット追加
?>

  【sample-template.php】（一部抜粋）

<ul>
   <?php
     dynamic_sidebar();　　　// ウィジェットのサイドバーを出力
   ?>
</ul>

  上記のコードをそれぞれファイルに記述しウィジェットを有効化させ、WordPress Popular Postsの設定を行えるようにします。管理画面の「外観」→「ウィジェット」のページを開くと、利用可能のウィジェットの中にWordPress Popular Postsが追加されています。「サイトバー」に追加すると、ウィジェットの細かな設定ができるようになります。    

ソースコードを記述して細部までカスタマイズする

次は少し難易度が高いですが、ソースコードを記述することで色々な設定を行い、細部までカスタマイズしていく方法です。たとえば記事が属するタクソノミーのタームやカスタムフィールドの値なども出力することができます。コードの方はfunction.phpと出力するテンプレートに記述していきます。 【functions.php】

// アイキャッチ画像の有効化
if (function_exists('add_theme_support')) {
   add_theme_support('post-thumbnails'); 
   add_image_size( 'wpp_thumbnails', 80, 80, true );
}

// WordPress Popular Postsカスタマイズ
function my_custom_popular_post( $post_html, $p, $instance ) {
   $thumbnail_id = get_post_thumbnail_id( $p->id);
   $thumbnail_img = wp_get_attachment_image_src( $thumbnail_id, 'wpp_thumbnails' );
   $taxonomy_01 = get_the_term_list( $p->id, 'taxonomy_01_slug', '', '', ' ／ ');　　　// タクソノミ−1のタームを出力
   $taxonomy_02 = get_the_term_list( $p->id, 'taxonomy_02_slug', '', ' ',' ／ ');　　　// タクソノミ−2のタームを出力
   $custom_field_01 = get_post_meta($p->id, 'cf_01_slug', true);　　　// カスタムフィールド1の内容を出力
   $custom_field_02 = get_post_meta($p->id, 'cf_02_slug', true);　　　// カスタムフィールド2の内容を出力
   $views = wpp_get_views( $p->id, 'monthly', true);
   $custom_id= $p->id; 
   $output = '
     <li>
     <div>
     <img src="' . $thumbnail_img[0] .'" width="80">
     </div>
     <div>
     <a href="'. get_the_permalink($p->id) . '"><h1>'. $p->title.'</h1></a>
     <div>' . $taxonomy_01 . $taxonomy_02 . $taxonomy_03 . $custom_field_01 . $custom_field_02'</div>
     <span>' . $views . ' Views</span>
     </div>
     </li>
   ';
   return $output;
}
add_filter( 'wpp_post', 'my_custom_popular_post', 10, 3 );

  【sample-template.php】（一部抜粋）

<ul>
   <?php
     $wpp = array (
       'range' => 'monthly',　　　// 集計期間
       'limit' => 5,　　　// 表示数
       'post_type' => 'posts',　　　// 対象の投稿タイプ
       'title_length' => '50',　　　// タイトルの文字数上限
       'stats_comments' => '0',　　　// コメント表示有無
       'stats_views' => '1',　　　// 閲覧数表示有無
       'order_by' => 'views'　　　// 表示順序
     );
   ?>
   <?php wpp_get_mostpopular($wpp_leaders); ?>
</ul>

  これで以下のようにHTMLへ出力されます。

<ul>
   <li>
     <div><img src="[サムネイル画像パス]" width="80"></div>
     <a href="[記事パーマリンクURL]"><h1>記事タイトル</h1></a>
     <div>ターム1 ／ ターム2 ／ カスタムフィールド1の内容 ／ カスタムフィールド2の内容</div>
    <span>[閲覧数カウント] Views</span>
   </li>
</ul>

 

---

  いかがでしょうか、直接コードを書くのは少しハードルが高いですが、カスタムフィールドなどの値も表示できるのでかなり使える範囲が広がるかと思います。ぜひお試しください！   （参考） 人気記事を表示する「WordPress Popular Posts」でカスタムフィールドの値を出力する