ACFで繰り返しフィールドを作成する方法
Advanced Custom Fields（ACF）のPRO版で使用できる、繰り返しフィールドの使い方の備忘録です。
繰り返しフィールドは、同じ構成のカスタムフィールドを何度も繰り返し使用できるフィールドタイプです。
例えば、テキストと画像のフィールドを持つフィールドセットを自由に増減させて、必要な数だけ使用することができます。
以下のサンプルでは、リンク付きのロゴ画像を設定するカスタムフィールドを作成しています。
右下の「行を追加」ボタンから、画像と、URL、テキストのフィールドセットを追加できます。
ACFの詳しい使い方やカスタムフィールドの設定方法は、こちらの記事でまとめています。
繰り返しフィールドの作り方
フィールドグループを作成する
はじめに、繰り返しフィールドを作成するフィールドグループを用意します。（既にフィールドグループを作成している場合は、この操作は不要です。）
WordPress管理画面の左メニューから「ACF」＞「フィールドグループ」を開き、「新規追加」もしくは中央の「Add Field Group」をクリックします。
一番上の「新規フィールドグループを追加」横のフォームに、フィールドグループのタイトルを入力します。
各項目が設定できたら、右上の「Save Changes」をクリックして保存します。
繰り返しフィールドを作成する
フィールドグループの用意ができたら、続いて「繰り返しフィールド」を作成します。
フィールドタイプに「繰り返しフィールド」を選択して、フィールドラベルとフィールド名を設定します。
サブフィールドを設定する
サブフィールドの中に、繰り返し使用するフィールドタイプを追加します。
今回は例として、ロゴ画像、リンク先URL、名前を設定しました。
作成できたら右上の「変更を保存」をクリックして保存します。
デフォルトの設定では、投稿ページに作成した繰り返しフィールドが表示されます。
固定ページやカスタム投稿ページにも表示したい場合は、Location Rulesで設定を変更します。
繰り返しフィールドの操作方法
作成した繰り返しフィールドは、通常のフィールドタイプと同様に入力や編集が可能です。
行を追加する
入力欄の行の追加したい場合は、右下の「行を追加」ボタンをクリックします。
フィールドセットの行が追加されます。
行を複製する
追加した行を削除したい場合は、右側のグレーの部分に表示される丸い「−」ボタンをクリックします。
マウスポインタをのせると「行を削除」と吹き出しが表示されるので、クリックして行を削除します。
行を複製する
行を入力値ごと複製したい場合は、右側に表示される「＋」（または四角が二つ重なったアイコン）のボタンをクリックします。
マウスポインタをのせると「Duplicate row」と吹き出しが表示されるので、クリックして行を複製します。
繰り返しフィールドの表示方法
入力した繰り返しフィールドは、ループを用いたコードをテンプレートファイルに記入して出力します。
以下は、出力コードのサンプルです。
<?php if( have_rows('field_logo') ): ?>
<?php while ( have_rows('field_logo') ) : the_row(); ?>
<a href="<?php the_sub_field('logo_url'); ?>">
<?php $logoImage = get_sub_field('logo_img'); ?>
<?php if ($logoImage) { ?>
<img src="<?php the_sub_field('logo_img'); ?>" alt="<?php the_sub_field('logo_name'); ?>">
<?php } else { ?>
<img src="<?php echo esc_url(get_stylesheet_directory_uri() . '/images/no-image.png'); ?>">
<?php } ?>
</a>
<?php endwhile; ?>
<?php endif; ?>はじめに、have_rows()で作成した繰り返しフィールドを取得します。「field_logo」部分は、作成した繰り返しフィールドのフィールド名を設定します。
繰り返しフィールドを取得できたら、whileのループでサブフィールドを出力します。
ループ内のthe_sub_field()で、サブフィールドの各入力値を出力します。引数には、フィールド名を設定します。
ロゴ画像の部分は、get_sub_field('logo_img')で取得した値をもとに条件分岐を設定しています。
