Cómo hacer un carrusel de noticias utilizando CSS Scroll Snap

Ejercicio práctico; nos planteamos un desarrollo a medida para una pequeña funcionalidad que nos ha pedido un cliente. (El contenido del ejemplo que voy a desarrollar en este tutorial no se corresponde con el de mi cliente, lo he planteado de otra manera posible).

Tenemos una web a la cual queremos añadir una sección de tipo carrusel en la página principal con las 6 últimas noticias medicas, para mostrar esas noticias hemos tenido que crear un CPT (custom post type) llamado medical reports, al cual le hemos incorporado una serie de campos personalizados para introducir la información relevante y tenerla toda bien organizada. Para mostrar estas noticias hemos desarrollado una query utilizando una clase de WordPress WP_Query y la hemos envuelto en un shortcode utilizando otra función de WordPress como add_shortcode() y la magia de mostrar el contenido en forma de slider lo conseguimos gracias a la propiedad de CSS Scroll Snap. De esta forma hacemos que nuestra sección de noticias sea dinámica, evitamos el efecto cascada de la información en versiones móviles y el shortcode nos va a permitir poner nuestra sección donde queramos dentro de nuestro desarrollo.

Hipotética vista de una sección de 6 noticias en desktop

¿Qué vamos a hacer?

Vamos a construir un carrusel de noticias en WordPress para la versión móvil, sin utilizar un plugin de sliders que sería lo más fácil y utilizando únicamente HTML, CSS y las funciones nativas de WordPress. En realidad podríamos meter dentro de este carrusel cualquier contenido que tengamos en nuestro back-end y que queramos que se consuma de forma horizontal o incluso vertical, como pueden ser; testimonios, productos, anuncios, cursos, inmuebles, libros, imágenes, proyectos, informes, resúmenes… etc.

Antes de ponerte a desarrollar este tipo de carrusel tan liviano y lanzarlo a producción, piensa en tus usuarios, piensa si lo que vas a hacer tiene sentido para ellos y si realmente le estas dando algo de valor al proyecto. Existen multitud de factores a tener en cuenta como:

  • Esconder los productos en un slider puede hacer que tus ventas caigan y pierdas clicks a esos productos
  • Terminas teniendo sliders de 15 cursos y al analizar las estadísticas detectas que solo hacen click en los 4 primeros cursos.
  • Desarrollas la forma visual de los sliders de tal forma que tus usuarios no saben qué pueden hacer swipe en esa parte del la web. Un truco podría ser enseñar parte del siguiente elemento para decirle visualmente que existen mas productos a los lados. (de esto dejo un ejemplo en un enlace mas abajo)
  • Tus productos llevan un enlace en todo el producto (no digo que no se pueda) y cuando el usuario hace scroll en el carrusel se produce un click en uno de los productos. Deberíamos hacer pruebas antes de ponerlo en producción y si lo determinamos añadir un botón únicamente en la acción a realizar (call to action).

En definitiva tendrás que marcarte unos objetivos y analizar los resultados pasado un tiempo para determinar si funciona lo que estamos planteando o si tienes que hacer algunos cambios para mejorar esta funcionalidad.

¿Por qué es bueno plantearnos este desarrollo así?

VENTAJAS

  • No utiliza javascript
  • Mejor experiencia de usuario
  • Mejor performance
  • Se sigue trabajando en esta especificación y se van a incorporar muchas mejoras como animación automática.

INCONVENIENTES

  • Scroll Snap todavía no está soportada por todos los navegadores (mas abajo te muestro la tabla compatibilidad)
  • Hay funcionalidades que te ofrecen los slider que todavía no se pueden implementar como puede ser el control de diapositivas mediante botones, transiciones y animaciones.

¿Cómo lo vamos a desarrollar? (Pequeña receta)

  1. Creamos un CPT (custom post type).
  2. Añadimos todos los campos personalizados al la interfaz del post.
  3. Creamos un shortcode para encapsular toda la funcionalidad y estructura.
  4. Utilizaremos la clase WP_Query para extraer los datos de nuestra ficha donde hemos añadido los campos personalizados.
  5. Añadiremos los estilos de CSS.
  6. Encapsulamos todo el código en un plugin.

Lo primero que vamos a hacer es crear un tipo de post personalizado (CPT) que llamaremos medical reports. Para crearlo suelo utilizar una herramienta gratuita llamada GenerateWP, esto me permitirá tener un sitio en el back-end de WordPress donde introduciré todo el contenido de los informes médicos. Hacerlo de esta forma es una buena practica, porque seremos los dueños de todo el desarrollo y sobre todo, si cuando lo encapsulemos en un plugin, nos aseguraremos de que nuestro contenido lo vamos a tener ahí para siempre, me refiero a que a veces nos encontramos con temas nicho que ya vienen con estos tipos de post personalizados y cuando tengamos que cambiar de tema nuestro contenido podría perderse.

Aquí puedes ver el snippet creado con GenerateWP



Ahora vamos a personalizar nuestra ficha medical reports, para lo cual hemos pensado en añadir unos campos personalizados que nos van a ser útiles para introducir el contenido que luego mostraremos a nuestros usuarios. En WordPress el plugin que he utilizado siempre y más conocido es Advanced Custom Fields, además de ser gratuito nos ofrece un montón de posibilidades.

Hemos añadido el tiempo de lectura, un dato muy importante para que nuestro usuario sepa desde el primer momento el tiempo que le va a costar leer el informe médico. También hemos añadido un campo de categoría, como el mundo de la medicina es tan extenso, hemos desarrollado un desplegable con 10 categorías distintas y cada una con un icono representativo, así le indicamos al usuario de una forma visual los artículos mas relevantes de la rama médica que siga. Y por último hemos añadido un campo para subir un archivo, en este caso nos interesa tener un descargable de un informe en PDF.

Podríamos añadir todos los campos personalizados que se nos ocurriesen para luego utilizar el contenido en cualquier sitio del proyecto. Nuestros campos quedarían así:

Vista del grupo de campos personalizados realizados con Advanced Custom Fields

Ahora podemos ir al menú de nuestro back-end y añadir un nuevo informe médico. Deberías de ver los campos personalizados que hemos creado para rellenar como si de una ficha se tratase, puedes ver como quedan en la siguiente imagen.

Ahora creamos el shortcode donde vamos a introducir toda la funcionalidad de nuestro bloque, para esto utilizamos la función de WordPress add_shortcode() que envolverá a nuestra clase WP_Query con sus argumento y donde hemos desarrollado una estructura en HTML para mostrar los resultados.

Como puedes ver a continuación estamos usando funciones como get_field() o the_field() para extraer la información que hemos establecido en los distintos campos personalizados de nuestra ficha de informes médicos. También estamos usando funciones nativas de WordPress como the_title(), the_content() o the_permalink().



Después de tener todo el contenido creado y organizado, llega el momento mas importante y por lo que hemos estado haciendo todos esto. Es momento de hacer funcionar el slider o carrusel como lo quieras llamar simplemente con CSS, sin utilizar javascript ni plugins ni nada de nada. He metido los estilos directamente en el head del tema a través del hook wp_head. Lo he hecho así para poder encapsular todo el código directamente en un plugin, también se podrían meter los estilos de forma inline directamente en la estructura HTML.

Lo primero y más importante es hacer que el contenedor padre tenga un display:flex para colocar todos nuestros items en la misma fila. Le damos un max-width: 500px; o la medida que tu creas mas conveniente y esconderemos los items en esa caja de 500px con un overflow-x: scroll; La magia viene con la propiedad scroll-snap-type que básicamente le indicaremos la dirección del scroll que queremos controlar, en nuestro caso x mandatory,

Por último a cada elemento hijo le tendremos que indicar cómo se tendrá que alinear dentro del contenedor, utilizando la propiedad de css scroll-snap-align, para esta propiedad existen las posiciones none | start | end | center.

Te dejo un enlace a la documentación oficial de la W3C sobre la especificación css scroll snap. y más abajo puedes ver una tabla con la compatibilidad de esta especificación en los distintos navegadores.



Ahora solo nos queda introducir nuestro shortcode [medicalreports-block] donde queramos que se vea el slider. En este ejemplo quedaría de esta forma a falta de añadirle los estilos para que quede como nos han pasado en el diseño. Pero lo mas importante es que se muestra toda la información que queríamos y que funciona perfectamente.

En la versión móvil podremos hacer swep con el dedo para ver los siguientes informes.

Para finalizar el ejercicio encapsularemos todo el código en un plugin personalizado y procuraremos no ejecutarlo en los lugares donde no este el shortcode, para esto haríamos una carga condicional del plugin.

Existen muchos tutoriales de cómo hacer un plugin básico y funcional. Y lo mas importante es que esto puede ser el comienzo de un desarrollo mas avanzado, donde le puedes ir añadiendo mas funcionalidad al plugin, mejores estilos, opciones del plugin, variables gestionadas mediante una pagina de opciones, distintos shortcodes, transformar el plugin en un bloque de gutenberg. etc. Aquí se te abre un abanico de posibilidades.

Hasta aquí el ejercicio que he querido compartir con vosotros, espero que le sirva a alguien y si crees que se puede mejorar algo no dudes en compartir tu opinión en los comentarios.

Esto daría para más tutoriales. ¿Qué más podemos hacer?

  • Carga condicional del plugin solo en la pagina donde tengamos nuestro carrusel y ganaríamos aún mas performance.
  • Añadir iconos de flechas animadas para indicar que hay mas artículos moviéndose hacia la derecha, dejar visualmente tanto en el primero como en el ultimo solo una flecha.
  • Ejemplo de un buen uso de Scroll Snap https://www.samanthaming.com/ muestra parte del siguiente elemento para decirle al usuario visualmente qué puede hacer scroll hacia los lados.
  • Construir un Slider de imágenes o un Hero Slider.
  • Transformar este shortcode en un bloque de gutenberg estático.
  • Explicar la importancia de utilizar el buffer ob_start() y ob_get_clean() en los shortcodes.

Sobre el autor

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *