ACF 繰り返しフィールドの表示方法

最終更新日 2020.12.22 - 公開日 2015.01.20

by Takumi Hirashima

WordPress プラグイン ACF の機能の１つ、繰り返しフィールド（Repeater Field、以下リピーターフィールド）の表示方法を紹介します。
例えば、カスタムフィールドを繰り返し入力したいときに便利な機能です。
表示方法と合わせて、値を取得する際に間違いやすい点や、対処方法や便利な使い方を紹介します。

リピーターフィールドとは？
リピーターフィールドの表示方法
foreach を使った基本的なループの表示方法（PHP foreach loop）
1. foreach で最初と最後を判断して処理する方法
配列の順番を逆にする方法
リピーターフィールドを入れ子にした場合の表示方法
表示結果をランダムにする方法
フィールド値をリセットする方法
配列の数を取得する方法
よく使うコードテンプレート

1.リピーターフィールドとは？

リピーターフィールドとは？

リピーターフィールドは Advanced Custom Fields の有料機能の一つです（昔はアドオンで、今はPRO版の機能）。
この機能を使うことで、投稿内でカスタムフィールドを自由に増やせるフィールドセットを作ることができます。

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_rows と the_row は ACF v4.3.0 で追加されました。

表示しているページと異なるページから値を取得する場合は、フィールド名の後にページIDを指定します。
例えば、ページIDが 123 のページから値を取得するには次のように指定します。

<?php if(have_rows('repeater_field_name',123)): ?>

<?php while(have_rows('repeater_field_name',123)): the_row(); ?>

-- 省略 --

入力が無い場合の処理

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

-- 省略 --

<?php endwhile; ?>

<?php else: ?>

<!-- 入力が無い場合の処理 -->

<?php endif; ?>

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

有料機能の Options Page（オプションページ）は、リピーターフィールドと組み合わせて使いたい機能の一つです。
オプションページは、投稿とは別に独立して管理ページを作成したい時に使えます。
次のコードは、リピーターフィールドとオプションページを組み合わせた場合の表示方法です。

<?php if(have_rows('repeater_field_name','option')): ?>

<?php while(have_rows('repeater_field_name','option')): the_row(); ?>

<?php the_sub_field('sub_field_name'); ?>

<?php endwhile; ?>

<?php endif; ?>

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

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

注意点

リピーターフィールドのループ内では、フィールドの取得に the_field ではなく the_sub_field を使用します。
同様に get_field は get_field ではなく get_sub_field を使用します。
表示が上手くいかない場合は大抵ここの記述ミスなので、表示が上手くいかないときはまずここをチェックしましょう。
後述するループを入れ子にした表示方法の際も the_sub_field や get_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'];

    }

  }

?>

foreach で最初と最後を判断して処理する方法

ループの最初と最後を判断して表示を分けたいときは reset や end を利用します。

<?php

  $rows = get_field('repeater_field_name');

  if($rows){

    foreach($rows as $row) {

      if($row === reset($array)){

        // 最初だよ

      }

      if($row === end($array)){

        // 最後だよ

      }

    }

  }

?>

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 や get_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() を使用します。
例えば、リピーターフィールドの繰り返しが３つの場合にクラス名に配列数を指定したいときなど、次のコードをリピーターフィールドの外に追加します。

<?php echo count(get_field('repeater_field_name')); ?>

リピーターフィールドや柔軟コンテンツで入れ子にしている場合は get_sub_field() に変更します。

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

リピーターフィールド内では値の取得がうまくいかないので気をつけましょう。

9.よく使うコードテンプレート

頻繁に使うであろうリピーターフィールドのコードテンプレートを紹介します。
サブフィールドの表示に条件分岐を使うときのテンプレートはこちら。

<?php if(have_rows('repeater_field_name')): ?>

<?php while(have_rows('repeater_field_name')): the_row(); ?>

<?php $text = get_sub_field('sub_field_name'); if( $text ){ echo $text; }?>

<?php endwhile; ?>

<?php endif; ?>

まとめ

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