最近、GoogleMapAPIに複数の地域情報をプロットして表示させたい、というお客さんがいましたので、今回はカスタムフィールドの配列をjavascriptに渡す方法について。
方法自体は、WordPressに限らずPHPからjavascriptに変数を渡すときには一般に使う方法ですけど、少しWordPressテイストを混ぜてご紹介します。
　
カスタムフィールドの繰り返し要素の定義はアドバンストカスタムフィールドのAdvanced Custom Fields: Repeater Fieldというプラグインでおこないます。
※ 2023年4月のAdvanced Custom Fieldsのアップデートで Repeater Fieldプラグインは使えなくなりました。代わりに有償版のAdvanced Custom Fields PROにRepeater Field が標準で組み込まれています。

参考：記事投稿で、タイトルと本文入力のフォームの繰り返しを実装するためのカスタムフィールドプラグイン
　
該当するテンプレートファイルの適当な位置に以下のように記載します。

<?php
$ad_arr = array();
$ad_num = 0;

if( have_rows('sidefacil')){

    while( have_rows('sidefacil') ) {

        the_row();

        $sidefacil_img_id = get_sub_field('sidefacil_img');
        $size = "thumbnail";
        $sd_image = wp_get_attachment_image_src($sidefacil_img_id, $size);
        $sidefacil_name = get_sub_field('sidefacil_name');
        
        $ad_arr[$ad_num]['sd_image'] = $sd_image[0];
        $ad_arr[$ad_num]['sidefacil_name'] = $sidefacil_name;

        $ad_num++;

    }

    $ads = json_encode($ad_arr);
}
?>

<script>
    var ads=JSON.parse('<?php echo $ads; ?>');
    var i=0;

    while(i < <?php echo $ad_num; ?>) {

        var ad = ads[i];
        functionName(ad.sidefacil_name,ad.sd_image);

        i++;
    }
</script>

1. まずカスタムフィールドから取り出した値を ad_arr に連想配列で格納します。
2. json_encode でJSONに変換します。
3. javascript側で JSON.parse でJSONを受け取ります。

　
　
GoogleMap上でWordPressの値を表示したいときなどjavascriptを使ったコンテンツ表示の際にご活用ください。