WordPressで最初の記事、○○数までの記事の表示を変える方法

WordPressで「最初の記事だけ、○○数までのアイキャッチ画像を大きくしたい」というケースがあります。最初の記事の画像を大きくすれば、ユーザーは最新の記事だと思って、

気になって記事を読んでくれることがあるでしょう。そこで本記事では最初の記事、○○数までの記事の表示を変える方法を解説します。

最初の記事の表示を変える方法

最初の記事の表示は以下のようなコードで変えられます。

▢PHPファイル

  <?php if (have_posts()) : ?>
    <ul class="blog-box">
     <?php while (have_posts()) : the_post(); ?>
      <?php if ($wp_query->current_post == 0 && ( !is_paged() )) : ?
) : ?>
        <!--1記事目に表示させたい内容を記述する-->
       <?php else : ?>
        <!--2記事目以降に表示させたい内容を記述する-->
        <?php endif; ?>
        <?php endwhile; ?>
 
        <?php else : ?>
        <p> <!--1記事も見つからなかった場合の記述をする(例：記事が見つかりませんでしたなど)--></p>
   <?php endif; ?>
  </ul>

current_postで1記事目かどうかを判定する

最初の記事と○○数までの記事、共に表示を変えるにはcurrent_postを使います。current_postは記事のループの数を取得できる記述です。

上記のコードではcurrent_postを0と比較していて、0ならば1記事目の処理を行い、それ以外なら2記事目以降の処理を行うという命令をしています。

ここで1記事目なのに0?と思うかもしれませんが、投稿記事のカウントは0から、始まるため0と記述します。

!is_paged()で1ページ目かどうかを判定する

さきほど1記事目を判定する記述を説明しましたが、1ページ目かどうかの判定も必要です。というのは、1ページ目かどうかの判定をしておかないと、2ページ目以降の最初の記事の表示も変わってしまうからです。

例えば1ページの表示記事数が10記事の場合では、2ページ目、3ページ目で最初に表示される21記事目、31記事目の表示も変わってしまいます。ですので1ページ目でしか、一番上の記事の表示を変えないという処理が必要となります。

この1ページ目かどうかの判定ですが、!is_paged()という記述で判定可能です。is_paged()は2ページ以降かどうかを判定してくれるWordPress関数です。今回は1ページ目かどうかの判定でこの関数を使っているのため、関数の前に「!」をつけることによって、逆の結果がでるようにしています。

一番上の記事ではアイキャッチ画像を背景として表示

ということで前述のコードを使うことで下記のように一番上の記事だけ、表示を変えてみました。一番上だけアイキャッチ画像を表示領域いっぱいに広げることで、2記事目以降と違った見せ方にしてみました。参考にしてみてください。

○○数までの記事の表示を変える方法

これまで1記事だけ表示を変える方法を解説しましたが、連続して表示を変えたいと考える人もいるかと思います。そこで今回は3記事までの表示を変える方法を解説します。

<?php if (have_posts()) : ?>
    <ul class="blog-box">
     <?php while (have_posts()) : the_post(); ?>
      <?php if ($wp_query->current_post <= 2 && ( !is_paged()  )
) : ?>
        <!--3記事までに表示させたい内容を記述する-->
       <?php else : ?>
        <!--3記事以降に表示させたい内容を記述する-->
        <?php endif; ?>
        <?php endwhile; ?>
 
        <?php else : ?>
        <p> <!--1記事も見つからなかった場合の記述をする(例：記事が見つかりませんでしたなど)--></p>
   <?php endif; ?>
  </ul>

<=の演算子を使う

今回の例のように3記事まで表示を変えたい場合は、「<= 2」と記述しましょう。これで3記事以下の表示は変えるという命令ができます。

奇数、偶数の記事の表示を変える方法

これまでのやり方を応用すれば、奇数と偶数で違う表示をすることもできます。

  <?php if (have_posts()) : ?>
    <ul class="blog-box">
     <?php while (have_posts()) : the_post(); ?>
      <?php if (($wp_query->current_post + 1) % 2 == 0): ?>
        <!--偶数の投稿の場合に表示させたい内容を記述する-->
       <?php else : ?>
        <!--奇数の投稿の場合に表示させたい内容を記述する-->
        <?php endif; ?>
        <?php endwhile; ?>
 
        <?php else : ?>
        <p> <!--1記事も見つからなかった場合の記述をする(例：記事が見つかりませんでしたなど)--></p>
   <?php endif; ?>
  </ul>

 <?php if (($wp_query->current_post + 1) % 2 == 0): ?>というように、偶数になるような式を記述すれば偶数だけ表示を変更することができます。そして<?php else : ?>以降で、奇数の処理をしてくれるようになります。

サブループの場合は？

これまでメインループの事例を紹介しましたが、サブループでも記述方法は、ほぼ変わりません。以下のように記述すれば、サブループでも問題なく処理を実行できます。

<?php
        $args = array(
            'post_type' => 'post',
        );
        $wp_query = new WP_Query($args);
        ?>
        <?php if ($wp_query->have_posts()) : ?>
            <?php while ($wp_query->have_posts()) :                                           
      $the_query->the_post(); ?>
                <?php if ($wp_query->current_post == 0) : ?>

GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。