2018.12.15

【Craft 3 サイト構築の基本】エントリ一覧をページ分割する方法

これは Craft CMS Advent Calendar 2018 15日目の記事です。
連載「サンプル制作で覚える Craft 3 サイト構築の基本」の一環として、「ニュース」セクション一覧ページのテンプレートにページ分割機能を追加します。

ここでは、次の作業を行います。

Craft 3 でのページ分割方法を確認
「ニュース」セクション一覧ページのテンプレート調整

工程ごとの差分データは「素材データ専用リポジトリ vol-10 ブランチ」にコミットしてあります。

Craft 3 でのページ分割方法を確認

Craft 3 のページ分割には {% paginate %} タグを利用します。

自動的にセットされる変数の解説やページナビゲーションのサンプルコードが記載されていますので、公式ドキュメント「{% paginate %} タグ」ページも参考にしてください。

専用タグによる初期化

タグ名の paginate に続けて対象のエレメントを指定します。

{# 「ニュース」セクションのエントリを10件ごとに分割し、変数にセット #}
{% paginate craft.entries.section('news').limit(10) as pageInfo, pageEntries %}

ここでは craft.entries.section('news').limit(10) としているため、「ニュース」セクションのエントリが10件ごとに分割されます。

次に as に続けて、2つの変数名を定義します。pageInfo はページに関する情報（現在のページ番号や前後のページリンクなど）、pageEntries には現在のページのエントリがセットされます。

ページエントリの出力

{# 現在のページのエントリをループ処理 #}
{% for entry in pageEntries %}
  <article>
    <h1>{{ entry.title }}</h1>
  </article>
{% endfor %}

ページごとのエントリは、従来の一覧ページテンプレートと同様に {% for %} タグで変数 pageEntries をループ処理します。

ページナビゲーションの出力

ページナビゲーションは、変数 pageInfo を利用します。

{# ページ情報に関する変数を利用して、ページナビゲーションを出力 #}
{% if pageInfo.prevUrl %}<a href="{{ pageInfo.prevUrl }}">前へ</a>{% endif %}
{% if pageInfo.nextUrl %}<a href="{{ pageInfo.nextUrl }}">次へ</a>{% endif %}

ここでは pageInfo.prevUrl または pageInfo.nextUrl で前後のページ URL が存在すればリンクを出力します。

公式ドキュメントの「pageInfo 変数」や「近くのページリンク」が参考になりますので、ぜひ確認してみてください。

2ページ以降の URL について

複数ページが存在すると https://craft3.dev/news/p2 のように /p<ページ番号> の形で URL にページ番号が付加されます。接頭辞 p を変更する場合は config/general.php に pageTrigger を追記して調整できます。

「ニュース」セクション一覧ページのテンプレート調整

では、実際に「ニュース」セクション一覧ページをページ分割してみましょう。

エントリ一覧の出力部分の修正

エントリ一覧の出力部分は {% paginate %} タグの追加と {% for %} タグのソースとなる変数部分の変更です。【参考コミット】

「ニュース」セクションに登録されているエントリがこの時点で8件しかない想定のため、.limit(2) で2件ごとに分割します。

ページナビゲーション部分の修正

ページナビゲーションは、前後のページがあれば最大5ページまでそれぞれのページへのリンクを出力します。【参考コミット】

{# 前のページがあれば、最大5ページまで出力 #}
{% for page, url in pageInfo.getPrevUrls(5) %}
 <li><a href="{{ url }}">{{ page }}</a></li>
{% endfor %}

{# 現在のページ番号 #}
<li class="current">{{ pageInfo.currentPage }}</li>

{# 次のページがあれば、最大5ページまで出力 #}
{% for page, url in pageInfo.getNextUrls(5) %}
 <li><a href="{{ url }}">{{ page }}</a></li>
{% endfor %}

pageInfo.getPrevUrls() のように数値を指定しなければ、すべてのページ番号を対象にできます。

現在のページ番号に伴う表示の調整

「準備編」で確認したとおり、「固定表示フラグ」が ON の最新エントリは最初のページだけに表示させたい内容です。
そこで、変数 pageInfo.currentPage で現在のページ番号を取得し、分岐を行います。【参考コミット】

最初のページとそれ以降で表示が切り替わっているのを確認できます。

まとめ

今回は、Craft 3 のテンプレートでページ分割する方法を見てみました。

サンプルとして「エントリ」を対象としていますが、「アセット」や「ユーザー」など他のエレメントやキーワード検索結果の一覧などを出力するときでも同様に分割できます。

ここまでの流れで「ニュース」セクションに関する作業がひと通り完了したため、次回は「Architect プラグインを利用したセクションの作成方法」についてご紹介します。