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 : '',
	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.

Twittear
Compartir
Compartir