WordPress

2021.01.22

【WordPress】記事一覧のループで最初と最後だけ違う処理をする方法

WordPressで記事一覧をループで表示する時に、「最初の記事だけサムネイルを大きくしたいな」とか「最後の記事だけ表示を変えたい」ということがよくあります。

CSSでなんとかできることもありますが、ループの記述で「最初だけ」または「最後だけ」処理を変えることが可能なのでご紹介します。

まずは一般的なWordpressのループを見てみる

以下がWordpressでの一般的なループの記述です。

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <p>繰り返し処理する内容</p>
    <?php endwhile; ?>
<?php else : ?>
    <p>記事が1件も見つからなかった時の内容</p>
<?php endif; ?>

上記のコードを簡単に説明すると「投稿記事があればその数だけ繰り返し表示する」という内容になります。

『<?php if (have_posts()) : ?>~<?php endif; ?>』で表示できる記事があるか判断します。

記事がなければ、『<?php else : ?>~<?php endif; ?>』内が実行されます。

記事があれば、『<?php while (have_posts()) : the_post(); ?>~<?php endwhile; ?>』で、最初から順に記事があるか調べて、繰り返し取得していきます。

WordPressのループで最初だけ違う処理をする

それでは、WordPressのループで「最初だけ」違う処理をする方法を見てみましょう。

一般的なループの内容は変わらず、while文の中で条件分岐させます。

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

        <?php if ($wp_query->current_post == 0) : ?>
            <p>最初だけ違う内容</p>
        <?php else : ?>
            <p>2回目以降の内容</p>
        <?php endif; ?>

    <?php endwhile; ?>
<?php else : ?>
    <p>記事が1件も見つからなかった時の内容</p>
<?php endif; ?>

最初だけ違う処理をする場合は、WordPressに用意されている機能『$wp_query』クラスを使用します。

『$wp_query』の中にはループカウンタ『current_post』が用意されています。

『current_post』を使えば、現在の投稿が何番目なのかを取得することができます。要はループ数をカウントしてくれています。
投稿のカウントは0から始まることに注意

while文の中に、if文がもう1つ追加されていますね。

『<?php if ($wp_query->current_post == 0) : ?>』で、最初の投稿記事だったらという条件分岐になります。

つまり最初の投稿は、『<?php if ($wp_query->current_post == 0) : ?>~<?php else : ?>』内の内容が出力され、
2回目以降の記事は『<?php else : ?>~<?php endif; ?>』内の内容が出力されるということになります。

▼補足
『current_post == 0』を『1』にすれば2記事目だけ、『2』にすれば3記事目だけ変更といったように自由に変更を加えることができます。

WordPressのループで最後だけ違う処理をする

続いて、WordPressのループで「最後だけ」違う処理をする方法です。

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

        <?php if ($wp_query->current_post == $wp_query->post_count - 1) : ?>
            <p>最後だけ違う内容</p>
        <?php else : ?>
            <p>通常の内容</p>
        <?php endif; ?>

    <?php endwhile; ?>
<?php else : ?>
    <p>記事が1件も見つからなかった時の内容</p>
<?php endif; ?>

最後だけ変える場合は『current_post』に加えて『post_count』を使います。

『post_count』には、全体の投稿数が格納されています。

『<?php if ($wp_query->current_post == $wp_query->post_count – 1) { ?>』は、

「ループの数」と「全体の投稿数」がイコールなら実行するという内容になります。

なぜ『post_count – 1』にするかというと、上述した通りcurrent_postのカウントが0から始まっているからです。

▼例: 全体の投稿数が5だった場合
post_count: 5が格納されている
current_post: ループ数を0から数えて4でとまる

そのため、『post_count』から-1して4に合わせてあげます。

まとめ

  • WordPressのループで最初だけ処理を変える場合は『current_post』を使う
  • WordPressのループで最後だけ処理を変える場合は『current_post』と『post_count』を使う
  • 何番目の記事かを数えてくれる『current_post』は0からカウントされる

ぜひご活用ください。

WordPressを使用したWebサイト制作では、記事一覧のループは多用しますので、応用を含めて覚えておくといいでしょう。

今回はデフォルトの投稿タイプのループの応用について紹介しましたが、次回はカスタム投稿タイプでのループについてまとめたいと思います!

関連記事

  • 2021.02.16

    【WordPress】カテゴリー・タグ一覧、カスタムタクソノミーのターム一覧を表示させる方法

    WordPress

  • 2020.11.18

    【WordPress】繰り返しフィールドの基礎

    WordPress

  • 2020.11.07

    CodepenをWordPressに埋め込む方法

    CSS

    HTML5

    JavaScript

    WordPress

おすすめ記事

  • 2020.11.28

    Basic認証の設定方法と注意点

    その他

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

  • 2020.12.02

    【css】スマホでパンくずを横スクロールさせる方法

    CSS

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design