【ACF Pro】繰り返しフィールドをショートコードを使ってブロックエディタ本文内に表示させたい

ブロックエディタ時代に突入してからは、WordPress管理画面上で、ブロックエディタ内のコンテンツの中で完結することが増え、クラシックテーマでやっていたpage-XXX.phpなどの固定ページを作ってそこにコンテンツ（HTMLや文章やPHPコード）をベタ書きする方法を使うことが減りました。

しかし、それで非常に困るのが、ACFプラグインによる繰り返しフィールドの結果などを、ブロックエディタ内＝the_content()の中に出力させたい時です。

WordPressブロックエディタ内のコンテンツの中にACFの結果を出力させるには現状「ショートコード化」しかありません。

そう考え、方法を海外サイトを探って見つけましたので、日本語でシェアします。

参考

An Advanced Custom Fields shortcode that allows to loop through a field with a repeater. This only handles simple cases, it can’t handle nested repeater fields

Gist

目次非表示

繰り返しフィールドをショートコードで出力する方法
コード参考元のリンク

繰り返しフィールドをショートコードで出力する方法

まずは、function.phpにコードを追加する

下記のコードをfunction.phpに必ず追加してください。

//ACFリピーターショートコード
function my_acf_repeater($atts, $content='') {
	extract(shortcode_atts(array(
	  "field" => null,
	  "sub_fields" => null,
	  "post_id" => null
	), $atts));
  
	if (empty($field) || empty($sub_fields)) {
	  // silently fail? is that the best option? idk
	  return "";
	}
  
	$sub_fields = explode(",", $sub_fields);
	
	$_finalContent = '';
  
	if( have_rows($field, $post_id) ):
	  while ( have_rows($field, $post_id) ) : the_row();
		
		$_tmp = $content;
		foreach ($sub_fields as $sub) {
		  $subValue = get_sub_field(trim($sub));
		  $_tmp = str_replace("%$sub%", $subValue, $_tmp);
		}
		$_finalContent .= do_shortcode( $_tmp );
  
	  endwhile;
	else :  
	  $_finalContent = "$field does not have any rows";
	endif;
  
	return $_finalContent;
  }
  
  add_shortcode("acf_repeater", "my_acf_repeater");

そしてACF Proの設定画面で、繰り返しフィールドを設定します。

※フィールドラベルはわかりやすくするため日本語でもOKですが、フィールド名はなるべく英語にしておいたほうが良いでしょう。

ショートコード例1（通常）

今度は、ブロックエディタの本文内に埋め込むショートコードタグを用意します。

ショートコード例

[acf_repeater field="フィールド名" sub_fields="サブフィールド名"  post_id="ポストIDの数字"]
%サブフィールド名%
[/acf_repeater]

フィールド名とサブフィールド名、そしてポストIDの数字を各自のACFのフィールドグループ追加画面で設定したものに書き換え、WordPressのエディタ内に「ショートコード」でペーストしてください。

エディタ内ではこんなイメージです

このショートコードタグ[ 括弧内 ]はフィールド名を通常通りに書きますが、表示させたい場合は%（パーセント）で囲むのがコツです。

また、ショートコードタグ[ 括弧 ]内外にはHTMLタグで囲むこともできるので、装飾はいかようにもできます。

うまくいかない例

ショートコードを埋め込みたいページと、ACF管理をしているページが異なる場合は、ACF管理をしているページのpost_idを必ず設定してください。
どちらも同じページの場合は指定が無くても動きますが、異なる場合に指定がないと「フィールド名does not have any rows」と出て、正しく動作しないです。

ショートコード例（複数のサブフィールド）

こちらはコード提供元のサンプルにあったショートコード例です。
カンマ区切りで複数指定できます。

ショートコード例

[acf_repeater field="example-row" sub_fields="example-name, example-phone, example-image"]
  User: %example-name%
  Phone: %example-phone%
  profile pic: %example-image%
[/acf_repeater]

応用編：サブフィールドも繰り返しにしてネストしたい場合

コード提供元の説明文によると、前項のfunctionコードのみでは繰り返しフィールドの中にさらに繰り返しサブフィールドを入れ子にネストさせることはできないと書いてあります。

但し、もう1つ名前を変えて定義し、[acf_sub_repeater]という名の入れ子を設定すると、以下のように使えるとのこと。

add_shortcode("acf_repeater", "my_acf_repeater");
add_shortcode("acf_sub_repeater", "my_acf_repeater"); //←ここにサブフィールド用をもう一個定義する

ショートコード例

[acf_repeater field="example-row" sub_fields="example-name,  example-phone"]
  <div class="user">User: %example-name%</div><div class="phone">Phone: %example-phone%</div>
  [acf_sub_repeater field="example-sub-row" sub_fields="sub-item1, sub-item2"]
    %sub-item1% %sub-item2%
  [/acf_sub_repeater]
   You can put nested repeaters adjacent to each other, you just can't nest it again. For that you'll need to make more shortcodes
  [acf_sub_repeater field="example-sister-row" sub_fields="sub-item1, sub-item2"]
    %sub-item1% %sub-item2%
  [/acf_sub_repeater]
[/acf_repeater]

注意点としては、[acf_repeater]の大きな入れ子の中に、サブフィールド用リピーター[acf_sub_repeater]を複数隣り合って配置はできるものの、それらを再度複雑な入れ子にすることは現状のコードのみではできないようです。
（＝入れ子の中にさらに入れ子に…と階層が深くなったり複雑にすることはできない）