WordPressループの最初と最後だけ別の処理を行う方法

サムネイルWordPress

今回はWordPressのループ処理で最初と最後だけ違う処理を行う方法を紹介します。

 

スポンサーリンク

ループの最初だけ別の処理を行う方法

以下のように条件分岐します。

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<?php if ($wp_query->current_post == 0) : ?>
			// 最初だけ違う処理
		<?php endif; ?>
			// 通常の処理
	<?php endwhile; ?>
<?php endif; ?>

$wp_query()current_postには現在のループ処理の回数が格納されています。

ループが0回目の時(=最初の記事)だけif文で処理を分岐すればokですね。

なお、最初の記事は「0番目」なので注意しましょう!

 

ループの最後だけ別の処理を行う方法

以下のように条件分岐します。

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
			// 通常の処理
		<?php if ($wp_query->current_post == $wp_query->post_count - 1) : ?>
			// 最後だけ違う処理
		<?php endif; ?>
	<?php endwhile; ?>
<?php endif; ?>

$wp_querypost_countには投稿記事数が格納されています。

投稿数のカウントは0から始まっているので、全記事数-1=最後の記事ということですね。

 

カスタム投稿タイプでも分岐する

ループの最初と最後だけ処理を変えるのはカスタム投稿タイプでも可能です。

カスタム投稿タイプで分岐させたい場合はサブループ を作成し、$wp_queryをカスタム投稿タイプのクエリーに変更します。

<?php
$args = array( 
  'post_type' => 'news',
  'posts_per_page' => 10,
);
$news_query = new WP_Query( $args ); //サブループ作成
?>
<?php if ( $news_query->have_posts() ) : ?>
  <?php while ( $news_query->have_posts() ) : $news_query->the_post(); ?>
    <?php if ($news_query->current_post == 0) : ?>
      // 最初だけ違う処理
    <?php endif; ?>
      // 通常の処理
  <?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

 

$wp_queryをカスタム投稿タイプのクエリーに変更することで、カスタム投稿タイプでもクエリーを利用して最初と最後だけ処理を分岐できるようになります。

 

三項演算子で短く分岐する

簡単な処理を分岐したいなら三項演算子を使った方がすっきりとします。

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<?php $wp_query->current_post == 0 ? print 'first' : 'others'; ?>
	<?php endwhile; ?>
<?php endif; ?>

 

上の場合、最初の記事ならfirst、それ以外ならothersと表示します。

出力するタグをガラリと変えるような記述量の多い分岐には向きませんが、最初(最後)だけクラス名を変更するくらいの簡単な処理なら三項演算子の方がすっきりしていいと思います。

なお、三項演算子ではechoは使えないので代わりにprintを使うことに気をつけてください!

 

まとめ

WordPressをカスタマイズしていくとループの最初と最後だけ処理を変えたいという場合が出てくると思います。

$wp_querycurrent_postpost_countを利用して処理を分岐する方法を覚えておくと便利ですね。

ZennでCSS設計の
本を書きました!

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です!

読んでみる
スポンサーリンク
WordPress
スポンサーリンク
でざなり