ACFのリピーターフィールドに登録されている内容を変更して出力する

ACF(Advanced Custom Fields)とは

WordPressのプラグインで、通称ACFとも呼ばれています。
https://www.advancedcustomfields.com/

カスタムフィールドが簡単に作成でき、入力方法を様々選べるので
CMS作成には打って付けのプラグインです。

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

ACF PRO版に追加されている機能です。 名前の通り、カスタムフィールドをコンテンツ内で繰り返し何度も使用できるフィールドになります。

Aコンテンツでは10人分の情報を入力するけど、Bコンテンツでは20人分のコンテンツを登録際など、意外に便利で使用箇所は多くあります。

実際にどのような動きをするか、ACFの公式動画を確認してみてください。
これをjavascript、phpで作ろうと思うとちょっとゲンナリします・・笑

リピーターフィールドの基本的な使い方

フィールドの登録

今回は以下のようにフィールドを設定しました。

登録されたリピーターフィールドをテーマ側で表示する場合、以下のようなコードを書きます。

// 1行以上データがあるか確認
if( have_rows('repeater') ):
    ?>
    <table>
        <tr>
            <th>sub1</th>
            <th>sub2</th>
        </tr>
    <?php
    // 1行ずつ表示
    while ( have_rows('repeater') ) : the_row();
        ?>
        <tr>
            <td><?php the_sub_field('sub1'); ?></td>
            <td><?php the_sub_field('sub2'); ?></td>
        </tr>
        <?php
    endwhile;
else :
// 1行も無いときの処理
endif;

以下のようなテーブルが表示されます。

sub1	sub2
サブ1-1	サブ2-1
サブ1-2	サブ2-2

リピーターフィールドの出力内容を変更する

リピーターフィールドの登録した内容を表示する際に
ひと手間入れて、登録された情報意外も出力してみようと思います。

使用するhook

ACFにはacf/load_valueというフィルターフックが用意されています。
このhookで、リピーターフィールドの読み込まれ方を確認してみます。

読み込まれ方を出力

フィルターフックacf/load_valueを使用して、中身を見ていきたいと思います。

function my_acf_load_value( $value, $post_id, $field ) {    
    var_export( $value );exit();
}
add_filter( 'acf/load_value/name=repeater', 'my_acf_load_value', 10, 3 );

以下のように出力されました。

array (
  0 => 
  array (
    'field_5cd24d3745022' => 'サブ1-1',
    'field_5cd24d4a45023' => 'サブ2-1',
  ),
  1 => 
  array (
    'field_5cd24d3745022' => 'サブ1-2',
    'field_5cd24d4a45023' => 'サブ2-2',
  ),
)

phpで扱いやすい形で渡されてて、行の追加、削除の行い方がイメージしやすいです。

出力内容を変更する

フィルターフックacf/load_valueを使用して、先頭にダミー行を追加してみようと思います。

function my_acf_load_value( $value, $post_id, $field ) {
    if ( !is_admin() ) {
        $add = [
            $field['sub_fields'][0]['key'] => 'ダミー1',
            $field['sub_fields'][1]['key'] => 'ダミー2',
        ];
        array_unshift( $value, $add );
    }

    return $value;
}
add_filter( 'acf/load_value/name=repeater', 'my_acf_load_value', 10, 3 );

以下のようなテーブルが表示されました。

sub1	sub2
ダミー1	ダミー2
サブ1-1	サブ2-1
サブ1-2	サブ2-2

まとめ

登録されていないデータをリピーターフィールドに追加する方法について紹介しました。

今回はリピーターフィールドに登録されていない行の追加を行いましたが
他にも登録済みの行を削除して表示したり、各行の内容を変更して出力することも簡単にできます。

余談ですが、GutenbergのblockをACFで作成する機能がリリースされたようです。
今後のACFも期待大です！