これは Craft CMS Advent Calendar 2018 8日目の記事です。
連載「サンプル制作で覚える Craft 3 サイト構築の基本」の「ニュース」セクションの作成ということで、前回に引き続き行列フィールドに含まれるブロックの設定を行なっていきます。
ここでは、次の作業を行います。
- 行列フィールドの再編集
- ブロックの作成
- エントリ編集画面の確認
なお、過去記事の「Craft CMS で Matrix フィールドを多用する場合、php.ini も見直した方がいいかも？という話」にも目を通してみてください。
行列フィールドの再編集
はじめに、作成済みの「記事本文」フィールドの編集画面に移動します。
グローバルナビゲーションから 設定 に移動し、フィールド アイコンをクリックします。
フィールドの一覧から 記事本文 リンクをクリックします。
行列フィールドにブロックを作ることが目的のため、編集画面の 構成 部分を操作していきます。
ブロックの作成
公式デモサイト Happy Lager の構成にあわせて、次の7つのブロックと内包するフィールドを作成します。
- 新しいセクション
- セクション見出し
- 見出し
- 見出し
- テキスト
- テキスト
- 位置
- リード文
- リード文
- 位置
- 画像
- 画像
- キャプション
- 位置
- ギャラリー
- 画像
- 引用文
- 引用文
- 帰属
- 位置
「新しいセクション」ブロック
構成 にある 新しいブロックタイプ ボタンをクリックします。
次の内容を入力してから 作成する ボタンをクリックします。
| ラベル | 値 |
|---|---|
| 名前 | 新しいセクション |
| ハンドル | newSection |
「セクション見出し」フィールド
フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。
| ラベル | 値 |
|---|---|
| 名前 | セクション見出し |
| ハンドル | sectionHeading |
| 説明 | （空欄） |
| このフィールドは必須です | OFF |
| フィールドタイプ | プレーンテキスト |
| プレースホルダーのテキスト | （空欄） |
| 文字数制限 | 255 |
| 等幅フォントを使用 | OFF |
| 改行を許可 | OFF |
| 列タイプ | varchar (255B) |
高度 クリックでトグル表示されるオプション設定に 列タイプ があります。
「新しいセクション」ブロックのように内包するフィールドが1つだけの場合、これで必要な設定が完了しました。次のブロックの作成に移りましょう。
「見出し」ブロック
構成 にある 新しいブロックタイプ ボタンをクリックします。
次の内容を入力してから 作成する ボタンをクリックします。
| ラベル | 値 |
|---|---|
| 名前 | 見出し |
| ハンドル | heading |
「見出し」フィールド
フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。
| ラベル | 値 |
|---|---|
| 名前 | 見出し |
| ハンドル | heading |
| 説明 | （空欄） |
| このフィールドは必須です | OFF |
| フィールドタイプ | プレーンテキスト |
| プレースホルダーのテキスト | （空欄） |
| 文字数制限 | 255 |
| 等幅フォントを使用 | OFF |
| 改行を許可 | OFF |
| 列タイプ | varchar (255B) |
高度 クリックでトグル表示されるオプション設定に 列タイプ があります。
「テキスト」ブロック
構成 にある 新しいブロックタイプ ボタンをクリックします。
次の内容を入力してから 作成する ボタンをクリックします。
| ラベル | 値 |
|---|---|
| 名前 | テキスト |
| ハンドル | text |
「テキスト」フィールド
フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。
| ラベル | 値 |
|---|---|
| 名前 | テキスト |
| ハンドル | text |
| 説明 | （空欄） |
| このフィールドは必須です | OFF |
| フィールドタイプ | Redactor |
| Redactor Config | Standard |
| Available Volumes | すべて |
| Available Transforms |
画像の変形に関する設定を行なっていないため、Available Transforms には選択肢が表示されません。必要に応じて、あとから設定することになります。
また、Advanced クリックでトグル表示されるオプション設定もデフォルトのままとします。
「位置」フィールド
新規フィールド ボタンをクリックし、フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。
| ラベル | 値 |
|---|---|
| 名前 | 位置 |
| ハンドル | position |
| 説明 | （空欄） |
| このフィールドは必須です | OFF |
| フィールドタイプ | セレクトボックス |
セレクトボックスのオプション は、次の内容を入力します。
| オプションのラベル | 値 | デフォルト？ |
|---|---|---|
| 左 | left | OFF |
| 中央 | center | OFF |
| 右 | right | OFF |
これで2つのフィールドを持つ、「テキスト」ブロックができました。
「リード文」ブロック
構成 にある 新しいブロックタイプ ボタンをクリックします。
次の内容を入力してから 作成する ボタンをクリックします。
| ラベル | 値 |
|---|---|
| 名前 | リード文 |
| ハンドル | pullQuote |
「リード文」フィールド
フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。
| ラベル | 値 |
|---|---|
| 名前 | リード文 |
| ハンドル | pullQuote |
| 説明 | （空欄） |
| このフィールドは必須です | OFF |
| フィールドタイプ | プレーンテキスト |
| プレースホルダーのテキスト | （空欄） |
| 文字数制限 | （空欄） |
| 等幅フォントを使用 | OFF |
| 改行を許可 | OFF |
高度 クリックでトグル表示されるオプション設定は、デフォルトのままです。
「位置」フィールド
新規フィールド ボタンをクリックし、フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。
| ラベル | 値 |
|---|---|
| 名前 | 位置 |
| ハンドル | position |
| 説明 | （空欄） |
| このフィールドは必須です | OFF |
| フィールドタイプ | セレクトボックス |
セレクトボックスのオプション は、次の内容を入力します。
| オプションのラベル | 値 | デフォルト？ |
|---|---|---|
| 左 | left | OFF |
| 中央 | center | OFF |
| 右 | right | OFF |
これで2つのフィールドを持つ、「リード文」ブロックができました。
「画像」ブロック
構成 にある 新しいブロックタイプ ボタンをクリックします。
次の内容を入力してから 作成する ボタンをクリックします。
| ラベル | 値 |
|---|---|
| 名前 | 画像 |
| ハンドル | image |
「画像」フィールド
フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。
| ラベル | 値 |
|---|---|
| 名前 | 画像 |
| ハンドル | image |
| 説明 | （空欄） |
| このフィールドは必須です | OFF |
| フィールドタイプ | アセット |
| アップロードを単一のフォルダに限定しますか? | OFF |
| ソース | サイトアセット ※ 全て のチェックを外すと、任意のソースを選択できるようになります。 |
| 既定のアップロードロケーション | サイトアセット |
| 許可されるファイルの種類を制限しますか？ | ON ※ここでは 画像 のみ許可する形で設定します。 |
| 制限 | 1 |
| モードを見る。 | リスト |
| 選択ラベル | （空欄） |
既定のアップロードロケーション は編集画面で直接ドラッグ＆ドロップされたファイルのアップロード先の指定となります。
「キャプション」フィールド
新規フィールド ボタンをクリックし、フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。
| ラベル | 値 |
|---|---|
| 名前 | キャプション |
| ハンドル | caption |
| 説明 | （空欄） |
| このフィールドは必須です | OFF |
| フィールドタイプ | Redactor |
| Redactor Config | Simple |
| Available Volumes | すべて |
| Available Transforms |
Advanced クリックでトグル表示されるオプション設定もデフォルトのままとします。
「位置」フィールド
新規フィールド ボタンをクリックし、フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。
| ラベル | 値 |
|---|---|
| 名前 | 位置 |
| ハンドル | position |
| 説明 | （空欄） |
| このフィールドは必須です | OFF |
| フィールドタイプ | セレクトボックス |
セレクトボックスのオプション は、次の内容を入力します。
| オプションのラベル | 値 | デフォルト？ |
|---|---|---|
| 左 | left | OFF |
| 中央 | center | OFF |
| 右 | right | OFF |
| フル | full | OFF |
これで3つのフィールドを持つ、「画像」ブロックができました。
「ギャラリー」ブロック
構成 にある 新しいブロックタイプ ボタンをクリックします。
次の内容を入力してから 作成する ボタンをクリックします。
| ラベル | 値 |
|---|---|
| 名前 | ギャラリー |
| ハンドル | gallery |
「画像」フィールド
フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。
| ラベル | 値 |
|---|---|
| 名前 | 画像 |
| ハンドル | images |
| 説明 | （空欄） |
| このフィールドは必須です | OFF |
| フィールドタイプ | アセット |
| アップロードを単一のフォルダに限定しますか? | OFF |
| ソース | サイトアセット ※ 全て のチェックを外すと、任意のソースを選択できるようになります。 |
| 既定のアップロードロケーション | サイトアセット |
| 許可されるファイルの種類を制限しますか？ | ON ※ここでは 画像 のみ許可する形で設定します。 |
| 制限 | 3 |
| モードを見る。 | リスト |
| 選択ラベル | （空欄） |
この設定により「ギャラリー」ブロックの「画像」フィールドへ最大3つの画像を登録できるようになります。
「引用」ブロック
構成 にある 新しいブロックタイプ ボタンをクリックします。
次の内容を入力してから 作成する ボタンをクリックします。
| ラベル | 値 |
|---|---|
| 名前 | 引用 |
| ハンドル | quote |
「引用」フィールド
フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。
| ラベル | 値 |
|---|---|
| 名前 | 引用 |
| ハンドル | quote |
| 説明 | （空欄） |
| このフィールドは必須です | OFF |
| フィールドタイプ | プレーンテキスト |
| プレースホルダーのテキスト | （空欄） |
| 文字数制限 | （空欄） |
| 等幅フォントを使用 | OFF |
| 改行を許可 | OFF |
高度 クリックでトグル表示されるオプション設定は、デフォルトのままです。
「帰属」フィールド
新規フィールド ボタンをクリックし、フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。
| ラベル | 値 |
|---|---|
| 名前 | 帰属 |
| ハンドル | attribution |
| 説明 | （空欄） |
| このフィールドは必須です | OFF |
| フィールドタイプ | プレーンテキスト |
| プレースホルダーのテキスト | （空欄） |
| 文字数制限 | （空欄） |
| 等幅フォントを使用 | OFF |
| 改行を許可 | OFF |
高度 クリックでトグル表示されるオプション設定は、デフォルトのままです。
「位置」フィールド
新規フィールド ボタンをクリックし、フィールド設定 枠にあるそれぞれの項目に、次の内容を入力します。
| ラベル | 値 |
|---|---|
| 名前 | 位置 |
| ハンドル | position |
| 説明 | （空欄） |
| このフィールドは必須です | OFF |
| フィールドタイプ | セレクトボックス |
セレクトボックスのオプション は、次の内容を入力します。
| オプションのラベル | 値 | デフォルト？ |
|---|---|---|
| 中央 | center | OFF |
| フル | full | OFF |
これで3つのフィールドを持つ、「引用」ブロックができました。
エントリ編集画面の確認
ここまでの工程で、必要なブロックの作成ができました。最後にエントリの編集画面に反映されているか確認しておきます。
グローバルナビゲーションから エントリ に移動後、サブナビゲーションで すべてのエントリ が選択されていることを確認し、新規エントリ ボタンのオプションから ニュース をクリックします。
前回表示確認をした際は空白だった 記事本文 フィールドに、追加した各ブロックのボタンが表示されています。
任意のブロックを追加したり、ドラッグして順番を入れ替えたりできることを確認してみましょう。
まとめ
今回は Craft 3 の管理画面で行列フィールドにブロックを追加する流れを確認してみました。
公式デモサイト Happy Lager がベースのためこのような構成になっていますが、コーディングデータのモジュールにあわせてブロックを用意することでテンプレートの実装がしやすくなります。ケースバイケースではありますが、より効率的な方法を探ってみてください。
次回は、データインポートの下準備をかねて「アセットを登録する3つの方法」について解説します。