WordPress con AJAX
Ajax en WordPress trabaja con peticiones de cliente bajo el conocido protocolo HTTP. Estas peticiones se gestionan en el archivo wp-admin/admin-ajax.php que dispara a continuación el hook correspondiente que programemos.
Por tanto disponemos de un sistema bastante integrado en WordPress que trabaja con la librería jQuery.
Podemos utilizarlo por tanto en nuestros plugins o templates. En este ejemplo lo utilizaré para completar un plugin almacenando datos en la tabla wp_options
Almacenar datos en la tabla options / update_option()
Para almacenar información en la tabla prefijo_options (normalmente wp_options) lo único que hay que hacer es utilizar el comando update_option (Ver información en el codex de wordpress).
update_option(
"identificadorUnicoVariable",
"Valor de la variable"
);
Formulario de datos
En WordPress los datos deben estar correctamente escapados.
<form id="LOWF_form" action="<?=esc_url($_SERVER['PHP_SELF'])?>" method="post">
<h3 class="title"><?=esc_html_e("Identificador de la variable","dominioPlugin")?></h3>
<div class="campos">
<ul>
<li class="input-text-wrap">
<label for="identificadorUnicoVariable"><?=esc_html_e("Identificador de la variable","dominioPlugin")?></label>
<input id="identificadorUnicoVariable" required type="text" name="identificadorUnicoVariable">
</li>
</ul>
</div>
<?php wp_nonce_field("logueo","logueo_nonce_field");?>
<input class="button button-primary" type="submit" value="<?=esc_attr(__("Update","dominioPlugin"))?>">
</form>
Realizar la petición AJAX
Una vez creada la interface para comunicarnos con el servidor, como por medio de un formulario, debemos realizar la petición AJAX. Esta se realiza a través del objeto XMLHttpRequest de JavaScript. WordPress lleva integrado la librería jQuery que nos facilita todavía más la tarea.
Lo que vamos a crear es un fichero JavaScript que contendrá código jQuery. Para ello nos valdremos de un gancho/hook que incluiremos bien en nuestro fichero functions.php o en un plugin que estemos creando.
function wfEnqueueScript(){
//Carga de nuestro código jQuery.
//Asumimos que nuestro fichero de JavaScript se encuentra localizado
//en el directoiro raiz de nuestro plugin y dentro de la estructura "public/js"
wp_enqueue_script('lowf_ajax',plugin_dir_url(__FILE__).'public/js/mi-jquery.js', ['jquery']);
}
//Añadimos hook
add_action("admin_enqueue_scripts","wfEnqueueScript");
Nuestro script jQuery
El script jQuery tiene una sere de campos fundamentales para la integración correcta:
- action: en este caso será un nombre único, identificador, por donde entrará la inyección de código (hook) que atendrá nuestra petición.
- url: fichero donde se atenderán las peticiones de nuestros formularios.
Fíjate los valores action y url del ejemplo de a continuación. Observa el campo url que es un objeto que contiene una dirección. Lo explicaremos más adelante.
jQuery(document).ready(function(){
jQuery(document).on( 'submit', "#LOWF_form", function(event){
event.preventDefault();
//Utiliza Ajax para...
var postData = {
action: 'lowf_2704',
variable: jQuery('#identificadorUnicoVariable').val().trim(),
//podríamos recoger más variables
}
//console.log(postData);
//Ajax load more posts
jQuery.ajax({
type: "POST",
data: postData,
dataType:"json",
url: lowf_vars.ajaxurl,
beforeSend:()=>{ //Antes de que haya respuesta podríamos poner una imagen de precarga
jQuery("#LOWF_form").append(<img style="width:2em" src="../images/updating.gif" alt="loading..." id="lowf_imagen">);
},
complete:()=>{ //Después de cumplir la petición eliminamos imagen de precarga
jQuery('#lowf_imagen').remove();
},
//Si se responde la petición Ajax con objeto JSON válido
success: function (response) {
//console.log(response)
//acciones que haremos una vez completada respuestas.
//Recuerda que aunque haya respuesta puede ser esta errónea
if(response.updated){
alert(response.message);//No es recomendable utilizar ventanas modales
}else{
alert(response.message);
}
}
//Si se responde la petición AJAX pero el objeto JSON no es válido
}).fail(function (data) {
console.log(data);
});
});
});
Recoger el campo action de AJAX para usuarios auténtificados o no
El código AJAX se dispara y dichas acciones lo recogerá el servidor PHP que deberá atender dichas peticiones.
Para ello disponemos de dos ganchos que dependerá si estas peticones lo atenderán usuarios registrados o sin registrar.
Anteriormente el script el valor único creado en el campo action fue "lowf_2704". Es necesario "inyectar código propio" para atender y dar una respuesta a esta petición. Para ello disponemos del gancho wp_ajax_
//Esta es la función callback de Ajax
function ajaxCallbackFunction(){
//Creamos un array de reenvío a JavaScript
$respuesta = [
"updated" => true,
"message" => "OK",
];
if(check_admin_referer('logueo','logueo_nonce_field')){
update_option("LOWF_options",sanitize_text_field($_POST["identificadorUnicoVariable"]));
}
else{
$respuesta["updated"] = false;
$respuesta["message"] = "Error de chequeo WordPress";
}
//Asegúrate de codificar la salida con codificación JSON
echo json_encode($respuesta);
//También nos cercioramos de matar el proceso cuando haya finalizado la respuestas Ajax
die();
}
//https://developer.wordpress.org/reference/hooks/wp_ajax_action/
//Laza Ajax "autentificado" para usuarios logueados
add_action( 'wp_ajax_' . 'lowf_2704', 'ajaxCallbackFunction');
//Lanza Ajax "no-autontificado" para usuarios sin sesión abierta
add_action( 'wp_ajax_nopriv_' . 'lowf_2704','ajaxCallbackFunction');
wp_localize_script. Localización de un script añadido
La función wp_localize_script de WordPress nos permite enlazar nuestro script con el archivo de gestión AJAX de WordPress. Por otro lado genera un objeto (llamado en nuestro caso "lowf_vars") que permite almacenar campos de gestión. En nuestro ejemplo la url de atención de peticiones y por ejemplo la url de un gif de precarga.
function wfEnqueueScript(){
//Carga de nuestro código jQuery.
//Asumimos que nuestro fichero de JavaScript se encuentra localizado
//en el directoiro raiz de nuestro plugin y dentro de la estructura "public/js"
wp_enqueue_script('lowf_ajax',plugin_dir_url(__FILE__).'public/js/mi-jquery.js', ['jquery']);
//https://developer.wordpress.org/reference/functions/wp_localize_script/
//Como indica el Codex de WordPress trabaja con script ya añadido (primer parámetro)
//Acepta un array asociativo como parámetro creando un objeto JavaScript ("lowf_vars)
//Accederemos a cualquier valor utilizando la notación del punto: lowf_vars.nombre_de_campo
wp_localize_script(
'lowf_ajax',
'lowf_vars', //objeto donde almacenamos las variables
[
//Almacenamos variables que deseemos usar
'ajaxurl' => admin_url( 'admin-ajax.php' ), //Acceso: lowf_vars.ajaxurl
'loader' => plugin_dir_url(__FILE__).'public/images/loading.gif',
],
);
}
//Añadimos hook
add_action("admin_enqueue_scripts","wfEnqueueScript");