これは Craft CMS Advent Calendar 2018 20日目の記事です。
連載「サンプル制作で覚える Craft 3 サイト構築の基本」として、ここから2回に分けてセクション詳細ページのテンプレート作成を行います。
「ニュース」セクションと同様に、公式デモサイト Happy Lager のフロントページを見ながら画面ごとの構成とテンプレートで必要な処理について確認しておきます。
なお、公式デモサイトをローカル環境に用意する場合は「Craft 3 のデモコンテンツをインストールしてみよう」を参考にしてください。
「会社案内」セクション
画面構成
「会社案内」セクション詳細ページのメインコンテンツは、次の要素で構成されています。
- 大見出し
- 本文
- 記事本文(行列フィールド)
- 「ロケーション」セクションのエントリデータ
- 「ロケーション」セクションのエントリのタイトル
- エントリの住所
- エントリのお問い合わせ方法(行列フィールド)
- エントリのメールアドレス
- エントリの住所を利用した Google マップのリンク
- エントリのメイン画像
「会社案内」セクションのエントリとあわせて「ロケーション」セクションのデータが必要で、No.6 〜 No.10 は「ロケーション」セクションのエントリデータを対象とします。
テンプレート
画面構成をもとに、テンプレートで必要になる処理をまとめてみます。
- 大見出し、本文の出力
- 記事本文(行列フィールド)の取得・出力
- 「ロケーション」セクションに含まれるエントリの取得・出力
- タイトル、住所、メールアドレスの出力
- お問い合わせ方法(行列フィールド)の取得・出力
- 住所を利用した Google マップの URL の整形
- メイン画像の取得・サムネイル生成
記事本文(行列フィールド)の取得・出力
は、既に「article 本文」モジュールとして別ファイルで用意しているものを読み込みます。
「サービス」セクション
画面構成
「サービス」セクション詳細ページのメインコンテンツは、次の要素で構成されています。
- ローカルナビゲーション
- エントリのタイトル(メイン画像を含まない
コンテンツヘッダー
モジュールに相当) - 記事本文(行列フィールド)
- サービス本文(行列フィールド)
サービスポイント
ブロックの Headingサービスポイント
ブロックのテキストサービスポイント
ブロックの画像- エントリに関連づけられている「ワークス」セクションの最新エントリ
- エントリのサムネイル画像
- エントリのタイトル
- エントリの大見出し
- エントリの小見出し
- エントリ詳細ページの URL
ローカルナビゲーション
は「サービス」セクションに含まれるエントリの一覧です。
テンプレート
画面構成をもとに、テンプレートで必要になる処理をまとめてみます。
- 「サービス」セクションに含まれるエントリの取得・出力
- 現在のページと同一のエントリであれば、クラスを追加
- 共通モジュールの読み込み
コンテンツヘッダー
モジュールarticle 本文
モジュール
- サービス本文(行列フィールド)の取得・出力
- エントリに関連づけられている「ワークス」セクションの最新エントリの取得・出力
- メイン画像、サムネイル画像の取得・サムネイル生成
- タイトル、大見出し、小見出し、詳細ページ URLの出力
ここでのポイントは「コンテンツヘッダー
モジュールに任意のページでメイン画像の出力を抑制できるよう分岐処理を加える」ことと「エントリに関連づけられた別セクションのエントリの取得」の2点となります。
「ワークス」セクション
画面構成
「ワークス」セクション詳細ページのメインコンテンツは、次の要素で構成されています。
- エントリのタイトル、メイン画像(
コンテンツヘッダー
モジュールに相当) - 大見出し、小見出し(
article 見出し
モジュールに相当) - 記事本文(行列フィールド)
- エントリに関連づけられている「サービス」セクションのエントリの取得・出力
- 前後ページのナビゲーション
テンプレート
画面構成をもとに、テンプレートで必要になる処理をまとめてみます。
- 共通モジュールの読み込み
コンテンツヘッダー
モジュールarticle 見出し
モジュールarticle 本文
モジュール
- サービス種別の出力
- サービスアイコンの取得・出力
- タイトル、詳細ページ URLの出力
- エントリの前後ページの取得・出力
エントリの「背景色」フィールドに値がセットされている場合、コンテンツヘッダー
の背景と article 本文
モジュール「引用」ブロックの背景に反映されるよう、共通モジュールに分岐処理を加える必要があります。
また、エントリの前後ページを取得する処理がこのテンプレートのポイントになります。
まとめ
ここでは完成状態のフロントエンド画面を参考に、調整内容を洗い出してみました。
「会社案内」「サービス」「ワークス」それぞれのセクション詳細ページテンプレートで必要とされる処理について、イメージできるようになっていることと思います。
次回は、それぞれの「セクション詳細ページのテンプレート作成」を行います。