Craft CMS の meta タイトルやパンくずリストを配列で処理する

meta タイトルやパンくずリストなどをテンプレートで出力する場合、必要な情報を配列に用意しループ処理すれば効率的に実装できる。ここでは ブログ 詳細ページのテンプレートを想定したサンプルコードを備忘録を兼ねてポストしてみる。

なお、Craft CMS と同様にテンプレートエンジンに Twig を採用している場合は、ほぼほぼ同じコードで動くと思われる。

詳細ページのテンプレートで変数を定義

merge フィルタでトップページ以外の URL とページタイトルを配列 hierarchy に追加する。

templates/blog/_entry.twig

{#- --------------------------------
# 設定：パンくず / JSON-LD
# -------------------------------- -#}
{#- 配列を初期化 -#}
{% set hierarchy = [] %}

{#- 親ページを配列にセット -#}
{% set hierarchy = hierarchy | merge([{ 'url': siteUrl ~ 'blog/', 'title': 'blog' }]) %}

{#- 現在のページを配列にセット -#}
{% set hierarchy = hierarchy | merge([{ 'url': entry.url, 'title': entry.title }]) %}

次に、配列 hierarchy をループ処理し、区切り文字を | で連結したものを変数 meta_title にセットする。

templates/blog/_entry.twig

{#- --------------------------------
# 設定：meta 関連
# -------------------------------- -#}
{% set meta_title = '' %}
{% set meta_og_url = '' %}
{%- for level in hierarchy -%}
  {#- hierarchy のループ処理で、逆順にパイプで連結 -#}
  {% set meta_title = level.title ~ ' | ' ~ meta_title %}
  {#- og_url をセット -#}
  {% if loop.last %}{% set meta_og_url = level.url %}{% endif %}
{%- endfor -%}

ループの最後は表示中の詳細ページにあたるため、変数 meta_og_url にセットしておく。

meta 情報の出力

meta 情報の出力先となる _layout.twig では、変数が未定の場合に初期値をセットする処理を加えておく。

templates/_layout.twig

{#- ------------------------------------------
変数が未定義の場合の上書き処理
--------------------------------------------- -#}
{%- if meta_title is not defined %}
  {#- 固定の meta タイトル -#}
  {% set meta_title = 'Craft CMS Sample' %}
{% endif -%}

{%- if meta_description is not defined %}
  {#- 固定の meta 概要文 -#}
  {% set meta_description = '概要文のサンプルテキスト。' %}
{% endif -%}


{#- ------------------------------------------
出力
--------------------------------------------- -#}
<title>{{ meta_title }}</title>
<meta name="description" content="{{ meta_description }}">
<link rel="canonical" href="{% if meta_og_url is defined and meta_og_url %}{{ meta_og_url | raw }}{% else %}{{ siteUrl }}{% endif %}">

あとは、マークアップの目的の箇所に対応する変数を出力する。

パンくずリストの出力

ここでは、パンくずリストは _partials/topic-path.twig にモジュールとして用意しているとする。

サイトトップのように出力自体が不要なページであれば配列 hierarchy を定義しなければよく、ループの最後だけ a タグを付加しないようにしている。

templates/_partials/topic-path.twig

{% if hierarchy is defined %}
  <ul>
    <li><a href="/">ホーム</a></li>
    {% for level in hierarchy %}
      {% if loop.last %}
        <li>{{ level.title }}</li>
      {% else %}
        <li><a href="{{ level.url | replace(siteUrl, '/') }}">{{ level.title }}</a></li>
      {% endif %}
    {% endfor %}
  </ul>
{% endif %}

なお、replace(siteUrl, '/') でリンク URL をドメインルートからの絶対パスに置換しているが、ここはお好みで。。。