current_postを使って特定数の投稿の時に処理する

$wp_queryオブジェクトの「current_post」を使って、ループ数をカウントして特定番目の投稿の時に処理を行う方法の覚書。

ループで何番目の記事かをカウントする

<?php
if ( have_posts() ) :while ( have_posts() ) :the_post();
  $count = $wp_query->current_post + 1;
  echo $count;
 endwhile;
endif;
?>

メインクエリの$wp_queryオブジェクトの中に格納されているcurrent_postを使います。

初期値は0なので+1をして1から始まるようにしている。

何番目の記事かをカウントすれば、「n番目の記事の時にxxxしたい」ということも簡単ですね。

current_postはサブループでも利用することができる。

最初の投稿かどうかを判定して特別な処理をする

ループ内で「最初の記事の時だけ大きく表示したい」というのはよくあります。そんな時に有効です。

<?php if (have_posts()) : while (have_posts()) : the_post();
      if ($wp_query->current_post == 0) :
      // 最初の投稿の時
      endif;
      // 通常の投稿
    endwhile;
 endif;
?>

偶数奇数を判定する

記事の偶数、奇数でclassを付与したい。。。という時など

<?php
    if ( have_posts() ) :while ( have_posts() ) :the_post();
        if(($wp_query->current_post + 1) % 2 == 0):
            $class = 'even';
        else:
            $class = 'odd';
        endif;
?>
  <div class="<?php echo $class; ?>"><?php the_title(); ?></div>
<?php
    endwhile;
endif;
?>

最後の投稿か判定して処理する

最後の投稿かを判断するにはpost_countを使います。post_countは現在のページの投稿記事数を保持しています。

<?php echo $wp_query->post_count; ?>

最後の投稿かを判断するためには

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

最後の投稿かどうかは以下のようにしても同じ

$wp_query->current_post + 1  ===  $wp_query->post_count

n件ごとに処理を加える

「n件ごとにdivで囲みたい」など。

数年前に同じようなことを投稿しているのですが今回はwordpressのプロパティcurrent_postを使う場合として

<?php
 $col = 4;
 if( 0 === ( $wp_query->current_post  )  % $col ): ?>
    <div class="grid">
<?php endif; ?>
//ループ内の表示
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_content('Read more...'); ?>
</article>
<?php if( 0 === ( $wp_query->current_post + 1 )  % $col ||  ( $wp_query->current_post + 1 ) ===  $wp_query->post_count ): ?>
   </div>
<?php endif; ?>

変数colに代入された数字ごとに <div class="grid"></div>で囲むようにします。