【Craft 3 サイト構築の基本】「ニュース」セクションの作成(ブロック設定編)

これは Craft CMS Advent Calendar 2018 8日目の記事です。
連載「サンプル制作で覚える Craft 3 サイト構築の基本」の「ニュース」セクションの作成ということで、前回に引き続き行列フィールドに含まれるブロックの設定を行なっていきます。

ここでは、次の作業を行います。

  1. 行列フィールドの再編集
  2. ブロックの作成
  3. エントリ編集画面の確認

なお、過去記事の「Craft CMS で Matrix フィールドを多用する場合、php.ini も見直した方がいいかも?という話」にも目を通してみてください。

行列フィールドの再編集

はじめに、作成済みの「記事本文」フィールドの編集画面に移動します。

設定画面

グローバルナビゲーションから 設定 に移動し、フィールド アイコンをクリックします。

フィールドの一覧

フィールドの一覧から 記事本文 リンクをクリックします。

「記事本文」フィールドの編集画面

行列フィールドにブロックを作ることが目的のため、編集画面の 構成 部分を操作していきます。

ブロックの作成

公式デモサイト Happy Lager の構成にあわせて、次の7つのブロックと内包するフィールドを作成します。

  1. 新しいセクション
    • セクション見出し
  2. 見出し
    • 見出し
  3. テキスト
    • テキスト
    • 位置
  4. リード文
    • リード文
    • 位置
  5. 画像
    • 画像
    • キャプション
    • 位置
  6. ギャラリー
    • 画像
  7. 引用文
    • 引用文
    • 帰属
    • 位置

「新しいセクション」ブロック

ブロックタイプ

構成 にある 新しいブロックタイプ ボタンをクリックします。

ブロックタイプ設定モーダル

次の内容を入力してから 作成する ボタンをクリックします。

ラベル
名前新しいセクション
ハンドルnewSection

「セクション見出し」フィールド

「セクション見出し」フィールド

フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。

ラベル
名前セクション見出し
ハンドルsectionHeading
説明(空欄)
このフィールドは必須ですOFF
フィールドタイププレーンテキスト
プレースホルダーのテキスト(空欄)
文字数制限255
等幅フォントを使用OFF
改行を許可OFF
列タイプvarchar (255B)

高度 クリックでトグル表示されるオプション設定に 列タイプ があります。

「新しいセクション」ブロックのように内包するフィールドが1つだけの場合、これで必要な設定が完了しました。次のブロックの作成に移りましょう。

「見出し」ブロック

構成 にある 新しいブロックタイプ ボタンをクリックします。

ブロックタイプ設定モーダル

次の内容を入力してから 作成する ボタンをクリックします。

ラベル
名前見出し
ハンドルheading

「見出し」フィールド

「見出し」フィールド

フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。

ラベル
名前見出し
ハンドルheading
説明(空欄)
このフィールドは必須ですOFF
フィールドタイププレーンテキスト
プレースホルダーのテキスト(空欄)
文字数制限255
等幅フォントを使用OFF
改行を許可OFF
列タイプvarchar (255B)

高度 クリックでトグル表示されるオプション設定に 列タイプ があります。

「テキスト」ブロック

構成 にある 新しいブロックタイプ ボタンをクリックします。

ブロックタイプ設定モーダル

次の内容を入力してから 作成する ボタンをクリックします。

ラベル
名前テキスト
ハンドルtext

「テキスト」フィールド

「テキスト」フィールド

フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。

ラベル
名前テキスト
ハンドルtext
説明(空欄)
このフィールドは必須ですOFF
フィールドタイプRedactor
Redactor ConfigStandard
Available Volumesすべて
Available Transforms

画像の変形に関する設定を行なっていないため、Available Transforms には選択肢が表示されません。必要に応じて、あとから設定することになります。

また、Advanced クリックでトグル表示されるオプション設定もデフォルトのままとします。

「位置」フィールド

「位置」フィールド

新規フィールド ボタンをクリックし、フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。

ラベル
名前位置
ハンドルposition
説明(空欄)
このフィールドは必須ですOFF
フィールドタイプセレクトボックス

セレクトボックスのオプション は、次の内容を入力します。

オプションのラベルデフォルト?
leftOFF
中央centerOFF
rightOFF

これで2つのフィールドを持つ、「テキスト」ブロックができました。

「リード文」ブロック

構成 にある 新しいブロックタイプ ボタンをクリックします。

ブロックタイプ設定モーダル

次の内容を入力してから 作成する ボタンをクリックします。

ラベル
名前リード文
ハンドルpullQuote

「リード文」フィールド

「リード文」フィールド

フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。

ラベル
名前リード文
ハンドルpullQuote
説明(空欄)
このフィールドは必須ですOFF
フィールドタイププレーンテキスト
プレースホルダーのテキスト(空欄)
文字数制限(空欄)
等幅フォントを使用OFF
改行を許可OFF

高度 クリックでトグル表示されるオプション設定は、デフォルトのままです。

「位置」フィールド

「位置」フィールド

新規フィールド ボタンをクリックし、フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。

ラベル
名前位置
ハンドルposition
説明(空欄)
このフィールドは必須ですOFF
フィールドタイプセレクトボックス

セレクトボックスのオプション は、次の内容を入力します。

オプションのラベルデフォルト?
leftOFF
中央centerOFF
rightOFF

これで2つのフィールドを持つ、「リード文」ブロックができました。

「画像」ブロック

構成 にある 新しいブロックタイプ ボタンをクリックします。

ブロックタイプ設定モーダル

次の内容を入力してから 作成する ボタンをクリックします。

ラベル
名前画像
ハンドルimage

「画像」フィールド

「画像」フィールド

フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。

ラベル
名前画像
ハンドルimage
説明(空欄)
このフィールドは必須ですOFF
フィールドタイプアセット
アップロードを単一のフォルダに限定しますか?OFF
ソースサイトアセット
全て のチェックを外すと、任意のソースを選択できるようになります。
既定のアップロードロケーションサイトアセット
許可されるファイルの種類を制限しますか?ON
※ここでは 画像 のみ許可する形で設定します。
制限1
モードを見る。リスト
選択ラベル(空欄)

既定のアップロードロケーション は編集画面で直接ドラッグ&ドロップされたファイルのアップロード先の指定となります。

「キャプション」フィールド

「キャプション」フィールド

新規フィールド ボタンをクリックし、フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。

ラベル
名前キャプション
ハンドルcaption
説明(空欄)
このフィールドは必須ですOFF
フィールドタイプRedactor
Redactor ConfigSimple
Available Volumesすべて
Available Transforms

Advanced クリックでトグル表示されるオプション設定もデフォルトのままとします。

「位置」フィールド

「位置」フィールド

新規フィールド ボタンをクリックし、フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。

ラベル
名前位置
ハンドルposition
説明(空欄)
このフィールドは必須ですOFF
フィールドタイプセレクトボックス

セレクトボックスのオプション は、次の内容を入力します。

オプションのラベルデフォルト?
leftOFF
中央centerOFF
rightOFF
フルfullOFF

これで3つのフィールドを持つ、「画像」ブロックができました。

「ギャラリー」ブロック

構成 にある 新しいブロックタイプ ボタンをクリックします。

ブロックタイプ設定モーダル

次の内容を入力してから 作成する ボタンをクリックします。

ラベル
名前ギャラリー
ハンドルgallery

「画像」フィールド

「画像」フィールド

フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。

ラベル
名前画像
ハンドルimages
説明(空欄)
このフィールドは必須ですOFF
フィールドタイプアセット
アップロードを単一のフォルダに限定しますか?OFF
ソースサイトアセット
全て のチェックを外すと、任意のソースを選択できるようになります。
既定のアップロードロケーションサイトアセット
許可されるファイルの種類を制限しますか?ON
※ここでは 画像 のみ許可する形で設定します。
制限3
モードを見る。リスト
選択ラベル(空欄)

この設定により「ギャラリー」ブロックの「画像」フィールドへ最大3つの画像を登録できるようになります。

「引用」ブロック

構成 にある 新しいブロックタイプ ボタンをクリックします。

ブロックタイプ設定モーダル

次の内容を入力してから 作成する ボタンをクリックします。

ラベル
名前引用
ハンドルquote

「引用」フィールド

「引用」フィールド

フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。

ラベル
名前引用
ハンドルquote
説明(空欄)
このフィールドは必須ですOFF
フィールドタイププレーンテキスト
プレースホルダーのテキスト(空欄)
文字数制限(空欄)
等幅フォントを使用OFF
改行を許可OFF

高度 クリックでトグル表示されるオプション設定は、デフォルトのままです。

「帰属」フィールド

「帰属」フィールド

新規フィールド ボタンをクリックし、フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。

ラベル
名前帰属
ハンドルattribution
説明(空欄)
このフィールドは必須ですOFF
フィールドタイププレーンテキスト
プレースホルダーのテキスト(空欄)
文字数制限(空欄)
等幅フォントを使用OFF
改行を許可OFF

高度 クリックでトグル表示されるオプション設定は、デフォルトのままです。

「位置」フィールド

「位置」フィールド

新規フィールド ボタンをクリックし、フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。

ラベル
名前位置
ハンドルposition
説明(空欄)
このフィールドは必須ですOFF
フィールドタイプセレクトボックス

セレクトボックスのオプション は、次の内容を入力します。

オプションのラベルデフォルト?
中央centerOFF
フルfullOFF

これで3つのフィールドを持つ、「引用」ブロックができました。

エントリ編集画面の確認

ここまでの工程で、必要なブロックの作成ができました。最後にエントリの編集画面に反映されているか確認しておきます。

新規エントリの作成

グローバルナビゲーションから エントリ に移動後、サブナビゲーションで すべてのエントリ が選択されていることを確認し、新規エントリ ボタンのオプションから ニュース をクリックします。

新規エントリの編集画面

前回表示確認をした際は空白だった 記事本文 フィールドに、追加した各ブロックのボタンが表示されています。

ブロックの追加

任意のブロックを追加したり、ドラッグして順番を入れ替えたりできることを確認してみましょう。

まとめ

今回は Craft 3 の管理画面で行列フィールドにブロックを追加する流れを確認してみました。

公式デモサイト Happy Lager がベースのためこのような構成になっていますが、コーディングデータのモジュールにあわせてブロックを用意することでテンプレートの実装がしやすくなります。ケースバイケースではありますが、より効率的な方法を探ってみてください。

次回は、データインポートの下準備をかねて「アセットを登録する3つの方法」について解説します。