Enviar datos desde PHP a Javascript en WordPress

[ 25 septiembre 2016 ] [ Autor: Jhon Marreros Guzmán ][ Core - Avanzado] [ ]

js

Los archivos javascript son archivos estáticos, sin embargo algunas veces necesitamos que estos archivos se comporten de manera dinámica recibiendo datos desde un archivo PHP de WordPress.

En este artículo veremos diferentes soluciones de enviar datos o variables desde PHP a un archivo Javascript en WordPress.

1 – Funcionalidad de WordPress incluída en javascript

Esta sería una primera aproximación, tener un archivo .js.php dinámico, en el cual se puedan consultar externamente los datos de WordPress y mezclarlo con código javascript, los pasos son los siguientes:

– Agregamos el script en un archivo .php, como el functions.php:

<?php
function decodecms_mi_script() {
  //registramos el nuevo script .js.php
  wp_enqueue_script( 'archivo_javascript', get_stylesheet_directory_uri() . '/js/script.js.php', false, '1.0', true );
}

//agregamos el código al hook
add_action( 'wp_enqueue_scripts', 'decodecms_mi_script');
?>

– En la cabecera del script, archivo .js.php, asumiendo que es un archivo dentro de nuestro theme, usamos:

<?php
//Especificamos que se trata de un archivo javascript
header('Content-type','application/javascript');

//Llamada a la funcionalidad de WordPress
//Cargamos sólo wp-load que esta en la raiz
require('../../../../wp-load.php');

//Definimos la variable a enviar
$varHome =get_home_url();

//Codigo PHP adicional
?>

alert("<?= $varHome ?>"); 
//Codigo javascript adicional

Sin embargo no es recomendable hacerlo de esta manera debido a :

• Llamar al archivo wp-blog-header significa volver a cargar las funciones del core de WordPress nuevamente.
• El archivo script.js.php se genera dinámicamente y posiblemente no se pueda mantener en cache.

2 – Enviar datos de WordPress como variables en la url

Esta sería una mejor solución, aunque el archivo javascript se sigue generando dinámicamente (.js.php), esta vez no cargamos la funcionalidad de wordPress dentro del archivo javascript, sino que pasamos los datos requeridos de WordPress a través de variables en la url.

– Usamos este código en algún archivo .php como el functions.php

<?php
function decodecms_mi_script() {
  //Obtenemos el valor de la variable de WordPress a enviar
  $varHome = get_home_url();

  //Concatenamos la variable a la url
  $script = 'script.js.php?varHome='.$varHome;

  //registramos el nuevo script
  wp_enqueue_script( 'archivo_javascript', get_stylesheet_directory_uri().'/js/'.$script, false, '1.0', true );
}

//agregamos el código al hook
add_action( 'wp_enqueue_scripts', 'decodecms_mi_script');

?>

– En el archivo .js.php del theme usaremos entonces:

<?php
//Definicion del tipo de archivo
header('Content-type','application/javascript');

//Recuperamos la variable de WordPress a enviar
$varHome = isset($_GET['varHome'])?$_GET['varHome']:null;

//Codigo adcional PHP
?>

alert("<?= $varHome ?>"); 
//Codigo javascript adicional

3 – Pasar variables inline dentro de la página

Esta es sin duda la mejor sólución, se pasa las variables dínamicas de WordPress como variables inline dentro de la página; estas variables son leídas por el archivo javascript que ahora puede volver a ser un archivo estático, es decir, usar simplemente la extensión .js.

– En un archivo .php como el functions.php usamos el siguiente código:

<?php

function decodecms_mi_script() {
  //registramos el nuevo script
  wp_enqueue_script( 'archivo_javascript', get_stylesheet_directory_uri() . '/js/script.js', false, '1.0', true );

  //Definimos las variables WordPress a enviar dentro de un array
  $params = array (
      'varHome' => get_home_url()
  );

  //Usamos esta función para que coloque los valores inline
  wp_localize_script('archivo_javascript','vars_inline',$params);

}

//agregamos el código al hook
add_action( 'wp_enqueue_scripts', 'decodecms_mi_script');

?>

En el código anterior usamos wp_localize_script, el primer parámetro es el nombre que hemos usado para registrar el script, el segundo parámetro es el nombre de la variable que usaremos en el archivo javascript, el tercer parámetro es la variable que hemos definido anteriormente con los valores a pasar.

– Como resultado de esto se generá el siguiente html con las variables javascript dentro de la página, en el código siguiente también se observa la llamada al archivo script.js

<script type='text/javascript'>
/* <![CDATA[ */
var vars_inline = {"varHome":"http:\/\/tuweb.com\/"};
/* ]]> */
</script>

<script type='text/javascript' src='http://TUWEB.com/wp-content/themes/TUTHEME/js/script.js' ></script>

– En el archivo script.js del theme se puede usar la variable varHome de la siguiente forma:

alert(vars_inline.varHome);

¿Aún con dudas?, en el siguiente video se detalla cada uno de los puntos anteriores.

Valora este artículo : (3 votos, promedio: 5,00 de 5)

Cargando...