AJAX es una técnica para crear aplicaciones web interactivas. Nos permite realizar acciones sin refrescar la página, mejorando así la experiencia del usuario. Y ahora vamos a ver como usar esa tecnología en nuestras páginas desarrolladas con WordPress.
Hay dos formas de usarla, una es usando sólo la tecnología de JS para implementarlo (creando páginas que reciban estos datos y devolviendo valores). La otra forma es en la que usaremos la función de WordPress wp_ajax() para no tener que crear páginas de destino y solo usar nuestro archivo functions.php donde se hará los procesos que definamos.
Como en ésta ocasión recién vamos a aprender a usar Ajax en WordPress con la función wp_ajax(), el ejemplo será algo sencillo… algo. Mostraremos una cantidad determinada de posts random cada vez que presionemos un botón.
Empezando con Ajax en WordPress
En nuestro front vamos a necesitar tres cosas: un botón, un campo de texto y la caja donde se mostrará el post. Ahora, el JavaScript que usaremos podemos agregarlo en nuestro mismo archivo PHP o insertarlo en un archivo JS, que es lo mejor.
El problema de agregarlo en un archivo JS es que para insertar la ruta midominio.com/wp-admin/admin-ajax.php lo tendríamos que hacer directamente ahí, y el día que cambiemos de dominio tendremos serios problemas. Para ello yo aprovecho las bondades de jQuery (que de seguro tu sitio lo usa) y agrego la url en una caja oculta dentro de nuestro archivo PHP y luego lo llamo.
El código de nuestro front (index.php por ejemplo) sería este:
<h1>Artículo aleatorio</h1>
<input type="text" id="cantidadRandom" placeholder="Ingrese la cantidad de post a mostrar" />
<button type="button" id="mostrarRandom">Mostrar post random</button>
<div id="postRandom"></div>
<div id="wp-ajax" data="<?php echo home_url('wp-admin/admin-ajax.php'); ?>"></div>
Como ven, la ruta del admin-ajax lo agrego con la función home_url() que me devuelve el link de mi página.
En ésta ocasión estoy poniendo id a todos los elementos para que sea más sencilla la forma de seleccionar los elementos por jQuery, pero si gustan usan sus propios selectores.
El código JS (main.js):
$('#mostrarRandom').click(function(e){
var cantidad = $('#cantidadRandom').val();
var wp_ajax = $('#wp-ajax').attr('data');
$('#postRandom').html('<p>Cargando artículo...</p>');
$.post( wp_ajax, {
action: 'mostrar_random',
cantidad_post: cantidad
}, function(data){
$('#postRandom').html(data);
});
})
Con la propiedad attr() de jQuery obtengo la ruta del admin-ajax que había puesto en el front, y con el val() traigo la cantidad de post que voy a mostrar.
En el «action» ingreso el nombre de la función que luego escribiré en mi functions.php y debajo de éste voy a colocar todos los parámetros que enviaré. El data es lo que me devuelve el wp_ajax() que puede ser un texto, un html o un json. En esta ocasión yo devolveré código html.
Lo último que vamos a necesitar es el código que irá en nuestro functions.php
<?php
// WP Ajax para mostrar una cantidad determinada de
add_action('wp_ajax_mostrar_random', 'ajax_mostrar_random');
function ajax_mostrar_random(){
// Traemos los parámetros que enviamos en el ajax
$cantidad = $_REQUEST['cantidad_post'];
$html = "";
// Armamos nuestro query
query_posts(array(
'orderby' => 'rand',
'showposts' => $cantidad
));
while (have_posts()) { the_post();
$html .= '- '.get_the_title().'<br>';
}
wp_reset_query();
// Devolvemos lo que necesitamos y terminamos el proceso
echo $html;
exit();
}
?>
El add_action y la función comparten el nombre que envié en mi js. Por ello que para futuras funciones, solo modifiquen el «mostrar_random», lo demás lo dejan tal cual.
OJO: El «wp_ajax_» es porque este proceso se va a ejecutar solo si es que el usuario ha iniciado sesión en nuestro WordPress, pero si deseas que el AJAX se ejecute siempre, el action a usar es «wp_ajax_nopriv_»
Lo que hago en el query es agregar código html a la variable del mismo nombre para luego armar mi listado. La forma de devolver un valor en wp_ajax es con un ‘echo’ al final y posteriormente agregando un exit();.
Esto es todo!
Por ahora solo hemos mandado un parámetro para armar nuestro query. Tu puedes mandar todos los que necesites y hacer mucho más que solo listar. Por ejemplo: crear post, actualizar datos de usuarios, etc.
Si tienes alguna duda sobre AJAX en WordPress, usa los comentarios o me escribes directamente a mi twitter.
He agregado el código completo a un repositorio en mi GitHub donde iré guardando diferentes ejemplos más adelante.