Manipular la BD de WordPress a través de Ajax

Hola y bienvenidos a un nuevo post de la Escola Espai. Hoy os traigo un pequeño tutorial que os puede resultar muy útil. Vamos a aprender a usar ajax en WordPress, y vamos a hacer algo con los datos que enviamos al servidor. En este caso, quiero enseñaros algo que a mi me ha resultado muy útil en varias ocasiones que es guardar la información en la base de datos de nuestro WordPress.

En este ejemplo trabajaremos con JavaScript mediante la librería JQuery, PHP y los hooks de WordPress. Sino habéis trabajado con alguna de estas tecnologías no os preocupéis es bastante sencillo.

Cabe mencionar que para trabajar en nuestro WordPress lo haremos siempre desde la plantilla hijo. Para más información podéis leer este artículo del blog de la escuela.

Preparando el arhivo functions.php

Lo primero que vamos a hacer es preparar nuestro archivo functions para que pueda utilizar Ajax mediante JQuery. Para ello, vamos a utilizar la famosa función de WordPress: wp_enqueue_script(). Con esta función evitamos sobrescribir otros scripts evitando posibles errores. Para usarla añadimos el siguiente código a nuestro archivo functions:

add_action('wp_enqueue_scripts', 'mi_js');

function mi_js(){

	wp_enqueue_script('miscript', get_template_directory_uri(). '/../temahijo/js/scripts.js', array('jquery'));
	wp_localize_script('miscript','vars',['ajaxurl'=>admin_url('admin-ajax.php')]);

}

Con este código hacemos algo muy sencillo. Estamos enlazando nuestro archivo de js con nuestra plantilla de WordPress. Veréis que le estoy pasando 3 parámetros a wp_enqueue_script(). En el enlace de arriba, se explican cada uno de los parámetros del método. En mi caso, sólo le digo cómo se llamará el script, dónde está mi archivo y que dependencias tiene que cargar (JQuery).

Nota: Para usar JQuery en nuestra hoja sin crear conflicto en WordPress, debemos escribir el siguiente código a modo de document.ready:

jQuery(document).ready(function($) {
    // dentro de esta función $() funcionará como un álias de jQuery()
});

A parte, os habréis fijado que lanzo otra función: wp_localize_script(). Esto es fundamental. A nuestro js, le vamos a pasar la ruta de un archivo que viene por defecto en la instalación de WordPress. Este archivo es el encargado de hacer que Ajax funcione. Pensad que WordPress ya viene integrado con Ajax. Eso es fantástico, y gracias a este método podemos sacar partido a esta funcionalidad del CMS.

Para más info: https://developer.wordpress.org/reference/functions/wp_localize_script/. Con esta función podemos pasar un objeto con la url de los diferentes scripts que necesitemos (en nuestro caso sólo Ajax).

Fijaos que «vars» es el nombre que he escogido para mi objeto, «ajaxurl» la clave que contendrá la url, y por último el valor. Este valor lo busco mediante la función admin_url(). Así me aseguro que la ruta sea correcta en cualquier instalación de WordPress.

Creando el Ajax para enviar información al servidor

Ahora, vamos a crear el script que lanzará el método de ajax para enviar al servidor la información que queramos.  En mi caso voy a utilizar la función $.post de JQuery, ya que enviaré los datos a través de POST.

De todas formas, la llamada a ajax la podéis hacer como queráis (podéis ver aquí la documentación). Sólo tenéis que fijaros que enviáis un parámetro llamado ‘action’ con el nombre de la función que controlará estos datos en el archivo functions.php.

Mi ajax

jQuery(document).ready(function($){

	var data = {
		'action': 'mi_ajax',
		'datos' : "Hola!"
	}

	$('#boton').click(function(){
		$.post( vars.ajaxurl, data, function( r ) {
			alert( r );
		});
	})


})

Si recordamos cómo funciona la función $.post (es una abreviatura que JQuery trae para Ajax), veremos que hace falta indicarle a qué archivo vamos a enviar la información, qué vamos a enviar, y por último qué función se va ejecutar cuando obtengamos respuesta.

Recordad que yo trabajaba con el objeto vars. Por lo que la hoja que recibirá mis datos es la que trae WordPress por defecto para Ajax.

La función del ejemplo lo único que hace es pasar un string al servidor: «Hola!», en este caso. Podéis crear un objeto mucho más complejo para pasar los datos que queráis.

Recibir la información y guardarla en la DB

Dentro del archivo functions.php, crearemos una función que esté preparada para recibir los datos.

En el parámetro ‘action’ de nuestro objeto, le indicamos el nombre de la función que se va a lanzar cuando enviemos la información al servidor. En mi caso la función se llama ‘mi_ajax’, en un alarde de originalidad.

Añado dos hooks de WordPress para asegurarme que la función se lance.

add_action('wp_ajax_mi_ajax','mi_ajax');
add_action('wp_ajax_nopriv_mi_ajax', 'mi_ajax');

Estos dos hooks son wp_ajax y wp_ajax_nopriv. Esto me garantiza que aunque el usuario sea un invitado, se pueda ejecutar el código.

Construyendo mi función

function mi_ajax(){
	global $wpdb; // Para acceder a la BD de wordpress
	$user =  wp_get_current_user();
	$user_id = get_current_user_id();

	$datos = $_POST['datos'];
	$status = update_user_meta( $user_id, 'datos', $datos);

	wp_send_json("Datos actualizados!");

	wp_die(); // Esto es necesario para terminar la función y que de una respuesta correcta
}

Lo que hago en este caso es actualizar la tabla de WordPress «wp_usermeta», con la función update_user_meta.  Esta es la forma más sencilla de guardar datos en WordPress. En los datos del usuario puedo guardar cierta información enlazada a su id. Así, podré saber sus preferencias o establecer información adicional en un formulario de registro ¡Las posibilidades son infinitas!

De todas formas, si queréis saber cómo usar la Class $wpdb podéis leer el manual de WordPress. Podréis hacer todo tipo de consultas sql, gracias a este objeto que nos proporciona el CMS, con la garantía de que las consultas se realizarán de forma segura.

Por último, simplemente un apunte sobre las funciones del final: utilizaremos wp_send_json para devolver la respuesta al archivo de js; y nos os olvidéis de incluir wp_die()! Con ello cerramos correctamente el programa y nos aseguramos que obtenemos una respuesta correcta.

Espero que os sirva de cara a crear vuestros plugins en WordPress, ¡Hasta la próxima!