この実装、面倒なら代行します
最近、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>
GoogleMap上でWordPressの値を表示したいときなどjavascriptを使ったコンテンツ表示の際にご活用ください。
WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!
100ウェブで手がけた制作・開発案件を一部、ご紹介。
クライアントからご相談いただいた内容とその実装におけるポイント、工期、予算について確認いただけます。
【テレワーク実施中 につきお電話転送中】
コール中1秒程度無音状態になりますがそのままお待ちください。
受付時間
平日 10:00~18:00
メールでのお問い合わせでも
1営業日以内にご連絡いたします。