Advanced Custom Feld のアドオン Repeater Field の表示方法

Advanced Custom Feld のアドオン Repeater Field の表示方法

WordPress のプラグイン ACF のアドオン Repeater Field(リピーターフィールド)の表示方法を紹介します。
例えば、カスタムフィールドの値を繰り返し入力できるようにしたい場合に便利な機能です。
基本的な表示方法と合わせて、値を取得する際に間違いやすい点や対処方法を紹介します。

  1. Repeater Field とは?
  2. リピーターフィールドの表示方法と注意点
    1. リピーターフィールドの基本的な表示方法
    2. 入力が無い場合の処理
    3. リピーターフィールドと有料アドオンのオプションページを使った場合の表示方法
    4. 注意点
  3. foreach を使った基本的なループの表示方法(PHP foreach loop)
  4. 配列の順番を逆にする方法
  5. リピーターフィールドを入れ子にした場合の表示方法
  6. 表示結果をランダムにする方法
  7. フィールド値をリセットする方法
  8. 配列の数を取得する方法

1.Repeater Field とは?

Repeater Field とは?

Repeater Field は Advanced custom field の有料アドオンの一つ。
このアドオンはカスタムフィールドを自由に増やせるフィールドセットを作ることができます。

2.リピーターフィールドの表示方法と注意点

リピーターフィールドの基本的な表示方法と、表示がうまくいかない時に確認したい注意点を紹介します。

リピーターフィールドの基本的な表示方法

リピーターフィールドの基本的な表示方法を紹介します。
表示するためのループには while 文を使います。
次のコードは、リピーターフィールド名 repeater_field_name、なかに設定したフィールド名が sub_field_name の場合の表示方法です。

<?php if(have_rows('repeater_field_name')): ?>
<?php while(have_rows('repeater_field_name')): the_row(); ?>
<?php the_sub_field('sub_field_name'); ?>
<?php endwhile; ?>
<?php endif; ?>

※関数 have_rowsthe_row は ACF v4.3.0 で追加されました。

入力が無い場合の処理

リピーターフィールドに値の入力がない場合の処理を追加するには endwhile の後に else を追加します。

-- 省略 --
<?php endwhile; ?>
<?php else: ?>
<!-- 入力が無い場合の処理 -->
<?php endif; ?>

リピーターフィールドと有料アドオンのオプションページを使った場合の表示方法

有料アドオンの Options Page(オプションページ)は、リピーターフィールドと組み合わせて使いたいアドオンの一つです。
オプションページは、投稿とは別に独立して管理できるバナーなどを設置したい場合に使える便利な機能です。
次のコードは、リピーターフィールドとオプションページを組み合わせた場合の表示方法です。

<?php if(have_rows('repeater_field_name','options')): ?>
<?php while(have_rows('repeater_field_name','options')): the_row(); ?>
<?php the_sub_field('sub_field_name'); ?>
<?php endwhile; ?>
<?php endif; ?>

※有料アドオンのオプションページを使用する場合は options を追加します。これが以外と忘れがちなので気をつけましょう。

オプションページの詳しい使い方は Advanced Custom Feld のアドオン Options Page の表示方法をご覧ください。

注意点

リピーターフィールドのループ内では、フィールドの取得に the_field ではなく the_sub_field を使用します。
フィールドの表示が上手くいかない時は大抵この部分の記述ミスなので、表示が上手くいかないときはまずここをチェックしましょう。
後述するループを入れ子にした表示方法の際も the_sub_field を使用します。

3.foreach を使った基本的なループの表示方法(PHP foreach loop)

foreach を使った基本的なループの表示方法を紹介します。

<?php
$rows = get_field('repeater_field_name');
if($rows){
foreach($rows as $row) {
echo $row['sub_field'];
}
}
?>

4.配列の順番を逆にする方法

配列の順番を逆にする場合は array_reverse を使用します。
次のコードは、配列の値を逆にして表示する方法です。

<?php // 配列の順番を逆にする
$rows = get_field('repeater_field_name');
if($rows){
$rows = array_reverse($rows); // 配列の順番を逆にする
foreach($rows as $row) {
echo $row['sub_field'];
}
}
?>

5.リピーターフィールドを入れ子にした場合の表示方法

リピーターフィールドを入れ子にした場合の表示方法を紹介します。
次のコードは、親のリピーターフィールド名が親、子のフィールド名が子、親と子に設定したフィールド名が sub_field_name1 と sub_field_name2 にした場合の表示方法です。

<?php if(have_rows('親')): ?>
<?php while(have_rows('親')): the_row(); ?>
<?php the_sub_field('sub_field_name1'); ?>
<?php if(have_rows('子')): ?>
<?php while(have_rows('子')): the_row(); ?>
<?php the_sub_field('sub_field_name2'); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

ループを入れ子にした場合は the_sub_field を使用します、ご注意ください。

6.表示結果をランダムにする方法

リピーターフィールドに入力した値の表示結果をランダムにする方法を紹介します。
次のコードは、リピーターフィールド名がテキストセット、フィールド値がテキストの場合の表示方法です。

<?php // 表示結果をランダムにする
$rows = get_field('テキストセット'); // 配列を格納
$rand_row = $rows[array_rand($rows)]; // 配列からランダムで値を取得
$rand_comment = $rand_row['テキスト']; // フィールド名を指定して値を取得
echo $rand_comment; // 値を表示
?>

次のコードは、リピーターフィールド名が画像セット、フィールド値が画像の場合の表示方法です。

<?php // 表示結果をランダムにする
$rows = get_field('画像セット'); // 配列を格納
$rand_row = $rows[array_rand($rows)]; // 配列から値をランダムに取得
$rand_row_image = $rand_row['画像']; // フィールド名を指定して値を取得
$image = wp_get_attachment_image_src( $rand_row_image, 'full' ); // フルサイズの画像を取得
$image_url = $image[0]; // 画像のURLを取得
?>
<img src="<?php echo $image_url; ?>" />

7.フィールド値をリセットする方法

ループを途中で中断した場合、ループを再開すると中断した位置からループが再開されます。
ループを最初に戻して再開したい場合は reset_rows() を使用します。
例えば、最初のループを break で中断した場合に、あらためて have_rows() で再開する場合は、中断したループの endwhile の後に reset_rows() を指定します。

<?php if(have_rows('repeater_field_name')): ?>
<?php while(have_rows('repeater_field_name')): the_row(); ?>
<?php the_sub_field('sub_field_name'); ?>
<?php break; ?>
<?php endwhile; ?>
<?php reset_rows(); ?>
<?php endif; ?>
<!-- フィールド値をリセットして再開 -->
<?php if(have_rows('repeater_field_name')): ?>
<?php while(have_rows('repeater_field_name')): the_row(); ?>
<?php the_sub_field('sub_field_name'); ?>
<?php endwhile; ?>
<?php endif; ?>

8.配列の数を取得する方法

リピーターフィールドの配列の数を取得するには PHP の関数 count() を使用します。
例えば、クラス名に配列の数を指定したい場合に便利な方法です。
次のコードは、リピーターフィールドの配列が三つあれば数字の3を取得して表示します。

<?php echo $row_count = count(get_sub_field('repeater_field_name')); ?>

まとめ

WordPress のプラグイン ACF のアドオン Repeater Field の表示方法を紹介しました。
表示方法にやや癖がありますが the_fieldthe_sub_field の使い分けができていれば、表示でつまずくことはないと思います。
表示がうまくいかない時はまず「フィールド名を間違えている」「フィールドタイプに合わせた記述ができていない」などを疑ってみましょう。
その他に ACF を使ったカスタムフィールドの詳しい表示方法は Advanced custom field の表示方法 をご覧ください。

Advanced custom field の表示方法

スポンサーリンク

私が続けて読みたい関連記事

私が続けて読みたい関連記事