Cum să folosești wp_localize_script într-un șablon personalizat de pagină?

Question

Cum să folosești wp_localize_script într-un șablon personalizat de pagină?

22 iun. 2018, 15:07:56

Vizualizări: 31.8K

Voturi: 10

Am un șablon numit homepage care este atribuit paginii principale și la sfârșitul șablonului am un tag script. Acum vreau să folosesc JSON-ul meu în acel tag script.

home-template.php

<?php
add_action('wp_enqueue_scripts', 'pass_var_to_js',99);
function pass_var_to_js() {
    // Localizează scriptul cu date noi
    $translation_array = array(
        'popularDestination' => json_encode($data['POPULAR DESTINATIONS']),
    );
    wp_localize_script( 'home_page_json', 'home', $translation_array );

    // Script încărcat cu date localizate
    wp_enqueue_script( 'home_page_json' );
}
?>

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

wp_localize_script nu este încărcat în pagina mea, am verificat view-source dar nu este afișat.

Bhautik

217

javascript wp enqueue script json

Toate răspunsurile la întrebare

Comentarii

@Bhautik Mă bucur să te ajut! Mulțumesc că te-ai întors și ai acceptat răspunsul, mulți oameni nu fac asta. Sper să rămâi pe aici și să ajuți și tu alți oameni!

DaveLak

23 iun. 2018 08:22:31

@DaveLake Noroc!!!!..

Bhautik

16 iul. 2018 11:54:25

wp_register_script('nags-quoting-main-js', NAGS_QUOTING_PLUGIN_URL . 'assets/js/main.js', array(), '', true);

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

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

Apoi folosește:

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

Apoi folosește în fișierul JS:

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

Pe baza codului furnizat, se pare că nu înțelegeți corect cum funcționează wp_localize_script. Semnătura funcției arată astfel:

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

Unde $handle este numele unui fișier JavaScript pe care l-ați înregistrat sau adăugat în coadă înainte de a apela wp_localize_script. Aruncă o privire la exemplul din codex (am adăugat numere de linie mai jos):

1: <?php
2: 
3: // Înregistrează scriptul
4: wp_register_script( 'some_handle', 'path/to/myscript.js' );
5: 
6: // Localizează scriptul cu date noi
7:  $translation_array = array(
8:    'some_string' => __( 'Un șir de tradus', 'plugin-domain' ),
9:    'a_value' => '10'
10: );
11: wp_localize_script( 'some_handle', 'object_name', $translation_array );
12: 
13: // Adaugă scriptul în coadă cu datele localizate.
14: wp_enqueue_script( 'some_handle' );

Uită-te la linia 4 de mai sus. În primul rând, un fișier JavaScript este înregistrat cu $handle-ul 'some_handle'.
Apoi, pe linia 11, wp_localize_script() este folosit pentru a înregistra datele de localizare pentru handle-ul de script 'some_handle' înregistrat pe linia 4.
În final, pe linia 14, fișierul JavaScript (înregistrat pe linia 4) este adăugat în coadă. Deoarece wp_localize_script() a primit același $handle înregistrat pe linia 4, WordPress include automat datele localizate pe fiecare pagină unde este apelat wp_enqueue_script( 'some_handle' );.

Cu alte cuvinte, trebuie să folosiți wp_localize_script împreună cu un fișier JavaScript înregistrat. Nu separat, așa cum faceți în prezent.

Acest citat din secțiunea de note spune mai mult sau mai puțin același lucru:

IMPORTANT! wp_localize_script() TREBUIE apelată după ce scriptul a fost înregistrat folosind wp_register_script() sau wp_enqueue_script().

De asemenea, nu cred că este nevoie să folosiți json_encode() pentru $data. WordPress ar trebui să facă asta pentru voi.