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

コーディング

Wordpress

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

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

CSSで複雑な記述をするよりもWordPressのループを条件分岐させる方がコードがスッキリするのでおすすめです！

まずは一般的な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に合わせてあげます。

サブループでも最初と最後だけ処理を変更できる？

ここまでは「メインループで最初と最後だけ変更する方法」をご紹介しました。

サブループでのサンプルコードもご紹介します。

といってもメインループの記述と内容はほぼ変わりません。

サブループで最初だけ変更

<?php
$args = array(
    'post_type' => 'post', // 投稿タイプ
    'posts_per_page' => -1, // 個数
    'order' => 'ASC', // 降順
    'orderby' => 'date', // 表示順
    'post_status' => 'publish', //公開済みのみ表示
    'paged' => get_query_var('paged'), // 
);
$new_query = new WP_Query($args); //サブループ作成
?>
<?php if ($new_query->have_posts()) : ?>
    <?php while ($new_query->have_posts()) : $new_query->the_post(); ?>

        <?php if ($new_query->current_post == 0) : ?>
            <p>最初だけ違う内容</p>
        <?php else : ?>
            <p>通常の内容</p>
        <?php endif; ?>

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

WP_Queryクラスを使用して、サブループを作成します。

WP_Queryクラスを格納した変数$new_queryの中からcurrent_postを引っ張ってきています。

異なる点はここだけです！

サブループで最後だけ変更

<?php
$args = array(
    'post_type' => 'post', // 投稿タイプ
    'posts_per_page' => -1, // 個数
    'order' => 'ASC', // 降順
    'orderby' => 'date', // 日時順
    'post_status' => 'publish', //公開済みのみ表示
    'paged' => get_query_var('paged'), // 
);
$new_query = new WP_Query($args); //サブループ作成
?>
<?php if ($new_query->have_posts()) : ?>
    <?php while ($new_query->have_posts()) : $new_query->the_post(); ?>

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

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

最後だけ処理を変更する場合も同様、current_postを$new_queryから引っ張ってきます。

メインループとほぼ変わりありませんが、知らなければ「あれ？サブループの時はどうするんだろう？」と思ってしまいますよね！

それぞれコピペして活用ください！