Ajax en plugins para WordPress

Ajax en plugins para WordPress. Hoy en día, cualquier página web que pretenda ser atractiva para sus clientes necesita usar Ajax. Por si no sabes qué es, te lo resumo en una línea: es una tecnología que permite interactuar con una base de datos y mostrar y refrescar resultados en pantalla sin necesidad de recargar la página. El tiempo de espera se reduce un porcentaje bastante importante, y queda muy vistoso de cara al usuario.

Por lo general, Ajax es algo compleja de entender, y desarrollar tampoco es simple. Sin embargo, en el caso que nos ocupa, que es el desarrollo de plugins para WordPress, las cosas se simplifica bastante, gracias a jQuery y a la implementación de Ajax en el propio WordPress. Si te interesa, ¡Sigue leyendo!

Pongamos un ejemplo muy simple. Supongamos que tenemos una agenda, que consta de:

a) Una lista de personas (que se rellena con los datos de una base de datos).
b) Un formulario para inscribir personas en la lista (es decir, que al pulsar en «Añadir», se guardará esa persona en la base de datos).

Queremos que cuando introducimos una persona en el formulario, se guarde en la agenda, y además, la lista se recargue, pero sin tener que refrescar la página. Y alguno dirá: «¡Claro! Y ya puestos, ¿Por qué no nos hace un café por la mañana?». Pues os equivocáis, es más simple hacerlo que explicarlo.

En este plugin simple vamos a utilizar dos archivos: el index de nuestro plugin, y otra página con nuestro formulario y nuestra lista. En este caso, lo vamos a programar como una sección más en el panel de administración de WordPress (¿Ni idea de lo que estoy hablando? Echa un ojo a esta entrada).

Empecemos por el archivo con el formulario y la lista, al que hemos llamado «agenda.php«. Todo el contenido del html lo incluiremos dentro de un div con clase ‘wrap‘. Es una clase propia de WordPress con estilos ya definidos en wp-admin/css/colors-fresh.css. De todas formas, no todo está formateado. El CSS y el «ponerlo todo bonito» lo dejo en vuestras manos.

Hablamos de un formulario porque tenemos dos cuadros para introducir texto y un botón para insertar los datos en la entrada, pero realmente no estamos hablando de un formulario <form>, no es estrictamente necesario. Nosotros lo hemos hecho así:

/**
agenda.php
*/
<div class='wrap'>
<h2>Agenda</h2>
<table id='formulario'>
<tr>
<td><label for='nombre'>Nombre: </label></td><td><input type='text' id='nombre' /></td>
</tr>
<tr>
<td><label for='telefono'>Teléfono: </label></td><td><input type='text' id='telefono' /></td>
</tr>
<tr>
<td><input type='button' value='Agregar' id='addButton' onclick='agregarPersona()' /></td>
</tr>
</table> <!-- Fin del formulario -->
<table id='agenda'>
<thead>
<tr>
<th>Nombre</th><th>Teléfono</th>
</tr>
</thead>
<tbody id='agendabody'>
<?php
$mysqli = new mysqli('mi_host', 'mi_usuario', 'mi_contraseña', 'mi_bd');
$resultado = $mysqli->query("SELECT nombre, telefono FROM agenda");
while($res = $resultado->fetch_array()){
echo("<tr><td>".$res["nombre"]."</td><td>".$res["telefono"]."</td></tr>");
}
?>
</tbody>
</table>
</div> <!-- Fin del contendor principal (wrap) -->

Y no tiene más. Como vemos, dentro de la lista hemos establecido una conexión con nuestra base de datos y, con un bucle while, rellenamos la lista con los valores que ya puedan existir en la base de datos. Los valores de conexión, evidentemente, tenéis que establecerlos vosotros. Hemos presupuesto una tabla llamada agenda con dos campos como mínimo: ‘nombre‘ y ‘telefono‘ (y también es aconsejable ‘id‘, aunque en este ejemplo no se va a utilizar).

Hay varias formas de establecer la acción en nuestro botón. Una es la que veis, añadirle el onclick en el mismo input. Otra es definir, mediante jQuery, el evento click.

Ahora vamos a agregarle el código javascript para darle acción. Lo explicaré por bloques:

<script type='text/javascript'>
function agregarPersona(){
data = {
action: 'guardar_persona',
nombre: jQuery('#nombre').text(),
telefono: jQuery('#telefono').text()
}

data es un array que tendrá siempre, como mínimo, el valor ‘action‘ definido. Este valor es el nombre de la función Ajax que más tarde crearemos en nuestro plugin. En este caso, como evidentemente necesitaremos los datos que hay que insertar en la agenda, data tiene dos valores más: nombre y telefono.

jQuery.post(ajaxurl,data,function(response){
alert(response);
});
recargarLista();
} // Fin de la funcion.

Con jQuery llamamos a la función .post, pasando como parámetros lo que vemos en el ejemplo: ajaxurl, data y function(response) { }. Este último parámetro lleva dentro la acción a realizar con la respuesta de la función ajax. Realmente, esta respuesta vendrá en forma de html plano, así que podemos tratarlo como un mensaje, como un código para detección de errores, etc. En nuestro ejemplo, lo tratamos como un mensaje que mostramos con un alert.

Nota: Aunque no queramos hacer nada después de nuestra función ajax, es recomendable hacer un alert(«Correcto») para comprobar que todo va bien. Si hubiera un fallo, no aparecería el mensaje, fallaría de forma silenciosa y no nos dariamos cuenta. Es posible que ajaxurl falle por no estar definida. En ese caso, debemos añadir a nuestro plugin esta función:

<?php
add_action('wp_head','miplugin_ajaxurl');
function miplugin_ajaxurl() {
?>
<script type="text/javascript">
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
</script>
<?php
}

Ahora tenemos que tratar el refresco de la lista. Lo óptimo sería refrescar con jQuery si la respuesta que nos ha devuelto el anterior post es positiva (la persona se ha insertado correctamente en la agenda), añadiendo una fija con .append(); pero como estamos tratando con las funciones Ajax, para ver otro ejemplo y las diferencias entre ambas, recargaremos toda la lista con Ajax.

Mismo procedimiento: Creamos un array ‘data‘ con el valor de ‘action’ definido, y luego llamamos a jQuery.post

function recargarLista(){
data = {
action: 'recargar_lista'    /* En este caso no tenemos que mandar nada, solo el nombre de la acción. */
}
jQuery.post(ajaxurl,data,function(response){
jQuery('#agendabody').empty();
jQuery('#agendabody').append(response);
}
} // Fin de la función
</script>
/**
Fin de agenda.php
*/

Como véis, hemos vaciado primero la agenda html. Si no lo hiciéramos, cada vez que recuperásemos la agenda y la añadiésemos a la tabla ‘#agenda‘, estaríamos duplicando nuestros resultados. Luego, añadimos la respuesta, que evidentemente, vendrá en forma de filas y columnas (tr y td) para añadirse directamente a la tabla y que funcione correctamente.

Y hasta aquí el archivo ‘agenda.php‘. Vamos con el plugin, más concretamente, con su cabecera.

<?php
/*
Plugin Name: AgendaConAjax
Plugin URI: https://www.codigonexo.com/
Description: Agenda simple que usa Ajax en WordPress
Version: 1.0
Author: Juan Viñas
Author URI: https://www.codigonexo.com/
*/

Lo primero es lo primero: el enlace en el menú para acceder a nuestra agenda, ¿No?

function mi_menu_admin(){
add_menu_page( 'Agenda Ajax', 'Agenda Ajax', 'read', 'agendaajax/agenda.php', '', '' );
}
add_action('admin_menu','mi_menu_admin');

Ahora ya sí que sí, os presento las funciones Ajax en WordPress.

¿En qué consiste el sistema? Simple. Por un lado, tenemos una función ‘mi_funcion_ajax_callback’ donde estableceremos toda la lógica a realizar cuando se llame a esta función desde javascript. Por otro lado tenemos la acción que añadimos a WordPress con un add_action(‘wp_ajax_mi_funcion_ajax’,’mi_funcion_ajax_callback‘), donde relacionamos nuestra función con el sistema Ajax de WordPress. Como véis, hay una parte común en ambas, ‘mi_funcion_ajax‘, que es el nombre que debemos establecer en el valor ‘action‘ del array ‘data‘ de los javascripts que hemos visto antes.

Muy sencillo, ¿No? Lo veremos mejor completando el ejemplo:

function guardar_persona_callback(){
$nombre = $_POST['nombre'];     /* Fijaos que las variables las recuperamos directamente de $_POST, */
$telefono = $_POST['telefono'];    /* con los mismos nombres que les hemos puesto en el Array de Javascript (data). */
$mysqli = new mysqli('mi_host', 'mi_usuario', 'mi_contraseña', 'mi_bd');     /* Conectamos con nuestra base de datos (estableced vuestros datos de conexión) */
$mysqli->query("INSERT INTO agenda (nombre,telefono) VALUES ('$nombre','$telefono')");   /* Insertamos los valores. */
if(!$mysqli->error){     /* Devolvemos un mensaje indicando si lo hemos conseguido o no. */
echo("Persona insertada correctamente en la agenda.");
} else {
echo("¡Se produjo un error!");
}
die();    // Muy importante para que los resultados se devuelvan correctamente.
}
/* Añadimos la función a la lista de funciones Ajax que tiene registradas WordPress. */
add_action('wp_ajax_guardar_persona','guardar_persona_callback');
}

Como hemos usado jQuery.post para llamar a esta función, los valores para $nombre y $telefono (que definimos en el array ‘data‘) se recuperan de $_POST.

No hay mucho más que explicar: se recuperan los valores, se conecta con la base de datos, se insertan los valores en la base de datos, y hemos metido un pequeño control de errores (comprobando el valor de mysqli_error), por si acaso. El mensaje de devolución, como ya adelantabamos antes, es html, así que lo imprimimos mediante echo. Finalmente, y esto es importante, hacemos que la función acabe con un die(), en cualquier salida que tenga la función.

Nos falta la otra función Ajax que usamos en este ejemplo, la de recargar la lista.

function recargar_lista_callback(){
$mysqli = new mysqli('mi_host', 'mi_usuario', 'mi_contraseña', 'mi_bd');
$resultado = $mysqli->query("SELECT nombre,telefono FROM agenda");
while($res = $resultado->fetch_array()){
echo("<tr><td>".$res["nombre"]."</td><td>".$res["telefono"]."</td></tr>");
} // Fin del while
die();
} // Fin de la función
add_action('wp_ajax_recargar_lista','recargar_lista_callback');
?>

Y no tiene más. Un simple bucle que recoge los resultados y los devuelve preparados para insertar en una tabla.

¡Esto es todo, amigos! Hemos terminado con éxito nuestro primer plugin con Ajax para WordPress. Si la conexión con vuestra base de datos es correcta, y la tabla contiene los campos ‘nombre’ y ‘telefono’, el resto debería funcionar (y si no es así, ¡dejadnos un comentario para arreglarlo!). Así, resumiendo, han sido tres pasos:

  • Creamos el formulario html
  • Escribimos las funciones javascript que dotan de acción a los botones, y que llaman a las funciones Ajax.
  • Establecemos en nuestro plugin la funcionalidad PHP en sí de las funciones Ajax y las añadimos a la lista de funciones Ajax de WordPress.

Como ya os dije al principio, iba a ser más rápido escribir el código que explicarlo, pero espero que este post os haya servido de ejemplo para hacer vuestras propias funciones Ajax en vuestros plugins de WordPress. Debajo tenéis un paquete .zip con los dos archivos que hemos escrito hoy, por si os sirven de referencia. Y si tenéis cualquier duda, no olvidéis que podéis dejarnos un comentario y responderemos lo más pronto posible.

¡Hasta la próxima!

 

«Primero, soluciona el problema.
Luego, escribe el codigo» – John Johnson

¿Te ha gustado el artículo?
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (8 votos, promedio: 4,38 sobre 5)
Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes


Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada.

7 Comentarios

José María Muñoz

Perdón, se me fue. Desde DW me da error al copiar el código javascript de "guardar persona" en la última }

José María Muñoz

Desde DW me da error en la } final.

Alan

Gracias por tu aporte. En realidad comentarte que también estoy teniendo errores. Te agradecería que por favor nos compartieras los archivos, habilitando los links de descarga.

ricard

Debe de ser una tontería, pero estoy encallado, he copiado todo exactamente como lo ponéis pero a la hora de insertar me dice que en el onClick no encuentra el procedimiento agregarPersona(), aunque este está declarado e incluso aparece en el html que wordpress renderiza. ¿Se ha de hacer algo especial para que sea visible desde el formulario? un saludo,

ricard

buen artículo, ¿podríais habilitar el link de descarga please? un saludo,

LasNiOjosAzules

RT @juanjedi: Ajax en plugins para WordPress > http://t.co/cEsFQT29 -- via @codigonexo

juanjedi

Ajax en plugins para WordPress > http://t.co/cEsFQT29 -- via @codigonexo