【WordPress】投稿の一覧ページにリセットされない連番を振る方法

アーカイブページで連番を振る方法

wordpressで検索結果一覧を表示したいときや、人気度に応じてランキング形式で表示したいときなど、投稿タイトルの先頭に連番を振りたい場面があると思います。
しかし、1ページ目は問題なく番号が表示されますが、次ページでは番号がリセットされ、また初期値からカウントが始まってしまうことに頭を悩ませている方もいるのではないでしょうか。
今回は PHP と CSS を使って、ページをまたいでもリセットされない、先頭からの通し番号で表示させる方法を紹介します。

サンプルコード

解説は後述します。

php

// 記事一覧に連番で番号を振る 
$number = (max(1, $paged ) - 1) * $wp_query->query_vars['posts_per_page'];
<style>
  .numberList {
    counter-reset: number <?php echo $number; ?>;
  }
</style>

<ol class="numberList">
  <li>
     ...
  </li>
</ol>

css

.numberList li:before {
  counter-increment: number 1;
  content: counter(number)  ". ";
  margin-left: -20px;
}

解説

php で、現在のページ数とページの最大投稿数をもとにページに表示される投稿の先頭の値を取得し、その値で番号を初期化。CSS で値をインクリメントし番号の挿入を行っています。

php

$number = (max(1, $paged ) - 1) * $wp_query->query_vars['posts_per_page'];

$paged で一覧ページでの現在のページ数を取得できます。一覧の 1ページ目 は「 0ページ目 」としてカウントされていますので、1ぺージ目 のときは $paged に 0 が入ることになりますが max(1, 0) より 1 を得ることで解決しています。
2ページ目以降は、ページ数は 2, 3... とカウントされるので max(1, 2) より 2ページ、max(1, 3) より 3ページ... となります。

$wp_queryはWordPress がページ読み込み時に取得したブログの投稿やページの情報が格納されている変数です。この情報をもとに 1ページ で何件分のデータが格納されているのか取得しています。$wp_query->query_vars['posts_per_page'] に 1ページ で表示される最大件数が格納されています。

実際に値をあてはめてみます。例えば 1ページ の最大投稿数が 10件 の場合を考えます。

// 1ページ目
$number = (max(1, 0 ) - 1) * 10;
        = 0

// 2ページ目
$number = (max(1, 2 ) - 1) * 10;
        = 10

この値を以下の style で初期値としてセットします。

<style>
  .numberList {
    counter-reset: number <?php echo $number; ?> 
    <!-- 1ページ目: counter-reset number 0-->
    <!-- 2ページ目: counter-reset number 10-->
  }
</style>

現在のページの最初の投稿番号を初期値として、初期化の対象となるカウンターの number にセットします。PHPで値の取得を行うので、同ファイル内に style タグを追加してください。

css

しかし今回は 1番 からカウントしたいので、上記の設定だけでは 0番 から通し番号が振られることになり、まだ意図通りの値を取得できません。

.numberList li:before {
  counter-increment: number 1;
  content: counter(number)  ". ";
  margin-left: -20px;
}

CSS で、 PHP で初期化した number に li の数分だけ 1 ずつ加え、値の挿入を行います。
number にセットされる値は、例えば表示数の最大値を 10件 とした場合、1ページ目 は 1 、2ページ目 は 11 、3ページ目 は 21... となります。
上記の CSS の設定は PHP で設定している style　の中に入れてしまっても構いませんが、PHP ファイル内にある必要がないため、CSS ファイル内に記述しています。

以上、wordpressの記事一覧ページに連番を振る方法をご紹介しました。