【ACF Pro】繰り返しフィールドをショートコードでブロックエディタ内に出力する方法【コピペOK】

ブロックエディタが主流になってからは、WordPress管理画面上でコンテンツを完結させる機会が増え、クラシックテーマでよく使っていた page-XXX.php などの固定ページテンプレートにHTMLやPHPをベタ書きする方法は使わなくなりました。

しかし、そこで困るのが ACF Proの繰り返しフィールド（リピーター）の内容を、ブロックエディタ内（the_content()）に出力したい場合です。

現状、ブロックエディタの本文内に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)) {
        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} には行データがありません";
    endif;

    return $_finalContent;
}
add_shortcode("acf_repeater", "my_acf_repeater");

コードを追加したら、ACF Proの設定画面で繰り返しフィールドを設定します。

ポイント： フィールドラベルはわかりやすい日本語でも問題ありませんが、フィールド名（スラッグ）は英数字にしておくことをおすすめします。

ショートコードの使い方（基本）

function.phpへの追加が完了したら、ブロックエディタの本文内に「ショートコード」ブロックを使って以下を埋め込みます。

ショートコード例

[acf_repeater field="フィールド名" sub_fields="サブフィールド名" post_id="投稿ID"]
  %サブフィールド名%
[/acf_repeater]

field・sub_fields・post_id の値は、ACFのフィールドグループ設定画面で設定したものに置き換えてください。

コツ： ショートコードタグ [ ] の中はフィールド名をそのまま記述しますが、実際に出力したい箇所は %（パーセント） で囲むのがポイントです。また、タグの内外にHTMLを記述できるので、装飾も自由に対応できます。

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

ショートコードを埋め込むページとACF管理ページが異なる場合

ショートコードを埋め込むページと、ACFでフィールドを管理しているページが異なる場合は、post_id を必ず指定してください。

同一ページであれば post_id の指定がなくても動作しますが、異なるページで省略すると以下のようなエラーが表示され、正しく出力されません。

フィールド名 には行データがありません

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

サブフィールドが複数ある場合は、sub_fields にカンマ区切りで指定できます。

ショートコード例

[acf_repeater field="example-row" sub_fields="example-name, example-phone, example-image"]
  名前：%example-name%
  電話：%example-phone%
  画像：%example-image%
[/acf_repeater]

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

前述のfunctionコードだけでは、繰り返しフィールドの中にさらに繰り返しサブフィールドをネストさせることはできません。

ただし、function.phpに acf_sub_repeater という名前で同じ関数をもう一つ登録することで、1段階のネストまで対応できます。

add_shortcode("acf_repeater",     "my_acf_repeater");
add_shortcode("acf_sub_repeater", "my_acf_repeater"); // ← サブフィールド用にもう1つ定義

ショートコード例

[acf_repeater field="example-row" sub_fields="example-name, example-phone"]
  <div class="user">名前：%example-name%</div>
  <div class="phone">電話：%example-phone%</div>

  [acf_sub_repeater field="example-sub-row" sub_fields="sub-item1, sub-item2"]
    %sub-item1% %sub-item2%
  [/acf_sub_repeater]

  [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] を複数並べることはできますが、さらにその中にネストを重ねる（3階層以上）ことは現状のコードでは対応していません。ネストが複雑になる場合は、フィールド設計を見直すか、別の実装方法を検討することをおすすめします。