2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
WordPressで記事一覧をループで表示する時に、「最初の記事だけサムネイルを大きくしたいな」とか「最後の記事だけ表示を変えたい」ということがよくあります。
CSSでなんとかできることもありますが、ループの記述で「最初だけ」または「最後だけ」処理を変えることが可能です!
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のループで「最初だけ」違う処理をする方法を見てみましょう。
一般的なループの内容は変わらず、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のループで「最後だけ」違う処理をする方法です。
<?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_coun
tを使います。
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
から引っ張ってきます。
メインループとほぼ変わりありませんが、知らなければ「あれ?サブループの時はどうするんだろう?」と思ってしまいますよね!
それぞれコピペして活用ください!
WordPressを使用したWebサイト制作では、記事一覧のループは多用しますので、応用を含めて覚えておくといいでしょう。
今回はデフォルトの投稿タイプのループの応用について紹介しましたが、次回はカスタム投稿タイプでのループについてまとめたいと思います!
RECOMMEND
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design