Cómo crear efecto layout en WordPress con Masonry
¡Buenos días! En este vídeo vamos a ver cómo crear efecto layout o grid con cualquier lista de elementos de nuestro WordPress con la librería Masonry Layout, sin utilizar plugins. ¡Vamos allá!
En el vídeo hemos utilizado la librería que se llama Masonry Layout. Es una librería de Javascript que nos permite aplicar el efecto layout o grid a cualquier lista de elementos de nuestro WordPress con un poco de código. Podemos aplicarlo a una galería de imágenes, una lista de posts o cualquier otro conjunto de elementos.
Repasemos los pasos que hemos seguido en el vídeo:
Cargamos Masonry y preparamos el código
Por un lado vamos a cargar la librería y por otro lado vamos a crear un archivo JS donde vamos a aplicar este efecto layout a los elementos de nuestro WordPress que nos interesen.
Cargamos los archivos de Javascript
Para empezar vamos a acceder a la carpeta de nuestro theme por FTP, a wp-content > themes > nombre-del-theme e insertamos el siguiente código al final del archivo functions.php, sin cambiar nada:
function bps_masonry () {
wp_enqueue_script('masonry-js', '//unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js', array('jquery'));
wp_enqueue_script('masonry-init', get_stylesheet_directory_uri() . '/js/masonry-init.js', array('masonry'), 1, true);
}
add_action( 'wp_enqueue_scripts', 'bps_masonry' );
Lo que hemos hecho ahora es cargar dos archivos de JavaScript en nuestro WordPress:
- La librería de Masonry en sí, que no vamos a tocar
- Un archivo de JavaScript nuestro, que aún no existe y que vamos a crear justo ahora.
Si te lías en este paso puedes revisar este otro vídeo donde explico con más detalle cómo cargar archivos JavaSript y CSS en WordPress.
Preparamos el masonry-init.js
Ahora nos toca crear el archivo de JavaScript desde el cual vamos a iniciar ese efecto de Layout.
Para ello nos vamos a la carpeta de nuestro theme otra vez y creamos el archivo masonry-init.js dentro de la carpeta js.
Si no tienes esa carpeta te recomiendo crearla para tener el código organizado y para poder seguir los pasos del tutorial sin liarse.
El código que utilizaremos para iniciar el efecto layout será el siguiente y lo veremos con más detalle dentro de poco:
jQuery(window).load(function() {
jQuery('').masonry();
})
¡Y ya lo tenemos! Podemos cerrar el functions.php y vamos a utilizar nuestro masonry-init.js a continuación.
Ejemplo 1: aplicamos Masonry Layout a una galería de imágenes de WordPress
Antes de todo, para crear una galería puedes seguir los pasos del vídeo o revisar este otro vídeo sobre cómo crear una galería en WordPress.
Una vez que tenemos la galería creada para aplicar el efecto Masonry a esa lista de imágenes debemos identificar la clase o id CSS de la etiqueta html que envuelve esas imágenes.
Siguiendo los pasos del vídeo vemos que en el caso de una galería nativa de WordPress podemos utilizar la clase .wp-block-gallery.
Ahora me he dado cuenta de que la clase .wp-block-gallery se utiliza con el editor Gutenberg y si utilizamos el editor clásico la galería se nos crea con la clase .gallery. En todo caso quiero que aprendas a identificar esa clase por tí mismo así que sigue los pasos del vídeo y todo funcionará perfectamente 🙂
Sabiendo esto, volvemos a nuestro masonry-init.js e insertamos el siguiente código:
jQuery(window).load(function() {
jQuery('.wp-block-gallery').masonry();
})
Lo que hemos conseguido es que el efecto layout se aplique a todo lo que contenga esa clase de CSS.
Conflicto de CSS
Como vemos en el vídeo tenemos un conflicto con el CSS de WordPress ya que por defecto trae un margen por la derecha para separar las columnas de fotos. vamos a quitarle ese margen añadiendo un margin-right:unset !important a las fotos de la galería, tal que así:
.wp-block-gallery .blocks-gallery-item {
margin-right:unset !important
}
Si quieres conocer más formas de insertar CSS puedes revisar esta entrada de cómo insertar CSS en WordPress.
De esta manera quitamos el margen lateral de las fotos y nos quedan pegadas. Podríamos corregir este margen con el CSS también pero Masonry ya nos trae una opción para añadir margen lateral a las columnas, que se llama gutter. Para aplicar esta opción modificamos el código de muestro masonry-init así:
jQuery(window).load(function() {
jQuery('.wp-block-gallery').masonry({
gutter: 16
});
})
Te dejo el enlace a opciones de Masonry para que veas todas las opciones que nos permiten personalizar de esta librería y cómo se aplican.
Lo que hemos conseguido ahora es que nuestras fotos se muestren en un layout perfecto de 3 columnas 🙂
Veamos ahora cómo podemos hacer lo mismo con otra lista de elementos, como por ejemplo posts del blog.
Ejemplo 2: aplicamos Masonry Layout a los posts del blog
En este caso nos dirigimos a la página del blog e inspeccionamos la lista de los posts. Vemos que en mi caso la etiqueta que envuelve nuestra lista de posts es .asi-posts-wrapper (ya que se trata de un theme de AsiThemes). Ahora simplemente insertamos esta etiqueta entre las comillas:
jQuery(window).load(function() {
jQuery('.asi-posts-wrapper').masonry();
})
Seguramente en tu caso se tratará de otra etiqueta así que inspecciona tu código e identifica cuál es, tal como muestro en el vídeo 🙂
Si te has fijado en este caso no nos ha hecho falta el gutter porque los márgenes laterales ya están bien definidos por CSS y ahora las entradas se muestran en un layout perfecto.
