Wordpress: Ein PHP-Array in JS-Funktion bekommen

Question

Ich möchte ein PHP-Array verwenden, das ich in der WP-Schleife in eine Javascript-Funktion, die ich in einer separaten js-Datei habe.

Das ist, wie ich meine PHP-Array-Echo (von Advanced Custom Fields) in der Schleife:

$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; ?> 

Im letzten Code würde dies wie folgt aussehen:

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

Aber ich muss Verwenden Sie die Bild-URLs in meinem Vegas Slider JQuery Plugin. Der Code ist in einer separaten Datei custom.js und sieht wie folgt aus:

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

Wie kann ich den Bild-URLs aus der PHP-Schleife in die jQuery-Plugin übergeben?

Danke für Ihre Hilfe! Cara

Answer 1

Ich kenne nicht die Struktur Ihres Arrays, aber Sie können json_encode($images) verwenden und die Daten in einer JS-Variablen mit wp_localize_script übergeben. So in functions.php Sie dies tun:

$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); 

Und dann in Ihrem Javascript-Datei custom.js können Sie bekommen, was Sie so brauchen:

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 
    }); 

Beachten Sie, dass die Antwortzeichenfolge mit JSON.parse zu analysieren haben .

Eine vereinfachte Lösung wäre, den Namen des url-src von ACF zu ändern, so müssen Sie sich nicht, dass die Schleife verwenden und die Schlüssel für das Objekt zu src ändern und dann können Sie nur my_images an dem Schieber Vegas anhängen init, wie folgt aus:

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

auch, wenn Sie mit den custom.js Skript auf andere Weise dann beispiels ich oben, entfernen Sie das, oder Sie erhalten die gleiche Antwort zweimal bekommen.

Es hängt wirklich von Ihrer Array-Struktur ab, aber das sollte funktionieren.

Sie können auch mehr über wp_localize_scripthere lesen.