ACF PROのクローンフィールドの使い方と出力方法
WordPressの投稿や固定ページの入力項目をカスタマイズできるプラグイン、ACF（Advanced Custom Fields）の有料版、ACF PROで提供されているクローンフィールド（Clone）の使い方を紹介します。
クローンフィールドでは、新規のフィールドグループを作成する時に、既存のフィールドグループの設定情報を読み込み、そのまま新規のフィールドグループとして使うことができます。
本記事では、ACF PROクローンフィールドの基本的な使い方と出力方法などを紹介します。
ACFクローンフィールド（Clone）について
ACF（Advanced Custom Fields）とは
ACF（Advanced Custom Fields）とは、WordPressの投稿や固定ページの入力項目をカスタマイズできるプラグインです。
テキストや画像、チェックボックスなどの選択肢、リンクなど、WordPressに通常用意されていない入力項目をカスタムフィールドとして編集画面に追加することができます。
200万以上のWebサイトで利用されているプラグインで、評価の平均値も最大の5つ星と、非常に多くのユーザーに信頼されていることが分かります。
Advanced Custom Fieldsの基本的な使い方と全フィールドタイプの紹介
ACF PRO（有料版）について
ACFは通常無料で多くの機能を使用することができますが、有料版のACF PROではさらに多くの機能が提供されています。
有料版のACF PROはサブスクリプションモデルとなっていて、年間49ドルのパーソナルプラン、年間149ドルのフリーランサープラン、年間249ドルのエージェンシープランがあります。※以前は売り切り、購入する料金プランとなっていました。
今回は有料版の機能の一つ、クローンフィールドを紹介します。
ACFクローンフィールドとは
ACFクローンフィールド（Clone）はレイアウトのフィールドタイプの一つで、新規のフィールドグループを作成する時に、既存のフィールドグループを読み込み、新規のフィールドグループとして使用することができます。
一つのフィールドグループで多くの項目を扱うと、管理がしにくくなってしまったり、編集画面上で視認性が悪くなってしまうことがあります。
項目ごとに分けて複数のフィールドグループを作成し、新規のフィールドグループでそれぞれクローンとして読み込むことで、管理がしやすくなります。
ACFクローンフィールドの使い方と実装手順
ACF PROのインストール方法
それでは、ACFクローンフィールドの使い方と実装手順を紹介します。まずはWordPressにACF PROをインストールします。※有料版の購入についてはこちらをご覧ください。
ACF PROの管理画面、LicensesページからACF PROをダウンロードし、WordPressのプラグイン新規追加ページにて、プラグインのzipファイルをアップロードします。
ACF PROのインストールと有効化を行い、手順に合わせてライセンスキーを入力して、アクティベートを完了させます。
ACF PROのインストール後、WordPress管理画面のメニューに「カスタムフィールド」が追加されます。
ACFクローンフィールドの設定方法
ACF PROのインストールが完了したら、続いてはクローンフィールドの設定を行いますが、その前にクローンとして読み込むフィールドグループを作成します。
※今回は例として、飲食店サイトの店舗情報ページに、営業時間とアクセス情報をそれぞれクローンフィールドとて読み込みます。
クローン元のフィールドグループの作成
メニュー→カスタムフィールド→フィールドグループ→「新規追加」をクリックします。
まずはクローン元になる営業時間とアクセス情報のフィールドグループを作成します。
営業時間のフィールドグループはテキストフィールドで作成します。
アクセス情報のフィールドグループについても、テキスト系のフィールドタイプのテキストエリアで作成します。
クローン元になるフィールドグループについては、クローンフィールドでしか使わない場合、基本的に設定を非アクティブ化します。
クローンフィールドを使ったフィールドグループの作成
クローン元となるフィールドグループの作成が完了したら、次はクローンフィールドを使って新規のフィールドグループを作成します。
クローンフィールドを使用して、事前に作成したクローン元になる営業時間のフィールドグループを読み込みます。
下記の通りにフィールド設定の各項目を設定します。
| フィールドラベル | 営業時間 ※任意、クローン元に合わせています。 |
| フィールド名 | opening_hours ※任意の半角英数字・アンダーコア・ダッシュが使用可能で、日本語は不可 |
| フィールドタイプ | Clone |
| 説明 | ※設置するカスタムフィールドの説明を編集画面に追加することができます。 |
| 必須か？ | いいえ ※必須にしたい場合は「はい」を選択 |
| 表示 | 「Group」の場合はフィールドグループの開閉ができ、「Seamless」の場合はフィールドグループが表示されているだけで開閉ができません。 フィールドグループが多い場合は標準の方が入力画面を整理しやすくなります。 |
| レイアウト | 編集画面での入力項目のレイアウトを設定することができます ブロック：通常の入力項目同様、フィールドラベル→入力エリアといったレイアウト 表：テーブルのように横並びになります※サブフィールドが多くなると入力エリアが狭くなる 行：フィールドラベルと入力エリアが横並びになります※フィールドラベルに背景色が付くので視認性が向上します |
| Prefix Field Labels | いいえ ※クローン元のフィールドラベルに接頭辞を付与することができますが、フィールド名と違って基本的に出力などに影響ないため、「いいえ」で問題ありません。 |
| Prefix Field Names | はい ※クローン元のフィールド名に接頭辞を付与することができます。クローンフィールドを複数使用する場合、管理のしやすさ、重複防止のためにも推奨です。 |
| 条件判定 | 設定した条件と一致した場合に表示させるという条件判定を設定することができます |
| ラッパーの属性 | 編集画面に追加された入力項目に「width」「class」「id」を設定することができます ※サイトには表示されない |
このフィールドグループを表示する条件では適用させたい「投稿」や「ページ」を指定します。
WordPressデフォルトの投稿で使用する場合は、「投稿タイプ」等しい「投稿」といった組み合わせです。固定ページで使用する場合は、「ページ」等しい「会社概要ページ」といった組み合わせです。
※今回の例では、「ページ」等しい「店舗情報ページ」となります。
編集画面でのACFクローンフィールドの使い方
ACFクローンフィールドの設定が完了したら、投稿や固定ページの編集画面での表示と使い方を紹介します。
編集画面にクローン元のフィールドグループである営業時間とアクセスが追加され、それぞれで作成したテキストフィールドやテキストエリアが表示されています。
通常のカスタムフィールドと同様に、入力して使用することができます。
ACFクローンフィールドの出力方法
ここまで、ACF PROのインストール、フィールドグループの作成と設定、編集画面でのクローンフィールドの入力が完了しました。
それでは実際にクローンフィールドを出力するためのコードを実装します。
<div>
<h3>営業時間</h3>
<dl>
<dt><?php the_field('opening_hours_weekday'); ?></dt>
<dd><?php the_field('opening_hours_holidays'); ?></dd>
</dl>
</div>
<div>
<h3>アクセス</h3>
<dl>
<dt><?php the_field('access_address'); ?></dt>
<dd><?php the_field('access_traffic_info'); ?></dd>
</dl>
</div>上記を固定ページのphpファイルに記述することで、ACFクローンフィールドで入力した情報をサイト上で出力することができます。
クローンフィールドの取得について
// 営業時間のフィールドグループの「平日（テキストフィールド）」を取得
<?php the_field('opening_hours_weekday'); ?>クローンフィールド作成時のフィールド設定にて「Prefix Field Names」を「はい」にしているので、クローン元のフィールド名に、クローンフィールドのフィールド名「opening_hours」を接頭辞として付与する必要があります。※クローンフィールドのフィールド名とクローン元のフィールド名をアンダースコアで繋ぎます。
その他応用方法
本記事では、有料版のACF PROクローンフィールドの基本的な使い方と設定方法、出力方法を紹介してきました。
このパートでは、クローンフィールドの応用方法について紹介します。
ACF PROの繰り返しフィールドとの併用について
基本的な使い方の例として、テキストフィールドやテキストエリアといった、基本的なフィールドグループでのクローンフィールドの使い方を紹介しましたが、ACF PROで提供されている繰り返しフィールド（Repeater）と併用することも可能です。
クローン元の繰り返しフィールドの作成
今回も飲食店サイトを例に、クローン元として、ランチとディナーのメニューをそれぞれ別のフィールドグループで作成し、メニューページの編集画面に表示させます。
フィールドタイプを繰り返しフィールドに設定し、サブフィールドで「メニュー名」と「金額」を作成します。
クローンフィールドで繰り返しフィールドを指定
クローン元のフィールドグループの作成後は、新規でフィールドグループを作成します。
フィールドタイプで「Clone」を選択し、クローン元のフィールドとして、繰り返しフィールドで作成したランチとディナーのフィールドグループを指定します。
編集画面でのクローンフィールド
メニューページの編集画面に、繰り返しフィールドで作成されたクローン元のフィールドグループが表示されます。
繰り返しフィールドを含むクローンフィールドの出力方法
<?php if( have_rows('all_menu_lunch_menu') ): ?>
<?php while ( have_rows('all_menu_lunch_menu') ) : the_row(); ?>
<dl>
<dt><?php the_sub_field('menu_name'); ?></dt>
<dd><?php the_sub_field('menu_price'); ?>円</dd>
</dl>
<?php endwhile; ?>
<?php endif; ?>通常の繰り返しフィールドの出力方法と同様ですが、クローンフィールドの設定で「Prefix Field Names」を「はい」にしているので、接頭辞として、クローンフィールドのフィールド名である「all_menu」をアンダースコアでクローン元のフィールド名と繋げています。
※ディナーメニューの出力は省略しています。
注意点としては、サブフィールドの出力「the_sub_field」については、接頭辞は付与としてクローンフィールドのフィールド名を繋げる必要はありません。
