¿Alguna vez notó que algunos sitios web, y especialmente las aplicaciones web, nunca requieren que vuelva a cargar la página? El contenido se carga automáticamente cuando hace clic en un enlace, inicia sesión desde una pequeña ventana emergente y todo es agradable y rápido. ¿No es genial? La magia que lo impulsa casi siempre está impulsada por AJAX , una herramienta de JavaScript para cargar contenido en su navegador sin cargar una página.
Agregar la funcionalidad AJAX a su sitio de WordPress es una excelente manera de mejorar su experiencia de usuario, mantener a los usuarios en su sitio por más tiempo y darle a su sitio una sensación más similar a la de una aplicación. AJAX en WordPress es un tema amplio y altamente técnico, pero afortunadamente hay algunos complementos agradables y gratuitos para «AJAXificar» fácilmente su sitio.
Antes de comenzar, es importante entender qué es AJAX y tener una idea básica de cómo funciona. Un navegador web toma un conjunto de archivos HTML, CSS y JavaScript y los convierte en lo que ve en la pantalla. Dado que todo esto sucede en el navegador, llamamos a este procesamiento «del lado del cliente». Debido a que sucede en el lado del cliente, puede continuar después de que la página se cargue.
Por otro lado, PHP, que es el lenguaje en el que está escrito WordPress, es lo que llamamos un lenguaje del “lado del servidor”. Esto se debe a que todo su procesamiento se realiza en el servidor antes de enviar los resultados, como HTML, a su navegador, todo a la vez. Dado que su navegador no puede ejecutar ningún PHP, una vez que se procesa la página, no se puede realizar más procesamiento de PHP. Dado que las páginas de WordPress se construyen usando plantillas PHP de su navegador, solo su servidor puede construirlas.
Ahí es donde entra en juego AJAX. La A en AJAX significa asíncrono, es decir, no todo a la vez. Gracias a AJAX, en cualquier momento su navegador puede pedirle al servidor que devuelva un HTML nuevo. La mayor parte de este artículo cubre cómo cargar contenido de publicaciones en WordPress sin cargar una nueva página. El contenido aún debe renderizarse en su servidor usando PHP. En lugar de volver a solicitar toda la página, su navegador puede enviar una solicitud separada o asíncrona si desea obtener una solicitud técnica solo para ese contenido.
¿Hay una manera fácil de AJAXificar mi sitio?
En este momento, probablemente esté pensando: «Josh, me encantaría que mi sitio estuviera totalmente AJAXificado, pero eso suena como mucho trabajo, ¿no puedo simplemente instalar un complemento?» La respuesta a eso es tal vez.
Hay un complemento que tiene como objetivo hacer exactamente eso Ajaxify WordPress Site (AWS) que está disponible de forma gratuita en el repositorio de complementos de WordPress. Requiere un poco de configuración, pero si se configura correctamente, permitirá la carga de AJAX de todas las páginas y actualizará la URL en el navegador correctamente. Una vez que esté funcionando, te sorprenderá lo rápido que es.
Tuve problemas en los que impidió que otras funciones de JavaScript se ejecutaran correctamente. Debería poder evitar eso configurándolo para ignorar ciertos contenedores, que cubriremos en un momento. Este complemento debería funcionar con la mayoría de los temas, simplemente no lo tome como una garantía, funcionará con su tema.
Una vez que instale el complemento , deberá proporcionarle cierta información sobre su tema en la página de configuración de complementos. Esa es la identificación del contenedor de su área de contenido principal y la clase aplicada a los elementos del menú. Veamos ambos individualmente.
En general, solo necesita establecer la ID del contenedor en el que se encuentra su contenido principal, es decir, su bucle. Para encontrar esto, puede abrir su tema en un editor de código o usar el inspector de su navegador para encontrar la etiqueta de ID del contenedor para su contenido principal. Su valor variará de un tema a otro, pero probablemente sea algo así como «contenido principal», «principal» o «contenido».
En las dos capturas de pantalla anteriores, puede ver cómo encontré la ID que necesitaba «contenido» en veinticuatro, a la izquierda está index.php cargado en mi editor de código. Una vez que sepa esa ID, puede ingresarla en el campo «ID del contenedor Ajax» de la página de configuración de complementos.
El siguiente paso es encontrar la clase aplicada a los elementos del menú. Esto es generalmente «menú» o «menú de navegación». Querrá asegurarse inspeccionando un elemento del menú.
Una vez que esas dos configuraciones estén dentro y haya guardado su configuración, debe ir al front-end de su sitio y probarlo. Cuando hace clic en un enlace en el índice de su blog o en su menú, debería mostrarle brevemente un ícono de carga y luego cargar el nuevo contenido. No debería recargarse la página y la barra de direcciones del navegador debería actualizarse automáticamente.
Si no es así, lo primero que debe hacer es verificar la consola de su navegador en busca de errores de javascript. Puedo confirmar que este complemento funciona perfectamente bien con WordPress 4.0 y el tema veinticuatro. Otros temas o complementos pueden introducir conflictos de JavaScript que deberán abordarse. Si no ve ningún error en la consola, es probable que haya ingresado la configuración incorrecta.
Una vez que tenga las cosas funcionando correctamente, debe experimentar con las otras configuraciones del complemento. Puede cambiar la imagen del cargador a una de varias opciones. Además, puede configurar el complemento para que se desplace hacia la parte superior automáticamente cuando se complete su actualización.
Acceder a AJAX
Otra forma genial de evitar cargas de página y hacer que su sitio sea más «similar a una aplicación» es usar un modal con tecnología AJAX para iniciar sesión. Un modal es un cuadro emergente en la página. La capacidad de que sus usuarios inicien sesión sin ir a la página de inicio de sesión de WordPress es excelente. Hay varios complementos que ofrecen esto, mi favorito es AJAX BootModal Login , que se puede descargar gratis desde WordPress.org.
Este es uno de esos complementos que simplemente funciona, con una configuración mínima, pero tiene algunas opciones interesantes. Todo lo que necesita hacer para que funcione es instalar el complemento y luego agregar su widget a su barra lateral. Una vez que lo haga, los usuarios que no hayan iniciado sesión verán un botón de inicio de sesión y los usuarios registrados verán un botón de perfil. Como alternativa al uso del widget, para agregar un enlace de inicio de sesión en una página, use este código abreviado:
|
01
|
[Alimir_BootModal_Login] |
Una cosa a tener en cuenta es que el complemento usa Bootstrap para impulsar los modales que usa. Si su tema o cualquiera de sus complementos usa Bootstrap, esto podría causar conflictos. La página de configuración del complemento tiene opciones para deshabilitar la carga de su propia copia de Bootstrap.
Cuando hace clic en el botón de inicio de sesión, aparece un formulario para ingresar el nombre de usuario y la contraseña. También tiene un enlace de registro y contraseña perdida, los cuales se pueden desactivar desde la configuración del complemento. Además, puede habilitar captcha para iniciar sesión o restablecer la contraseña, que es una gran característica adicional.
Otra gran característica es que puede establecer un enlace de redirección para llevar al usuario después de iniciar sesión. De manera predeterminada, permanecen en la misma página, pero si desea llevarlos a una página de bienvenida o una página de cuenta, simplemente configure el enlace en la configuración de «URL de redirección de inicio de sesión». Tampoco necesita pasar la URL completa, solo la ruta, lo cual es excelente para la compatibilidad futura en caso de que cambie su nombre de dominio.
¿Qué más puedes AJAXificar?
Puede ajaxificar casi cualquier cosa en WordPress. Hay muchos complementos geniales con tecnología AJAX. AJAX es especialmente bueno para reducir el tiempo involucrado en las búsquedas de contenido.
Recientemente escribí en este blog sobre el uso de FacetWP para crear un sistema de búsqueda «facetado» al estilo de Amazon.com. Parte de lo que lo hace tan genial es que los resultados se cargan a través de AJAX. Otro complemento de búsqueda genial, SearchWP, tiene un complemento gratuito con tecnología AJAX para los resultados de búsqueda de AJAX. La mejor parte de ese complemento es que funciona sin SearchWP instalado a través de la búsqueda predeterminada de WordPress y debería funcionar con la mayoría de los principales complementos de búsqueda de WordPress .
Otra parte de la mayoría de los sitios que se puede mejorar con AJAX es el envío de formularios. La mayoría de los formularios realmente no necesitan redirigirse después del envío, solo lo hacen para permitir que PHP los procese. AJAX permite que los datos se envíen al servidor para su procesamiento a través de AJAX sin cargar la página. Muchos complementos de creación de formularios tienen complementos AJAX o lo tienen integrado como una opción. Mi favorito personal es Caldera Forms , que le permite activar y desactivar el envío de formularios AJAX por formulario.
Asegúrese de probar todas estas formas diferentes de AJAXificar fácilmente su sitio web. Mientras lo hace, asegúrese de comenzar a pensar en otras formas en las que le gustaría usar AJAX. La próxima semana cubriré los conceptos básicos para escribir sus propias acciones AJAX personalizadas en WordPress. Por lo tanto, asegúrese de pensar en qué genial creación impulsada por AJAX desea realizar.
Imagen destacada de Pagina / shutterstock.com.