• Diseño Web
• jQuery
• WordPress

Cómo añadir un layout Masonry a nuestro tema WordPress

Si queremos añadir la librería Masonry a nuestro tema estamos de enhorabuena porque WordPress ya la incluye «de fábrica». Esta librería posiciona los elementos de un contenedor teniendo en cuenta el espacio vertical disponible haciendo el mejor uso posible del espacio disponible, a la vez que mejora la experiencia de usuario.

Como sabemos, WordPress viene con algunos plugins de jQuery implementados en su core, como jQuery, jQuery UI, imgareaselect, thickbox, etc. También incorpora la librería Masonry por lo que para usarla lo único que tenemos que hacer es ponerla en la cola de scripts. Esta librería se encuentra en la ruta ‘/wp-include/js/masonry.min.js’, aunque no es necesario conocerla de antemano.

Veamos cómo podemos hacer uso de esta librería paso a paso.

Poner en la cola de ejecución el script de Masonry (JS).

Como ya sabemos, cuando se trata de WordPress, no debemos incluir un archivo JS usando la etiqueta script directamente en el HTML. Esto es considerado una mala práctica por WP, que no obstante, nos proporciona una forma apropiada de incluir cualquier script u hoja de estilo en nuestro tema por medio del action hook 'wp_enqueue_scripts'.

Así que abriremos nuestra plantilla functions.php con cualquier procesador de texto y pondremos en la cola la librería Masonry y también un archivo JS que vamos utilizar para inicializarla (en este caso lo he denominado init-masonry.js y he supuesto que estará en la carpeta /assets/js/ de nuestro tema:

function site_scripts() {    
  wp_enqueue_script('masonry');    
  wp_register_script( 'init-masonry', get_stylesheet_directory_uri() . '/assets/js/init-masonry.js', array(), array('masonry'), true );
  wp_enqueue_script('init-masonry');
}
add_action( 'wp_enqueue_scripts', 'site_scripts');

O sea, hemos incluido el archivo JS de la librería Masonry en nuestro tema con la función wp_enqueue_script('masonry'). No hace falta registrarlo porque viene en el core de WP. Después hemos registrado nuestro archivo JS que inicializará el layout de Masonry en nuestro tema y por último lo hemos puesto en la cola (recordad que es una buena práctica registrar un script de JS y luego ponerlo en la cola si queremos asegurarnos de que se va a ejecutar).

Masonry Grid Layout en WordPress

En este punto ya disponemos de las herramientas básicas para poder usar nuestra librería. El paso siguiente consiste en añadir a la plantilla correspondiente de nuestro tema las etiquetas HTML que formarán el layout. Para ello usaremos un contenedor <div class="grid"> que contendrá elementos <div> de la clase ‘grid-item’. Un ejemplo podría ser el siguiente código:

<div class="grid">    
  <div class="grid-item">          
  </div>
  <div class="grid-item">          
  </div>
  <div class="grid-item">          
  </div>
  <div class="grid-item">          
  </div>
  <div class="grid-item">          
  </div>
  <div class="grid-item">          
  </div>
</div>     

Inicializar Masonry

Seguidamente debemos inicializar Masonry con los métodos que nos proporciona la librería. Editamos nuestro archivo /assets/js/init-mansonry.js y escribimos el siguiente código:

jQuery(function($) {
    // init Masonry
    var grid = $('.grid').masonry({
        // options
        itemSelector: '.grid-item',
        columnWidth: '.sizer'
    });
});

Como podemos observar hemos establecido la clase de los elementos que vamos a usar como items de nuestro layout . Si además queremos establecer el número de columnas que queremos que aparezcan según el área de visualización de la pantalla que tengamos disponible tendremos que establecer el argumento columnWidth a la clase que usaremos para tal fin (en este caso .sizer). Si queremos un ancho fijo gestionable por Masonry podemos establecer un valor numérico (ejemplo columnWidth: 400). Pero en nuestro caso es preferible especificar el tamaño de nuestros items según la resolución.

Arreglando el layout con CSS.

Ya sólo nos queda especificar el CSS necesario para que la librería se comporte tal y como queremos (tres filas para resoluciones altas, dos para medias y una para resolución móvil). Para ello añadimos la clase .sizer a nuestros items:

<div class="grid">    
  <div class="grid-item sizer">          
  </div>
  <div class="grid-item sizer">          
  </div>
  <div class="grid-item sizer">          
  </div>
  <div class="grid-item sizer">          
  </div>
  <div class="grid-item sizer">          
  </div>
  <div class="grid-item sizer">          
  </div>
</div>   

Y en nuestra hoja de estilos:

.sizer {
        width: 32%;
}
@media  screen and (max-width:980px) {
    .sizer {
        width: 48%;
    }
}

@media  screen and (max-width:520px) {
    .sizer {
        width: 100%;
    }
}

Dejamos siempre un poco de espacio para la separación entre los items y de esa forma también evitamos que se monten los unos sobre los otros si no hay espacio suficiente (32% en lugar de 33.33% y 48% en lugar de 50%).