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

CODE

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

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

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

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

この記事を書いている私(わや@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のパラメータを各自変更してもらえば使えると思いますが、簡単に解説していきます。

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

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

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

$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を作成した配列に1つずつ格納していきます。

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

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

<?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(); ?>

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

1点だけ、以下の部分で新着記事の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記事という設定で、新着を除いた7記事を取得します。

そして、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^)/

注意点

1ページ内で、複数回WP_Queryインスタンスを生成する時は、変数の名前を変えましょう。

今回、$args_new$args_randにしているような感じです。

こんなミスをする人はいないと思いますが…

私は2つとも同じ変数名にしており、なかなか上手くできずに長時間悩まされたので、お気をつけくださいませm(_ _)m

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

今回の手順をまとめておきます。

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

あまり需要はないかもしれませんが、意外と使えそうだと思ったのでシェアしました。

以上です。最後までお読みいただき、ありがとうございました。

最後に宣伝

ココナラで、コーディングの相談を受け付けています。

  • CSSが上手く作れない
  • JavaScriptが思ったように動かない
  • ブログのデザインを修正したい
  • 勉強中でわからないところがあるから教えてほしい

このようなお悩みを解決していますので、「こんなの解決できる?」ということがあったら、ぜひ質問だけでも以下のリンクよりどうぞ。

HTML / CSS / JSのお悩みを解決します コーディングでお困りの方はお気軽にお問い合わせください! | Webサイト制作に関する相談 | ココナラ
HTML / CSS / JavaScript(jQuery)のお悩み相談、ご質問を受け付けます。「CSSが上手く作れない」「JavaScriptが思ったように...

コメント

タイトルとURLをコピーしました