Hola y bienvenidos a un nuevo post de la Escola Espai. Hoy os traigo un peque\u00f1o tutorial que os puede resultar muy \u00fatil. 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\u00f1aros algo que a mi me ha resultado muy \u00fatil en varias ocasiones que es guardar la informaci\u00f3n en la base de datos de nuestro WordPress.<\/p>\n
En este ejemplo trabajaremos con JavaScript mediante la librer\u00eda JQuery, PHP y los hooks de WordPress. Sino hab\u00e9is trabajado con alguna de estas tecnolog\u00edas no os preocup\u00e9is es bastante sencillo.<\/p>\n
Cabe mencionar que para trabajar en nuestro WordPress lo haremos siempre desde la plantilla hijo. Para m\u00e1s informaci\u00f3n pod\u00e9is leer este art\u00edculo del blog de la escuela.<\/a><\/p>\n 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\u00f3n de WordPress: wp_enqueue_script()<\/a>. Con esta funci\u00f3n evitamos sobrescribir otros scripts evitando posibles errores. Para usarla a\u00f1adimos el siguiente c\u00f3digo a nuestro archivo functions:<\/p>\n Con este c\u00f3digo hacemos algo muy sencillo. Estamos enlazando nuestro archivo de js con nuestra plantilla de WordPress. Ver\u00e9is que le estoy pasando 3 par\u00e1metros a wp_enqueue_script(). En el enlace de arriba, se explican cada uno de los par\u00e1metros del m\u00e9todo. En mi caso, s\u00f3lo le digo c\u00f3mo se llamar\u00e1 el script, d\u00f3nde est\u00e1 mi archivo y que dependencias tiene que cargar (JQuery).<\/p>\n Nota: Para usar JQuery en nuestra hoja sin crear conflicto en WordPress, debemos escribir el siguiente c\u00f3digo a modo de document.ready:<\/p>\n A parte, os habr\u00e9is fijado que lanzo otra funci\u00f3n: 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\u00f3n de WordPress. Este archivo es el encargado de hacer que Ajax funcione. Pensad que WordPress ya viene integrado con Ajax. Eso es fant\u00e1stico, y gracias a este m\u00e9todo podemos sacar partido a esta funcionalidad del CMS.<\/p>\n Para m\u00e1s info:\u00a0https:\/\/developer.wordpress.org\/reference\/functions\/wp_localize_script\/<\/a>.\u00a0Con esta funci\u00f3n podemos pasar un objeto con la url de los diferentes scripts que necesitemos (en nuestro caso s\u00f3lo Ajax).<\/p>\n Fijaos que \u00abvars\u00bb es el nombre que he escogido para mi objeto, \u00abajaxurl\u00bb la clave que contendr\u00e1 la url, y por \u00faltimo el valor. Este valor lo busco mediante la funci\u00f3n admin_url(). As\u00ed me aseguro que la ruta sea correcta en cualquier instalaci\u00f3n de WordPress.<\/p>\n Ahora, vamos a crear el script que lanzar\u00e1 el m\u00e9todo de ajax para enviar al servidor la informaci\u00f3n que queramos.\u00a0 En mi caso voy a utilizar la funci\u00f3n $.post de JQuery, ya que enviar\u00e9 los datos a trav\u00e9s de POST.<\/p>\nPreparando el arhivo functions.php<\/h2>\n
\r\nadd_action('wp_enqueue_scripts', 'mi_js');\r\n\r\nfunction mi_js(){\r\n\r\n\twp_enqueue_script('miscript', get_template_directory_uri(). '\/..\/temahijo\/js\/scripts.js', array('jquery'));\r\n\twp_localize_script('miscript','vars',['ajaxurl'=>admin_url('admin-ajax.php')]);\r\n\r\n}\r\n<\/pre>\n\r\njQuery(document).ready(function($) {\r\n \/\/ dentro de esta funci\u00f3n $() funcionar\u00e1 como un \u00e1lias de jQuery()\r\n});\r\n<\/pre>\nCreando el Ajax para enviar informaci\u00f3n al servidor<\/h2>\n