プラグインWordPress Popular PostsでWP_Queryを使って人気記事を表示する方法

はじめに

WordPress の人気記事を表示できる「WordPress Popular Posts（WPP）」プラグイン。
でも、WPP のデータを WP_Query で並び替えようとすると、うまく動かない ことがありませんか？

この記事では、WP_Query で人気記事を正しく取得・並び替える方法 を解説します！

WP_Query でうまくいかない理由

WPP は、閲覧数を WordPress の 標準メタデータではなく、独自のデータベーステーブル に保存しています。
そのため、単純に meta_key を指定して WP_Query を実行しても、正しい結果になりません。

WPP のデータを WP_Query に適用する方法

① WPP のクエリを実行して人気記事を取得

PHP

$args = array(
    'range'     => 'monthly', // 集計期間: daily, weekly, monthly, all
    'order_by'  => 'views',   // 並び順: views（閲覧数）, comments（コメント数）, avg（1日の平均）
    'post_type' => 'post',    // 取得する投稿タイプ
    'limit'     => 10         // 表示する記事数
);

// WPPのクエリ実行
$popular_posts = new WordPressPopularPosts\Query($args);

② 取得したデータから「記事IDの配列」を作成

PHP

$wpp_query_ids = array_map(
    function($wppost) {
        return (int) $wppost->id;
    },
    $popular_posts->get_posts()
);

③ WP_Query に ID を渡して、並び順を保持する

PHP

$query_args = array(
    'posts_per_page' => 10,  // 表示する記事数
    'post_type'      => 'post', // 投稿タイプ
    'post__in'       => $wpp_query_ids, // WPP で取得した記事ID
    'orderby'        => 'post__in' // IDの順番通りに表示
);

$wp_query = new WP_Query($query_args);

④ 人気記事一覧を出力する

PHP

// 人気記事を表示
$popular_query = new WP_Query($query_args);

if ($popular_query->have_posts()) : ?>
    <div class="popular-news">
        <h2>人気ニュースランキング</h2>
        <ol>
        <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
            <li>
                <a href="<?php the_permalink(); ?>">
                    <figure>
                        <?php if (has_post_thumbnail()) : ?>
                            <?php the_post_thumbnail('thumbnail'); ?>
                        <?php else : ?>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/no-img.jpg" alt="No Image">
                        <?php endif; ?>
                    </figure>
                    <h3><?php the_title(); ?></h3>
                    <span class="post-date"><?php the_time('Y.m.d'); ?></span>
                    <span class="post-view"><?php echo wpp_get_views(get_the_ID(), 'monthly'); ?> views</span>
                </a>
            </li>
        <?php endwhile; ?>
        </ol>
    </div>
    <?php wp_reset_postdata(); ?>
<?php else : ?>
    <p>人気記事がありません。</p>
<?php endif; ?>

⑤ まとめると下記のようになります

PHP

<?php
$args = array(
    'range'     => 'monthly', // 集計期間: daily, weekly, monthly, all
    'order_by'  => 'views',   // 並び順: views（閲覧数）, comments（コメント数）, avg（1日の平均）
    'post_type' => 'post',    // 取得する投稿タイプ
    'limit'     => 10         // 表示する記事数
);

// WPPのクエリ実行
$popular_posts = new WordPressPopularPosts\Query($args);

// 人気記事を取得
$wpp_query_ids = array_map(
    function($wppost) {
        return (int) $wppost->id;
    },
    $popular_posts->get_posts()
);

// WP_Queryに渡す引数を設定
$query_args = array(
    'posts_per_page' => 10,  // 表示する記事数
    'post_type'      => 'post', // 投稿タイプ
    'post__in'       => $wpp_query_ids, // WPP で取得した記事ID
    'orderby'        => 'post__in' // IDの順番通りに表示
);

$wp_query = new WP_Query($query_args);

// 人気記事を表示
$popular_query = new WP_Query($query_args);

if ($popular_query->have_posts()) : ?>
    <div class="popular-news">
        <h2>人気ニュースランキング</h2>
        <ol>
        <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
            <li>
                <a href="<?php the_permalink(); ?>">
                    <figure>
                        <?php if (has_post_thumbnail()) : ?>
                            <?php the_post_thumbnail('thumbnail'); ?>
                        <?php else : ?>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/no-img.jpg" alt="No Image">
                        <?php endif; ?>
                    </figure>
                    <h3><?php the_title(); ?></h3>
                    <span class="post-date"><?php the_time('Y.m.d'); ?></span>
                    <span class="post-view"><?php echo wpp_get_views(get_the_ID(), 'monthly'); ?> views</span>
                </a>
            </li>
        <?php endwhile; ?>
        </ol>
    </div>
    <?php wp_reset_postdata(); ?>
<?php else : ?>
    <p>人気記事がありません。</p>
<?php endif; ?>

まとめ

これで、WordPress Popular Posts のデータを WP_Query で正しく並び替え、人気記事一覧を表示 できるようになりました！
「WP_Query で人気記事を取得したいけど、うまくいかない…」と悩んでいる方は、ぜひ試してみてください。