投稿の一覧に「1」「2」「3」…と通し番号を振りたい場面があります。デザイン上のアクセントとしてはもちろん、ランキングや実績一覧などで番号を見せたいこともあります。
1ページ内のループで連番を振るのは簡単ですが、少し悩ましいのがページャーをまたいだ通し番号です。1ページに10記事表示するなら、2ページ目は「11」から始めたい——結論から言うと、現在のページ番号・1ページあたりの表示件数・ループ内の位置を組み合わせて計算することで実現できます。この記事では、通常の投稿とカスタム投稿、それぞれのコードと計算式の仕組みを解説します。
メインループ($wp_query)で連番を出す場合は、番号を表示したい位置に次のコードを挿入します。
<?php $number = (max(1, $paged) - 1) * $wp_query->query_vars['posts_per_page'] + $wp_query->current_post + 1; echo $number; ?>
これで、ページをまたいでも番号が途切れず、2ページ目は「11」から続きます。
このコードは、投稿ループ(while (have_posts()) : the_post();)の中に置くのがポイントです。ループの外に書くと、その記事の位置(current_post)が取得できず、正しく動きません。また$pagedが空になる環境では、get_query_var('paged')で現在のページ番号を明示的に取得しておくと確実です。
カスタム投稿などで$the_query = new WP_Query($args);のように独自のクエリを使っている場合は、$wp_queryの部分を自分のクエリ変数に置き換えます。
<?php $number = (max(1, $paged) - 1) * $the_query->query_vars['posts_per_page'] + $the_query->current_post + 1; echo $number; ?>
違いは$wp_queryを$the_queryに変えただけです。使っているクエリ変数名に合わせて書き換えてください。
なぜこの式でページをまたいだ連番になるのか、順に見ていきます。ポイントは「そのページまでに表示済みの件数」を求めて、そこにループ内の位置を足している点です。
max(1, $paged):現在のページ番号。1ページ目は$pagedが空になることがあるため、maxで最低1にそろえる(… - 1) * posts_per_page:前のページまでに表示済みの件数。2ページ目なら「(2−1)×10=10件」+ current_post:ループ内の現在の位置(0始まり)を足す+ 1:0始まりを1始まりに補正するたとえば2ページ目の先頭の記事なら、(2−1)×10+0+1=11になります。前のページまでの合計にループ内の位置を足すことで、全ページを通した連番が求められる、というわけです。
ちなみに、単純に変数を1ずつ増やすカウンター($i++)でも、1ページ内であれば連番を振れます。ただしこの方法はページごとにカウントがリセットされるため、2ページ目がまた「1」から始まってしまいます。ページャーをまたいで通し番号にしたいなら、今回のようにページ番号を計算に含める必要があります。
なお、番号を「01」「02」のように桁をそろえて表示したい場合は、sprintf('%02d', $number)で0埋めできます。ランキング記事や制作実績の一覧、手順をまとめた記事などで、番号があると全体のボリュームが伝わり、読み手が現在地を把握しやすくなります。
$wp_query、独自クエリなら$the_queryを使うページャーをまたぐと番号がリセットされてしまう、というのはよくあるつまずきです。この式を覚えておけば、記事一覧でもカスタム投稿でも、通しの連番をきれいに表示できます。