• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Enviar datos desde PHP a Javascript en WordPress

Enviar datos desde PHP a Javascript en WordPress

Enviar datos PHP a Javascript en WordPress

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

js

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Relación bidireccional entre diferentes tipos de contenido con ACFRelación bidireccional entre diferentes tipos de contenido con ACF
  • Creación dinámica de Custom Post Types en WordPressCreación dinámica de Custom Post Types en WordPress
  • Mostrar / ocultar bloques Gutenberg para usuarios registrados o visitantesMostrar / ocultar bloques Gutenberg para usuarios registrados o visitantes
  • Borrar tablas wp_actionscheduler_actions y wp_actionscheduler_logsBorrar tablas wp_actionscheduler_actions y wp_actionscheduler_logs
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. oleh

    6 abril, 2020

    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.

  2. Francisco

    17 noviembre, 2020

    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.

    • Jhon Marreros Guzmán

      18 noviembre, 2020

      Si, WordPress esta evolucionando de a pocos, se empezó con el editor Gutenberg, veremos como evoluciona más adelante. Saludos.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

SMTP en WordPress, configuración para envío de correos

Asignar entradas a una categoría de acuerdo al título en WordPress

Ajax sin usar jQuery en WordPress

Agregar subtítulos en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados