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.