Cuando diseñas sitios de WordPress para tus clientes, la usabilidad es un factor importante a tener en cuenta. Sin embargo, algunas de las técnicas utilizadas para mejorar la experiencia del usuario (UX) en un sitio, pueden no ser los mejores métodos para otro.

El desplazamiento infinito es una táctica que los desarrolladores y diseñadores utilizan para mantener a los visitantes del sitio comprometidos. Mientras que algunos postulan que en realidad puede dañar la usabilidad de los sitios web, hay muchos casos en los que puede ser beneficioso.

En este post, explicaremos qué es el desplazamiento infinito y qué tipos de sitios pueden beneficiarse de él. Luego te guiaremos a través de tres métodos que puedes utilizar para añadir esta funcionalidad a los sitios web de tus clientes. Comencemos

Introducción al desplazamiento infinito

El desplazamiento infinito es una técnica de diseño web en la que el nuevo contenido se carga automáticamente cuando el visitante llega al final de la página. El resultado es una alimentación constante y aparentemente interminable de contenido.

Los ejemplos más populares de sitios que utilizan el desplazamiento infinito son las redes sociales como Facebook, Twitter y Pinterest. También se puede ver en sitios de blogs y de entretenimiento como Mashable y Buzzfeed:

La incorporación del scroll infinito en estos sitios web tiene muchos beneficios. La más evidente es que ahorra tiempo y proporciona a sus usuarios más contenido sin necesidad de hacer clic en un botón de Leer más o en enlaces de paginación.

Con menos distracciones, la alimentación automática de contenido también puede significar que los usuarios se quedan más tiempo, lo que puede traducirse en mayores tasas de compromiso. Además, esta característica es amigable para los móviles.

Sin embargo, no todos los sitios web son adecuados para el desplazamiento infinito. Por ejemplo, si tiene un sitio web orientado a objetivos, como una tienda de comercio electrónico, puede dificultar que los usuarios encuentren lo que buscan. También puede afectar al rendimiento del sitio si no se optimiza correctamente.

Por otro lado, si tiene un sitio con una estructura lineal, puede ser muy beneficioso. El desplazamiento infinito puede ser particularmente útil para propósitos de narración, ya sea a través de entradas de blog de formato largo o contenido visual como imágenes.

Cómo agregar el desplazamiento infinito a los sitios web de los clientes (3 métodos)

Si usted está creando sitios web de los clientes que son impulsados por el contenido, usted podría considerar la adición de una característica de desplazamiento infinito. Echemos un vistazo a tres métodos que puede utilizar para hacerlo.

Utilizar un plugin de desplazamiento infinito

Uno de los métodos más rápidos y sencillos que puede utilizar para añadir el desplazamiento infinito a los sitios web de sus clientes es utilizar un plugin. Algunos, como Jetpack, incluyen funciones para implementar este elemento de diseño.

No hay demasiados plugins de desplazamiento infinito independientes. Sin embargo, uno popular que recomendamos usar es Ajax Load More:

Este plugin es gratuito y fácil de usar, aunque requiere algunos conocimientos de programación. Te permite añadir el desplazamiento infinito para la carga perezosa de entradas, páginas y comentarios.

Después de instalar y activar el plugin, puedes configurar los parámetros de consulta relevantes de WordPress basados en varios tipos de contenido. En la página de configuración, puedes ajustar y personalizar cómo se comporta Ajax Load More en los sitios web de tus clientes. Por ejemplo, puedes añadir tu propio CSS personalizado:

El plugin también incluye un Shortcode Builder que puedes utilizar para modificar rápidamente páginas y posts desde tu editor de contenidos o tus archivos de plantilla. Otra característica del plugin que vale la pena comprobar es sus plantillas de repetición:

Puedes hacer tu propia plantilla de repetición y ajustar cómo funciona el HTML y el PHP dentro del shortcode. También puedes incluir múltiples instancias del plugin Ajax Load More en una sola entrada, página o plantilla.

Aunque el plugin gratuito proporciona un montón de características para el desplazamiento infinito, también hay una versión premium que desbloquea el acceso a más plantillas. Para saber más, puedes consultar la documentación y la página de soporte de Ajax Load More.

Elige temas con desplazamiento infinito incorporado

Si no quieres añadir otro plugin a los sitios de tus clientes, no te preocupes. Usted puede lograr el mismo efecto mediante el uso de un tema que tiene scroll infinito incorporado.

Por supuesto, esta ruta no es la más práctica para los sitios existentes. Cambiar el tema de un sitio a menudo requiere un amplio cambio de marca. Esto no es exactamente vale la pena la molestia sólo para obtener acceso a una característica de desplazamiento infinito – especialmente teniendo en cuenta que se puede lograr utilizando otros métodos.

Hay un buen número de temas de WordPress que incluyen esta funcionalidad. Usted puede navegar por el Directorio de Temas de WordPress y buscar por la función de desplazamiento infinito:

Si bien el tema en sí puede ser libre, tenga en cuenta que podría tener que actualizar a la versión premium para utilizar el desplazamiento infinito. Sin embargo, hay algunos que ofrecen la funcionalidad sin costo alguno, como Minimal Dark.

Una vez que encuentres un tema que te guste y que incluya la función, descárgalo e instálalo como lo harías con cualquier otro tema. La mayoría incluirá la característica en el personalizador de temas.

Por ejemplo, con Minimal Dark, puedes encontrar la opción de desplazamiento infinito yendo a Apariencia > Personalizar > Opciones de Tema > Opciones de Paginación:

Si quieres características más avanzadas, podrías considerar un tema premium. Theme Forest tiene una amplia selección que incluye el desplazamiento infinito.

Las instrucciones para activar y utilizar la función de desplazamiento infinito dependerán del tema que estés utilizando. Por lo tanto, lo mejor es consultar la documentación del desarrollador para obtener orientación.

Agregar manualmente el código a su sitio

Un tercer método para implementar el desplazamiento infinito – y que puede ser preferido si usted es un desarrollador experimentado – es agregar manualmente el código a su sitio. Esta opción le da más control y elimina la necesidad de instalar un plugin adicional.

Además, puede utilizar este código en sitios con temas que no vienen con desplazamiento infinito incorporado. El primer paso es activar la función a través del archivo functions.php de tu tema.

Para ello, añade el siguiente código al archivo:

Una vez completado esto, el siguiente paso es configurar la función Render Parameter. Esta es la parte del código que se ocupa de la carga de los puestos de desplazamiento infinito en un bucle.

Para hacer que los puestos se cargan continuamente, añadir la función mytheme_infite_scroll_init al archivo functions.php de su tema así:

function mytheme_infinite_scroll_render(){get_template_part( 'loop' );}

Una vez que agregue estos dos fragmentos, usted debe ser bueno para ir. Sin embargo, si no funciona, es posible que tengas que cambiar el tema del sitio. Los productos más antiguos y anticuados pueden no soportar el desplazamiento infinito en absoluto.

Conclusión

El desplazamiento infinito no es para todos. Sin embargo, hay algunos sitios web, como los blogs y otras publicaciones en línea con mucho contenido, donde puede proporcionar una mejor UX e incluso aumentar el compromiso.

En este artículo, hemos discutido tres métodos que puede utilizar para agregar el desplazamiento infinito a los sitios web de sus clientes:

1. Utilizar un plugin de desplazamiento infinito.
2. Elegir temas con desplazamiento infinito incorporado.
3. Añadir manualmente el código a su sitio.