WordPress 記事ループの中に連番を振る方法

Last update 
/ Posted by Takumi Hirashima

記事ループの中に連番を振る方法を紹介します。
基本的な仕組みさえ覚えてしまえば have_posts に限らず foreach などでも利用することができます。

  1. 基本の形
    1. その他の書き方
  2. 特定の数字の倍数の時にアクションを起こしたい
  3. 一桁の数字に0を足して二桁にしたい
  4. 特定の数字でループを終了したい
  5. 最初の記事を判別する方法
    1. 最初の記事を判別
    2. アーカイブページの2ページ目以降には反映させない
  6. 決められた数毎に記事をタグで囲む方法
  7. まとめ

基本の形

まずは基本の形を紹介します。

<?php if (have_posts()): ?>
<?php $x=1; while (have_posts()) : the_post(); ?>
<?php echo $x; ?>
<?php $x++; endwhile; ?>
<?php endif; ?>

最初に始まりの数字を代入。

$x=1;

記事ループ内で「$x」を出力。

echo $x;

最後に $x に1を足してループの最初に戻ります。これにより、ループを重ねるごとに数が増えていきます。

$x++;

その他の書き方

その他にもソースをシンプルにするならこんな書き方もあります。

<?php if (have_posts()): ?>
<?php while (have_posts()) : the_post(); $x++; ?>
<?php echo $x; ?>
<?php endwhile; ?>
<?php endif; ?>

ただしこの書き方の場合、同じテンプレート内で同じ書き方をすると、$x のカウントを持ち越してしまうため、意図しない処理が起こるかもしれません。
そのため、ループの前で $x のカウントをリセットするようにしましょう。

特定の数字の倍数の時にアクションを起こしたい

$x が3で割り切れる数字の時に true を返します。
任意の位置でアクションが起こせないときは、始まりの数字($x=1;)を任意の数字に調整してください。

<!-- 省略 -->
<?php if ( $x % 3 === 0 ){ echo 'clear';} ?>
<!-- 省略 -->

一桁の数字に0を足して二桁にしたい

一桁の数字の頭に「0」を足して二桁にする方法です。
「%02d」を「%03d」とすれば、三桁表示にすることも可能です。

<?php 
  $x = 1;
  $x = sprintf("%02d",$x); // 一桁を二桁に
  echo $x; // 01を出力 
?>

特定の数字でループを終了したい

特定の数字でループを終了したい場合は break を使ってループを終了させることができます。

<?php if (have_posts()): ?>
<?php $x=1; while (have_posts()) : the_post(); ?>
<?php if($x == '5'): // カウントが 5 と一致したらループを終了 ?>
<?php echo $x; break; ?>
<?php else: ?>
<?php echo $x; ?>
<?php endif; ?>
<?php $x++; endwhile; ?>
<?php endif; ?>

※ == は比較演算子です。$a == $b が等しい時に true を返します。

最初の記事を判別する方法

アーカイブページで、ループ中の最初の記事だけ画像を大きくしたいなど特別な見せ方をしたい時があると思います。
その場合は、ループをカウントして条件分岐を実行することで実現できます。

最初の記事を判別

<?php if (have_posts()): ?>
<?php $x=1; while (have_posts()) : the_post(); ?>
<?php if ($x <= 1): //最初の記事の判別 ?>
<!-- 最初の記事 -->
<?php else:?>
<!-- 最初の記事以降 -->
<?php endif; //最初の記事の判別終了 ?>
<?php $x++; endwhile; ?>
<?php endif; ?>

判別の数字を変更すれば、三番目の記事までを違う表現にする、などもできます。

アーカイブページの2ページ目以降には反映させない

アーカイブページの2ページ目以降は普通の見せ方にしたいという時は、is_paged を利用します。
is_paged は、表示中のページが複数ページに渡る場合に、現在のページ番号が 1 より大きいかどうかを調べることができます。

<?php if (have_posts()): ?>
<?php $x=1; while (have_posts()) : the_post(); ?>
<?php if(!is_paged()): ?>
<?php if ($x <= 1): //最初の記事の判別 ?>
<!-- 最初の記事 -->
<?php else:?>
<!-- 最初の記事以降 -->
<?php endif; //最初の記事の判別終了 ?>
<?php endif; ?>
<!-- 2ページ目以降 -->
<?php $x++; endwhile; ?>
<?php endif; ?>

シンプルにクラスの付与だけしたい場合はこんな書き方もできます。

<?php if (have_posts()): ?>
<?php $x=1; while (have_posts()) : the_post(); ?>
<?php if(!is_paged()){ if ($x <= 1){ echo 'sample'; }} ?>
<?php $x++; endwhile; ?>
<?php endif; ?>

最初のループで sample を出力します。

決められた数毎に記事をタグで囲む方法

投稿のループなどで、決められた数毎に記事をタグで囲みたい場合の方法を紹介します。
もちろん囲む対象は記事に限らず、リストアイテムでもかまいません。
例えば、リストタグで li を3件ごとに ul で囲みたい場合はこちら。

<?php if (have_posts()): ?>
<?php 
  $x=1; // カウントの初期化 
  echo ‘<ul>’; // 最初の ul をループの外に出力
  while (have_posts()) : the_post(); 
?>
<?php // 3件ごとにタグで囲む場合
  if (  $x % 3 == 1 && $x != 1 ) { // $x を3で割ったときの余りが1の時、および $x が 1 に等しくない時(最初のループではない時)に true を返す
    echo '</ul>’.’\n'.'<ul>’.’\n'; // true を返した場合に ul の閉じタグと ul の開始タグを出力 ‘/n’ はソースの改行
  } 
?>
<li>リストアイテム</li>
<?php 
  $x++; // カウントを+1 
  endwhile; ?>
<?php echo ‘</ul>’; // 最後に ul の閉じタグを出力 ?>
<?php endif; ?>

割る数を変更することで3件や4件など、囲む件数を変更することができます。
例えば3件の場合、3件目の後の4件目では、$xは3で割った後に余りが1でることで、その余りの1をトリガーに、ulを出力します。
5件目では、余りが2。6件目では余りが出ないためulを出力しません。7件目では再び1が余るのでulを出力。以下繰り返し…。
ループが終わっても、ループの外でulを出力しているので、タグが綺麗に整形されます。
ソースを改行したい場合は \n でソースの改行を適宜加えて調整しましょう。

まとめ

数字のカウントは、覚えておくと何かと便利なワザなので、比較演算子と合わせて覚えておくとよいでしょう。

スポンサーリンク