Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
wp-ajax

AJAX en WordPress, la manera tradicional

Comienzo una serie de entradas donde veremos cómo hacer AJAX en WordPress.

SPOILER ALERT: En este primer post, con un simple ejemplo, veremos cómo hacer AJAX de manera tradicional. En el segundo veremos cómo resolver el mismo ejemplo de una manera más moderna y elegante, utilizando la REST API y Fetch. En el último veremos una comparativa de rendimiento entre las dos opciones.

 

La manera tradicional

Antes de nada, veamos qué es AJAX

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

Wikipedia

Es decir, podemos hacer una consulta, enviar y recibir datos sin necesidad de recargar la página. En esta entrada vamos a ver cómo hacer AJAX en WordPress de una manera tradicional, utilizando jQuery y una función de callback para obtener resultados

Vamos a hacer un ejemplo muy sencillo, donde cuando pulsemos un botón se muestre un listado con los últimos 10 post de un Custom Post Type «evento«, que tenga el custom field «destacado» igual a true.

 

Archivo JavaScript

Encolaremos un archivo JavaScript que contendrá nuestra lógica: que al hacer click en el botón, haga la petición AJAX y nos pinte un listado con los últimos 10 eventos destacados.

A este archivo le pasaremos una serie de variables, entre las que se encuentra la URL contra la que haremos la petición AJAX. WordPress dispone de una ruta, el archivo admin-ajax.php, donde gestionar este tipo de peticiones.

function my_load_scripts() { wp_enqueue_script( 'my_js', get_theme_file_uri( 'js/eventos.js'), array('jquery') ); wp_localize_script( 'my_js', 'ajax_var', array( 'url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'my-ajax-nonce' ), 'action' => 'events-list' ) ); } add_action( 'wp_enqueue_scripts', 'my_load_scripts' );

Nuestro archivo eventos.js contendrá:

jQuery(document).ready(function ($) { $("#my-button").on("click", function(){ jQuery.ajax({ type: "post", url: ajax_var.url, data: "action=" + ajax_var.action + "&nonce=" + ajax_var.nonce, success: function(result){ $('#my-events-list').html(result); } }); }); });

De este modo, cuando hagamos click sobre nuestro botón con id my-button, lanzaremos una petición AJAX a la URL que hemos pasado como variable, y como parámetros el action que ejecutaremos y un nonce para darle más seguridad a la aplicación.

Si la petición ha sido satisfactoria, pintaremos el resultado sobre la etiqueta con id my-events-list.

 

En el functions.php

Debemos hookear ahora una función de callback que devuelva los datos que queremos a los actions wp_ajax_nopriv_{nuestro_action} y wp_ajax_{nuestro_action}. En este ejemplo, el parámetro action que enviamos cuando hacemos AJAX es event-list, por lo tanto:

function my_event_list_cb() { // Check for nonce security $nonce = sanitize_text_field( $_POST['nonce'] ); if ( ! wp_verify_nonce( $nonce, 'my-ajax-nonce' ) ) { die ( 'Busted!'); } $args = array( 'post_type' => 'evento', 'meta_query' => array( array( 'key' => 'destacado', 'value' => 1, 'compare' => '=', ), ), ); $query = new WP_Query( $args ); if ( $query->have_posts() ) { echo '<ul>'; while ($query->have_posts()) { $query->the_post(); echo '<li>' . get_the_title() . '</li>'; } echo '</ul>'; } wp_die(); } add_action( 'wp_ajax_nopriv_event-list', 'my_event_list_cb' ); add_action( 'wp_ajax_event-list', 'my_event_list_cb' );

Simple, comprobamos que el nonce es correcto, y en caso afirmativo hacemos una consulta al CPT evento, con el custom field destacado=1. En caso de que haya resultados, pintaremos una lista con el título de cada evento.

Hasta aquí la manera tradicional de hacer una petición AJAX con WordPress.

Puede que también te interese

Site Icon, mucho más que un favicon
Site Icon, mucho más que un favicon
En la versión 4.3 de WordPress se introdujo una nueva característica: el Site Icon. Antes de esta versión teníamos que introducir el favicon manualmente, o…
Cómo mostrar los posts más vistos o populares en WordPress
Cómo mostrar los posts más vistos o populares en WordPress
Probablemente en alguna ocasión te hayas encontrado con la necesidad de mostrar un listado de los posts más vistos o más populares de tu sitio.…
Establecer la primera imagen de un post como destacada
Establecer la primera imagen de un post como destacada
Cuando escribimos una entrada o página en WordPress, por defecto nos deja establecer una imagen destacada o thumbnail: Esta imagen destacada suele usarse por ejemplo…
Creando el .htaccess perfecto para WordPress
Creando el .htaccess perfecto para WordPress
El fichero .htaccess es un archivo de configuración de Apache. Nos permite establecer reglas en un directorio, por ejemplo, WordPress lo usa para crear una…