2018.12.25

【Craft 3 サイト構築の基本】セクション詳細ページのテンプレート作成（準備編）

これは Craft CMS Advent Calendar 2018 20日目の記事です。
連載「サンプル制作で覚える Craft 3 サイト構築の基本」として、ここから2回に分けてセクション詳細ページのテンプレート作成を行います。

「ニュース」セクションと同様に、公式デモサイト Happy Lager のフロントページを見ながら画面ごとの構成とテンプレートで必要な処理について確認しておきます。

なお、公式デモサイトをローカル環境に用意する場合は「Craft 3 のデモコンテンツをインストールしてみよう」を参考にしてください。

「会社案内」セクション

「会社案内」セクション詳細ページのメインコンテンツは、次の要素で構成されています。

「会社案内」セクションのエントリとあわせて「ロケーション」セクションのデータが必要で、No.6 〜 No.10 は「ロケーション」セクションのエントリデータを対象とします。

画面構成をもとに、テンプレートで必要になる処理をまとめてみます。

大見出し、本文の出力
記事本文（行列フィールド）の取得・出力
「ロケーション」セクションに含まれるエントリの取得・出力
- タイトル、住所、メールアドレスの出力
- お問い合わせ方法（行列フィールド）の取得・出力
- 住所を利用した Google マップの URL の整形
- メイン画像の取得・サムネイル生成

記事本文（行列フィールド）の取得・出力 は、既に「article 本文」モジュールとして別ファイルで用意しているものを読み込みます。

「サービス」セクション詳細ページのメインコンテンツは、次の要素で構成されています。

ローカルナビゲーション は「サービス」セクションに含まれるエントリの一覧です。

画面構成をもとに、テンプレートで必要になる処理をまとめてみます。

「サービス」セクションに含まれるエントリの取得・出力
- 現在のページと同一のエントリであれば、クラスを追加
共通モジュールの読み込み
- コンテンツヘッダー モジュール
- article 本文 モジュール
サービス本文（行列フィールド）の取得・出力
エントリに関連づけられている「ワークス」セクションの最新エントリの取得・出力
- メイン画像、サムネイル画像の取得・サムネイル生成
- タイトル、大見出し、小見出し、詳細ページ URLの出力

ここでのポイントは「コンテンツヘッダー モジュールに任意のページでメイン画像の出力を抑制できるよう分岐処理を加える」ことと「エントリに関連づけられた別セクションのエントリの取得」の2点となります。

「ワークス」セクション詳細ページのメインコンテンツは、次の要素で構成されています。

画面構成をもとに、テンプレートで必要になる処理をまとめてみます。

エントリの「背景色」フィールドに値がセットされている場合、コンテンツヘッダー の背景と article 本文 モジュール「引用」ブロックの背景に反映されるよう、共通モジュールに分岐処理を加える必要があります。

また、エントリの前後ページを取得する処理がこのテンプレートのポイントになります。

ここでは完成状態のフロントエンド画面を参考に、調整内容を洗い出してみました。
「会社案内」「サービス」「ワークス」それぞれのセクション詳細ページテンプレートで必要とされる処理について、イメージできるようになっていることと思います。