09 Mar
Cómo usar AJAX en Wordpress

Cómo usar AJAX en WordPress de forma correcta

Backend Developer @ Vital Innova

AJAX es una tecnología muy popular que se emplea en la mayoría de desarrollos de sitios web, puesto que nos permite la importante tarea de recuperar datos del backend y refrescar la vista sin necesitad de recargar la página, mejorando así la interactividad, velocidad y usabilidad del sitio. Cada vez que realizas acciones tan comunes como dejar un comentario, publicar un tweet o darle a me gusta AJAX está presente. En este artículo te mostraremos cómo usar AJAX en WordPress de forma correcta, para ello necesitarás algunos conocimientos sobre JavaScript, PHP y hooks de WordPress, no te preocupes, iremos poco a poco.

Cómo funciona AJAX

AJAX es el acrónimo de Asynchronous Javascript And XML, y su misión es servir de puente entre tu sitio web y el servidor, el corazón de esta tecnología asíncrona es el objeto XMLHttpRequest, que permite el intercambio de datos. Estos son los pasos básicos para realizar una llamada AJAX:

  1. Especificar la información a enviar
  2. Configurar la llamada
  3. Emplear el objeto XMLHttpRequest para enviar los datos
  4. Recibir y procesar la respuesta del servidor

Lo bueno es que este proceso puede ser simplificado empleando la librería jQuery.

Cómo usar AJAX en WordPress

Vamos a realizar un ejemplo muy simple. Supongamos que tenemos un botón que al ser pulsado hace una llamada al servidor y este le responde con un mensaje que luego es mostrado en la vista.

Necesitamos hacer lo siguiente:

  1. Hacer la llamada AJAX
  2. Crear la función que manejará la acción.
  3. Enganchar la función con un hook.
  4. Gestionar la respuesta a la llamada.

Queremos que la llamada se produzca cuando el botón es pulsado, para ello llamamos a la función ajax() que facilita jQuery cuando se da el evento on click de nuestro botón. A dicha función le proporcionamos como parámetros la URL del servidor, el tipo de petición HTTP (en este ejemplo hemos usado POST), los datos a enviar, y los callback a ejecutar en caso de error (saca el mensaje de error por la consola) o éxito (muestra la respuesta recibida modificando el DOM). Entre los datos que se envían hay que incluir action, este es el nombre de la acción que va a realizar el servidor. Es importante porque este nombre nos va a permitir enganchar. Veamos el código:

Es momento de meternos con WordPress, no olvides encolar el script y especificar la dependencia de jQuery si lo necesitas:

Hay múltiples formas de usar AJAX con WordPress, pero sólo una es la realmente correcta. Lo mejor es que también es la más simple, estamos hablando de usar la manera nativa, así que no tienes que instalar ni configurar nada. Todas las peticiones AJAX se procesan mediante el fichero admin-ajax.php, el cual se encuentra en la carpeta wp-admin. Sin embargo no necesitarás modificar este fichero, basta con que sepas de su existencia y conozcas su ruta.

Definiendo los hooks y la acción a realizar

Un hook nos permite inyectar código propio para modificar el comportamiento por defecto. Básicamente se trata de un mecanismo que nos proporciona WordPress para registrar nuevas acciones a realizar cuando se producen eventos.

De esta manera usando la función add_action() podemos especificar qué función queremos ejecutar ante el evento de una llamada AJAX. El nombre del evento corresponderá al que especificamos antes, en el campo action de la llamada, precedido de un prefijo. Este prefijo puede ser wp_ajax_nopriv, para especificar que código se ejecuta cuando usuarios no logueados hacen la llamada, o wp_ajax, para especificar qué hacer cuando se trata de un usuario logueado. A continuación mostramos ambos, aunque en nuestro caso la función que se va a ejecutar es la misma.

La función notify_button_click() comprueba que la petición POST incluye el campo message y manda un mensaje de respuesta. Es importante verificar que todos los parámetros necesarios se han recibido correctamente. En este caso podemos acceder a ellos a través de la variable superglobal $_POST, pero si la petición fuera de tipo GET habría que emplear $_GET. Finalmente se da respuesta empleando la función wp_send_json(). Esta función que nos proporciona WordPress no sólo devuelve la respuesta en formato JSON, también invoca die(). Por tanto, si no la usas, tendrás que indicar el fin de la ejecución mediante exit() o die().

Si todo ha ido bien ya tendríamos realizada nuestra llamada AJAX en WordPress.

Algunas posibles mejoras

En nuestro ejemplo hemos dejado hardcodeada la URL al realizar la llamada. Esto no es buena idea, especialmente si estás desarrollando un plugin o un tema que puede ser instalado en sitios cuya URL no es conocida a priori. Afortunadamente WordPress nos proporciona un mecanismo para resolver este problema. Podemos especificar la ruta del fichero admin-ajax.php al encolar nuestro script.

Por otro lado si vamos a emplear la llamada AJAX para procesar alguna acción del usuario, es conveniente aportar feedback visual. Así por ejemplo podríamos mostrar un spinner de carga para que el usuario perciba que la petición se está procesando. Para ello podemos emplear las propiedades beforeSend y complete que pone a nuestra disposición jQuery.

De esta manera especificamos qué código ejecutar antes de realizar la llamada AJAX y una vez completada. Lo que nos permite en este caso hacer fadeIn() y fadeOut() de un elemento visual que representa la carga.

Espero que ahora ya sepas cómo usar AJAX en WordPress 🙂

Si te ha gustado el post y estás interesado en ver cómo trabajamos contáctanos y descubre qué podemos hacer por ti.

Solicitamos tu permiso para obtener datos estadísticos de la navegación en esta web, en cumplimiento del Real Decreto-ley 13/2012. Si continúas navegando consideramos que aceptas el uso de cookies.

AceptarMás información