¿Cómo usar wp_localize_script en una plantilla de página personalizada?

Question

¿Cómo usar wp_localize_script en una plantilla de página personalizada?

22 jun 2018, 15:07:56

Vistas: 31.8K

Votos: 10

Tengo una plantilla llamada homepage que está asignada a la página de inicio y al final de la plantilla tengo una etiqueta script. Ahora quiero usar mi JSON en esa etiqueta script.

home-template.php

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

    // Script cargado con datos localizados
    wp_enqueue_script( 'home_page_json' );
}
?>

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

wp_localize_script no se está cargando en mi página, he revisado el código fuente pero no se está mostrando.

Bhautik

217

javascript wp enqueue script json

Todas las respuestas a la pregunta

Comentarios

@Bhautik ¡Feliz de ayudar! Gracias por volver y aceptar la respuesta, mucha gente no hace eso. Espero que te quedes por aquí y ayudes a algunas personas tú mismo.

DaveLak

23 jun 2018 08:22:31

@DaveLake ¡Salud!!!!..

Bhautik

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

Luego usar:

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

Luego usar en el archivo 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

Según el código proporcionado, parece que estás malinterpretando cómo funciona wp_localize_script. La firma de la función es la siguiente:

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

Donde $handle es el nombre de un archivo JavaScript que has registrado o encolado antes de llamar a wp_localize_script. Echa un vistazo al ejemplo en el codex (he añadido números de línea abajo):

1: <?php
2: 
3: // Registrar el script
4: wp_register_script( 'some_handle', 'path/to/myscript.js' );
5: 
6: // Localizar el script con nuevos datos
7:  $translation_array = array(
8:    'some_string' => __( 'Algún texto para traducir', 'plugin-domain' ),
9:    'a_value' => '10'
10: );
11: wp_localize_script( 'some_handle', 'object_name', $translation_array );
12: 
13: // Script encolado con datos localizados.
14: wp_enqueue_script( 'some_handle' );

Observa la línea 4 arriba. Primero se registra un archivo JavaScript con el $handle 'some_handle'.
Luego, en la línea 11, se usa wp_localize_script() para registrar los datos de localización para el handle del script 'some_handle' registrado en la línea 4.
Finalmente, en la línea 14, se encola el archivo JavaScript (registrado en la línea 4). Como a wp_localize_script() se le pasó el mismo $handle registrado en la línea 4, WordPress incluye automáticamente los datos localizados en cada página donde se llame a wp_enqueue_script( 'some_handle' );.

En otras palabras, necesitas usar wp_localize_script con un archivo JavaScript registrado. No por sí solo como lo estás haciendo actualmente.

Esta cita de la sección de notas dice más o menos lo mismo:

¡IMPORTANTE! wp_localize_script() DEBE llamarse después de que el script haya sido registrado usando wp_register_script() o wp_enqueue_script().

Además, no creo que necesites usar json_encode() en tus $data. WordPress debería hacerlo por ti.