これは Craft CMS Advent Calendar 2018 5日目の記事です。
連載「サンプル制作で覚える Craft 3 サイト構築の基本」の「ニュース」セクションの作成ということで、管理画面を操作していきます。
ここでは、次の作業を行います。
- セクションの作成
- ボリュームの作成
- プラグインのインストール
- フィールドの作成
- 入力タイプの調整
- ボリュームにフィールドを割り当て
セクションの作成
Craft 3 ではページに表示させたいコンテンツを「エントリ」として保存します。
エントリはいずれかの「セクション」に属する必要があるため、はじめに「ニュース」セクションを作成します。
新規インストール直後の管理画面にログインしている前提となりますので、事前にローカル環境などを用意してください。
グローバルナビゲーションから 設定 に移動し、セクション アイコンをクリックします。
セクションの一覧の右上にある 新規セクション ボタンをクリックします。
次の内容を入力してから 保存 します。
| ラベル | 値 |
|---|---|
| 名前 | ニュース |
| ハンドル | news |
| このセクションへの入力のためにバージョン管理は可能ですか？ | ON |
| セクションタイプ | Channel |
| エントリー URL 形式 | news/{slug} |
| テンプレート | news/_entry |
| デフォルトのステータス | ON（緑色） |
セクションタイプ の選択基準については、公式ドキュメントの「セクションとエントリ」ページを参照してください。
また、テンプレート 入力欄でパスを指定しているため templates/news/_entry.html を用意する必要がありますが、ブラウザからフロントエンドの詳細ページにアクセスしなければ問題ないので、ひとまず設定だけ行っておきます。
保存後、セクションの一覧に「ニュース」が表示されるようになります。
ボリュームの作成
Craft 3 では画像や文書ファイルを「アセット」として登録します。
アセットは「ボリューム」に属する必要があるため、フィールド作成前にボリュームの設定（表示する際のベース URL やアップロード先のファイルパスに関する指定）を行います。
グローバルナビゲーションから 設定 に移動し、アセット アイコンをクリックします。
「設定 > アセット設定」のボリューム一覧にある 新しいボリューム ボタンをクリックします。
次の内容を入力してから 保存 します。
| ラベル | 値 |
|---|---|
| 名前 | サイトアセット |
| ハンドル | siteAssets |
| このボリュームのアセットにはパブリック URL が含まれます | ON（緑色） |
| ベース URL 形式 | @web/assets/site |
| ボリュームタイプ | ローカルのフォルダ |
| ファイルシステムのパス | @webroot/assets/site |
ボリュームの詳細については、公式ドキュメントの「アセット」ページを参照してください。
ベース URL 形式 欄の @web や ファイルシステムのパス 欄の @webroot は、エイリアスと呼ばれる Craft 3 であらかじめ定義された特別な変数です。サーバー環境が変わってもドメインルートの URL やファイルパスを参照できるため、必要に応じて利用しましょう。
保存後、ボリュームの一覧に「サイトアセット」が表示されるようになります。
プラグインのインストール
Craft 3 でリッチテキストエディタを利用する場合、プラグインを追加する必要があります。
グローバルナビゲーションから プラグインストア に移動後、キーワード redactor でヒットする Redactor プラグインをクリックします。
プラグインの説明などが記載されたモーダルウィンドウが開きますので、右上にある インストール ボタンをクリックします。
プロジェクトルートの composer.json にプラグインが追記され、内部的に composer update が実行されます。終了すると「プラグインストア」ページに遷移しますので、このまま待ちましょう。
インストール済みのプラグインは、グローバルナビゲーションから プラグイン に移動して確認できます。
「歯車」アイコンをクリックして表示されるアクションメニューから、プラグインごとに無効化やアンインストールができます。
フィールドの作成
前回確認した、次の7つのフィールドを作成していきます。
- 固定表示フラグ
- メイン画像
- 概要文
- リンク先の URL
- 大見出し
- 小見出し
- 記事本文（行列フィールド）
グローバルナビゲーションから 設定 に移動し、フィールド アイコンをクリックします。
セクションの一覧の右上にある 新規フィールド ボタンをクリックします。
以降、新しいフィールドの作成時はこの画面で操作してください。
「固定表示フラグ」フィールド
次の内容を入力してから 保存 します。
| ラベル | 値 |
|---|---|
| グループ | Common |
| 名前 | 固定表示フラグ |
| ハンドル | featuredEntry |
| 説明 | このエントリを一覧ページで固定表示しますか？ |
| フィールドタイプ | LightSwitch |
| 初期値 | OFF（グレー） |
ON / OFF いずれかをセットできればよいため、フィールドタイプは LightSwitch になります。
「メイン画像」フィールド
次の内容を入力してから 保存 します。
| ラベル | 値 |
|---|---|
| グループ | Common |
| 名前 | メイン画像 |
| ハンドル | featuredImage |
| 説明 | （空欄） |
| フィールドタイプ | アセット |
| アップロードを単一のフォルダに限定しますか? | OFF |
| ソース | サイトアセット ※ 全て のチェックを外すと、任意のソースを選択できるようになります。 |
| 既定のアップロードロケーション | サイトアセット |
| 許可されるファイルの種類を制限しますか？ | ON ※ここでは 画像 のみ許可する形で設定します。 |
| 制限 | 2 |
| モードを見る。 | リスト |
| 選択ラベル | （空欄） |
既定のアップロードロケーション は編集画面で直接ドラッグ＆ドロップされたファイルのアップロード先の指定となります。通常は ソース で選択したものと同じにボリュームを選択すると考えておけばよいでしょう。
「概要文」フィールド
次の内容を入力してから 保存 します。
| ラベル | 値 |
|---|---|
| グループ | Common |
| 名前 | 概要文 |
| ハンドル | shortDescription |
| 説明 | 一覧ページで利用するための短い説明文。 |
| フィールドタイプ | Redactor |
| Redactor Config | Simple |
| Available Volumes | すべて |
| Available Transforms |
画像の変形に関する設定を行なっていないため、Available Transforms には選択肢が表示されません。必要に応じて、あとから設定することになります。
また、Advanced クリックでトグル表示されるオプション設定もデフォルトのままとします。
「リンク先の URL」フィールド
次の内容を入力してから 保存 します。
| ラベル | 値 |
|---|---|
| グループ | Common |
| 名前 | リンク先の URL |
| ハンドル | linkUrl |
| 説明 | （空欄） |
| フィールドタイプ | プレーンテキスト |
| プレースホルダーのテキスト | 例）http://example.com |
| 文字数制限 | 255 |
| 等幅フォントを使用 | OFF |
| 改行を許可 | OFF |
| 列タイプ | varchar (255B) |
高度 クリックでトグル表示されるオプション設定に 列タイプ があります。
「大見出し」フィールド
次の内容を入力してから 保存 します。
| ラベル | 値 |
|---|---|
| グループ | Common |
| 名前 | 大見出し |
| ハンドル | heading |
| 説明 | （空欄） |
| フィールドタイプ | プレーンテキスト |
| プレースホルダーのテキスト | （空欄） |
| 文字数制限 | 255 |
| 等幅フォントを使用 | OFF |
| 改行を許可 | OFF |
| 列タイプ | varchar (255B) |
高度 クリックでトグル表示されるオプション設定に 列タイプ があります。
「小見出し」フィールド
次の内容を入力してから 保存 します。
| ラベル | 値 |
|---|---|
| グループ | Common |
| 名前 | 小見出し |
| ハンドル | subheading |
| 説明 | （空欄） |
| フィールドタイプ | プレーンテキスト |
| プレースホルダーのテキスト | （空欄） |
| 文字数制限 | 255 |
| 等幅フォントを使用 | OFF |
| 改行を許可 | OFF |
| 列タイプ | varchar (255B) |
高度 クリックでトグル表示されるオプション設定に 列タイプ があります。
「記事本文」フィールド
次の内容を入力してから 保存 します。
| ラベル | 値 |
|---|---|
| グループ | Common |
| 名前 | 記事本文 |
| ハンドル | articleBody |
| 説明 | （空欄） |
| フィールドタイプ | 行列 |
| 構成 | デフォルトのまま |
| 最小ブロック数 | （空欄） |
| 最大ブロック数 | （空欄） |
今回は「フィールド」の追加だけが目的のため、構成 にセットする「ブロック」の指定は次回改めて行います。
ここまでの操作で「ニュース」セクションに必要な7つのフィールドができました。
入力タイプの調整
「ニュース」セクションのエントリ編集画面に作成したフィールドを表示させるため、入力タイプを設定します。
グローバルナビゲーションから 設定 に移動し、セクション アイコンをクリックします。
セクション一覧の「ニュース」セクションの行にある 入力タイプを変更してください リンクをクリックします。
「デフォルト」入力タイプ
入力タイプの一覧にある ニュース リンクをクリックします。Craft 3 でセクションを作成すると同じ名前の入力タイプがデフォルトで自動生成されていますので、これを「詳細ページがある場合の入力タイプ」として利用します。
名前 を デフォルト に変更し、新規タブ ボタンをクリックします。
Tab1 の右側にある歯車アイコンをクリックし、アクションメニューから 名前を変更する をクリックします。
モーダルウィンドウに コンテンツ と入力して、OK をクリックします。
下段の Common タブに含まれるフィールドから、次のものをドラッグ＆ドロップして コンテンツ タブに移動します。
- 固定表示フラグ
- メイン画像
- 概要文
- 大見出し
- 小見出し
- 記事本文
すべて順番通りに配置できたら、右上にある 保存 ボタンをクリックします。
「リンク」入力タイプ
続けて「リンク先を指定する場合の入力タイプ」を用意するため、新規の入力タイプ ボタンをクリックします。
はじめに、次の内容を入力してください。
| ラベル | 値 |
|---|---|
| 名前 | リンク |
| ハンドル | link |
| タイトルのフィールドを見る。 | ON |
| タイトルフィールドラベル | タイトル |
次に、デフォルト 入力タイプのときと同様に コンテンツ タブへ3つのフィールドをセットします。
- メイン画像
- 概要文
- リンク先の URL
セットできたら 保存 ボタンをクリックします。
表示確認
グローバルナビゲーションから エントリ に移動し、新規エントリ ボタンのオプションから ニュース をクリックします。エントリ一覧のサブナビゲーションで すべてのエントリ 以外のセクションが選択されている場合、そのセクションのエントリを作成する点に注意が必要です。
入力タイプ を切り替えて、事前にセットしたフィールドだけが表示されていることを確認します。
このように Craft 3 では、必要に応じて複数の入力タイプを用意することができます。
ボリュームにフィールドを割り当て
Craft 3 で作成したフィールドは、エントリ以外でも利用できます。
ここではボリュームにフィールドをセットし、そこに含まれるアセットに付帯情報を設定できるようにします。
グローバルナビゲーションから 設定 に移動し、アセット アイコンをクリックします。
ボリュームの一覧から サイトアセット リンクをクリックします。
フィールドの配置 タブをクリック後、概要文 フィールドを配置したら 保存 ボタンをクリックします。
登録済みのアセットをダブルクリックした際に表示されるモーダルウィンドウで、概要文 フィールドを入力できるようになりました。
まとめ
今回は Craft 3 の管理画面でセクションの作成やフィールドを追加する方法について、ひと通り流れを確認してみました。 セクションタイプに関わらず必要な手順となりますので、基本をしっかり抑えておきましょう。
次回は、Craft 3 の管理画面で「行列フィールドへのブロックの追加」を行います。