Uso de AJAX en WordPress

Fecha: septiembre 4, 2019 a las 11:05 am

Autor: ortizsanchezdev

Categorías: PLUGINS-WORDPRESS | WordPress Etiquetas: desarrollo | plugin | WordPress

WordPress tiene una forma peculiar de trabajar con AJAX. Ya lleva implementadas una serie de funciones que te facilitan el uso de dicha tecnología. Os dejo un par de funciones, PHP y JavaScript, a modo de ejemplo. Al final del post también os enlazo a la documentación oficial para cualquier otra duda que os surja.

Por pasos:

1. La dirección del fichero PHP al que enviaremos la información, vía POST, siempre será la misma: admin-ajax.php. La ruta de este archivo queda guardada en una variable, JavaScript, llamada ajax-url mediante el siguiente código (automático, lo genera WordPress, tú no tienes que hacer nada, sólo lo pongo para tu conocimiento):
   
   JavaScript

   <script type="text/javascript"> // Entre otras declaraciones... var ajaxurl = '/instalacion-wordpress-correspondiente/wp-admin/admin-ajax.php'; </script>

   1 2 3 4

   <script type="text/javascript"> // Entre otras declaraciones... var ajaxurl = '/instalacion-wordpress-correspondiente/wp-admin/admin-ajax.php'; </script>

2. Deberemos crear una función para recibir y procesar los datos en el backend:
   
   PHP

   function nombre_funcion() { /* ** Aquí desarrollamos el código PHP que necesite nuestra aplicación. ** Por ejemplo: una inserción de datos, una consulta SQL, etc. ** Si hemos enviado datos vía POST también sería aquí donde los ** capturaríamos: $variable = $_POST['dato_enviado']; */ } add_action( 'wp_ajax_nombreAccion', 'nombre_funcion' );

   1 2 3 4 5 6 7 8 9 10 11 12

   function nombre_funcion() {           /*         ** Aquí desarrollamos el código PHP que necesite nuestra aplicación.         ** Por ejemplo: una inserción de datos, una consulta SQL, etc.         ** Si hemos enviado datos vía POST también sería aquí donde los         ** capturaríamos: $variable = $_POST['dato_enviado'];         */       }       add_action( 'wp_ajax_nombreAccion', 'nombre_funcion' );

   
   Muy importante, en la última línea: ‘wp_ajax_nombreAccion’. Ese ‘nombreAccion’ sería el primer parámetro que pasaríamos a la función AJAX para hacerle saber a WordPress que función debe ejecutar, qué función recibirá el resto de datos vía POST, etc.
3. Aprovechando que WordPress ya incluye jQuery en su núcleo vamos a usar la función $.ajax para realizar las llamadas pertinentes:
   
   JavaScript

   jQuery.ajax({ type: 'post', url: ajaxurl, data: { 'action': 'nombreAccion', 'dato_enviado': 'Soy un string enviado vía POST' }, error: function (response) { // Código a ejecutar en caso de error... console.log(response); }, success: function (response) { // Código a ejecutar cuando sea correcto... console.log(response); } })

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   jQuery.ajax({     type: 'post',     url: ajaxurl,     data: {         'action': 'nombreAccion',         'dato_enviado': 'Soy un string enviado vía POST'     },     error: function (response) {         // Código a ejecutar en caso de error...         console.log(response);     },     success: function (response) {         // Código a ejecutar cuando sea correcto...         console.log(response);     } })

   
   Muy importante, en la línea 5: ‘action’: ‘nombreAccion’. Ese ‘nombreAcción’ sería el nombre asociado a la función que hemos desarrollado en el punto 2. Fíjate también, en la línea 3, como la variable url usa ‘ajaxurl’ como valor, recuerda que ajaxurl es una variable que genera WordPress de modo automática y que guarda la dirección del fichero admin-ajax.php, fichero que recibe las llamadas AJAX en WordPress.
   ¿jQuery?: En WordPress, para usar jQuery, se sustituye el famoso $ por la palabra jQuery. No es necesario usar CDN de jQuery o agregarlo manualmente a tu plugin o theme, recuerda: jQuery ya está incluido en el núcleo de WordPress.
4. ¿Alguna duda?, si te surge no dudes en dejarme un comentario. ¿Quieres más información?, echa un vistazo a la documentación oficial: aquí.

Comentarios: 0

---

---

---