En este tutorial voy a explicar con detalle (y código) como funciona Ajax junto con WordPress y cómo podemos aplicarlo en nuestro propio plugin.
Este tutorial está está enfocado a desarrolladores que estén creando su propio plugin de WordPress, partiendo de la base de que ya sabéis crear un plugin.
Creando la función Ajax a la que queremos llamar
<?php function mi_funcion_ajax(){ echo 'Soy una llamada Ajax de mi plugin WordPress y he funcionado correctamente'; die(); } // Creando las llamadas Ajax para el plugin de WordPress add_action( 'wp_ajax_nopriv_mi_funcion_accion', 'mi_funcion_ajax' ); add_action( 'wp_ajax_mi_funcion_accion', 'mi_funcion_ajax' ); ?>
En el archivo principal de vuestro plugin tenéis que crear la función, en este caso ‘mi_funcion_ajax()’ que será la llamada Ajax que se ejecutará.
Después hay que enlazarla a una acción (action), para que cuando esa acción sea llamada ejecute la función Ajax. Para que wordpress sepa que es una acción ajax el nombre tiene como prefijo “wp_ajax_”, es decir si nuestra acción se llama “mi_funcion_accion”, tendremos que poner como nombre de la acción “wp_ajax_mi_funcion_accion”.
Pero no termina aquí, las acciones Ajax de WordPress tienen en cuenta 2 casos, usuarios registrados y usuarios invitados:
– Usuarios invitados el prefijo “wp_ajax_no_priv_”
– Para usuarios identificados el prefijo “wp_ajax_”
Por lo tanto si queremos que funcione para ambos casos tendremos que añadir los 2 add_action del ejemplo de arriba, ambos hacen la llamada a la misma función ‘mi_funcion_ajax’, aunque si quisieramos podríamos tratarlos de modo independiente y hacer que llamen a funciones diferentes.
Por otro lado tenemos que crear un archivo .js, en mi caso está situado dentro de la carpeta del plugin y se llama “ajax-plugin-wordpress.js”.
En este caso cuando se hace click al botón de enviar el formulario se ejecuta el código javascript, el cual hace la llamada Ajax a nuestra función en php.
<script type="text/javascript"> $(window).load(function() { $("#formulario").submit(function(event) { event.preventDefault(); $.ajax({ type: 'POST', url: 'http://www.mipaginaweb.com/wp-admin/admin-ajax.php?action=mi_funcion_accion', data: $("#formulario").serialize(), success: function(resp) { window.location.replace('http://www.mipaginaweb.com/ajax-plugin-wordpress/?id=' + resp); } }); }); }); </script>
En este código hay que tener en cuenta un par de cosas, las cuales hacen que la llamada Ajax sea un poco diferente de como lo haríamos fuera de WordPress.
Normalmente el parámetro url contendría la url de un archivo ajax que ejecutaría nuestra función. Al hacerse con WordPress hay que adaptase a como funciona éste, por lo que todas las llamadas Ajax van dirigidas a este archivo /wp-admin/admin-ajax.php y se le tiene que pasar por parámetro _GET el action al que irá dirigido, en el caso del ejemplo irá dirigido a la función “mi_funcion_activador”.
Por lo que la url será: http://www.mipaginaweb.com/wp-admin/admin-ajax.php?action=mi_funcion_accion
Después tal y como haríamos en cualquier llamada Ajax, pasamos los datos que queremos enviar a nuestra función Ajax mediante la variable “data”, en este caso hacemos un serialize al formulario y de esta forma se envian todos los datos introducidos.
Ahora añadimos el archivo javascript para que se incluya en la web
<?php function inserta_mi_javascript() { echo '<script type="text/javascript" src="'.PLUGIN_URL.'/js/ajax-plugin-wordpress.js"></script>'; } add_action('wp_footer', 'inserta_mi_javascript'); ?>
Aquí hacemos que cuando cargue el footer haga la llamada a la función “inserta_mi_javascript” la cual añade el archivo “ajax-plugin-wordpress.js”
¡Fin! Con esto ya podemos hacer y entender como se hace una llamada Ajax en un plugin de WordPress.
Cualquier comentario es bienvenido y si algo no se entiende intentaré corregirlo para que quede más claro.
Espero que os haya servido de ayuda, si es así agradecería que lo compartieséis en las Redes Sociales. ¡Muchas gracias!
Muchas gracias Pau!!
Estaba buscando alguna solución para cargar por ajax los contenidos de unas pestañas y creo que he dado con la explicación ideal. Ya había visto los actions de AJAX y (remotamente) intuía como iba el asunto pero el articulo ha sido muy clarificador!
Te comento sobre el código que propones que para incluir js’s recomiendan usar los métodos wp_register_script(…) y wp_enque_script(…) que tienen parámetros para definir dependencias, si queremos o no que los enlaces se pongan al final del body y parece que usando estos métodos evitas repeticiones de enlaces a scripts y además wordpress les aplica el minify…
Sólo es un comentario con voluntad constructiva. si ya los conocías y tienes tus motivos para usar hacer el echo con el action «wp_footer» encantado de leerlos.
Gracias de nuevo!!!
Hola Iván
La verdad es que no conocía las ventajas del wp_register_script(…) y wp_enque_script(…), pero por lo que dices es el modo correcto de incluir un javascript en un plugin, así que lo probaré 🙂
Por otro lado, por supuesto que me tomo el comentario como algo constructivo, lo importante es aprender a hacer las cosas bien, todos tenemos algo que aportar.
Muchas gracias por tu comentario y me alegro que te haya sido de utilidad el tutorial!
Una pregunta. ¿Qué se supone que haría todo esto? Estoy intentando que funcione pero nomás no se que me falla. Desde ya muchas gracias por compartir tus conocimientos
Hola buenas noches, hay alguna manera que en el momento de que le de en «Enviar» aun formulario de contacto me ejecute una funcion de php que yo hayase hecho! La verdad no se como empezar espero y me puedas orientar! te mando un cordial saludo