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も期待大です!