WordPress tiene un método especial para realizar ajax utilizando sus funciones.

Vamos a querer realizar una llamada Ajax cuando queramos llamar a una función PHP desde javascript, sea por la acción concreta del usuario sin recargar la página o por cualquier otro motivo.

Tanto si tenemos un tema como un plugin, el siguiente método nos irá perfectamente.

Creamos la variable ajax url en javascript

Suponemos que ya tenemos nuestro archivo php donde vamos a trabajar (por ejemplo functions.php) y también tenemos un archivo .js correctamente incorporado al javascript de WordPress ( por ejemplo mijavascript.js )

add_action( 'wp_enqueue_scripts', 'my_custom_scripts', 10);
function my_custom_scripts() {
    wp_enqueue_script( 'misjs-js', get_stylesheet_directory_uri() . '/js/mijavascript.js', array( 'jquery'), 0, true );
}

WordPress tiene una url específica creada para realizar las llamadas AJAX, y es a esta url a la que tenemos que llamar por AJAX. Esta url es:

https://midominio.com/wp-admin/admin-ajax.php

Para coger esta ruta con seguridad y de forma dinámica vamos a usar la función de admin_url() con la terminación de admin-ajax.php, es decir:

admin_url( ‘admin-ajax.php’ );

¡Pero claro! esto es en PHP y necesitamos esa variable en Javascript. Para eso la forma más limpia es usar la función de WordPress wp_localize_script:

wp_localize_script('my_custom_scripts', 'js_vars', array('ajaxurl'  => admin_url( 'admin-ajax.php' )));

Con esto le estoy diciendo que quiero que añada a mi anterior script “my_custom_scripts” el objeto javascript “js_vars” que va a ser un array de variables, en el que de momento solo he puesto ajaxurl con el valor de salida de la función php. Así ya tengo ese valor guardado en una variable javascript a la que puedo llamar cuando quiera.

Hacemos la llamada AJAX

Una vez hecho esto, volvemos a la función AJAX. Mandaremos a esta url un array data donde una de las variables tiene que llamarse action y tendrá la clave para que WordPress sepa a qué función queremos llamar.

jQuery.ajax({
	url : js_vars.ajaxurl,
	type: 'post',
	data: {
		action : 'mi_action',
		variable1: "foooo",
                variable2: "baaaaar"
	},
	success: function(resultado){
		 $("#respuesta").html(resultado);		
	}
});

Con este ejemplo estoy haciendo una llamada ajax a la url guardada en mi variable js_vars.ajaxurl, tipo POST, llamando a la opción “mi_funcion” y las variables que le quiero pasar, en este caso variable1 y variable 2.

Usamos los hooks wp_ajax

¿Y cómo sabe WordPress a qué función tiene que ir? Porque ahora se lo vamos a decir con las últimas dos líneas que necesitamos en PHP: Se trata de dos hooks action:

 

//La primera variable es el nombre del hook+action y el segundo el nombre de nuestra función

add_action('wp_ajax_nopriv_mi_action','mi_funcion');
add_action('wp_ajax_mi_action','mi_funcion');

Los hooks son wp_ajax_nopriv y wp_ajax. Esto es así por si queremos que dependiendo de si la persona está registrada en nuestra web o no, la función a la que llamemos sea distinta. Si la persona está registrada, WordPress usará la función asociada a wp_ajax_nopriv, y si no está registrada, usará el hook wp_ajax.

De esta forma como mi action se llama “mi_action”, ahora WordPress sabe que cuando haga una llamada con la variable action: “mi_action”, tiene que ir a la función “mi_funcion”, tanto para usuarios registrados como para los que no.

Creamos la función que queramos

¡Y ya lo solo queda crear nuestra función!

function mi_funcion(variable1, variable2){
    return "¡Conseguido!";
}