JavaScript para desarrolladores de WordPress: usando AJAX

Ajax, o JavaScript y XML Asincron, se usa para comunicarse con scripts en el servidor y le permite cargar contenido dinámicamente, sin tener que recargar la página. Digamos, por ejemplo, que está creando un sitio web para una organización benéfica local y que desea alentar un ambiente positivo. Puedes agregar un botón titulado “¡Muestra un poco de amor!” Con un medidor en la página inicial y, gracias a AJAX, cada vez que se presiona el botón, el medidor aumentaría sin recargar la página. Este es el ejemplo que construiremos en el tutorial de hoy. Esta es la publicación final en nuestra serie de cinco partes que se centra en JavaScript para los desarrolladores de WordPress. A lo largo de esta serie, aprenderá los elementos básicos, pero supongo que ya tiene conocimiento práctico sobre HTML y CSS. Si necesita ayuda con estos bloques, eche un vistazo a nuestra serie de desarrollo de WordPress.
En los últimos cuatro tutoriales, observamos los elementos básicos de JavaScript, JQuey y cómo usar JavaScript básico en WordPress. En este artículo, descubrirá qué es Ajax, qué se puede usar y cómo crear características interesantes con él en WordPress. Vamos a empezar. ¿Te has perdido un tutorial en nuestra serie JavaScript para desarrolladores de WordPress? Puede mantenerse al día con las cinco publicaciones aquí:
JavaScript para desarrolladores de WordPress: aprendiendo los elementos básicos
JavaScript para desarrolladores de WordPress: nociones introductorias con objetos
JavaScript para WordPress Developers: nociones introductorias con JQuey
JavaScript para desarrolladores de WordPress: JavaScript se carga en WordPress
JavaScript para desarrolladores de WordPress: usando AJAX
Básico Ajax A Ajax Ajax Flux sigue los pasos a continuación:
Inicia una llamada AJAX debido a la acción de un usuario
Recibe y procesa la solicitud en el servidor
Capture la respuesta y realice todas las acciones necesarias a través de JavaScript
Configuración de un nuevo entorno de tema para establecer esto en WordPress. Nuestro primer ejemplo mostrará una ventana emergente simple que contiene el número de comentarios que una publicación tiene al hacer clic en el título. Usaremos un tema infantil basado en el tema predeterminado de veintiete años de WordPress, por lo que todos comenzamos desde la misma base. Esto es lo que debe hacer: crear una nueva carpeta en el Director de Temas de la instalación de WordPress y llamarla “Ajax-Test”. En el directorio, cree dos archivos: style.css, que requiere WordPress y Functions.php, que usaremos para agregar nuestra propia funcionalidad y, finalmente, script.js, que contendrá nuestro código JavaScript. Agregue lo siguiente a la hoja de estilo:
Cargue la idea 3bae5578f5b73595a262e45b4556095f
La hoja de estilo del tema principal debe cargarse con el tema secundario. En los viejos tiempos, esto se hizo importándolo desde el archivo CSS del tema infantil, pero la forma recomendada de hacerlo ahora es ponerlo en la cola. Si necesita una actualización para enquear, lea la cuarta parte de esta serie. Vamos a colocar la hoja de estilo del padre y nuestro archivo JavaScript en un solo movimiento:
Cargue la idea 3bae5578f5b73595a262e45b4556095f
Si siente que tiene la energía para dar un paso más allá, encuentre una imagen hermosa, córtela a 880px en 660px y colóquela en la carpeta de base del niño, luego llámela screesshot.png. Aparecerá en la sección de aspecto cuando esté listo para activar el tema. ¡Agregue una imagen sobre el tema y el voil de su hijo!

Debido a que este tema infantil se basa en veinte y dieciséis y no he cambiado nada (¡todavía!), El sitio debe verse exactamente como si estuviera ejecutando el padre. Agregar un botón para comenzar, para agregar “¡Muestra amor!” botón. Un gran lugar para decirlo sería la barra lateral del tema. Después de algunas investigaciones, resulta que la barra lateral es creada por una función llamada twentysexteen_entry_meta () que está en inc/plantplate-tags.php en el padre. Esta función es “conectable”, lo que significa que podemos cambiarla definiéndola en sus propias funciones de archivo.php. El primer paso es copiar y pegar toda la función en nuestras propias funciones de archivo.php:
Cargue la idea 3bae5578f5b73595a262e45b4556095f
Agregamos nuestro botón a la parte inferior de todos los metadatos:
Cargue la idea 3bae5578f5b73595a262e45b4556095f
Veamos qué significa todo ese código. La primera línea se hace cargo de la cantidad de amores recibidos por la publicación. En algunos casos, estos datos no existirán, es decir, cuando nadie tiene clic en el botón. Por esta razón, usamos la segunda línea en el código para establecer el valor en 0 si el valor está vacío. La tercera línea elimina el botón, que consiste en un rango que contiene una imagen y la cantidad de amor. Dejé la fuente de la imagen vacía porque quiero usar un SVG allí. Puede usar SVG codificado en Base64 para crear una imagen en línea. Esto guarda sus solicitudes y mejorará su sitio. Utilicé esta imagen cardíaca gratuita, haciendo clic en el enlace SVG – Base64 en él. Copie y pegue el código recibido en la fuente de la imagen de la siguiente manera:
Cargue la idea 3bae5578f5b73595a262e45b4556095f
También usé un pequeño CSS para atacar el botón y darle un efecto de desplazamiento. No es muy obvio que este sea un botón, pero funcionará para nuestra prueba simple.
Cargue la idea 3bae5578f5b73595a262e45b4556095f
Nuestro pequeño botón de amor, listo para ser alimentado por Ajax.
¡Dirigiendo una acción por fin, llegamos a JavaScript! Necesitamos dirigir nuestro elemento del botón y detectar un clic en él. Aquí le explica cómo hacerlo:

Cargue la idea 3bae5578f5b73595a262e45b4556095f
Si hace clic en el botón en esta etapa, debería ver una alerta de JavaScript con el texto “Dar amor”. Requisitos de datos En lugar de ese texto, necesitamos activar una llamada AJAX. Antes de escribir nuestro código, descubramos qué necesitamos enviar. La URL AJAX primero, necesitamos un lugar para enviar los datos. El lugar donde enviamos los datos procesará los datos y responderá a la llamada. WordPress tiene una ubicación incorporada para administrar las llamadas AJAX, que podemos usar: el archivo admin-ajax.php desde wp-admin. No tenemos forma de agregar esta URL a nuestro script (en breve para codificarlo, lo cual está excluido), por lo que usaremos algunos trucos de WordPress. WP_LOCALEDE_CRIZI () inicialmente tenía la intención de traducir cadenas en archivos JavaScript, lo que funciona bien. También podemos usarlo para transmitir variables a nuestros archivos JavaScript, en este caso la URL de nuestro archivo AJAX. Agregue el siguiente código a AJAX_TEST_SCRIPTS () nuestro AJAX_TEST_SCRIPTS existente () como sigue:
Cargue la idea 3bae5578f5b73595a262e45b4556095f
El resultado será un objeto llamado Ajaxtest, que contendrá la matriz dada en el parámetro final como propiedades. Para tomar el valor de AJAX_URL podemos usar Ajaxtest.AJAX_URL en JavaScript. El ID de publicación enviaremos datos arbitrarios, como Publicar ID (que usaremos para identificar la publicación a la que agregamos amor). Se puede tomar del DOM. Eche un vistazo a la estructura utilizada en el tema de veinte y dieciséis a continuación:
DOM de veintiecos dieciséis
Nuestro botón tiene un elemento de “artículo” como uno de sus antepasados.Este artículo tiene una clase y contiene la ID numérica en la propiedad ID.Aunque no es la solución más elegante, podemos tomar la ID a partir de ahí. La idea 3bae5578f5b73595a262e45b455695f está cargada.
La acción de WordPress también requiere un parámetro llamado acción.Debido a que todas las acciones se enviarán a Admin -AJAX, necesitamos una forma de diferenciarlas, este parámetro se usa para esto.Enviando una solicitud AJAX ahora podemos armar todo.Necesitamos crear una llamada AJAX a WP-Admin/Admin-AJAX.PHP que contiene ID de publicación y una acción.Así es cómo.

Cargue la idea 3bae5578f5b73595a262e45b4556095f
$ .AJAX () es la función utilizada que adquiere muchos parámetros. URL contiene el objetivo que actualmente es el archivo AJAX-URL.PHP de nuestro sitio. El tipo está configurado para publicar lo que debería ser familiar desde los formularios HTML. El parámetro de datos es un objeto que contiene valores clave que queremos enviar al servidor. Más tarde, podremos leerlos con $ _post [‘Action’] y $ _post [‘post_id’]. El parámetro exitoso es una función, que se ejecutará cuando se haya completado la llamada AJAX. Mostraremos una alerta simple que muestra “¡éxito! El nuevo número es “con nuestra respuesta atascada al final. Procesar la solicitud normalmente debe editar el archivo admin — ajax.php porque la aplicación se envía allí. Sin embargo, este es un archivo básico, lo que significa que la edición es un gran no. WordPress le permite preceder a las llamadas AJAX usando ganchos y parámetro de acción. El modelo es el siguiente: si ha llamado a la acción “add_love”, debe adjuntar una función (nombre de todos modos) a un gancho llamado wp_ajax_add_love y/o wp_ajax_nopriv_add_love. La noche se activa para los usuarios desconectados, la que no se activa solo para usuarios conectados. En nuestro caso, nos gustaría ambos. Como prueba rápida, codifiquemos una respuesta: Cargue la idea 3bae5578f5b73595a262e45b4556095f

Adjunté nuestra función a ambos ganchos, tengo un Echo 4 y luego usé la función Die (). Esto se requiere 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:
Ventana emergente para el botón Ajax
Para obtener el número real de “amor”, todo lo que tenemos que hacer es encontrar el número actual, aumentarlo con uno, guardarlo en la base de datos y hacer que el nuevo número eco. Cargue la idea 3bae5578f5b73595a262e45b4556095f
Si hace clic en el botón ahora, debería ver la ventana emergente que te muestra “1”. Si actualiza la página, debería ver la pantalla de nuevo número. Al hacer clic en el botón, volverá 2. Todo lo que tenemos que hacer ahora es asegurarnos de que el número se refleje inmediatamente en la interfaz de usuario. Hacer los cambios en la interfaz de usuario usando la respuesta esta parte parece fácil (porque lo es), pero generalmente es el más difícil de corregir, más sobre esto más adelante. Por ahora, todo lo que tenemos que hacer es identificar el elemento que contiene el número actual y cambiar su contenido en respuesta.
Cargue la idea 3bae5578f5b73595a262e45b4556095f
Solo agregamos dos líneas a nuestro código JS anterior. En la línea 5, almaceno el artículo que contiene el número en la variable de número $. En la línea 14, cambio el texto de este elemento para contener la respuesta, que es el nuevo número de amor. Otras preocupaciones AJAX no son demasiado difíciles en la superficie, pero se vuelve muy difícil cuando intentas crear una interfaz de uso hermosa. Enviar datos, procesarlos y crear una respuesta son casi triviales, pero aquí hay algunos problemas con el uso de la respuesta que puede no haber pensado:

¿Qué sucede si alguien duplica accidentalmente haciendo clic?
¿Qué sucede si alguien abusa del botón y lo presiona continuamente?
Si la respuesta tarda mucho en llegar, el usuario permanece solicitado.
El cambio de número puede no ser demasiado obvio.
El botón en sí no es obvio un botón.
Resolver estos problemas realmente no ingresa para el propósito de este tutorial. Algunos de estos se pueden aprender leyendo otros tutoriales, pero debe confiar en parte en su experiencia para crear una interfaz fluida y fácil de entender para sus acciones. La seguridad es otra gran preocupación. En este ejemplo de amor simple, puede no ser obvio, pero es posible que desee crear un botón para los administradores que eliminen las publicaciones. Todas las acciones deben ser protegidas por no. WordPress y Ajax Power para crear interfaces suaves y acciones útiles para el usuario es fácil con AJAX. Deberá enviar una solicitud, que contenga ciertos datos, procesarlo en el servidor, enviar una respuesta y usar la respuesta para iniciar cambios en la interfaz de usuario. Sin embargo, el verdadero desafío de AJAX es usarlo de manera responsable y asegurarse de que su interfaz esté apretada antes, durante y después de que se haya realizado su acción. Aunque este es el tutorial final en JavaScript para desarrolladores de WordPress, ¡su aprendizaje no debe detenerse aquí! Si desea continuar expandiendo su conocimiento de JavaScript, aquí hay algunos recursos excelentes que vale la pena verificar: JavaScript elocuente: Disponible tanto en el libro digital como en papel, Eloquent JavaScript es una introducción integral y bien estructurada a JavaScript, ya sea que sea nuevo en El idioma o usted es un sombrero viejo que busca una forma rápida de ir al poder.
W3Schools: Parece que W3Schools ha existido para siempre y por buenas razones: es un excelente recurso para principiantes, que está lleno de ejemplos. Lo mejor, puede editar los ejemplos de JavaScript en el sitio en vivo y puede ver los resultados de sus cambios en el front-end. para principiantes. Se divide en ocho unidades que cubren conceptos, incluidas funciones, bucles, flujo de control, estructuras de datos y objetos. También hay un proyecto final que implica construir un juego desde cero, pero tendrá que actualizar a Codecademy Pro para obtener acceso.
Java JavaScript: esta colección de documentación cubre las partes más extrañas del lenguaje de programación. Proporciona consejos sobre cómo evitar errores ordinarios y errores sutiles, así como problemas de rendimiento y malas prácticas que aquellos que comienzan con JavaScript pueden cumplir en el proceso de aprendizaje.
Envato Tuts+: Si eres completamente nuevo en JavaScript, no sabes por dónde empezar y necesitas una mano, este fantástico artículo es una gran rampa de lanzamiento.
JavaScript de la manera correcta: a pesar de su nombre, esta guía de página no proporciona instrucciones sobre la “forma correcta” para aprender JavaScript, sino que representa una colección de recursos enviados por los desarrolladores, desde la información sobre cómo comenzar y las mejores prácticas, las herramientas de prueba y marcos como jquey y backbone.js.
Al igual que con el aprendizaje de cualquier habilidad nueva, cuanto más lea y practique, más fácil de aprender y más pronto estará en otro idioma.¡Mucho éxito con su viaje de JavaScript! ¿Encontraste este tutorial útil?¿Por qué quieres aprender JavaScript en el desarrollo de WordPress?¿De qué quieres saber más?Háganos saber en los comentarios a continuación.
Etiquetas:
Ajax
Javascript