Come utilizzare wp_localize_script nel template personalizzato di una pagina?

Question

Come utilizzare wp_localize_script nel template personalizzato di una pagina?

22 giu 2018, 15:07:56

Visualizzazioni: 31.8K

Voti: 10

Ho un template chiamato homepage assegnato alla home page e alla fine del template ho un tag script. Ora voglio utilizzare il mio JSON in quel tag script.

home-template.php

<?php
add_action('wp_enqueue_scripts', 'pass_var_to_js', 99);
function pass_var_to_js() {
    // Localizza lo script con nuovi dati
    $translation_array = array(
        'popularDestination' => json_encode($data['POPULAR DESTINATIONS']),
    );
    wp_localize_script( 'home_page_json', 'home', $translation_array );

    // Script accodato con dati localizzati
    wp_enqueue_script( 'home_page_json' );
}
?>

<script type="text/javascript">
var data = home.popularDestination;
</script>

wp_localize_script non viene caricato nella mia pagina, ho controllato il sorgente della pagina ma non viene visualizzato.

Bhautik

217

javascript wp enqueue script json

Tutte le risposte alla domanda

Commenti

@Bhautik Felice di aiutare! Grazie per essere tornato e aver accettato la risposta, molte persone non lo fanno. Spero che tu rimanga qui e aiuti qualcuno a tua volta!

DaveLak

23 giu 2018 08:22:31

@DaveLake Salute!!!!..

Bhautik

16 lug 2018 11:54:25

// Registra lo script principale del plugin di quotazione
wp_register_script('nags-quoting-main-js', NAGS_QUOTING_PLUGIN_URL . 'assets/js/main.js', array(), '', true);

// Prepara i dati da passare allo script JavaScript
$nags_post_url =  NAGS_QUOTING_PLUGIN_URL . 'post.php';
$use_google_api_key = get_option(NAGS_QUOTING_PLUGIN_NAME . '_use_google_api_key');
$google_api_key = get_option(NAGS_QUOTING_PLUGIN_NAME . '_google_api_key');

// Localizza lo script con i dati necessari
wp_localize_script('nags-quoting-main-js', 'nags_quoting_plugin_data', array(
    'nags_post_url' => $nags_post_url,
    'use_google_api_key' => $use_google_api_key,
    'google_api_key' => $google_api_key,
));

Quindi utilizza:

// Verifica se la pagina utilizza il template specifico e carica lo script
if ( is_page_template( 'page-templates/nags-quoting.php' ) ) {
    if( ! wp_script_is( 'nags-quoting-main-js', 'enqueued' ) ) {
        wp_enqueue_script('nags-quoting-main-js');
    }
}

Quindi utilizza nel file JS:

// Recupera i dati localizzati da WordPress
const nags_post_url =  nags_quoting_plugin_data.nags_post_url;
const use_google_api_key = nags_quoting_plugin_data.use_google_api_key;
const google_api_key = nags_quoting_plugin_data.google_api_key;

Rajon Kobir

21

18 feb 2024 22:17:57

DaveLak 1.06K · Accepted Answer · 2018-06-22T21:10:25Z

Dal codice fornito sembra che tu abbia frainteso come funziona wp_localize_script. La firma della funzione è la seguente:

wp_localize_script( $handle, $name, $data );

Dove $handle è il nome di un file JavaScript che hai registrato o accodato prima di chiamare wp_localize_script. Dai un'occhiata all'esempio nel codex (ho aggiunto i numeri di riga qui sotto):

1: <?php
2: 
3: // Registra lo script
4: wp_register_script( 'some_handle', 'path/to/myscript.js' );
5: 
6: // Localizza lo script con nuovi dati
7:  $translation_array = array(
8:    'some_string' => __( 'Una stringa da tradurre', 'plugin-domain' ),
9:    'a_value' => '10'
10: );
11: wp_localize_script( 'some_handle', 'object_name', $translation_array );
12: 
13: // Script accodato con dati localizzati.
14: wp_enqueue_script( 'some_handle' );

Guarda la riga 4 sopra. Prima viene registrato un file JavaScript con l'$handle 'some_handle'.
Poi, alla riga 11, viene usato wp_localize_script() per registrare i dati di localizzazione per lo script con handle 'some_handle' registrato alla riga 4.
Infine, alla riga 14, il file JavaScript (registrato alla riga 4) viene accodato. Poiché wp_localize_script() ha ricevuto lo stesso $handle registrato alla riga 4, WordPress include automaticamente i dati localizzati in ogni pagina dove viene chiamato wp_enqueue_script( 'some_handle' );.

In altre parole, devi usare wp_localize_script insieme a un file JavaScript registrato. Non da solo come stai facendo attualmente.

Questa citazione dalla sezione delle note dice più o meno la stessa cosa:

IMPORTANTE! wp_localize_script() DEVE essere chiamato dopo che lo script è stato registrato usando wp_register_script() o wp_enqueue_script().

Inoltre, non credo che tu abbia bisogno di usare json_encode() sui tuoi dati $data. WordPress dovrebbe occuparsene per te.