Pasar variables PHP a archivos JavaScript en WordPress

Para pasar variables PHP a archivos JavaScript podemos utilizar la función de WordPress wp_localize_script( $handle, $name, $data ).

Los parámetros de la función son:

$handle: el gestor, que debe coincidir con el nombre del gestor de nuestro archivo JavaScript cuando lo pongamos en cola.
$name: la variable (objeto) que va a contener los valores que le pasamos al archivo JavaScript.
$data: los valores que le vamos a pasar al archivo JavaScript. Puede ser una matriz unidimensional o múltiple.

La función wp_localize_script() la invocaremos en la función de puesta en cola de nuestro archivo JavaScript como se muestra en el siguiente código:

<?php
// Conector para poner en cola los scripts
add_action( 'wp_enqueue_scripts', 'variables_php_js');

// Función de puesta en cola
function variables_php_js(){

    // Ponemos en cola nuestro archivo JavaScript 'variables-php-js.js'
    wp_enqueue_script( 'variables-php-js', get_template_directory_uri() . '/js/variables-php-js.js', array( 'jquery' ), false, true );

    // Lo 'localizamos' (con el primer parámetro) y se crea un objeto 'pelicula' (2º parámetro) con los valores del array del tercer parámetro
    wp_localize_script( 'variables-php-js', 'pelicula', 
                array( 
                    'titulo' => 'Blade Runner',
                    'director' => 'Ridley Scott',
                ));

}
?>

En el código anterior, el primer parámetro de la función wp_localize_script() es el nombre del controlador de nuestro archivo JavaScript y el segundo parámetro es el objeto que contiene los datos del array del tercer parámetro. De esta manera, suponiendo que en una página tuviéramos un div con id=”cine”, el siguiente script (que estaría en el archivo variables-php-js.js) escribiría en el mismo Blade Runner (Ridley Scott).

jQuery(document).ready(function(){
    
    jQuery('#cine').html( pelicula.titulo + ' (' + pelicula.director + ')' );
	
});




Leave a Reply

Your email address will not be published. Required fields are marked *