Wordpress：JS関数にphp配列を取得する

Question

私は別のjsファイルに持っている、JavaScript関数にWPループで取得しているPHP配列を使用したいと思います。

私は、ループ内（Advancedカスタムフィールドから）私のPHPの配列をエコーてる方法は次のとおりです。最終的なコードで

$images = get_field('galerie'); 
if($images): ?> 
    <?php 
    $i = 0; 
    foreach($images as $image): 
     $i++; 
     ?> 
     <div class="slider"> 
      <?php echo $image['url']; ?>');"> 
     </div> 
    <?php endforeach; ?> 
<?php endif; ?> 

これは次のようになります。

<div class="slider"> 
    THERE_GOES_THE_IMG_URL_1 
    THERE_GOES_THE_IMG_URL_2 
    THERE_GOES_THE_IMG_URL_3 
</div> 

しかし、私がする必要があります私のVegas Slider JQuery Pluginの画像URLを使用してください。コードは、別のcustom.jsファイル内にあり、次のようになります。

$(".slider").vegas({ 
     slides: [ 
      { src: "THERE_GOES_THE_IMG_URL_1" }, 
      { src: "THERE_GOES_THE_IMG_URL_2" }, 
      { src: "THERE_GOES_THE_IMG_URL_3" } 
     ] 
    }); 

がどのように私はjQueryのプラグインの中にPHPのループからの画像のURLを渡すことができますか？

ありがとうございました！ Cara

Answer 1

配列の構造はわかりませんが、json_encode($images)を使用して、wp_localize_scriptを使用してJS変数にデータを渡すことができます。

$images = get_field('galerie'); 
$images = json_encode($images); 

wp_enqueue_script('my_js_file', get_template_directory_uri() . '/js/custom.js'); 
$data_to_send = array(
    'images' => $images 
); 
wp_localize_script('my_js_file', 'object_name', $data_to_send); 

そしてあなたのJavaScriptファイルにcustom.jsあなたがこのように必要なものを得ることができます：あなたはJSON.parseを使用して応答文字列を解析する必要が

var my_images = JSON.parse(object_name.images); 
var imagesToAppend = []; 
for(var i = 0; i < my_images.length; i++){ 
    var img_src = my_images[i].url; 
    imagesToAppend[i] = { src: img_src }; 
} 
console.log(imagesToAppend); 
$(".slider").vegas({ 
     slides: imagesToAppend 
    }); 

お知らせだから、のfunctions.phpに、あなたはこれを行います。あなたがそのループを使用してsrcにオブジェクト用のキーを変更する必要はありませんし、その後あなただけのラスベガスのスライダーにmy_imagesを追加することができるように

単純化されたソリューションは、ACFからsrcにurlの名前を変更することであろう

var my_images = JSON.parse(object_name.images); 
$(".slider").vegas({ 
    slides: my_images 
}); 

また、あなたが他の方法でcustom.jsスクリプトを含めている場合、私は上記に例示し、これを削除してください、またはあなたが二度同じ応答を取得します。このようなINIT、。

本当に配列構造によって異なりますが、これはうまくいくはずです。

さらに、wp_localize_scripthereについても読むことができます。