ACFのレイアウトフィールドで表示をカスタマイズする方法

WordPressのプラグインAdvanced Custom Fields（ACF）で、レイアウトフィールドタイプを使用して作成したカスタムフィールドのレイアウトを変更する方法の備忘録です。

レイアウトフィールドは、管理画面上のカスタムフィールドの表示を制御したり、複数のカスタムフィールドをグループ化することのできるフィールドタイプです。

追加したカスタムフィールドのレイアウトを変更することで、より操作性の高い入力フォームを作成できます。

ACFで作成できる各フィールドタイプはこちらの記事でまとめています。

メッセージ

メッセージのテキストを追加できるフィールドタイプです。

フィールドの設定にある「メッセージ」の入力欄に表示するテキストを記入します。

フィールドを設定した箇所の「フィールドラベル」の下にメッセージが表示されます。

追加したカスタムフィールドの詳細な説明など、テキストを追加したい場合に使用します。

アコーディオン

アコーディオン形式でカスタムフィールドを開閉できるようにするフィールドタイプです。

アコーディオンの開閉状態は設定で変更が可能です。

作成したアコーディオンフィールドの下に、格納したいカスタムフィールドを並べます。

編集画面では、開閉するアコーディオンの中にカスタムフィールドが表示されます。

画像のサンプルでは、「詳細情報」のアコーディオンの中に「サムネイル」と「紹介文」が格納されています。

入力項目が多く編集画面が混雑した時は、コンテンツを開閉させることですっきりと整理できます。

タブ

タブの形式でカスタムフィールドを切り分けて表示できるフィールドタイプです。

設定では、タブの表示位置などの変更が可能です。

アコーディオンフィールドと同様に、タブフィールドの下に格納したいカスタムフィールドを並べます。

編集画面では、設定したタブごとにカスタムフィールドの表示を切り替えることができます。

画像のサンプルでは、「必須項目」と「SNS」タブをクリックすると、カスタムフィールドが切り替わります。

こちらも入力項目が増えすぎてしまった場合に、活用できるフィールドタイプです。

グループ

カスタムフィールドをまとめてグループで管理できるフィールドタイプです。

グループフィールドは、フィールドラベルの他にフィールド名の設定が必要です。

さらに、サブフィールド内の「フィールドを追加」からグループに入れるカスタムフィールドを設定します。

画像のサンプルでは、「必須項目」のグループフィールドの中に「店舗名」と「サムネイル」のカスタムフィールドを作成しました。

編集画面では、グループフィールドのフィールドラベルが付いたグループの中に設定したカスタムフィールドが表示されています。

グループ以外のカスタムフィールドは、「紹介文」のように通常のカスタムフィールドの並びで表示されます。

グループフィールドに設定したカスタムフィールドは、配列でまとめて出力することができます。

<?php
  $store_info = get_field('store-group');
?>
<p>店舗名: <?php echo esc_html($store_info['store-name']); ?></p>
<img src="<?php echo esc_html($store_info['store-thumb']); ?>">

$store_infoにget_field()でグループフィールドの値を格納します。「store-group」には、フィールド名を設定します。

取得した配列からecho esc_html()で、各カスタムフィールドの値を出力します。この時、画像を設定しているサムネイルの戻り値の形式は「画像 URL」を設定しています。

その他のPRO版も含めたグループフィールドを使うことで、入力項目が整理されたより操作性の高いカスタムフィールドの編集が可能です。