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