Si eres una persona que se dedica a crear temas, plugins o te gusta jugar con el código, seguro que te ha surgido la necesidad de pasar a tu fichero JavaScript, por ejemplo, la ruta del tema, la clave de Google Maps o alguna traducción, que tienes en el CMS.
Para evitar complicaciones, puedes abrir y cerrar una etiqueta <script> en cualquier sitio de tu código PHP de la siguiente forma.
<script>
const template_uri = "<?php echo get_bloginfo( 'template_directory' ); ?>";
const key_map = "<?php echo KEY_MAPS; ?>";
</script>¿Es una forma válida?, sí, pero un poco «sucia», y si luego necesitas saber dónde está el código tienes que buscarlo. Y como todos los caminos llevan a Roma, vamos a explorar las diferentes vías.
Utilizando wp_print_scripts
Este método es la que se utiliza desde hace tiempo para agregar scripts directamente en el código de la página. El gancho wp_print_scripts para el frontal y admin_print_scripts para la parte de administración.
El ejemplo anterior sería así:
<?php
// inline script con wp_print_scripts
function wp_es_print_scripts() {
?>
<script>
const template_uri = "<?php echo get_bloginfo( 'template_directory' ); ?>";
const key_map = "<?php echo KEY_MAPS; ?>";
</script>
<?php
}
add_action('wp_print_scripts', 'wp_es_print_scripts');Dentro de la función wp_es_print_scripts definimos las dos variables de JavaScript. Dicha función imprime un script en línea dentro de la página web y se ejecuta gracias al gancho wp_print_scripts.
Hay que tener en cuenta que este código debe estar dentro de un archivo PHP.
Ventajas
Siempre y cuando tengas en tu tema la función wp_head, el script se añadirá dentro de la etiqueta HTML <head>.
Puedes añadir variables JavaScript, condiciones, métodos, funciones o lo que quieras. Recuerda siempre que sea código, con el peligro y ventaja de no tener restricciones.
Desventajas
Al no poder asociar el código a ningún script registrado, es complicado controlar la posición del mismo en el HTML, por lo que se puede ejecutar después de lo que lo necesites, y dar errores de JavaScript.
Por ejemplo, un fichero JS se carga antes que el script y llama a la variable template_uri que no existe.
Utilizando wp_localize_script
Otra forma común de implementarlo es a través de la función wp_localize_script. Se creó para utilizarla en la internacionalización y traducciones de idiomas, pero muchos desarrolladores la usamos para agregar variables en línea.
Un ejemplo:
$args = {
'template_uri' => get_bloginfo( 'template_directory' ),
'key_map' => KEY_MAPS,
'msf_error' => __( 'Datos no encontrados', 'wpes' )
}
wp_localize_script( 'script_parent', 'app_custom', $args );En este ejemplo ponemos en cola las variables antes del script que hayamos registrado con el nombre script_parent, así podemos tener disponible las variables si se ejecuta el script.
Y con app_custom creamos un objeto de JavaScript que contiene las variables para que no choquen con otras con el mismo nombre si son comunes.
Ventajas
Esta técnica es buena para asociar el script en línea al script de un fichero y nos proporciona una forma de controlar la posición de salida de los scripts personalizados.
Desventajas
El único problema de esta función es que solo sirve para variables. Si necesitas añadir condicionales, funciones, o lo que sea, no es posible hacerlo con wp_localize_script.
Utilizando wp_add_inline_script
Visto los pros y los contras de las diferentes técnicas de script en línea, la mejor manera de hacerlo desde mi punto de vista es con la función wp_add_inline_script.
Es muy parecida a wp_localize_script(), pero admite muchas más cosas, como por ejemplo funciones.
$args = {
'template_uri' => get_bloginfo( 'template_directory' ),
'key_map' => KEY_MAPS
}
$script = json_encode( $args );
wp_add_inline_script( 'script_parent', 'const app_custom = ' . $script, 'before' );
// ejemplo de debug
wp_add_inline_script( 'script_parent', 'console.log( "¡Hola!" )', 'before' );Quizá el cambio no sea demasiado visible, pero tenemos lo mejor de todas las opciones. Podemos agregar cualquier fragmento de JS y asociarlo con cualquier script registrado.
Con el tercer parámetro before, o after tenemos el control total del script y su posición en el HTML, lo que nos permite incluirlo antes, o después, del script registrado script_parent.
Consejo del Maestro Yoda: “Jóvenes padawans: siempre el código JavaScript debes escapar, usando ‘json_encode’ o su equivalente, debes”.
Ventajas
Considero que es la mejor forma de agregar cualquier tipo de código JavaScript en línea, puesto que se puede colocar antes o después de un script registrado para tener mayor control en la ejecución, y a su vez puede insertarse en el head o footer.
Desventajas
Por ahora no he encontrado ninguna.
Conclusión
La elección de la técnica adecuada depende de tus necesidades, y las del proyecto. Si alguna de ellas no funciona como se esperaba, recuerda: apaga y enciende, o borra la caché del navegador (ironía modo on).
Deja una respuesta
Lo siento, debes estar conectado para publicar un comentario.