Versuchen, eine in einem benutzerdefinierten Beitrag definierte PHP-Variable in eine JavaScript-Datei zu importieren. Nullwert Verwenden von wp_localize_script

Ich versuche, eine PHP-Variable zu erhalten, die aus einigen benutzerdefinierten Feldern auf einer benutzerdefinierten Seite ( page-custom.php ) erstellt wird, die in eine Javascript-Datei eingefügt wird.

Die benutzerdefinierten Felder funktionieren einwandfrei, und die Bilder werden auf der Seite angezeigt, aber ich kann sie nicht in meine Javascript-Datei aufnehmen.

In meiner header.php an der Spitze habe ich:

  function drum_scripts() { wp_enqueue_script( 'animated', get_template_directory_uri() . '/js/animated.js' ); wp_localize_script('animated', 'MyScriptParams', array( 'foo' => $meta['image'], ) ); } add_action( 'wp_enqueue_scripts', 'drum_scripts' ); 

In meinem Javascript habe ich:

  $(function() { $(".animated").hover( function() { $(this).attr("src", MyScriptParams.foo); }, function() { $(this).attr("src", "img/gallery1_500px.jpg"); } ); }); 

und in page-custom.php ich:

  $custom_query = new WP_Query( $args ); while ($custom_query->have_posts()) : $custom_query->the_post(); $meta = get_post_meta( $post->ID, 'your_fields', true ); 

Das Javascript funktioniert, aber es zieht die Variable nicht durch. Ich weiß, dass es etwas mit der Reihenfolge des Codes zu tun hat, aber ich bin mir nicht sicher, wo ich es hinstellen soll.

Hier ist der vollständige Code für die Seite-custom.php

   
'drummers', 'orderby' => 'menu_order', 'order' => 'ASC' ); $custom_query = new WP_Query( $args ); while ($custom_query->have_posts()) : $custom_query->the_post(); //GETS THE POST ID FROM WP_QUERY $post_id = get_the_ID(); //PULLS THE DATA FROM THE CUSTOM FIELDS BOX ON DRUMMERS PAGE $meta = get_post_meta( $post->ID, 'your_fields', true ); wp_localize_script('animated', 'MyScriptParams', array( 'foo' => $meta['image'] ) ); echo $meta['image'];echo $meta['image'];echo $meta['image']; ?>
"img-fluid animated drummers_face$post_id")); } ?> <h2 class="drummers_face_detail"><a href="https://wordpress.stackexchange.com/questions/256104/trying-to-get-a-php-variable-defined-in-a-custom-post-into-a-javascript-file-nu/">

View details »

Text Input


<img src="https://wordpress.stackexchange.com/questions/256104/trying-to-get-a-php-variable-defined-in-a-custom-post-into-a-javascript-file-nu/"> https://wordpress.stackexchange.com/questions/256104/trying-to-get-a-php-variable-defined-in-a-custom-post-into-a-javascript-file-nu/

Solutions Collecting From Web of "Versuchen, eine in einem benutzerdefinierten Beitrag definierte PHP-Variable in eine JavaScript-Datei zu importieren. Nullwert Verwenden von wp_localize_script"

Hinzufügen von JavaScript mit wp_enqueue_script :

Erstens, obwohl es funktionieren könnte (wenn Sie es vor dem Aufruf von wp_head() hinzufügen), aber Sie sollten nie wp_enqueue_script CODE in header.php . Verwenden Sie hierfür die Datei functions.php theme.

Zweitens ist die folgende Zeile in Ihrem CODE problematisch:

 wp_enqueue_script( 'animated', get_template_directory_uri() . '/js/animated.js' ); 

Da Sie jQuery in Ihrer Datei animated.js verwendet haben, müssen Sie WordPress sagen, dass es von jQuery abhängt. So machen Sie das mit CODE:

 wp_enqueue_script( 'animated', get_template_directory_uri() . '/js/animated.js', array( 'jquery' ) ); 

Drittens haben Sie in page-custom.php Vorlagendatei page-custom.php die $meta Variable zugewiesen, so dass Sie danach nur wp_localize_script aufrufen wp_localize_script , da die Variable andernfalls null bleibt. Da diese Vorlagendatei auch nach header.php , müssen Sie /js/animated.js in der Fußzeile wie /js/animated.js hinzufügen:

 wp_enqueue_script( 'animated', get_template_directory_uri() . '/js/animated.js', array( 'jquery' ), null, true ); 

Ihr abschließender /js/animated.js zum Hinzufügen von /js/animated.js (in functions.php ):

  // This CODE should be in functions.php file function drum_scripts() { wp_enqueue_script( 'animated', get_template_directory_uri() . '/js/animated.js', array( 'jquery' ), null, true ); } add_action( 'wp_enqueue_scripts', 'drum_scripts' ); 

Platzieren von wp_localize_script sobald auf die Variable wp_localize_script werden kann:

Da Sie die $meta Variable in page-custom.php Datei ” page-custom.php , sollten Sie den Aufruf von wp_localize_script dort hinzufügen:

  $custom_query = new WP_Query( $args ); while ($custom_query->have_posts()) : $custom_query->the_post(); $meta = get_post_meta( $post->ID, 'your_fields', true ); // $meta[image] is only accessible after the above CODE is executed wp_localize_script('animated', 'MyScriptParams', array( 'foo' => $meta['image'] ) ); 

JavaScript CODE mit jQuery:

jQuery Variable jQuery $ darf in diesem Bereich nicht definiert sein. Also anstatt diesen CODE zu verwenden:

  $(function() { $(".animated").hover( function() { $(this).attr("src", MyScriptParams.foo); }, function() { $(this).attr("src", "img/gallery1_500px.jpg"); } ); }); 

Verwenden Sie den folgenden CODE in der Datei /js/animated.js Ihres Themes:

  (function($) { // assuming you have .animated CSS class in the right place $(".animated").hover( function() { $(this).attr("src", MyScriptParams.foo); }, function() { $(this).attr("src", "img/gallery1_500px.jpg"); } ); })(jQuery); 

Wenn nun alles andere in Ihrem CODE in Ordnung ist, sollte der geänderte CODE funktionieren.

Sie können WordPress Ausführungsreihenfolge von hier lernen, wenn Sie wissen wollen, was wo passiert.

Aktualisieren:

Ihre page-custom.php sieht überhaupt nicht gut aus. Definitiv gibt es Fehler in Ihrer PHP-Datei und viele Fehler – was für diese Frage nicht möglich ist. Um jedoch sicherzustellen, dass wp_localize_script funktioniert, verwenden Sie diesen einfachen CODE unten für die page-custom.php Datei (nur diesen CODE, nicht Ihren CODE):

  < ?php get_header(); ?>  
< ?php wp_localize_script('animated', 'MyScriptParams', array( 'foo' => "It Works!" ) ); ?>
< ?php get_footer(); ?>

Die Faustregel zum Debuggen eines Problems besteht darin, einfache Dinge zuerst richtig zu machen und dann daraus aufzubauen. Wir können nicht viele Probleme gleichzeitig beheben. Wenn nach der Verwendung des obigen CODE Ihre Warnung ist It Works! Dann wirst du sicher wissen, dass das Problem in deinem PHP CODE liegt.