Integrar Fluidbox en tus galerías de WordPress

Artículo en vídeo:

Las galerías por defecto en WordPress son bastante sencillas y poco funcionales. Además pueden despistar a nuestros usuarios sacándoles de la página o artículo en el que se encuentran para ampliar una imagen.

Existen multitud de plugin que dan dinamismo y funcionalidad a las galerías, como Jquery Lightbox o la propia que se integra en JetPack.

Pero en este artículo vamos a ver cómo integrar Fuidbox de forma manual, un módulo para galerías WordPress que destaca por su sencillez y elegancia.

En la página principal de Fuidbox podéis ver el efecto aplicado a varias imágenes, las cuales se amplían con un suave zoom al hacer clic y vuelven a su estado inicial haciendo otro clic.

Para integrarlo en nuestra plantilla de WordPress debemos descargar los archivos desde el enlace a GitHub o cdnjs. En el artículo lo haremos desde GitHub.

Una vez dentro de GitHub localizamos el botón Clone or Download y descargamos el módulo Fluidbox en ZIP.

Una vez extraídos los archivos, los que nos interesan se encuentran en la carpeta Dist, donde hay otras dos carpetas: css y js.

Y copiamos los archivos:

• fluidbox.min.css
• jquery.fluidbox.min.js

Tanto el archivo css como el JavaScript debemos copiarlos en la plantilla de nuestro proyecto web, cada uno dentro de su sub-carpeta corresponiente (/css para el archivo de estilos y /js para el JavaScript). Muy importante que estén en las rutas indicadas ya que vamos a hacer referencia a ellas más adelante y no funcionarán si los archivos se encuentran en otro sitio. Ahora creamos un nuevo archivo al que llamaremos por ejemplo: iniciar-fluidbox.js. Copiamos dentro el siguiente código y lo guardamos también dentro de la carpeta /js en nuestra plantilla principal, junto al jquery.fluidbox.min.js.

2. Código javascript para iniciar Fluidbox.

$ = jQuery.noConflict();

$(document).ready(function(){
jQuery(‘.gallery a’).each(function(){
jQuery(this).attr({‘data-fluidbox’ : »});
});

if(jQuery(‘[data-fluidbox]’).length > 0){
jQuery(‘[data-fluidbox]’).fluidbox();
}
});

Esto hará que el efecto Fluidbox se aplique a todos los elementos <a href> dentro de la clase .gallery que es la usada por las galerías WordPress, con lo cual se aplicará a cada una de las imágenes.

Seguidamente accedemos al archivo functions.php de nuestra plantilla y más o menos al final del código añadimos la siguiente función para llamar tanto al css de fluidbox, como a los JavaScript creados.

Código PHP para el archivo functions.php

function cargar_fluidbox(){
wp_register_style(‘fluidboxcss’, get_template_directory_uri() . «/css/fluidbox.min.css», array(), ‘2.0.0’);
wp_register_script(‘fluidboxjs’, get_template_directory_uri() . «/js/jquery.fluidbox.min.js», array(), ‘2.0.0’, true);
wp_register_script(‘iniciarfluidbox’, get_template_directory_uri() . «/js/iniciar-fluidbox.js», array(‘fluidboxjs’), ‘1.0.0’, true);

wp_enqueue_style(‘fluidboxcss’);
wp_enqueue_script(‘fluidboxjs’);
wp_enqueue_script(‘iniciarfluidbox’);
}
add_action(‘wp_enqueue_scripts’, ‘cargar_fluidbox’);

Y eso es todo. Ahora tus galerías deberían disfrutar del efecto Fluidbox.

Si no te funciona, revisa que todos los nombres de archivos estén correctos y en las rutas especificadas anteriormente. Además comprueba que las imágenes de la galería apunten a Archivo multimedia, de lo contrario es posible que no funcionen.