Uso de AJAX y PHP en su sitio web de WordPress creando su propio complemento

¡El buen diseño es invisible! Es como un aire acondicionado establecido en el control de temperatura automática. Hasta que te sientas demasiado caliente o frío, no prestas atención, enfocándote en la tarea que tienes a mano o simplemente disfrutando de tu tiempo. Para los usuarios que navegan en la web, Ajax es como un aire acondicionado automático. Hace que los sitios web sean más fluidos y más rápidos de usar, lo que resulta en una experiencia agradable. Y lo más importante, ¡simplemente funciona! Si prefieres un video, ¡tienes suerte! ¿Qué es exactamente Ajax? AJAX es una técnica de desarrollo web que representa un J Avascript II – X ML sincrónico. Se utiliza para crear aplicaciones web dinámicas, interactivas y divertidas. Con Ajax, no tiene que esperar a que la página web se recargue para ver un cambio. Todo se cuida automáticamente en segundo plano, sin perturbar lo que hace, mejorando así su experiencia de usuario.
Ajax en el trabajo! Probablemente ya haya conocido a Ajax en la web. La función automática de finalización de búsqueda de Google es quizás la más popular. Google Maps es otro. Actualización de tweets en vivo, comentarios de Facebook, publicaciones de Reddit, apreciación de YouTube, todas estas increíbles experiencias de usuario son posibles gracias a AJAX y tecnologías relacionadas. En esta publicación, le daré una introducción rápida a AJAX, enumeraré sus ventajas, explicaré cómo funciona en WordPress y luego se dirigirá a un simple complemento WordPress Ajax. ¿Suena divertido? Vamos a empezar.
Las bases de Ajax Ajax usan una combinación de lenguajes de programación, como HTML/CSS, JavaScript, XML/JSON y un lenguaje de secuencias de comandos en el lado del servidor (PHP, ASP.NET, etc.). Funciona enviando datos desde su navegador al servidor, que procesa y los envía una respuesta. El navegador utiliza esta respuesta para actualizar la página web sin recargarla. Así es como suele ser: una acción del usuario desencadena un evento en un navegador (como un clic de botón).
Se activa la llamada AJAX, que envía una solicitud al servidor, utilizando XML/JSON.
El script en el lado del servidor procesa esta solicitud. También puede acceder a la base de datos si es necesario.
El servidor luego envía una respuesta al navegador.
Una segunda función de JavaScript, llamada función de llamada inversa, recibe la respuesta y actualiza la página web.
Muchas ventajas de Ajax

Minimiza el uso del ancho de banda y optimiza las operaciones de red, porque los servidores no estarán obligados a procesar muchos datos.
Guarde tiempo tanto para los usuarios como para el servidor porque el usuario puede ver la respuesta del servidor de inmediato.
Mayor rendimiento. Como los datos no se envían desde toda la página, AJAX mejora el rendimiento, la velocidad y la capacidad de usar páginas/aplicaciones web.
Mayor reactividad. Al eliminar la recarga de toda la página, los sitios web serán más rápidos y muy receptivos, por lo tanto, más fácil de usar.
Las habilidades necesarias para trabajar con Ajax en WordPress
HTML, CSS y JavaScript (JQuey es suficiente) Conocimiento
Familización básica con formatos de intercambio de datos XML o JSON
Conocimiento sobre PHP para secuencias de comandos en el servidor
Si su conocimiento de JQuey o PHP se toca y se deja, ¡no se preocupe! Todavía puede seguir la lógica del tutorial. Siéntase libre de ingresar a la sección de comentarios si está bloqueado o necesita ayuda con algo 🙂 Introducción a WordPress WordPress ya está usando AJAX, pero solo en las pantallas de administración. Por ejemplo, cuando tiene comentarios o agregar/eliminar elementos de categorías o publicaciones, puede ver actualizaciones instantáneas gracias a AJAX. También es la tecnología detrás de la muy querida funcionalidad de salvación automática. AJAX se usa más comúnmente con funciones de jquey en WordPress, ya que es mucho más simple en comparación con Vanillajs. Además, el núcleo de WordPress ya está cargado con la biblioteca JQuey. Así es como muestra el proceso de usar AJAX en WordPress:
El usuario desencadena una solicitud AJAX, que se envía por primera vez al archivo admin-ajax.php desde la carpeta WP-Admin.
La solicitud AJAX debe proporcionar al menos una parte de los datos (utilizando el Get o Post). Esta solicitud se llama acción.
El código en admin-ajax.php usa la acción para crear dos ganchos: wp_ajax_youraction y wp_ajax_nopriv_youraction. Aquí, su Yoraction es el valor de Get o Post Variable Action.
El primer gancho WP_AJAX_OURACTION se realiza solo para usuarios conectados, mientras que el segundo WP_AJAX_NOPRIV_YOURACTION se aborda exclusivamente a los usuarios desconectados. Si desea apuntar a todos los usuarios, debe activarlos a ambos por separado.
Planifique las funciones del gancho para una degradación elegante. Asegura que su código funcione incluso en los navegadores con JavaScript discapacitado.
Para crear un complemento AJAX de WordPress, cada gran viaje comienza con un solo paso, como es nuestro aprendizaje. Creemos un complemento básico de WordPress llamado Post Like Counter, con las siguientes características: los usuarios autenticados pueden apreciar las publicaciones.
El complemento conserva un número total de apreciaciones y las muestra.

El mostrador de la cita en la publicación se actualiza instantáneamente en el front-end.
Los usuarios desconectados se mostrarán un mensaje de error si intentan apreciar una publicación.
Para comenzar, cree un complemento WP vacío y activelo. Si necesita ayuda a este respecto, puede consultar nuestra Guía de desarrollo de WordPress Plugin. WordPress Codex también tiene una página detallada de escribir un complemento WP. Encuentre la plantilla de publicación de su base después, debe encontrar la plantilla de publicación Single.php. Este archivo se puede encontrar en la carpeta raíz de su base activa. Manténgalo abierto para la edición.
Prepare la plantilla de publicación para una llamada AJAX para crear un enlace aquí para permitir que los usuarios les gusten las publicaciones. Si un usuario ha activado JavaScript, usará el archivo JavaScript que crearemos más adelante; Si no, el enlace seguirá directamente. Coloque el código a continuación en su archivo Single.php.
Cargue la idea 1379AC822720E8C8C1860209A2BFE323
Alternativamente, puede agregar este código a cualquiera de las partes de la plantilla que incluye el archivo Single.php. Por ejemplo, si usa el tema oficial de veinte diecinueve, puede ingresar este código en el archivo content-single.php del tema. Para probar este código de complemento, lo inserté en este archivo al final de su div. No verá ningún resultado útil, porque aún no ha creado ninguna función para realizar su acción. Para hacer esto, cree una función en el archivo de complemento y agréguela a los dos ganchos de WordPress para usted. Siga el código presentado a continuación:
Cargue la idea 5B77823B65250637EEE4396D8ABCC5A0

Si todo se verifica, cuando un usuario conectado hace clic en el enlace de publicación similar, el medidor similar por encima debe crecer automáticamente con 1. Para los navegadores JavaScript desactivados, la página se actualizará, pero continuará mostrando la cantidad de me gusta actualizados.
La función de administración de usuarios desconectada no hace mucho aquí, excepto por un mensaje de error. Está destinado a servir como ejemplo. Puede, por supuesto, confiar en esto y brindar a los visitantes opciones más útiles. Finalmente, agregar el soporte de JavaScript es una buena práctica para agregar el soporte de JavaScript al final, porque deja las cosas mucho más claras. Para usar AJAX en WordPress, debe poner la biblioteca JQuey en la cola, así como el archivo JavaScript personalizado. Para esto, vaya a su complemento y agregue el siguiente script:
Cargue la idea C4BA96F5AC2997B294C70C90B82D43D3OD, sin embargo, es el momento de crear el archivo JavaScript liker_script.js. Luego debe cargar este archivo en la ubicación mencionada en el código anterior (sugerir: es la carpeta raíz del complemento). Aquí está el código para liker_script.js:
Cargue la idea 9D3183EECA419DA10B9B9F97EF236B87
La función my_user_like () definida en nuestro complemento debe enviar nuestro navegador como una matriz de resultados codificados en JSON, que también se puede usar como un objeto JavaScript. Usando esto, podemos actualizar el número de publicaciones de POST sin recargar la página web.
¡Y eso es! Uraaaaaaa! Ahora ha activado la funcionalidad AJAX para su complemento, por supuesto, puede extender esto y agregar más funciones como lo desee. ¡Vamos, cámbielo hasta que tengas éxito!
Nuestra publicación simple como medidor. Puede agregar estilos, animaciones y otros guiones para aumentar el nivel.
Complementos notables de WordPress usando AJAX ¿Necesita una inspiración de Ajax para alentarlo? Vea estos increíbles complementos de WordPress que utilizan el poder de AJAX para crear funciones fuertes y más experiencias de usuario fluidos.
Los complementos de carga Lazy Lazy es una técnica de desarrollo web utilizada para mejorar el tiempo de carga inicial. Se logra retrasando la carga de activos ricos en recursos que no son visibles para el usuario en vista de su navegador. Estos activos se cargan automáticamente cuando el usuario ejecuta la página web. La versión gratuita de Smush acepta la carga perezosa.
Formando un complemento completamente extensible para la creación de formularios, que también aceptan encuestas, cuestionarios, formularios de pedido con opciones de pago, etc. Tiene una opción para activar los formularios de envío con AJAX, por lo que es una experiencia perfecta para los usuarios. Ponnerate con AJAX Su sitio web de WordPress con AJAX Fluid Connecting and Grabando efectos con este complemento rico. Si desea brindar a los usuarios una mejor experiencia de conexión y registro que WordPress predeterminada, no busque.
WP-Postratings Este complemento simple agrega un sistema de evaluación AJAX para las publicaciones y páginas de su sitio de WordPress. Además, agregue soporte de código corto para las evaluaciones para que pueda mostrarlas en cualquier lugar.

El filtro de productos AJAX de WooCommerce un complemento extremadamente útil y potente para WooCommerce, que le permite aplicar los filtros exactos que necesita para mostrar las variantes del producto que está buscando. Ajax se asegura de que todo suceda en un momento.
AJAX Search Lite un complemento de búsqueda receptivo en tiempo real, alimentado por AJAX. También incluye la finalización automática de Google y las sugerencias de palabras clave. Brinde a los usuarios una mejor experiencia de búsqueda en su sitio web con este complemento.
Chat simple Ajax ¿Alguna vez se ha preguntado si podría hablar en vivo con otros usuarios en un sitio web? Este complemento alimentado por AJAX es la respuesta. Es compatible con dispositivos móviles y está creado para ser extremadamente personalizable como desee.
Vaya a WordPress.org Plugin Warehouse para implementaciones de AJAX más brillantes.¡Manténgase tranquilo y Ajax On!Lo que es bueno para es bueno para el usuario y el servidor, pero debe equilibrarlo.AJAX es una herramienta poderosa en su arsenal para mejorar el rendimiento del sitio y la experiencia del usuario.Pero debe usarlo solo cuando sea necesario.Siempre concéntrese en el aspecto de experiencia del usuario.Al principio será un poco duro, pero una vez que haya dominado los elementos básicos de Ajax, ¡ya no puede detenerlo! ¿Ha utilizado o creado un complemento basado en Ajax para WordPress?¿Pensando en otros usos interesantes para Ajax?Cuéntanos tus pensamientos en los comentarios a continuación.
Etiquetas:
Ajax
código
Conexión
WordPress