WordPress 投稿ループの中に連番を表示する方法

WordPress 投稿ループの中に連番を表示する方法

WordPress で投稿ループの中に連番を表示する方法を紹介します。
例えば、投稿をランキング形式で表示したい場合に、順位を示す数字を表示するのに便利な方法です。
基本的な仕組みを覚えてしまえば 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 を代入。

[php firstline=”2″]
$x=1;
[/code]

そして投稿のループ内で $x を出力。

[php firstline=”3″]
echo $x;
[/code]

最後に次のループが始まる前に $x に 1 を足して次のループに進みます。

[php firstline=”4″]
$x++;
[/code]

これでループを重ねるごとに数が増えていきます。

その他の表示方法

最初に紹介した方法以外にもシンプルな表示方法があります。


<?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」を足して二桁にする場合は sprintf 関数を使用します。


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

「%02d」を「%03d」とすれば、三桁表示にすることも可能です。

特定の数字でループを終了する

特定の数字でループを終了したい場合は 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; ?>

最初のループの時だけ要素を表示します。

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

投稿のループで決められた数毎にタグで囲みたい場合の方法を紹介します。
囲む対象は投稿に限らずリストアイテムでもかまいません。
次のコードは、リストタグで 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件目で割り切れず余った1をきっかけにして ul を表示します。
5件目では余りが2、6件目では余りが出ないため ul を表示しません。
再び7件目で1が余るので ul を表示、以下繰り返しになります。

ループが終わると ul が挿入されてタグが閉じられます。
ソースを改行したい場合は \n でソースの改行を適宜加えて調整しましょう。

まとめ

WordPress で投稿ループの中に連番を表示する方法を紹介しました。
連番を振る方法は、順位の表示以外にも使える便利なテクニックなので、比較演算子と合わせて覚えておきましょう。

スポンサーリンク

私が続けて読みたい関連記事