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

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

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

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

「会社案内」セクション

画面構成

「会社案内」セクション

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

  1. 大見出し
  2. 本文
  3. 記事本文(行列フィールド)
  4. 「ロケーション」セクションのエントリデータ
  5. 「ロケーション」セクションのエントリのタイトル
  6. エントリの住所
  7. エントリのお問い合わせ方法(行列フィールド)
  8. エントリのメールアドレス
  9. エントリの住所を利用した Google マップのリンク
  10. エントリのメイン画像

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

テンプレート

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

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

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

「サービス」セクション

画面構成

「サービス」セクション

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

  1. ローカルナビゲーション
  2. エントリのタイトル(メイン画像を含まない コンテンツヘッダー モジュールに相当)
  3. 記事本文(行列フィールド)
  4. サービス本文(行列フィールド)
  5. サービスポイント ブロックの Heading
  6. サービスポイント ブロックのテキスト
  7. サービスポイント ブロックの画像
  8. エントリに関連づけられている「ワークス」セクションの最新エントリ
  9. エントリのサムネイル画像
  10. エントリのタイトル
  11. エントリの大見出し
  12. エントリの小見出し
  13. エントリ詳細ページの URL

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

テンプレート

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

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

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

「ワークス」セクション

画面構成

「ワークス」セクション

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

  1. エントリのタイトル、メイン画像(コンテンツヘッダー モジュールに相当)
  2. 大見出し、小見出し(article 見出し モジュールに相当)
  3. 記事本文(行列フィールド)
  4. エントリに関連づけられている「サービス」セクションのエントリの取得・出力
  5. 前後ページのナビゲーション

テンプレート

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

  1. 共通モジュールの読み込み
    • コンテンツヘッダー モジュール
    • article 見出し モジュール
    • article 本文 モジュール
  2. サービス種別の出力
    • サービスアイコンの取得・出力
    • タイトル、詳細ページ URLの出力
  3. エントリの前後ページの取得・出力

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

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

まとめ

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

次回は、それぞれの「セクション詳細ページのテンプレート作成」を行います。