【Craft 3 サイト構築の基本】Field Manager プラグインを利用したフィールドの作成

これは Craft CMS Advent Calendar 2018 18日目の記事です。
連載「サンプル制作で覚える Craft 3 サイト構築の基本」として、前回一括登録したセクションに必要なフィールドを作成し、エントリ編集画面に反映していきます。

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

  1. プラグインのインストール
  2. JSON データの準備
  3. インポートの実行
  4. フィールドレイアウトの調整

インポート用の JSON データは「素材データ専用リポジトリ vol-12 ブランチ」にコミットしてあります。

プラグインのインストール

ここでは、フィールドの複製やインポート、エクスポートできる Field Manager プラグインを利用します。

新しく追加するフィールドに「セクション」や「アセット」を含むことから、あらかじめセクションとボリュームを用意してる点に注意してください。

プラグインストア

グローバルナビゲーションから プラグインストア に移動後、キーワード field m でヒットする Field Manager プラグインをクリックします。

Architect プラグインのモーダル

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

Composer のアップデート画面

プロジェクトルートの composer.json にプラグインが追記され、内部的に composer update が実行されます。インストール完了後、グローバルナビゲーションに Field Manager が追加されていることを確認してください。

JSON データの準備

インポートにあたり、データソースとなる JSON ファイルを用意します。【サンプルデータ】

Field Manager プラグインにも既存のフィールドをエクスポートする機能があるため、それをベースにしましょう。

エクスポート方法

エクスポート画面

グローバルナビゲーションから Field Manager に移動後、エクスポートしたい任意のフィールドをメインカラムで選択します。下段にある Export selected ボタンをクリックすると export.json というファイル名でダウンロードされます。

インポートの実行

インポート画面

グローバルナビゲーションから Field Manager に移動後、メインカラムの Import タブをクリックします。テキストエリアにインポート用の JSON データ(/web/import/plugin/field-manager.json)の内容をペーストし、下段にある Configure Import ボタンをクリックします。

インポートのオプション

フィールド一覧の右端にあるプルダウンからインポート先のフィールドグループをセットしたら、下段にある Import ボタンをクリックします。なお、それぞれのフィールドの設定先は次の通りです。

Field Nameフィールドグループ
住所Contact Info
お問い合わせ方法Contact Info
メールアドレスContact Info
お問い合わせボタンのラベルFooter
コピーライトFooter
背景色Common
本文Common
サムネイル画像Common
インデックスページ用見出しCommon
クライアントロゴHomepage
ヒーロー画像Homepage
お客様の声Homepage
サービス本文Services
サービスアイコンServices
サービス種別Work

インポートが完了したら、フィールドの一覧に新しく追加されていることを確認しましょう。

フィールド一覧

リレーション系のフィールドについて

「アセット」や「エントリ」など関連付けを行うフィールドをインポートする場合、「ソース」の設定がずれる可能性があることに注意してください。

直前でインポートした「サムネイル画像」フィールドの JSON データから一部抜粋したものを例にすると

{
  "name": "サムネイル画像",
  "settings": {
    "defaultUploadLocationSource": "folder:1",
    "singleUploadLocationSource": "folder:1"
  }
}

folder:1 ように参照先のソースを数値指定していることが判ります。

「ソース」ごとに割り振られる ID は セクションやボリュームなどを Craft に登録した順の連番 となるため、Architect プラグイン経由でインポートした順と JSON に定義した数値が一致せず、意図しない参照先になってしまいます。

そこで、リレーション系のフィールドだけインポート直後の設定内容を確認しておくことをオススメします。

フィールド名ソース
サムネイル画像サイトアセット
クライアントロゴカンパニーロゴ
ヒーロー画像サイトアセット
お客様の声 > 画像サイトアセット
サービス本文 > 画像サイトアセット
サービスアイコンサービスアイコン
サービス種別サービス

なお、ここでは「アセット」フィールドの「既定のアップロードロケーション」に同じ値がセットされている前提となります。

フィールドレイアウトの調整

次に、セクションごとのフィールドレイアウトを調整していきます。
基本的な操作方法については、「ニュース」セクションの作成(設定編)の「入力タイプの調整」を参考にしてください。タブ名は、すべて「コンテンツ」で統一します。

「サービス」入力タイプ

「サービス」入力タイプ

次のものをドラッグ&ドロップして コンテンツ タブに移動後、画面右上の 保存 ボタンをクリックします。

  1. メイン画像
  2. サービスアイコン
  3. 概要文
  4. 記事本文
  5. サービス本文

「サービス(インデックス)」入力タイプ

「サービス(インデックス)」入力タイプ

次のものをドラッグ&ドロップして コンテンツ タブに移動後、画面右上の 保存 ボタンをクリックします。

  1. 大見出し
  2. 本文

「トップページ」入力タイプ

「トップページ」入力タイプ

次のものをドラッグ&ドロップして コンテンツ タブに移動後、画面右上の 保存 ボタンをクリックします。

  1. ヒーロー画像
  2. お客様の声
  3. クライアントロゴ

「ロケーション」入力タイプ

「ロケーション」入力タイプ

次のものをドラッグ&ドロップして コンテンツ タブに移動後、画面右上の 保存 ボタンをクリックします。

  1. メイン画像
  2. 住所
  3. お問い合わせ方法
  4. メールアドレス

「ワークス」入力タイプ

「ワークス」入力タイプ

次のものをドラッグ&ドロップして コンテンツ タブに移動後、画面右上の 保存 ボタンをクリックします。

  1. 概要文
  2. 大見出し
  3. 小見出し
  4. 記事本文
  5. サービス種別

デザイン タブを新しく追加し、次のものをドラッグ&ドロップで移動後、画面右上の 保存 ボタンをクリックします。

  1. メイン画像
  2. サムネイル画像
  3. 背景色

「ワークス(インデックス)」入力タイプ

「ワークス(インデックス)」入力タイプ

次のものをドラッグ&ドロップして コンテンツ タブに移動後、画面右上の 保存 ボタンをクリックします。

  1. 大見出し
  2. 本文

「会社案内」入力タイプ

「会社案内」入力タイプ

次のものをドラッグ&ドロップして コンテンツ タブに移動後、画面右上の 保存 ボタンをクリックします。

  1. 大見出し
  2. 本文
  3. 記事本文

これで、ひと通り設定できました。

それぞれのセクションで新規エントリの編集画面を確認してみてください。

まとめ

ここでは Field Manager プラグインを利用して、複数のセクションを一括登録する方法について解説しました。

フィールド設定も Craft 3.1 の Project Config で同期できるようですが、現時点で効率的に設定を行う方法の一つとして覚えておくとよいでしょう。

次回は「Feed Me プラグインでセクションごとのエントリをインポート」してみます。