Title: Transferir, con estilo, variables de PHP a JavaScript
Author: Luis Ruiz
Published: 2 de noviembre de 2023
Last modified: 7 de noviembre de 2023

---

 España

 * [Temas](https://es.wordpress.org/themes/)
 * [Plugins](https://es.wordpress.org/plugins/)
 * [Noticias](https://es.wordpress.org/news/)
    - [Documentación](https://es.wordpress.org/support/)
    - [Foros](https://es.wordpress.org/support/forums/)
 * [Acerca de](https://es.wordpress.org/about/)
 * [Patrones](https://es.wordpress.org/patterns/)
 * [Eventos](https://events.wordpress.org/upcoming-events/filtered/country/ES/)
    - [Equipo](https://es.wordpress.org/team/)
    - [Manuales](https://es.wordpress.org/team/handbook/)
 * [Consigue WordPress](https://es.wordpress.org/download/)

 [ Consigue WordPress ](https://es.wordpress.org/download/)

[Noticias](https://es.wordpress.org/news/)

Transferir, con estilo, variables de PHP a JavaScript

2 de noviembre de 2023

Por [Luis Ruiz](https://profiles.wordpress.org/lruizcode/)

# Transferir, con estilo, variables de PHP a JavaScript

---

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.

    ```has-background
    <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](https://developer.wordpress.org/reference/functions/wp_print_scripts/)
para el frontal y [admin_print_scripts](https://developer.wordpress.org/reference/hooks/admin_print_scripts/)
para la parte de administración.

El ejemplo anterior sería así:

    ```has-background
    <?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](https://developer.wordpress.org/reference/functions/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](https://developer.wordpress.org/reference/functions/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:

    ```has-background
    $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](https://developer.wordpress.org/reference/functions/wp_add_inline_script/).

Es **muy parecida a `wp_localize_script()`, pero admite muchas más cosas**, como
por ejemplo funciones.

    ```has-background
    $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).

### Compártelo:

 * [  Facebook ](https://es.wordpress.org/2023/11/02/transferir-variables-php-javascript/?share=facebook)
 * [  X ](https://es.wordpress.org/2023/11/02/transferir-variables-php-javascript/?share=twitter)
 * [  Correo electrónico ](https://es.wordpress.org/2023/11/02/transferir-variables-php-javascript/?subject=%5BEntrada%20compartida%5D%20Transferir%2C%20con%20estilo%2C%20variables%20de%20PHP%20a%20JavaScript&body=https%3A%2F%2Fes.wordpress.org%2F2023%2F11%2F02%2Ftransferir-variables-php-javascript%2F&share=email)

### Deja una respuesta

Lo siento, debes estar [conectado](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fes.wordpress.org%2F2023%2F11%2F02%2Ftransferir-variables-php-javascript%2F&locale=es_ES)
para publicar un comentario.

[Anterior Cómo traduje 10.000 cadenas en 90 días](https://es.wordpress.org/2023/10/31/como-traduje-10000-cadenas-en-90-dias/)

[Siguiente WordPress 6.4 «Shirley»](https://es.wordpress.org/2023/11/08/wordpress-6-4-shirley/)

## Categorías

 * [Accesibilidad](https://es.wordpress.org/category/accesibilidad/) (4)
 * [Actualizaciones](https://es.wordpress.org/category/actualizaciones/) (216)
 * [Código](https://es.wordpress.org/category/codigo/) (7)
 * [Comunidad](https://es.wordpress.org/category/comunidad/) (30)
 * [copywriting](https://es.wordpress.org/category/copywriting/) (2)
 * [Edición](https://es.wordpress.org/category/edicion/) (4)
 * [Equipos](https://es.wordpress.org/category/equipos/) (5)
 * [General](https://es.wordpress.org/category/general/) (164)
 * [Mantenimiento](https://es.wordpress.org/category/mantenimiento/) (48)
 * [Marketing](https://es.wordpress.org/category/marketing/) (3)
 * [Meetup](https://es.wordpress.org/category/meetup/) (25)
 * [Plugins](https://es.wordpress.org/category/plugins/) (5)
 * [Redacción](https://es.wordpress.org/category/redaccion/) (3)
 * [Seguridad](https://es.wordpress.org/category/seguridad/) (62)
 * [SEO](https://es.wordpress.org/category/seo/) (3)
 * [Traducciones](https://es.wordpress.org/category/traducciones/) (26)
 * [WordCamp](https://es.wordpress.org/category/wordcamp/) (73)
 * [WordPress TV](https://es.wordpress.org/category/wordpress-tv/) (2)

## Suscribirse

  Escribe tu correo electrónico…

 * [Acerca de](https://es.wordpress.org/about/)
 * [Noticias](https://es.wordpress.org/news/)
 * [Alojamiento](https://wordpress.org/hosting/)
 * [Privacidad](https://es.wordpress.org/about/privacy/)

 * [Escaparate](https://wordpress.org/showcase/)
 * [Temas](https://es.wordpress.org/themes/)
 * [Plugins](https://es.wordpress.org/plugins/)
 * [Patrones](https://es.wordpress.org/patterns/)

 * [Aprender](https://learn.wordpress.org/?locale=es_ES)
 * [Soporte](https://es.wordpress.org/support/)
 * [Desarrolladores](https://developer.wordpress.org/)
 * [WordPress.tv ](https://wordpress.tv/)

 * [Involúcrate](https://make.wordpress.org/)
 * [Eventos](https://events.wordpress.org/)
 * [Donar ](https://wordpressfoundation.org/donate/)
 * [Regalos ](https://mercantile.wordpress.org/)

 * [WordPress.com ](https://wordpress.com/?ref=wporg-footer)
 * [Matt ](https://ma.tt/)
 * [bbPress ](https://bbpress.org/)
 * [BuddyPress ](https://buddypress.org/)

 [ España ](https://make.wordpress.org/polyglots/teams/?locale=es_ES)

 The WordPress® trademark is the intellectual property of the WordPress Foundation.

 * [Visita nuestra cuenta de X (anteriormente Twitter)](https://www.x.com/WordPress)
 * [Visita nuestra cuenta de Bluesky](https://bsky.app/profile/wordpress.org)
 * [Visita nuestra cuenta de Mastodon](https://mastodon.world/@WordPress)
 * [Visita nuestra cuenta de Threads](https://www.threads.net/@wordpress)
 * [Visita nuestra página de Facebook](https://www.facebook.com/WordPress/)
 * [Visita nuestra cuenta de Instagram](https://www.instagram.com/wordpress/)
 * [Visita nuestra cuenta de LinkedIn](https://www.linkedin.com/company/wordpress)
 * [Visita nuestra cuenta de TikTok](https://www.tiktok.com/@wordpress)
 * [Visita nuestro canal de YouTube](https://www.youtube.com/wordpress)
 * [Visita nuestra cuenta de Tumblr](https://wordpress.tumblr.com/)

   El código es poesía.