Desde hace ya muchos años es muy habitual usar AJAX para nuestras aplicaciones web o para dinamizar algunas funcionalidades de nuestras páginas y tiendas. Dado que ya más del 30% (marzo de 2018) de los proyectos web se construyen sobre WordPress, es muy interesante ver cómo usar AJAX en WordPress.
Front-end
WordPress viene con jQuery en su core por lo que AJAX lo vamos a gestionar desde este framework de JavaScript. Un ejemplo muy sencillo sería el siguiente:
jQuery.ajax({
type : "post",
url : '<?php admin_url( 'admin-ajax.php' ); ?>',
data : {
action : 'mi_funcion'
},
error: function(response){
},
success: function(response) {
}
})
En este pequeño script se llama a la función del back-end «mi_funcion» y, dependiendo de si se ha producido un error o no, se gestiona la respuesta en nuestro front-end mediante las funciones de error y success (si es necesario).
Back-end
Como habrás podido observar en la función de ejemplo, en la url de AJAX se llama al archivo admin-ajax.php. Este archivo es el handler que tiene WordPress para AJAX. En este archivo se generan, entre otras cosas, los hooks donde se van a enganchar las funciones que programemos en el back-end para nuestro script de ajax.
Los hooks a los que hago referencia son dos:
- do_action( «wp_ajax_{$action}» ) para usuarios identificados
- do_action( «wp_ajax_nopriv_{$action}» ) para usuarios no identificados
La variable $action hace referencia a la variable action del data de nuestro script de AJAX. En el ejemplo: «mi_funcion».
Así las cosas, los hooks a los que tendremos que enganchar las funciones en el back-end (functions.php o plugin a medida) serán, en nuestro ejemplo, los siguientes:
- add_action( «wp_ajax_mi_funcion», «mi_funcion»)
- add_action( » wp_ajax_nopriv _mi_funcion» , «mi_funcion» )
PHP: functions.php o plugin a medida
Ahora que ya tenemos nuestro script de AJAX y sabemos dónde tenemos que enganchar nuestra función PHP, solo quedaría programarla en el functions.php o en un plugin a medida. Un ejemplo sería:
function mi_funcion(){
// Lo que queramos que haga nuestra función
wp_die();
}
add_action( "wp_ajax_mi_funcion", "mi_funcion")
add_action( " wp_ajax_nopriv _mi_funcion" , "mi_funcion" )
Como puedes ver, usar AJAX en WordPress, como siempre en el desarrollo con WordPress, es bastante sencillo y elegante.
Si quieres ampliar información sobre cómo usar AJAX en WordPress, puedes ir al codex de WordPress. Como siempre, si tienes alguna duda o aportación, no dudes en dejar un comentario.
Buenas,
He probado de realizar el ajax tal como indicas pero da error, podrías comentarme si ves algún error:
functions.php:
add_action( ‘wp_enqueue_scripts’, ‘add_my_script’ );
function add_my_script() {
wp_enqueue_script(
‘carteras.js’,
get_template_directory_uri() . ‘/js/carteras.js’,
array(‘jquery’)
);
wp_localize_script(‘carteras.js’,’dcms_vars’,[‘ajaxurl’=>admin_url(‘admin-ajax.php’)]);
}
add_action( «wp_ajax_ajax_eliminar_cartera», «ajax_eliminar_cartera»);
add_action( » wp_ajax_nopriv _ajax_eliminar_cartera» , «ajax_eliminar_cartera»);
function ajax_eliminar_cartera(){
echo $_POST[«id»];
wp_die();
}
carteras.js
jQuery(document).ready(function($) {
$( «.botoneliminarregistro» ).click(function() {
$(this).closest(«tr»).remove();
var parametros = {
action : ‘ajax_eliminar_cartera’,
id:$(this).parent().attr(‘id’),
}
$.ajax(
{
data: parametros,
url:»»,
type: ‘post’,
beforeSend: function(){
console.log(«Cargando…»)
},
success: function(data) {
alert( ‘pet ok ‘+data);
},
error: function(response){
alert(«ERROR: «+response);
}
}
)
});
})
PD: Las ruta del js esta bien jejeje
Gracias 🙂
Buenos días, Rubén:
Por lo que veo no has puesto la variable con la URL de AJAX en la función $.ajax. Tendrías que poner (basándome en tu código): «url: dcms_vars.ajaxurl,». Sin esa variable AJAX no sabe a qué PHP llamar.
Un saludo y gracias por tu comentario,
Daniel
Hola Daniel, buenas! Tengo una duda algo conceptual:
Contexto: hice una pagina (llamemosle página app) que recoge datos en un formulario con Fetch de JS y lo envía del front-end al back-end, donde es recibido por PHP, que envía un GET con CURL a un servicio API. Una vez recibe respuesta, lo devuelve como json a Fetch y ya luego le doy formato al resultado con JS.
Todo esto lo he construido en una página web de prueba alojada en un servidor.
Ahora mismo estoy construyendo la pagina home, blog, etc, y veo que existe la práctica de usar JQuery Ajax en WordPress.
Mi duda es: ¿debo modificar la forma de hacer el Ajax según las recomendaciones de WP? ¿Tiene alguna ventaja sobre hacerlo como ya venía haciéndolo?
Aprovecho para preguntar algo más: tenía planeado iniciar mi página app en un subdominio, así, en caso que aumente el tráfico a la página app, poder redireccionarla con DNS a algún servicio de AWS u otros que puedan soportar más tráfico que mi actual servidor.
Entonces, si cambio la forma de hacer Ajax con WP ¿cómo podría escalar para soportar el aumento de tráfico? Porque entiendo que la función en PHP que envía el GET al servicio API debe incluirse en functions.php de WP.
Desde ya te agradezco el tiempo que te tomes en responderme.
Buenos días, Juan Guillermo:
La principal ventaja que veo en utilizar el sistema de ajax de WordPress es que las funciones que anclas a los hooks están dentro del ecosistema de WordPress por lo que tienes acceso a todas las APIs, clases, funciones, etc. de WordPress.
Respecto a la redundancia para prevenir picos de tráfico, cualquier proveedor cloud te ofrecerá la opción de escalar WordPress para ello (no soy experto en sistemas pero lo normal es tener base de datos, contenidos y núcleo de WordPress por separado para poder escalar fácilmente).
Un saludo.