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

これは Craft CMS Advent Calendar 2018 5日目の記事です。
連載「サンプル制作で覚える Craft 3 サイト構築の基本」の「ニュース」セクションの作成ということで、管理画面を操作していきます。

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

  1. セクションの作成
  2. ボリュームの作成
  3. プラグインのインストール
  4. フィールドの作成
  5. 入力タイプの調整
  6. ボリュームにフィールドを割り当て

セクションの作成

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 プラグインをクリックします。

Redactor プラグインのモーダル

プラグインの説明などが記載されたモーダルウィンドウが開きますので、右上にある インストール ボタンをクリックします。

Composer のアップデート画面

プロジェクトルートの composer.json にプラグインが追記され、内部的に composer update が実行されます。終了すると「プラグインストア」ページに遷移しますので、このまま待ちましょう。

設定画面

インストール済みのプラグインは、グローバルナビゲーションから プラグイン に移動して確認できます。

プラグイン一覧

「歯車」アイコンをクリックして表示されるアクションメニューから、プラグインごとに無効化やアンインストールができます。

フィールドの作成

前回確認した、次の7つのフィールドを作成していきます。

  1. 固定表示フラグ
  2. メイン画像
  3. 概要文
  4. リンク先の URL
  5. 大見出し
  6. 小見出し
  7. 記事本文(行列フィールド)

設定画面

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

フィールド一覧

セクションの一覧の右上にある 新規フィールド ボタンをクリックします。
以降、新しいフィールドの作成時はこの画面で操作してください。

「固定表示フラグ」フィールド

「固定表示フラグ」フィールド

次の内容を入力してから 保存 します。

ラベル
グループCommon
名前固定表示フラグ
ハンドルfeaturedEntry
説明このエントリを一覧ページで固定表示しますか?
フィールドタイプLightSwitch
初期値OFF(グレー)

ON / OFF いずれかをセットできればよいため、フィールドタイプは LightSwitch になります。

「メイン画像」フィールド

「メイン画像」フィールド

次の内容を入力してから 保存 します。

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

既定のアップロードロケーション は編集画面で直接ドラッグ&ドロップされたファイルのアップロード先の指定となります。通常は ソース で選択したものと同じにボリュームを選択すると考えておけばよいでしょう。

「概要文」フィールド

「概要文」フィールド

次の内容を入力してから 保存 します。

ラベル
グループCommon
名前概要文
ハンドルshortDescription
説明一覧ページで利用するための短い説明文。
フィールドタイプRedactor
Redactor ConfigSimple
Available Volumesすべて
Available Transforms

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

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

「リンク先の URL」フィールド

「リンク先の 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 タブに含まれるフィールドから、次のものをドラッグ&ドロップして コンテンツ タブに移動します。

  1. 固定表示フラグ
  2. メイン画像
  3. 概要文
  4. 大見出し
  5. 小見出し
  6. 記事本文

すべて順番通りに配置できたら、右上にある 保存 ボタンをクリックします。

「リンク」入力タイプ

入力タイプ一覧

続けて「リンク先を指定する場合の入力タイプ」を用意するため、新規の入力タイプ ボタンをクリックします。

リンク 入力タイプ編集画面

はじめに、次の内容を入力してください。

ラベル
名前リンク
ハンドルlink
タイトルのフィールドを見る。ON
タイトルフィールドラベルタイトル

次に、デフォルト 入力タイプのときと同様に コンテンツ タブへ3つのフィールドをセットします。

  1. メイン画像
  2. 概要文
  3. リンク先の URL

セットできたら 保存 ボタンをクリックします。

表示確認

新規エントリの作成

グローバルナビゲーションから エントリ に移動し、新規エントリ ボタンのオプションから ニュース をクリックします。エントリ一覧のサブナビゲーションで すべてのエントリ 以外のセクションが選択されている場合、そのセクションのエントリを作成する点に注意が必要です。

デフォルト入力タイプ

入力タイプ を切り替えて、事前にセットしたフィールドだけが表示されていることを確認します。

リンク入力タイプ

このように Craft 3 では、必要に応じて複数の入力タイプを用意することができます。

ボリュームにフィールドを割り当て

Craft 3 で作成したフィールドは、エントリ以外でも利用できます。
ここではボリュームにフィールドをセットし、そこに含まれるアセットに付帯情報を設定できるようにします。

設定画面

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

ボリューム作成後の一覧

ボリュームの一覧から サイトアセット リンクをクリックします。

フィールドの配置

フィールドの配置 タブをクリック後、概要文 フィールドを配置したら 保存 ボタンをクリックします。

アセットの編集

登録済みのアセットをダブルクリックした際に表示されるモーダルウィンドウで、概要文 フィールドを入力できるようになりました。

まとめ

今回は Craft 3 の管理画面でセクションの作成やフィールドを追加する方法について、ひと通り流れを確認してみました。 セクションタイプに関わらず必要な手順となりますので、基本をしっかり抑えておきましょう。

次回は、Craft 3 の管理画面で「行列フィールドへのブロックの追加」を行います。