ページ送りに「前へ・次へ」と現在のページの強調を付ける

記事の一覧が25ページまで続くのに、ページ送りには「11 12 13 ... 25」と数字しか出ない。1ページ目へ戻るリンクも「前へ」「次へ」もなく、今どのページにいるのかも見た目では分からない。

a-blog cmsのページ送りは、テンプレートに書いたブロックの分だけ表示されます。標準のblogテーマのテンプレートは数字のリンクと末尾のページしか書いていないので、足りない部品を書き足せば、前後のリンクも現在ページの強調も出せます。

次の画像が書き足したあとの状態で、全75件を3件ずつ表示した一覧の12ページ目です。

標準のテンプレートに足りないもの

blogテーマのページ送りは、include/entry-body-pager.html に書かれています。pager:veil の中に page:loop と lastPage:veil があるだけの構成です。

<!-- BEGIN pager:veil -->
<nav class="pager" aria-label="ページ送り">
  <ul class="clearfix">
    <!-- BEGIN page:loop -->
    <li class="pager-item"><!-- BEGIN link#front --><a href="{url}"><!-- END link#front --><span>{page}</span><!-- BEGIN link#rear --></a><!-- END link#rear --><!-- BEGIN glue --><!-- END glue --></li><!-- END page:loop -->
    <!-- BEGIN lastPage:veil --><li class="pager-item">...</li><li class="pager-item"><a href="{lastPageUrl}"><span>{lastPage}</span></a></li><!-- END lastPage:veil -->
  </ul>
</nav>
<!-- END pager:veil -->

これで12ページ目を開くと、現在のページの前後と末尾だけが出ます。

12ページ目の数字はリンクが外れているだけで、強調されてはいません。1ページ目に戻る手段がなく、「前へ」「次へ」もありません。

使えるブロックと変数

ページ送りのブロックと変数は、本体の buildPager が出力するもので、Entry_Body や Entry_Summary のようなエントリーを並べるモジュールで共通です。標準のテンプレートで使っていないものを含め、次のものが用意されています。

省略記号のブロックは、リンクを出さずに「…」だけを書くためのものです。前後に表示するページ数が1のとき、3ページ目では firstPage だけが出て「1 2 3 4」と詰まって並び、4ページ目から omitBeforePage も加わって「1 … 3 4 5」になります。

テンプレートを書き換える

先頭のページ、省略記号、前へ、次へ、現在のページ、件数を足した例です。

<!-- BEGIN pager:veil -->
<nav class="pager" aria-label="ページ送り">
  <p>全 {itemsAmount} 件中 {itemsFrom}〜{itemsTo} 件目</p>
  <ul class="pager-list">
    <!-- BEGIN backLink -->
    <li><a href="{url}" rel="prev">前へ</a></li>
    <!-- END backLink -->
    <!-- BEGIN firstPage:veil -->
    <li><a href="{firstPageUrl}">{firstPage}</a></li>
    <!-- END firstPage:veil -->
    <!-- BEGIN omitBeforePage -->
    <li class="ellipsis">…</li>
    <!-- END omitBeforePage -->
    <!-- BEGIN page:loop -->
    <li{pageCurAttr}[raw]><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --></li>
    <!-- END page:loop -->
    <!-- BEGIN omitAfterPage -->
    <li class="ellipsis">…</li>
    <!-- END omitAfterPage -->
    <!-- BEGIN lastPage:veil -->
    <li><a href="{lastPageUrl}">{lastPage}</a></li>
    <!-- END lastPage:veil -->
    <!-- BEGIN forwardLink -->
    <li><a href="{url}" rel="next">次へ</a></li>
    <!-- END forwardLink -->
  </ul>
</nav>
<!-- END pager:veil -->

現在のページには、モジュールIDの設定で決めた属性が {pageCurAttr} として入ります。上の例では <li{pageCurAttr}[raw]> と書いているので、属性が aria-current="page" なら <li aria-current="page"> になります。変数には初期状態でHTMLのエスケープがかかり、属性の引用符が文字になってしまいます。[raw] はそれを防ぐために付けています。

link#front と link#rear は、現在のページ以外にだけ出ます。数字を囲む <a> をここに書いておくと、現在のページだけリンクが外れます。

「前後に表示するページ数」と現在のページの属性を決める

ページ送りの数字をいくつ並べるか、現在のページにどんな属性を付けるかは、テンプレートではなくモジュールIDの「表示設定」で決めます。

• 前後に表示するページ数: 表示中のページから前後にいくつずつ並べるか。初期値は3で、上の画像では1にしています。1だと、12ページ目は11、12、13の3つだけが並びます

• 現在のページの要素の属性: 初期値は class="cur" で、画像では aria-current="page" に変えています

属性の値の先頭には半角スペースを入れておきます。<li{pageCurAttr}[raw]> のように、タグ名のすぐ後ろに続けて書いているためです。スペースを入れ忘れると、<liaria-current="page"> のようにタグ名とくっついてしまいます。

前後の数を増やすほど、数字の列は横に長くなります。スマートフォンでも折り返さずに収めたいなら、1か2にして、前へ・次へのリンクで補うと崩れにくいです。

モジュールIDで「ページ」にチェックを入れる

この設定を使うには、エントリーを並べるモジュールにモジュールIDを付けて、引数の「ページ」にチェックを入れます。モジュールIDを作った直後は、引数のチェックがすべて外れています。

チェックを入れずにテンプレートを書き換えると、ページ送りのリンクは出るのに、URLが /page/12/ でも1ページ目の記事が並び続けます。「◯件中」の表示も、いつも1ページ目の範囲を指します。ページ送りが動かないときは、まずここを見てください。

最後のページでは、次へが出ない

最後のページを開くと、forwardLink が出力されないので「次へ」が消えます。

前後に表示するページ数が1のとき、25ページ目は24と25だけが並びます。末尾の側には余白ができません。

先頭のページへのリンク（firstPageUrl）は、/page/1/ ではなくページ番号のつかないURLになります。2ページ目の「前へ」も同じURLへ向かうので、1ページ目のURLが2つに分かれることはありません。

簡易ページャーで「前ページ・次ページ」だけにする

ページ番号が要らないなら、簡易ページャーという別の仕組みがあります。モジュールIDの表示設定で「簡易ページャーを表示できるようにする」にチェックを入れると、simplePager のブロックが出力されます。

<!-- BEGIN simplePager:veil -->
<nav aria-label="ページ送り">
  <!-- BEGIN prevPage --><a href="{url}">前ページ</a><!-- END prevPage -->
  <!-- BEGIN prevPageNotFound --><span>前ページなし</span><!-- END prevPageNotFound -->
  <!-- BEGIN nextPage --><a href="{url}">次ページ</a><!-- END nextPage -->
  <!-- BEGIN nextPageNotFound --><span>次ページなし</span><!-- END nextPageNotFound -->
</nav>
<!-- END simplePager:veil -->

25ページ目では「前ページ」のリンクと「次ページなし」が出ました。管理画面のヘルプには、記事数が多く通常のページャーが重い場合に使うとあります。通常のページャーは全件数を数えますが、簡易ページャーは次のページがあるかどうかだけを調べます。そのため {itemsAmount} のような件数は出せません。

参考

• ビルトインモジュール

• モジュールIDの引数

検証環境

Ver. 3.2.38で、2026-10-28に確認しました。管理画面の表示は、お使いのバージョンによって異なる場合があります。