『WordPress Popular Posts』をWP_Queryの様に使って楽々フルカスタマイズ（基本の使い方も）

手軽に人気記事を出力できるプラグインで便利な『WordPress Popular Posts』ですが、カスタマイズが結構面倒ですよね。
しかし、WP_Queryのような使い方で簡単にカスタマイズもできることを知り、使う機会が増えました♪
基本の使い方（ウィジェットに表示）と、カスタマイズについてシェアします

コンテンツ

まずはプラグインを有効化

公式サイトかWordPress管理画面の「プラグイン」＞「新規追加」から『WordPress Popular Posts』を検索してインストール、有効化します。

WordPress Popular Postsの設定

有効化すると「設定」の中に「WordPress Popular Posts」という項目ができているので、これをクリックします。
ここでは設置したあとのアクセス数などを閲覧できます。
（画像は設置してすぐなので0ですが。）

上部の「ツール」をクリックし、設定画面に行きます。

設定を簡単に説明していきます♪

1アイキャッチ画像

デフォルトのアイキャッチ画像 … 記事にアイキャッチ画像が存在しないときに表示される画像を設定できます。
画像の取得元 … アイキャッチ画像、本文内の最初の画像、最初の添付ファイル、カスタムフィールドから選択できます。

2データ

閲覧を記録する対象者 … 全員、訪問者のみ、ログイン中のユーザーのみから選択できます。
ログ上限 ⋯ 無効、データ保存期間（x日）で選択できます。サーバーのためにも上限を決めておいたほうが良いでしょう。
キャッシュ ⋯ 必要に応じてキャッシュと更新間隔を指定できます。

3その他

リンクの開き方 ⋯ 現在のウィンドウ、新しいタブまたはウィンドウから選べます。
プラグインのスタイルシートを使う ⋯ 自作のcssのみを反映させたい場合はここを「無効」にしておきます。

4キャッシュ、データの削除

ここからランキングデータやキャッシュをクリアできます。

基本の設置方法：ウィジェット

管理メニューの「外観」＞「ウィジェット」から、表示したいウィジェットに追加できます。
表示したい箇所で「+」を押し、「全て表示」でウィジェットの項目にあります。

タイトルや表示数、表示内容も変更できますし、カテゴリなどで絞込むことも可能です。
詳しくは画像にコメント入れています♪

オリジナルテーマでウィジェットの設定がない場合はこちらをご参考ください♪

WordPress自作テーマにウィジェット機能を追加する

WordPressの便利なウィジェット機能の、自作テーマへ設定や表示の仕方を解説しています。

表示方法②：テンプレートに記述する

ウィジェット以外にも、テンプレートファイルの出力したい箇所にphpで書くことも可能です。
簡単な表示ならこれで十分だと覆いますが、よりカスタマイズしたい場合は次の表示方法③へどうぞ♪

表示したいテンプレートファイル

<?php 
if (function_exists('wpp_get_mostpopular')) {
  $arg = array (
    'range' => 'daily',//集計する期間 {daily(1日), weekly(1週間), monthly(1ヶ月), all(全期間)}
    'order_by' => 'views',//表示順｛views（閲覧数),comments（コメント数）,avg（1日の平均）}
    'post_type' => 'post,page',//ポストタイプを指定 {post, page, カスタムポスト名}
    'title_length' => '25',//表示させるタイトル文字数
    'excerpt_length' => '55',//抜粋文字数
    'stats_comments' => '1',//コメント数を表示{ 1(表示), 0(非表示) }
    'stats_date' => 1,//日付を表示 { 1(表示), 0(非表示) }
    'stats_date_format' => 'F j, Y',//日付表示フォーマット
    'limit' => 10, //表示数
    'stats_views' => '0',//閲覧数表示 { 1(表示), 0(非表示) }
    'thumbnail_width' => '150',//サムネイルの幅
    'thumbnail_height' => '150',//サムネイルの高さ
    'stats_category' => 1,//カテゴリー名を使用する { 1(する), 0(しない) } {category}
    'post_html' => '<li>{thumb}<h1>{title}</h1><p>{summary}</p><div>{stats}{category}</div></li>'//表示されるhtmlの設定（{thumb}はリンク付きのサムネイル画像,{title}はリンク付きのタイトル,{summary}は抜粋文）
  );
  //ランキングを表示  
  echo '<ol class="ranking-list">';
    wpp_get_mostpopular($arg);//リストの出力
  echo '</ol>';  
}
?>

その他にも多種なパラメーターが用意されています。
詳しくは公式ページをどうぞ(^^)
2. Template tags · cabrerahector/wordpress-popular-posts Wiki · GitHub

表示方法③：より自由なカスタマイズ方法（オススメ）

もっと自由にカスタマイズしたいよ！って方は断然こちらの方法がオススメです。
もともと『WordPress Popular Posts』にはWP_Queryのように使える「WPP_Query」というクラスが用意されているので、Wp_Queryに慣れている場合はこちらのほうが断然カスタマイズしやすいと思います(^^)
私ももっぱらこちらを使用します。

表示させたい箇所に以下のように記述します。

functions.php

<?php 
if (class_exists('WPP_Query')) {
global $post;
  $args = array(
    'range' => 'monthly',//集計する期間 {daily(1日), weekly(1週間), monthly(1ヶ月), all(全期間)}
    'order_by' => 'views',//表示順｛views（閲覧数),comments（コメント数）,avg（1日の平均）}
    'post_type' => 'post',//複数の場合は'post, name1, nem2'
    'limit' => 5, //表示数
  );
  $wpp_query = new WPP_Query($args);
  $wpp_posts = $wpp_query->get_posts();
  if ($wpp_posts) { ?>
    <!--ランキングの表示-->  
    <h2>Monthly Ranking</h2>
    <ol class="ranking-list">
      <?php 
      foreach ($wpp_posts as $wpp_post) {
        $post = get_post($wpp_post->id);
        setup_postdata($post);
        $cat = get_the_category();$cat = $cat[0]; //記事のカテゴリ情報取得
      ?>
      <!--記事の表示内容-->
      <li>
        <a href="<?php the_permalink();?>">
          <figure>
            <?php 
            if(has_post_thumbnail()){ //アイキャッチ
              the_post_thumbnail('large', array('alt' => get_the_title()));
              }else{ //アイキャッチのない場合に表示する画像?>
            <img src="<?php echo get_template_directory_uri(); ?>/img/no-img.jpg" alt="no image">
            <?php };?>
          </figure>
          <h3 class="post-ttl"><?php the_title();?></h3>
          <span class="post-cat"><?php echo $cat->cat_name;?></span>
          <span class="post-date"><?php the_time('Y.m.d');?></span>
          <span class="post-view"><?php echo wpp_get_views($post->ID, 'monthly'); ?>views</span>
        </a>
      </li>
      <?php } ?>
    </ol>
    <?php 
    wp_reset_postdata();
  }
}
?>

この様に、自由なレイアウトで表示できます！
上記は通常の投稿の場合のものなので、カスタム投稿の場合はカテゴリー表示の箇所を変更してくださいね(^^)

おわりに

この3つの方法で、大抵のランキングは表示できると思います！
実はショートコードも用意されているのですが、あまり利用する機会ないかなぁと思います。。。
が、念の為、公式の該当箇所へのリンクを張っておきます。
1. Using WPP on posts & pages · cabrerahector/wordpress-popular-posts Wiki · GitHub

『WordPress Popular Posts』の重さに困ったら軽いと評判の『Simple GA Ranking』もオススメです ♪
（当ブログではこっちを使用しています）
最初の設定に手間かかるので、手軽さで言えば『WordPress Popular Posts』に軍配があがりますかね。