WordPress Popular Postsで表示内容をカスタマイズする

こんにちは、Ryohei（@ityryohei）です！

本記事では、WordPressWordPress Popular Postsdで表示内容をカスタマイズする方法をご紹介しています。

人気記事一覧で表示する内容をカスタマイズしたいんだけど、どうすればいいんだろう？

上記の疑問にお答えします。

では、解説していきます。

WordPress Popular Postsのカスタマイズ方法

WordPress Popular Posts(WPP)で表示内容をカスタマイズする例としていくつか方法があります。

ウィジェットのカスタムHTML
テンプレートタグ
関数によるフィルターフック
Query(WPP_Query)の利用

参考URL：https://github.com/cabrerahector/wordpress-popular-posts/wiki

どの方法を用いてもカスタマイズ可能で、ある程度であれば理想とする表示内容にできるようになっていますが、本記事ではQuery（WPP_Query）クラスを用いたカスタマイズ例をご紹介しています。

WordPress Popular Postsのインストール～ウィジェットの設定については説明を省略しています。プラグインのページに詳しい説明がありますので、参考にしていただければと思います。

https://ja.wordpress.org/plugins/wordpress-popular-posts/#installation

では、実際にWordPress Popular Poststの表示内容をカスタマイズしていきます。

Query（WPP_Query）クラスで表示内容をカスタマイズする

Query（WPP_Query）クラスを用いた方法では、WP_Queryと同様にオプションを指定して取得する投稿データに条件をつけることができます。下記のように$argsにオプションを指定して、投稿データを取得します。

下記の例では$popular_postsには取得した投稿データが格納されてます。

<?php

$args = array(
    'post_type' => 'post', // 投稿タイプ
    'range' => 'month', //集計期間
    'limit' => 5, //表示件数
);
$popular_posts = new \WordPressPopularPosts\Query($args);

もう少しオプションを追加して実際に投稿データを取得してみます。ランキングを表示する際に便利な本文や投稿日といった情報も併せて取得するようにオプションを指定します。

<?php

$args = array(
    'post_type' => 'post', //投稿タイプ
    'range' => 'month', //集計期間(1ヵ月)
    'limit' => 5, //表示件数
    'post-excerpt' => array(
        'active' => true //投稿本文・抜粋を追加
    ),
    'stats_tag' => array(
        'date' => array(
            'active' => true //投稿日を追加
        ),
    ),
);
$popular_posts = new \WordPressPopularPosts\Query($args);

ここまで投稿データを取得することができましたので、実際に出力してみます。今回はサイドバーに追加することを想定して、sidebar.phpに下記の内容を追記します。ランキングの表示に必要になりそうなデータの出力例も併せて記載しています。

<?php

$args = array(
    'post_type' => 'post',
    'range' => 'month',
    'limit' => 5,
    'post-excerpt' => array(
        'active' => true
    ),
    'stats_tag' => array(
        'date' => array(
            'active' => true
        ),
    ),
);
$popular_posts = new \WordPressPopularPosts\Query($args);

if($popular_posts):
    foreach($popular_posts->get_posts() as $popular_post):

        //投稿ID
        echo $popular_post->id;
        //投稿ユーザーID
        echo $popular_post->uid;
        //投稿タイトル
        echo $popular_post->title;
        //ページビュー
        echo $popular_post->pageviews;
        //本文
        echo $popular_post->post_content;
        //抜粋
        echo $popular_post->post_excerpt;
        //パーマリンク
        echo get_permalink($popular_post->id);
        //アイキャッチ画像URL
        echo get_the_post_thumbnail_url($popular_post->id);
        //投稿日
        $date = new DateTime($popular_post->date);
        echo $date->format('Y/m/d');
        //ターム
        $terms = get_the_terms($popular_post->id, 'taxonomy');
        foreach($terms as $term):
            echo $term->slug;
            echo $term->name;
        endforeach;

    endforeach;
endif;
?>

上記の情報があれば幅広いランキング表示に対応できるかと思います。もし順位を表示されたい場合は、カウントする変数を追加して出力いただければと思います。

Query（WPP_Query）クラスで指定可能なオプション

その他に指定できるオプションをご紹介します。実際に指定して取得データを確認したわけではないですが、オブジェクトの内容を確認した限りでは下記のオプションが指定できるようです。

["options":"WordPressPopularPosts\Query":private]=>
array(21) {
    ["title"]=>
    string(0) ""
    ["limit"]=>
    int(5)
    ["offset"]=>
    int(0)
    ["range"]=>
    string(5) "month"
    ["time_unit"]=>
    string(4) "hour"
    ["time_quantity"]=>
    int(24)
    ["freshness"]=>
    bool(false)
    ["order_by"]=>
    string(5) "views"
    ["post_type"]=>
    string(4) "post"
    ["pid"]=>
    string(0) ""
    ["author"]=>
    string(0) ""
    ["cat"]=>
    string(0) ""
    ["taxonomy"]=>
    string(8) "category"
    ["term_id"]=>
    string(0) ""
    ["shorten_title"]=>
    array(3) {
    ["active"]=>
    bool(false)
    ["length"]=>
    int(25)
    ["words"]=>
    bool(false)
    }
    ["post-excerpt"]=>
    array(4) {
    ["active"]=>
    bool(false)
    ["length"]=>
    int(55)
    ["keep_format"]=>
    bool(false)
    ["words"]=>
    bool(false)
    }
    ["thumbnail"]=>
    array(5) {
    ["active"]=>
    bool(false)
    ["build"]=>
    string(6) "manual"
    ["width"]=>
    int(75)
    ["height"]=>
    int(75)
    ["crop"]=>
    bool(true)
    }
    ["rating"]=>
    bool(false)
    ["stats_tag"]=>
    array(6) {
    ["comment_count"]=>
    bool(false)
    ["views"]=>
    bool(true)
    ["author"]=>
    bool(false)
    ["date"]=>
    array(2) {
        ["active"]=>
        bool(false)
        ["format"]=>
        string(6) "F j, Y"
    }
    ["category"]=>
    bool(false)
    ["taxonomy"]=>
    array(2) {
        ["active"]=>
        bool(false)
        ["name"]=>
        string(8) "category"
    }
    }
    ["markup"]=>
    array(6) {
    ["custom_html"]=>
    bool(false)
    ["title-start"]=>
    string(4) "<h2>"
    ["title-end"]=>
    string(5) "</h2>"
    ["wpp-start"]=>
    string(21) "<ul class="wpp-list">"
    ["wpp-end"]=>
    string(5) "</ul>"
    ["post-html"]=>
    string(73) "<li>{thumb} {title} <span class="wpp-meta post-stats">{stats}</span></li>"
    }
    ["theme"]=>
    array(2) {
    ["name"]=>
    string(0) ""
    ["applied"]=>
    bool(false)
    }
}

オプションを指定する際に参考にしていただければと思います。

最後に

最近はサイトを構築した後に運用がしやすいようにプラグインを使ってほしいという要望をいただくことが増えました。一昔前はプラグインはもっさりしているイメージだったので、極力使わないようにしていましたが、PHPのバージョンアップやサーバースペックの向上により、WordPressの表示スピードはどんどん速くなっています。

インストールするプラグインは最低限にした方が良いという考えは変わらないですが、そこまでパフォーマンスに影響がないのであれば、プラグインは便利だし、今後は選択肢の一つにしていきたいなと思います！

以上、WordPress Popular Postsで表示内容をカスタマイズする方法のご紹介でした！