これは Craft CMS Advent Calendar 2018 4日目の記事です。
連載「サンプル制作で覚える Craft 3 サイト構築の基本」ということで、ここから数回に分けて「ニュース」セクションを作成します。

実際に手を動かす前に、公式デモサイト Happy Lager のフロントページを見ながら画面ごとの構成や必要となる入力項目について確認しておきましょう。

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

一覧ページの画面構成

1ページ目

2ページ目

一覧ページのメインコンテンツは、次の9つの要素で構成されています。

1. 固定表示フラグが ON の最新1件のエントリ
2. 上記以外のエントリ一覧
3. ページナビゲーション
4. メイン画像のサムネイル
5. エントリのタイトル
6. エントリの著者名
7. エントリの概要文
8. 詳細ページへのリンク
9. 指定した URL へのリンク

1ページ目のみ固定表示を行うエリアがあるため、フラグを立てるための入力フィールドの用意とテンプレートの分岐処理が必要になります。

また、指定した URL へ直接リンク（詳細画面に遷移しない）するケースでは、リンクボタンが「READ MORE」ではなく「CHECK IT OUT」となります。詳細ページ向けの入力フィールドは不要になるため、入力タイプを用意してエントリ編集画面の表示項目を切り替えられるようにします。

詳細ページの画面構成

詳細ページのメインコンテンツは、次の要素で構成されています。

1. エントリのタイトル
2. メイン画像
3. 大見出し
4. 小見出し
5. 記事本文（行列フィールド）
6. テキスト ブロック
7. リード文 ブロック
8. 画像 ブロック
9. 見出し ブロック
10. エントリの著者名

記事本文は Craft CMS の特徴の一つでもある行列フィールドを利用し、エントリごとに必要なブロックを自由に内包できるようにします。

「ニュース」セクションの構成

一覧および詳細ページの画面構成から、このセクションに必要な設定を洗い出してみます。

フィールド

入力フィールドとして必要になるのは、次の9項目です。

1. タイトル
2. 著者名
3. 固定表示フラグ
4. メイン画像
5. 概要文
6. リンク先の URL
7. 大見出し
8. 小見出し
9. 記事本文（行列フィールド）
   • 見出し ブロック
   • テキスト ブロック
   • リード文 ブロック
   • 画像 ブロック

このうち タイトル はデフォルト項目、 著者名 はエントリの投稿者データを利用できるため、それ以外のフィールドを作成することになります。

入力タイプ

詳細ページに遷移するかどうかで変化する入力フィールドは、それぞれ専用の入力タイプを用意して振り分けます。

デフォルト（詳細ページに遷移）

1. タイトル
2. 著者名
3. 固定表示フラグ
4. メイン画像
5. 概要文
6. 大見出し
7. 小見出し
8. 記事本文（行列フィールド）

リンク（指定した URL に直接遷移）

1. タイトル
2. 著者名
3. メイン画像
4. 概要文
5. リンク先の URL

テンプレート

一覧および詳細ページそれぞれのテンプレートで必要になる処理をまとめてみます。

一覧ページ

1. 「ニュース」セクションに含まれるエントリの絞り込み
2. 固定表示フラグが ON の最新エントリの取得
3. 上記以外のすべてのエントリの取得
4. ページ分割
5. エントリごとの出力
   • タイトル、著者名、概要文の出力
   • メイン画像の取得・サムネイル生成
   • 入力タイプにあわせたリンクボタンの分岐処理

詳細ページ

1. タイトル、著者名、大見出し、小見出しの出力
2. メイン画像の取得・出力
3. 記事本文（行列フィールド）の取得・出力

これとあわせて、すべてのテンプレートで利用するレイアウト用の共通テンプレートも用意します。

まとめ

ここでは完成状態のフロントエンド画面を参考に、調整内容を洗い出してみました。
「ニュース」セクションの作成にあたり何をしなくてはいけないのか、多少イメージできるようになっていることと思います。

次回は、Craft 3 の管理画面で「セクションの作成やフィールド・入力タイプの設定など」を行います。