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.