Craft CMS で親・子カテゴリのナビゲーションを出力する

表題の通り、今回は親子関係を持つカテゴリのナビゲーションをテンプレートで出力するためのサンプルコードについて。

前提として、ハンドル名 event のカテゴリグループに第二階層までのカテゴリが登録されているものとする。

{# ------------------------------------------
変数など
--------------------------------------------- #}
{# 対象カテゴリのクエリをセット #}
{% set categoryQuery = craft.categories.group('event') %}
{# トップレベルカテゴリを取得 #}
{% set categories = clone(categoryQuery).level(1).all() %}


{# ------------------------------------------
出力
--------------------------------------------- #}
<dl>
  {# トップレベルカテゴリのループ処理 #}
  {% for category in categories %}
    <dt>{{ category.title }}</dt>

    {# ループ中のカテゴリを親にもつ、子カテゴリを取得 #}
    {% set subCategories = clone(categoryQuery).descendantOf(category).descendantDist(1).all() %}

    {# 子カテゴリのループ処理 #}
    {% for subCategory in subCategories %}
      <dd><a href="{{ subCategory.url }}">{{ subCategory.title }}</a></dd>
    {% endfor %}
  {% endfor %}
</dl>

はじめに categoryQuery にハンドル名 event のグループに含まれるカテゴリ全体を取得し、clone(categoryQuery) で複製したオブジェクトを利用して異なる条件で絞り込みを行なった結果を categories と subCategories にセットしている。

ここでは .descendantOf(category).descendantDist(1) としているため、ループ中のカテゴリの子階層だけが対象になる。

なお、ネストされたカテゴリ項目ごとのマークアップに変化がない場合は、公式ドキュメントでも紹介されている {% nav %} タグを利用して簡潔に定義することもできる。

<ul>
  {% nav category in categories %}
    <li>
      <a href="{{ category.url }}">{{ category.title }}</a>
      {% ifchildren %}
        <ul>
          {% children %}
        </ul>
      {% endifchildren %}
    </li>
  {% endnav %}
</ul>

参考

カテゴリクエリ | Craft 3 ドキュメント
https://docs.craftcms.com/v3/ja/dev/element-queries/category-queries.html