Cómo (y por qué) añadir desplazamiento infinito a los sitios web de los clientes

Al diseñar sitios de WordPress para sus clientes, la usabilidad es un factor importante a tener en cuenta. Sin embargo, algunas de las técnicas que se utilizan para mejorar la experiencia del usuario (UX) en un sitio pueden no ser las mejores para otro.

Desplazamiento infinitoEs una táctica que utilizan los desarrolladores y diseñadores para mantener interesados ​​a los visitantes del sitio. Si bien algunos sostienen que en realidad puede perjudicar la usabilidad de los sitios web, existen muchos casos en los que puede resultar beneficioso.

En esta publicación, explicaremos qué es el desplazamiento infinito y qué tipos de sitios pueden beneficiarse de él. Luego, le mostraremos tres métodos que puede utilizar para agregar esta funcionalidad a los sitios web de sus clientes. ¡Comencemos!

Introducción al desplazamiento infinito

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

Ejemplos populares de sitios que utilizan el desplazamiento infinito son las redes sociales como Facebook, Twitter y Pinterest. También puedes verlo en blogs y sitios de entretenimiento comoMashableyFuente de BuzzFeed:

Incorporar el desplazamiento infinito en estos sitios web tiene muchas ventajas. La más obvia es que ahorra tiempo y ofrece a los usuarios más contenido sin necesidad de hacer clic en un botón.Leer másbotones o enlaces de paginación.

Con menos distracciones, la alimentación automática de contenido también puede hacer que los usuarios permanezcan más tiempo en el sitio, lo que se puede traducir en mayores tasas de participación. Además, esta función es compatible con dispositivos móviles.

Sin embargo,No todos los sitios webEs adecuado para el desplazamiento infinito. Por ejemplo, si tienes un sitio web orientado a objetivos, como una tienda de comercio electrónico, puede resultar difícil para los usuarios encontrar lo que buscan. También puede afectar al rendimiento del sitio si no se optimiza correctamente.

Por otro lado, si tienes un sitio con una estructura lineal, puede resultar muy beneficioso. El desplazamiento infinito puede ser especialmente útil para contar historias, ya sea a través de publicaciones de blog extensas o contenido visual como imágenes.

Cómo añadir desplazamiento infinito a los sitios web de clientes (tres métodos)

Si está creando sitios web para clientes que se basan en el contenido, puede considerar agregar una función de desplazamiento infinito. Echemos un vistazo a tres métodos que puede usar para hacerlo.

1. Utilice un complemento de desplazamiento infinito

Uno de los métodos más rápidos y sencillos que puedes utilizar para añadir desplazamiento infinito a los sitios web de tus clientes es utilizar un complemento. Algunos, como Jetpack, incluyenCaracterísticas para implementar este elemento de diseño.

No hay muchos complementos independientes de desplazamiento infinito. Sin embargo, uno popular que recomendamos usar esAjax Cargar más:

Este complemento es gratuito y fácil de usar, aunque requiere algunos conocimientos de programación. Le permite agregar desplazamiento infinito para cargar publicaciones, páginas y comentarios de forma diferida.

Después de instalar y activar el complemento, puede configurar los parámetros de consulta de WordPress relevantes según varios tipos de contenido.AjustesEn esta página, puedes ajustar y personalizar el comportamiento de Ajax Load More en los sitios web de tus clientes. Por ejemplo, puedes agregar tu propio CSS personalizado:

El complemento también incluye un generador de códigos cortos que puedes usar para modificar rápidamente páginas y publicaciones desde tu editor de contenido o tus archivos de plantilla. Otra característica del complemento que vale la pena revisar son sus plantillas de repetición:

Puedes crear tu propia plantilla de repetidor y ajustar el funcionamiento del HTML y PHP dentro del código corto. También puedes incluir varias instancias del complemento Ajax Load More en una sola publicación, página o plantilla.

Si bien el complemento gratuito proporciona muchas funciones para el desplazamiento infinito, también hay unaversión premiumque desbloquea el acceso a más plantillas. Para obtener más información, puede consultar Ajax Load Moredocumentación y soportepágina.

2. Elige temas con desplazamiento infinito incorporado

Si no desea agregar otro complemento a los sitios de sus clientes, no se preocupe. Puede lograr el mismo efecto utilizando un tema que tenga incorporado el desplazamiento infinito.

Por supuesto, esta opción no es la más práctica para los sitios existentes. Cambiar el tema de un sitio a menudo requiere un cambio de imagen de marca extenso. No vale la pena el esfuerzo solo para obtener acceso a una función de desplazamiento infinito, especialmente si se tiene en cuenta que se puede lograr con otros métodos.

Hay una gran cantidad de temas de WordPress que incluyen esta funcionalidad. Puedes explorar laDirectorio de temas de WordPressy buscar mediante la función de desplazamiento infinito:

Si bien el tema en sí puede ser gratuito, tenga en cuenta que es posible que deba actualizar a la versión premium para usar el desplazamiento infinito. Sin embargo, hay algunos que ofrecen la funcionalidad sin costo, comoMínimo oscuro.

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 función en el Personalizador de temas.

Por ejemplo, con Minimal Dark, puedes encontrar la opción de desplazamiento infinito yendo aApariencia Personalizar Opciones de tema Opciones de paginación:

Si desea funciones más avanzadas, puede considerar un tema premium.Bosque temáticoTiene una amplia selección que incluye 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, es mejor consultar la documentación del desarrollador para obtener orientación.

3. Agregue código manualmente a su sitio

Un tercer método para implementar el desplazamiento infinito (que puede ser la mejor opción si eres un desarrollador experimentado) es agregar código manualmente a tu sitio. Esta opción te brinda más control y elimina la necesidad de instalar un complemento adicional.

Además, puedes usar este código en sitios con temas que no tengan incorporado el desplazamiento infinito. El primer paso es activar la función a través del temafunciones.phparchivo.

Para ello, añadael siguiente códigoal archivo:

función mytheme_infinite_scroll_init() {add_theme_support( 'desplazamiento infinito', array('contenedor' = 'contenido','render' = 'mytheme_infinite_scroll_render','pie de página' = 'envoltorio',) );}agregar_acción( 'init', 'rootdip_infinite_scroll_init' );

Una vez que esto esté completo, el siguiente paso es configurar la función Render Parameter. Esta es la parte del código que se encarga de cargar las publicaciones para que se desplacen infinitamente en un bucle.

Para que las publicaciones se carguen continuamente, agregue la mytheme_infite_scroll_initfunción a su tema.funciones.phparchivo como este:

Función mytheme_infinite_scroll_render(){obtener_parte_de_plantilla( 'bucle' );}

Una vez que agregues estos dos fragmentos, deberías estar listo para comenzar. Sin embargo, si no funciona, es posible que tengas que cambiar el tema del sitio. Es posible que los productos más antiguos y obsoletos no admitan el desplazamiento infinito.

Conclusión

El desplazamiento infinito no es para todos. Sin embargo, hay algunos sitios web, como blogs y otras publicaciones en línea con mucho contenido, donde puede ofrecer una mejor experiencia de usuario e incluso aumentar la interacción.

En este artículo, analizamos tres métodos que puedes utilizar paraañadir desplazamiento infinitoA los sitios web de sus clientes:

1. Utilice uncomplemento de desplazamiento infinito.
2. Elija temas con desplazamiento infinito incorporado.
3. Agregue código manualmente a su sitio.

¿Tiene alguna pregunta sobre cómo agregar desplazamiento infinito a los sitios web de sus clientes? ¡Háganoslo saber en la sección de comentarios a continuación!