Cómo crear una galería elegante con Fluidbox en WordPress

¡Buenos días! En el vídeo de hoy aprenderemos a crear una galería de WordPress con el efecto Fluidbox: un efecto parecido al de Lightbox pero mucho más limpio y elegante. ¡Vamos allá!

Podéis ver algunos ejemplos de este efecto en la página oficial del proyecto de fluidbox.

Paso 1: descargamos y guardamos los recursos JS y CSS

Vamos a descargar este archivo y descomprimirlo en el directorio de nuestro theme: fluidbox.

Actualización: he cambiado y mejorado el código y algunos archivos así que el contenido de esta carpeta ahora es ligeramente diferente. Los recursos de Fluidbox cargarán desde su CDN y sólo necesitaremos un archivo en nuestra carpeta /js/ que es fluidbox-init.js

Paso 2: declaramos la función para cargar estos recursos

Este paso también es muy sencillo (ya he hecho yo todo el trabajo :P).

Se trata de acceder al functions.php de nuestro tema y abajo del todo pegarle el código que tenemos en el archivo fluidbox-function.php que venía en el pack. Lo que hará es declarar los recursos que antes hemos insertado y hará que se carguen cuando cargue la página web.

Importante: veréis que dentro de la función hay tres líneas con una función que dice get_stylesheet_directory_uri(). Esta función saca la URL del directorio del childtheme que estemos usando. Si no estáis usando un childtheme simplemente deberéis cambiar estas tres funciones por get_template_directory_uri().

Paso 3: creamos la galería

Ahora en la recta final seguimos estos pasos:

1. Creamos una nueva página o entrada (o vamos al editor de la página o entrada donde queremos crear la galería).

2. Le damos a Añadir objeto > Crear galería, elegimos las imágenes que queremos mostrar y apretamos Crear una nueva galería.

3. Importante: para que funcione el Fluidbox, en Enlazado a debemos marcar Archivo multimedia. El resto de configuraciones las ponemos a nuestro gusto (columnas, tamaño de imagen…)

4. Le damos a Insertar galería y si vamos a nuestra página debemos disfrutar sin problema de ese efecto tan limpio y elegante.

Esto es un poco más complicado de lo que suelo enseñar pero lo he simplificado todo lo que pude. Puede que a algunas personas no les funcione debido a las particularidades de su instalación de WordPress. En toco caso si hay algo que no os queda claro o no funciona, mandadme un mensaje y os ayudo sin problema 🙂

También te puede interesar

WordPress: Cómo crear una galería sin plugin
WordPress: Cómo añadir Google Fonts
WordPress: Cómo crear childthemes