Ajax, o JavaScript asíncrono y XML, se utiliza para comunicarse con scripts del lado del servidor y le permite cargar contenido dinámico sin tener que volver a cargar la página.

Digamos, por ejemplo, que está construyendo un Sitio web para una organización benéfica local y desea fomentar un ambiente positivo. Puede agregar un botón con la etiqueta "Muestra algo de amor! »Con contador en la página de inicio y, gracias a AJAX, cada vez que se activa el botón (hecho clic por un visitante), el contador aumenta sin volver a cargar la página.

Este es el ejemplo que crearemos en este tutorial.

En este tutorial, aprenderá más sobre qué es AJAX, cómo se puede usar y cómo crear funciones increíbles con él en WordPress.

Vamos a empezar.

Los fundamentos de AJAX

• El feed AJAX generalmente sigue los siguientes pasos:
• Iniciar una llamada AJAX debido a la acción del usuario
• Recibir y procesar la solicitud en el servidor
• Capture la respuesta y realice todas las acciones necesarias a través de JavaScript
• Configurar un nuevo entorno temático

Pongamos esto en práctica en WordPress. Nuestro primer ejemplo muestra una ventana emergente simple que contiene el número de comentarios de un artículo cuando hacemos clic en el título. Usaremos un tema hijo basado en el " veinte dieciséis De WordPress.

Esto es lo que tiene que hacer:

Cree una nueva carpeta en el directorio Temas en su instalación de WordPress en " wp-content "Y asígnele el nombre" ajax-test ", cree los dos archivos requerido por WordPress, a saber " functions.php "," Styles.css "y agregue un nuevo archivo llamado" script.js ". Agregue el siguiente código al encabezado de su hoja de estilo CSS (style.css).

/ * Nombre del tema: Prueba Ajax Tema URI: http://premium.wpmudev.com Descripción: Un tema para probar nuestros conocimientos AJAX Autor: Daniel Pataki Autor URI: http://danielpataki.com Plantilla: twentysixteen Versión: 1.0.0 Licencia Licencia Pública general de GNU o temprano Licencia v2 URI: http://www.gnu.org/licenses/gpl-2.0.html * /

La hoja de estilo del tema principal debe cargarla el tema secundario. En el pasado, esto se hacía importando el archivo CSS en el tema hijo, pero la forma recomendada de hacerlo es usar "enqueueing". Recuerde, le mostramos cómo utilizar esta función.

Vamos a añadir hoja de estilo de los padres y nuestro archivo JavaScript directamente:

add_action ( '', 'wp_enqueue_scripts ajax_test_scripts'); ajax_test_scripts función () {wp_enqueue_style (padre-style ', get_template_directory_uri ()' /style.css '.); wp_enqueue_script (. get_stylesheet_directory_uri 'ajax-test-scripts' () '/scripts.js', array ( 'jquery'), 1.0.0 ', true); }

Si sientes que tienes la energía para dar un paso más, busca una imagen agradable, recórtala a 880 px por 660 px y colócala en la carpeta de temas para niños, luego cámbiale el nombre " screenshot.png ". Aparecerá en la sección de apariencia, cuando quieras activar el tema.

Dado que este tema hijo se basa en " veinte dieciséis Y que no hemos cambiado nada (¡todavía!), El sitio debería verse exactamente como un tema clásico con el tema " veinte dieciséis ".

Agregar un botón

Para comenzar, agregaremos el botón " Mostrar unpeu amor! ". Un gran lugar para mostrarlo sería en la barra lateral de artículos temáticos.

Después de algunas investigaciones, resulta que la barra lateral es creada por una función llamada " twentysixteen_entry_meta () »Que reside en el directorio« inc / plantilla-tags.php ".

Esta función es " conectable Lo que significa que podemos modificarlo definiéndolo en nuestro propio archivo functions.php. El primer paso de esto es copiar y pegar la función completa en nuestro propio archivo functions.php:

function twentysixteen_entry_meta () {if ('post' === get_post_type ()) {$ author_avatar_size = apply_filters ('twentysixteen_author_avatar_size', 49); printf (' % 1 $ s % 2 $ s % 3 $ s ', get_avatar (get_the_author_meta ('user_email'), $ author_avatar_size), _x ('Autor', 'Usado antes del nombre del autor de la publicación.', 'twentysixteen'), esc_url (get_author_posts_url (get_the_author_meta ('ID'))), get_the_author ()); } if (in_array (get_post_type (), array ('publicación', 'adjunto'))) {twentysixteen_entry_date (); } $ formato = get_post_format (); if (current_theme_supports ('post-formatos', $ formato)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Formato', 'Usado antes del formato de publicación.', ' twentysixteen ')), esc_url (get_post_format_link ($ formato)), get_post_format_string ($ formato)); } if ('publicar' === get_post_type ()) {vigésimo dieciséis_entrada_taxonomías (); } if (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ('Deja un comentario en% s ', 'twentysixteen'), get_the_title ())); echo ' '; }}

Agreguemos nuestra clave al final de todos los metadatos:

$ amor = get_post_meta (get_the_ID (), 'show_some_love', verdadero); $ amor = (vacío ($ amor))? 0: $ amor; eco ' '. $ amor. ' ';

Explicar todo este código:

La primera línea recupera el número de amores que ha recibido el artículo. En algunos casos, estos datos no existirán, es decir, cuando aún no se haya hecho clic en el botón. Por esta razón utilizamos

la segunda línea en el código para establecer el valor en 0 si el valor está vacío.

La tercera línea entrega el botón, que consiste en un lapso que contiene una imagen y el número de amores. Dejé la fuente de la imagen vacía porque quiero usar un SVG allí. Puede usar un SVG codificado en base64 para crear una línea de imagen. Esto le evita tener que hacer demandas y hará que su sitio web más eficiente.

Usé esta pequeña imagen gratuita disponible este enlace. Copie y pegue el código que recibe en la fuente de la imagen de esta manera:

$love = get_post_meta( get_the_ID(), 'show_some_love', true );
$love = ( empty( $love ) ) ? 0 : $love;
echo '<span class="love-button"> <img width="28" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0MHB4IiBpZD0iTGF5ZXJfMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCA0MCIgd2lkdGg9IjQwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xOS45NzkwMDAxLDkuMTk1MzAwMSAgQzI1LjYzOTIwMDItMS44ODY3LDM4LjUxMTY5OTcsMy4zOTU5OTk5LDM3Ljk0OTE5OTcsMTMuMzAyN0MzNy4zNjM4LDIzLjYxNjE5OTUsMjIuODc0NTAwMywyNy4xNzM3OTk1LDE5Ljk3OTAwMDEsMzQuOTgxODk5MyAgQzE3LjA4MzAwMDIsMjYuOTc5MDAwMSwyLjc4OTU5OTksMjMuODExNTAwNSwyLjAwODMwMDEsMTMuMzAyN0MxLjI3MzksMy40MDc3MDAxLDE0LjkzNTk5OTktMS45MzEyLDE5Ljk3OTAwMDEsOS4xOTUzMDAxeiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGNTk0RjsiLz48L3N2Zz4="><span class="number">' . $love . '</span></span>';

También utilicé un poco de CSS para el estilo del botón para darle un efecto de desplazamiento. No es muy obvio si es un botón, pero lo será para nuestra simple prueba.

.Love botón img {margin-right: 6px; opacidad: 0.7; cursor: puntero; } Botón .Love img: hover {opacidad: 1; }

Activar una acción

¡Finalmente, llegamos a nuestro JavaScript! Debemos apuntar a nuestro artículo y detectar un clic en él. Aquí se explica cómo hacerlo:

(function ($) {$ (document) .on ('click', '.love-button img', function () {alert ("el amor se comparte");})}) (jQuery);

Si hace clic en el botón en este punto, debería ver una alerta de JavaScript con el texto "El amor se comparte". "

Requerimientos de datos

En lugar de este texto, necesitamos activar una llamada AJAX. Antes de escribir nuestro código, entenderemos lo que necesitamos enviar.

La URL de AJAX

En primer lugar, necesitamos un lugar para enviar datos. La ubicación donde enviamos los datos procesará los datos y atenderá la llamada. WordPress tiene un lugar integrado para manejar llamadas AJAX, que podemos usar: el " admin-ajax.php " al interior " wp-admin ". No podemos agregar esta URL a nuestro script (el uso de codificación "sin procesar" no es aceptable), Así que vamos a utilizar algunos de WordPress astucia.

La función wp_localize_script () Originalmente estaba destinado a traducir cadenas en archivos JavaScript, lo que hace bien. También podemos usarlo para pasar variables a nuestros archivos JavaScript, en este caso la URL de nuestro archivo AJAX. Agrega el siguiente código a nuestro archivo " funciones Como sigue:

wp_localize_script ('ajax-test-scripts', 'ajaxTest', array ('ajax_url' => admin_url ('admin-ajax.php')));

El resultado de este último objeto se llamará ajaxTest, que contendrá una matriz dada en el último parámetro como propiedades. Para ingresar el valor podemos usar ajaxTest.ajax_url en nuestro código JavaScript.

El identificador del artículo.

Enviaremos datos arbitrarios como el identificador del artículo (que usaremos para identificar el artículo al que queremos "agregar un poco de amor"). Esto se puede recuperar del DOM. Eche un vistazo a la estructura utilizada en el tema "Veintiséis" a continuación:

Nuestro botón tiene un "artículo" como uno de sus antepasados. Este elemento tiene la clase y contiene el identificador numérico del artículo. Aunque esta no es la solución más elegante, podemos tomar la identificación desde allí.

$ (Document) .en ( 'clic', 'img .Love botón', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). Atr ( 'id') .replace ( 'post', '')); console.log (id)})

La acción

WordPress también requiere que enviemos un parámetro llamado acción. Dado que todas las acciones se enviarán a admin-ajax, necesitamos una forma de diferenciar esas solicitudes, de ahí el uso de este parámetro.

Envío de una solicitud AJAX

Ahora podemos poner todo junto. Necesitamos crear una llamada AJAX para " wp-admin / admin-ajax.php Que contiene el ID del artículo y una acción. Así es como debería verse.

(Function ($) {$ (document) .en ( 'clic', 'img .Love botón', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). . attr ( 'id') en lugar de ( 'post', '')); $ .ajax ({url: tipo ajaxTest.ajax_url 'post', los datos: {acción: 'add_love' post_id: post_id} , el éxito: la función (respuesta) {alert ( 'éxito, el nuevo recuento es' + respuesta)}})})}) (jQuery);

$ .ajax () es la función utilizada que toma muchos parámetros. La url contiene el objetivo que actualmente es nuestro archivo ajax-url.php ". El tipo se establece en " post » como todas las solicitudes enviadas por un formulario. El parámetro de datos es un objeto que contiene " clave-valor Que queremos enviar al servidor. Posteriormente podremos leerlos con $ _POST ['action'] y $ _POST ['post_id'].

procesamiento de la solicitud

Normalmente necesitas editar el archivo " admin-ajax.php », Porque la solicitud se envía allí. Es un archivo de sistema, así que no lo vamos a modificar. WordPress le permite pasar solicitudes AJAX usando corchetes con el parámetro de acción. El modelo es el siguiente:

Si nombraste tu acción add_love Debe adjuntar una función a un gancho llamado " wp_ajax_add_love " y O " wp_ajax_nopriv_add_love ". Las acciones NoPriv ”Se ejecuta para usuarios desconectados, uno se activa solo para usuarios conectados. En nuestro caso, nos gustaría utilizar ambos. Como prueba rápida, estableceremos un valor de retorno predeterminado:

El parámetro de éxito es una función, que se ejecutará cuando se complete la llamada AJAX. Mostraremos una alerta simple que muestra “¡Bien hecho! La nueva cuenta es ”con nuestra respuesta agregada al final.

add_action ( 'wp_ajax_add_love', 'ajax_test_add_love'); add_action ( 'wp_ajax_nopriv_add_love', 'ajax_test_add_love'); función ajax_test_add_love () {echo 4; morir (); }

Adjuntamos nuestra función a ambos corchetes, uno hecho echo 4 y luego usó la función " morir () ". Esto es necesario en WordPress, de lo contrario, recibirá un 0 al final de cada respuesta. Si hace clic en el botón ahora, debería ver lo siguiente:

Para obtener el recuento real de Me gusta, todo lo que tenemos que hacer es recuperar el número actual, incrementarlo en uno, guardarlo en la base de datos y mostrar el nuevo número.

ajax_test_add_love función () {$ = amor get_post_meta ($ _POST [ 'post_id'] 'show_some_love', true); Amor = $ (vacío ($ amor))? 0: $ amor; $ Amor ++; update_post_meta ($ _POST [ 'post_id'], 'show_some_love' amor $); echo $ amor; morir (); }

Si hace clic en el botón ahora, debería ver la ventana emergente que muestra "1". Si actualiza la página, debería ver el nuevo número que se muestra. Al hacer clic nuevamente en el botón, lo hará 2 ". Todo lo que tenemos que hacer ahora es asegurarnos de que el número se refleje directamente en la interfaz de usuario.

Realice cambios en la interfaz de usuario utilizando la respuesta

Esta parte parece fácil (porque es), pero generalmente es el más difícil de armar. Por ahora, todo lo que tenemos que hacer es ubicar el elemento que contiene el número actual y modificar su contenido por la respuesta.

(Function ($) {$ (document) .en ( "clic", "img .Love botón ', function () {var = parseInt post_id ($ (this) .parents (' article.post:first '). . attr ( 'id') en lugar de ( 'post', '')); var $ = número $ (this) .parent () encuentra (. 'número') $ .ajax ({url :. ajaxTest.ajax_url, tipo: "post", los datos: {acción: 'add_love' post_id: post_id,}, el éxito: la función (respuesta) {$ number.text (respuesta);}})})}) (jQuery);

Solo agregué dos líneas a nuestro código JS anterior. En la línea 5, almaceno el elemento que contiene el número en la variable número $. En la línea 14, modifico el texto de este elemento para mostrar la respuesta, que es el nuevo número.

Eso es todo, básicamente debería poder ver esta nueva función en acción en su tema personalizado. Si tiene algún problema, háganoslo saber. ¿Tienes algún otro consejo que quieras compartir? Hazlo en la sección de comentarios.