DEV Community

loading...
Cover image for Pasar una variable de WordPress a JavaScript

Pasar una variable de WordPress a JavaScript

Anderson. J
Estudiante de ingeniería Back End Developer 👽
・3 min read

En muchos casos es muy útil usar datos en JavaScript que fueron generados en el servidor, especialmente cuando queremos hacer aplicaciones dinámicas con AJAX.

Existen muchas formas de resolver este problema. Como en todas las soluciones, existen soluciones limpias y otras soluciones que funcionan pero no escalan tan bien.

En el mundo de WordPress la mejor forma de lograr esto es con la función wp_localize_script()

El problema

Actualmente estoy desarrollando temas muy personalizados de WordPress para mis clientes, me gusta ofrecer soluciones modernas y dinámicas así que siempre estoy incluyendo JavaScript para mostrar elementos y ofrecer una mejor experiencia de usuario la hacer las páginas más dinámicas.

Es muy común que cuando se incluya mucho JavaScript en un tema o plugin de WordPress se tenga que interactuar con la REST API.

Las rutas de la REST API de WordPress usualmente se pueden encontrar a partir de: http://nuestrositio.com/wp-json/wp/v2/

Entonces, si queremos peticionar algunos posts desde JavaScript usando la REST API haríamos algo como esto:

const response = await fetch('http://nuestrositio.com/wp-json/wp/v2/posts');
const data = await response.json();
console.log(data);

Esto funcionaría bien, pero tendríamos la URL del sitio hardcodeada, lo cual es una mala práctica. Si por ejemplo nuestrositio.com es movido a un nuevo dominio, digamos nuestrositio.net, nuestra pieza de código anterior dejaría de funcionar porque seguiría haciendo peticones a nuestrositio.com.

Una forma de solucionar esto es obteniendo la URL del sitio de forma dinámica, lo primero que se me ocurrió fue usar el objeto document.location Específicamente su propiedad host la cual devuelve el host de la URL actual. El código quedaría de esta forma:

const host = document.location.host; // nuestrositio.com
const response = await fetch(host + '/wp-json/wp/v2/posts');
const data = await response.json();
console.log(data);

De esta manera si el sitio es cambiado de dominio, no habrá problema ya que estamos obteniendo la URL de forma dinámica.

Esto funcionó perfecto. Hasta que lo probé en otro servidor local.

El problema es que no podemos asumir que el WordPress se encuentra instalado en la raíz del dominio. El CMS puede estar instalado en nuestrositio.com/blog, nuestrositio.com/noticias, nuestrositio.com/app o cualquier otra ruta, incluso en un subdominio. Esta situación volverá inútil el código que escribimos anteriormente porque entonces la ruta de la REST API cambiaría, por ejemplo podría ser nuestrositio.com/blog/wp-json/wp/v2/posts

La Solución

La solución en español es que tenemos que pasar la URL de la página principal, de WordPress a nuestro lado del cliente.
Para eso usaremos una función de WordPress: wp_localize_script

Esta función toma 3 parámetros

  • El handle o ID con el que registramos nuestro script.
  • El nombre del objeto que contendrá la variable que queremos pasar a JavaScript.
  • Un array con las variables.

El código de WordPress para lograr nuestro objetivo en functions.php se vería algo así:

// registramos el script
wp_register_script( 'index-scripts', get_template_directory_uri() . '/js/index.js', array(), _S_VERSION, true );

// preparamos el array que contiene una la propiedad con la URL correcta en donde se encuentra el WordPress
$JS_HELPERS = array(
  'host' => get_site_url()
);

// Envíamos el array al script. Estará guardado en un objeto de JavaScript llamado WP_OPTIONS
wp_localize_script( 'index-scripts', 'WP_OPTIONS', $JS_HELPERS );

// Y por último encolamos el JavaScript a nuestro sitio
wp_enqueue_script('index-scripts');

Luego de esto, nuestro script empezará a tener acceso a las variables del array $JS_HELPERS.
Luego de actualizar nuestro código en el lado del cliente, nos quedaría:

const host = WP_OPTIONS.host; // nuestrositio.com || nuestrositio.com/blog || nuestrositio.com/app
const response = await fetch(host + '/wp-json/wp/v2/posts');
const data = await response.json();
console.log(data);

De esta forma gracias a la función wp_localize_script podemos enviar variables y datos al JavaScript y hacer nuestro código más seguro y mucho más útil.

Si te ayudó este artículo agradecería que lo compartieras con tus colegas/amigos. Me ayudaría un montón. Hasta la próxima.

Discussion (0)