Cómo agregar desplazamiento infinito a su sitio de WordPress (paso a paso)

¬ŅDesea agregar desplazamiento infinito a su blog de WordPress?

El desplazamiento infinito es una t√©cnica de dise√Īo web que carga autom√°ticamente el contenido de la p√°gina siguiente cuando los usuarios llegan al final de la p√°gina. Permite a los usuarios ver m√°s contenido en su blog sin hacer clic en la paginaci√≥n o en el bot√≥n “Cargar m√°s”.

En este artículo, le mostraremos cómo agregar fácilmente desplazamiento infinito en su blog de WordPress (paso a paso).

Agregar desplazamiento infinito a su blog de WordPress f√°cilmente

¬ŅQu√© es el desplazamiento infinito?

El desplazamiento infinito es una tendencia de dise√Īo web que utiliza la carga de la p√°gina AJAX en lugar de la navegaci√≥n num√©rica de la p√°gina para cargar autom√°ticamente el contenido de la p√°gina siguiente y mostrarlo al final de la p√°gina actual. El desplazamiento infinito facilita la exploraci√≥n de m√°s contenido simplemente desplaz√°ndose hacia abajo. Carga contenido de forma continua e infinita a medida que los usuarios siguen desplaz√°ndose.

Tradicionalmente, los usuarios tendr√≠an que hacer clic en los botones “siguiente”, “anterior” o n√ļmeros de p√°gina para ver art√≠culos de blog m√°s antiguos.

Al usar AJAX, abreviatura de Javascript y XML asíncrono, las páginas web pueden comunicarse con el servidor sin volver a cargar la página completa. Permite que las aplicaciones web procesen las solicitudes de los usuarios y entreguen datos sin actualizar.

Los mejores ejemplos de dise√Īo de desplazamiento infinito son los sitios de redes sociales populares como Facebook, TwitterInstagram Pinterest, y m√°s. Si est√° utilizando alguno de ellos, entonces sabe c√≥mo el contenido se carga interminablemente en su l√≠nea de tiempo de las redes sociales.

¬ŅEs el desplazamiento infinito adecuado para cada sitio web?

Muchos sitios web de contenido en Internet están utilizando la técnica de desplazamiento infinito para mejorar la experiencia de navegación y aumentar el compromiso. Esto lleva a muchos principiantes a hacer preguntas como si es adecuado para cada sitio web o es bueno para mi sitio.

El desplazamiento infinito es excelente para sitios que presentan contenido en una línea de tiempo o feed, como las aplicaciones de redes sociales. Ofrece una experiencia de navegación fantástica a los usuarios que buscan contenido basado en el tiempo.

A continuaci√≥n, el dise√Īo de desplazamiento infinito es perfecto para dispositivos m√≥viles y t√°ctiles. Para los usuarios de dispositivos m√≥viles, el desplazamiento es m√°s f√°cil de usar que grabar en peque√Īos enlaces de p√°gina.

Interacción web con pantalla táctil

La ventaja más significativa de la técnica de desplazamiento infinito es una experiencia de navegación fluida. Los usuarios no necesitan hacer clic en los enlaces de paginación manualmente. El contenido se carga rápidamente con el desplazamiento y mantiene a los usuarios interesados.

Pero, por otro lado, también puede dificultar la navegación de su sitio. Con la carga continua, es difícil saber dónde (en qué página) se encuentra un artículo de blog. Algunos usuarios incluso encuentran abrumador ver muchos artículos a la vez.

Otra desventaja del dise√Īo de desplazamiento infinito es que no puede tener un pie de p√°gina. Incluso si lo tiene, estar√° oculto bajo infinitos art√≠culos que se cargan continuamente. Muchos sitios agregan enlaces esenciales en el pie de p√°gina, por lo que no tenerlos puede decepcionar a algunos usuarios.

Quiz√°s el problema m√°s preocupante con el desplazamiento infinito es que puede ralentizar su sitio web o incluso bloquear el servidor. Cuando agregamos un desplazamiento infinito a uno de nuestros blogs m√°s peque√Īos, experimentamos un bloqueo del servidor despu√©s de que los usuarios se desplazaran innecesariamente, lo que provoc√≥ el agotamiento de la memoria en una peque√Īa cuenta de alojamiento de WordPress. Le recomendamos que utilice el alojamiento administrado de WordPress si desea probar el desplazamiento infinito.

Ahora que conoce los pros y los contras del dise√Īo de desplazamiento infinito, puede decidir si necesita agregarlo a su blog o no.

Si ha decidido agregar desplazamiento infinito a su blog de WordPress, puede hacerlo f√°cilmente. Le mostraremos m√ļltiples complementos que puede usar, para que pueda elegir el que mejor se adapte a sus necesidades.

Video Tutorial

Suscríbase a WPBeginner

Si no le gusta el video o necesita m√°s instrucciones, contin√ļe leyendo.

Agregar Infinite Scroll a tu blog de WordPress con Catch Infinite Scroll

Lo primero que debe hacer es instalar y activar el complemento Catch Infinite Scroll. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activaci√≥n, WordPress agregar√° un nuevo elemento de men√ļ etiquetado “Capturar desplazamiento infinito” en su panel de administraci√≥n de WordPress. Debe hacer clic en √©l para configurar los ajustes del complemento.

Captura la configuración de desplazamiento infinito

Primero, puede elegir una opci√≥n de activaci√≥n para cargar art√≠culos. El complemento le permite cargar contenido autom√°ticamente a medida que los usuarios se desplazan hacia abajo en la p√°gina o agregan un bot√≥n “Cargar m√°s”.

Cargar al desplazarse o hacer clic - Captura la configuración del complemento de desplazamiento infinito

Debe seleccionar la opci√≥n “Desplazar” para activar la carga autom√°tica con desplazamiento. Alternativamente, puede seleccionar la opci√≥n “Hacer clic” si desea agregar un bot√≥n cargar m√°s.

A continuación, puede ver el selector de navegación, el siguiente selector, el selector de contenido y el selector de elementos. No necesita cambiar nada en estas opciones porque las opciones predeterminadas funcionan bastante bien.

Después de eso, hay una opción de Imagen donde puede agregar el ícono del cargador de contenido. Por defecto, tiene una imagen GIF de cargador. Si tiene una mejor imagen, puede cambiarla.

Cargue una nueva imagen de carga para WordPress Infinite Scroll

La opci√≥n “Finalizar texto” incluye el mensaje que se mostrar√° una vez que un usuario termine de ver sus art√≠culos. De forma predeterminada, el texto dice “No hay m√°s elementos para mostrar”. Puede editar f√°cilmente este texto seg√ļn sea necesario.

Carga de artículos finalizada - Opción de finalización de texto Captura Desplazamiento infinito

Una vez hecho esto, haga clic en el botón Guardar cambios.

¡Eso es! El desplazamiento infinito ahora está activo en tu blog. Puedes visitar tu blog y ver el desplazamiento infinito en acción.

Vista previa de desplazamiento infinito de WordPress

Complementos alternativos de WordPress para agregar desplazamiento infinito en WordPress

Catch Infinite Scroll funciona bien con la mayoría de los temas de WordPress; Sin embargo, puede fallar con algunos temas. En tal escenario, puede usar cualquiera de los siguientes complementos de desplazamiento infinito de WordPress.

1. Ajax Cargar m√°s

 Ajax Cargar m√°s configuraciones

Al igual que Catch Infinite Scroll, el complemento Ajax Load More también le permite agregar un desplazamiento sin fin y botones de Cargar más en su sitio de WordPress.

El complemento ofrece más opciones de personalización, incluidos muchos estilos de icono de carga de página, estilos de botón, etc. Para obtener una guía detallada, puede ver nuestro tutorial sobre cómo crear un botón de cargar más publicaciones en WordPress usando el complemento Cargar más de Ajax.

Sin embargo, el complemento tiene cierta curva de aprendizaje para principiantes. Tiene una interfaz avanzada con muchas opciones, que incluyen plantilla de repetidor, generador de códigos cortos, consultas de WordPress y más.

Se requerirán algunas habilidades de codificación para aplicar el desplazamiento infinito con este complemento.

2. YITH Infinite Scrolling

YITH Infinite Scrolling es una alternativa simple al complemento Ajax Load More o Catch Infinite Scroll.

Similar al complemento Catch Infinite Scroll, tiene opciones mínimas para configurar la interacción web basada en desplazamiento en su sitio. Solo necesita instalar y activar el complemento y habilitar el desplazamiento infinito.

YITH Infinite Scrolling Plugin Settings

Cualquiera, incluidos los principiantes, puede configurar f√°cilmente el desplazamiento infinito utilizando este complemento. Sin embargo, no tiene la opci√≥n de bot√≥n “Cargar m√°s”, que se incluye en los otros dos complementos mencionados anteriormente.

Esperamos que este art√≠culo te haya ayudado a aprender c√≥mo agregar un dise√Īo de desplazamiento infinito a tu blog de WordPress. Es posible que tambi√©n desee ver nuestra gu√≠a sobre c√≥mo agregar el seguimiento de profundidad de desplazamiento en WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver videos tutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.