Existe un momento crucial en la carrera de un desarrollador web: cuando un cliente solicita la implementación de un efecto de «scroll infinito» en determinado listado de la página. Esta solicitud es un hito que todo desarrollador o programador debe enfrentarse, ya que implica comprender conceptos fundamentales relacionados con la extracción de contenido de bases de datos.
En proyectos que involucran esta funcionalidad, surgen preguntas clave, tales como:
- ¿Quiero que se cargue automáticamente más contenido cuando llegue el scroll a un punto determinado de la página?
- ¿Voy a cargar los siguientes elementos haciendo click en un botón «cargar más»?
- ¿Cuántos elementos quiero cargar por vista?
- ¿Necesito poner un «spinner»?
- ¿Voy a poner un efecto «skeleton» a la estructura?
Vamos a tratar de solucionar algunas de estas preguntas.
¿Cómo empiezo a programar esto?
En este tutorial, exploraremos la opción de cargar más contenido al presionar un botón. Para lograrlo, es necesario tener un buen manejo de la clase de WordPress «WP_Query()» para extraer contenido de la base de datos. Además, es crucial comprender cómo funciona AJAX con JavaScript (jQuery) para activar la función de WordPress que añadirá nuevo contenido, y dominar el CSS para dar los estilos necesarios a la implementación.
De manera condicional, crearemos un botón utilizando PHP y HTML, el cual verificará a través de WP_Query si hay más de una página que mostrar. En caso de que solo haya una página disponible, el botón desaparecerá automáticamente. Esto crea un efecto para el usuario que indica que ha llegado al final de los contenidos. Para lograr esto, utilizaremos la variable max_num_pages. Este efecto contribuye a una experiencia de usuario positiva.
Puedes ver un ejemplo de un botón, no es el definitivo pero para que entiendas cual es nuestro activador desde donde comienza toda la magia.
Lo primero que debemos hacer es crear un archivo .js, en nuestro caso llamado myloadmore.js, y luego definir una función en el archivo functions.php del tema hijo donde vamos a encolar el archivo que contendrá el código JavaScript que necesitamos.
En esta función es importante indicar que vamos a utilizar la librería jQuery integrada en WordPress. Pasaremos algunas variables de PHP para poder utilizar su contenido en el archivo JavaScript:
ajax_url: Esta variable guarda la URL de la ruta del archivo admin-ajax.php, lo cual es muy útil para ejecutar nuestras funciones Ajax.
posts: La función json_encode transforma el contenido de las noticias de PHP a un formato JSON para JavaScript.
current_page: Almacena el número de página actual.
max_page: Calcula el número de páginas que va a tener el listado que hemos indicado, en nuestro caso, de noticias.
En este punto, es importante darse cuenta o comprender la importancia de conectar un archivo PHP con un archivo JavaScript. Esto nos permite pasar contenidos para manipularlos y activar funciones de PHP desde funciones de JavaScript.
Puedes colocar el siguiente código en el functions.pho o plugin de personalizaciones. Modifica variables o textos que se adapten a tu proyecto.
Query o Consulta
La estructura con el listado de noticias la vamos a obtener haciendo una consulta con la clase WP_Query() de WordPress, a la que le indicaremos todo tipo de argumentos necesarios para perfeccionar el resultado. Extraeremos los datos exactos con el contenido que necesitamos para montar un grid de noticias.
La primera función «ie_cargar_mas_noticias_seccion_grid» la vamos a meter en un shortcode de WordPress para luego utilizarla donde queramos dentro del nuestras plantillas o páginas del sitio.
Como puedes ver es un loop que nos va a devolver 8 noticias que he maquetado con HTML y algunas funciones de WordPress. Puedes investigar que hace cada una de ella, te pueden servir para tus proyectos igualmente.
Esta estructura HTML lleva el botón definitivo de cargar más.
La segunda función «ie_cargar_mas_noticias_ajax_handler» es la que se activa cuando se acciona el botón de cargar más (Mediante Javascript como hemos comentado que tenemos conectados estos archivos de php y js) entonces esta función obtiene siempre la siguiente página de la página actual y añade 8 elementos nuevos al grid que ya tenemos integrado.
Está función se ejecuta sobre los hooks especialmente desarrollados para ejecutar contenido Ajax en WordPress. «wp_ajax_loadmore_noticias» «wp_ajax_nopriv_loadmore_noticias»
Utiliza el siguiente código en el archivo functions.php o plugin de personalizaciones. Modifica argumentos, clases, parámetros, estructura HTML a tu gusto.
Javascript
Ya solo nos queda poner este fragmento de código en el archivo myloadmore.js que hemos creado al principio. Este será el encargado de ejecutar Ajax y de mover la data de un sitio a otro sin necesidad de recargar la página mediante el método post de ajax.
Algo interesante que puedes hacer es poner en beforeSend o bien añadir un spinner de carga o un texto si has añadido un botón con texto. En mi caso como solo es una flecha no le he puesto nada.
CSS
Ya solo queda que remates la maquetación utilizando técnicas avanzadas de CSS. Te dejo algunas interesantes que te pueden ayudar:
- CSS Grid
- Flexbox
- text-wrap (balance y pretty)
- aspect-ratio (Para evitar saltos en la carga de contenidos)
- transition
- view-transitions (muy avanzado)
Pros y contras del uso del scroll infinito
VENTAJAS
- Mejora la experiencia de usuario al ofrecer una navegación fluida.
- Aumenta el tiempo de permanencia de un usuario en la web.
- Podemos retrasar la carga de grandes cantidades de contenidos, sin sobrecargar la web.
- Ofrecer un efecto «red social».
INCONVENIENTES
- Puede afectar en el rendimiento si no se programa bien la carga adicional de contenidos.
- Problemas en la indexación de estos elementos adiciones que estarán ocultos.
¿Cuándo podemos utilizar un buen scroll infinito?
- Cargar nuevas entradas de un blog.
- Tienda online para mostrar más productos en general o por categorías.
- Cargar proyectos anteriores en un portafolios profesional.
- En un directorio de empresas o profesionales. Desatacando por ejemplo los mejor valorados o los que pagan por estar en primeras posiciones.
- Periódico o revista online para cargar noticias antiguas.
Espero que puedas aprovechar algo de la información que he compartido. Si estas probando este método y te sale, por favor házmelo saber, si por el contrario no te ha funcionado, coméntamelo para poder ayudarte.
¡Muchas Gracias!
