【WordPress】新着記事とランダム記事を混在させて一覧表示する方法

WordPressの記事一覧表示で、新着記事とランダムに選ばれた記事を混在させて表示させる方法の解説記事です。

ブログ等では、TOPページに記事一覧の表示をすることが多いと思います。

その時に、以下のような条件で出力したい！という時に使える記事です。

最初の３記事は新着記事を取得
それ以外はランダムで記事を取得
ただし、新着記事はランダムに含めない

この記事を書いている私（わや@wayasblog）は、Web制作会社でエンジニアとして働いています。

なかなかニーズがないと思いますが、業務でこのような実装をすることがあり、かなり手間取ってしまったので備忘録として残しておきます。

クリックできる目次

新着記事とランダム記事を混在させて一覧表示する方法
【まとめ】新着記事とランダム記事を混在させて一覧表示する方法
最後に宣伝

新着記事とランダム記事を混在させて一覧表示する方法

さっそく結論です。

<?php
$args_new = [
    'post_type' => 'post',
    'posts_per_page' => 3,
    'orderby' => 'date',
    'order' => 'DESC',
];

$query_new = new WP_Query($args_new);
$new_post_id = [];
?>

<?php 
if ($query_new->have_posts()):
    while ($query_new->have_posts()): $query_new->the_post(); ?>
    
        <?php $new_post_id[] = get_the_ID(); ?>

        <!-- 記事の表示 -->

    <?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

<?php
$args_rand = [
    'post_type' => 'post',
    'posts_per_page' => 7,
    'orderby' => 'rand',
    'post__not_in' => $new_post_id,
];

$query_rand = new WP_Query($args_rand); ?>

<?php 
if ($query_rand->have_posts()):
    while ($query_rand->have_posts()): $query_rand->the_post(); ?>

        <!-- 記事の表示 -->

    <?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

WP_Queryのパラメータを各自変更してもらえば使えると思いますが、簡単に解説していきます。

手順は、以下の通りです。

日付の新しい記事を３件取得する
その記事のIDを配列に入れておく
新着記事をループで表示する
新着記事を除いた記事をランダムに取得する
ランダム記事をループで表示する

①日付の新しい記事を３件取得する

$args_new = [
    'post_type' => 'post',
    'posts_per_page' => 3,
    'orderby' => 'date',
    'order' => 'DESC',
];

$query_new = new WP_Query($args_new);

ここは説明するまでもないと思います。

WP_Queryの使い方に関しては「Codex」を参照しましょう。

②その記事のIDを配列に入れておく

$new_post_id = [];

まず、上記で空の配列を作ります。

<?php $new_post_id[] = get_the_ID(); ?>

そして、上記の部分で表示した記事のIDを作成した配列に１つずつ格納していきます。

この配列は、ランダム表示する記事から、新着記事の３件を排除するためです。

③新着記事をループで表示する

<?php 
if ($query_new->have_posts()):
    while ($query_new->have_posts()): $query_new->the_post(); ?>
    
        <?php $new_post_id[] = get_the_ID(); ?>

        <!-- 記事の表示 -->

    <?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

ここは定番の書き方なので、説明不要かと思います。

１点だけ、以下の部分で新着記事のIDを配列に入れる処理をしています。

<?php $new_post_id[] = get_the_ID(); ?>

④新着記事を除いた記事をランダムに取得する

<?php
$args_rand = [
    'post_type' => 'post',
    'posts_per_page' => 7,
    'orderby' => 'rand',
    'post__not_in' => $new_post_id,
];

$query_rand = new WP_Query($args_rand); ?>

ここもお決まりの方法で記事を取得しています。

記事の一覧を10記事という設定で、新着を除いた７記事を取得します。

そして、post__not_inというのは、指定したIDの投稿は取得しないというパラメータです。

ここで先ほど配列に入れた新着記事のIDを指定して、ランダム表示には出ないようにしています。

⑤ランダム記事をループで表示する

<?php 
if ($query_rand->have_posts()):
    while ($query_rand->have_posts()): $query_rand->the_post(); ?>

        <!-- 記事の表示 -->

    <?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

あとはループで記事を表示して完成です＼(^o^)／