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.
Hola, como puedo leer una variable con javascript, si la variable esta en el un fichero php externo, es decir el archivo php recoge el precio de una web con Expresiones regulares y guarda las variable en un array [0][1] dos precios, esto es para wordpress, donde he de alojar/colocar el archivo php y como listar dichas variables en un boton que he colocado en la cabezera (header) del tema (theme). Gracias de ante mano.
Tenéis una biblioteca de JavaScript para usar en el theme se llama underscore.js podéis hacer temas enteros en JavaScript, se suponía que era el futuro. Tenéis soporte de todo tipo.
Si, WordPress esta evolucionando de a pocos, se empezó con el editor Gutenberg, veremos como evoluciona más adelante. Saludos.