Cómo usar Masonry para agregar una cuadrícula de publicaciones estilo Pinterest en WordPress

Esta es una publicación de invitado de Josh Pollock

La cuadrícula de publicaciones similar a Pinterest ha sido un diseño popular para las páginas de índice de blogs de WordPress durante un tiempo. Es popular no solo porque imita la apariencia del popular sitio de redes sociales, sino también porque aprovecha al máximo el espacio en la pantalla. En un índice de blog de WordPress, permite que cada vista previa de publicación tenga el tamaño que necesita de forma natural, sin dejar espacio adicional.

En este tutorial, te mostraré cómo usar la popular Biblioteca JavaScript Masonry para crear diseños de cuadrícula en cascada para el índice de tu blog, así como para las páginas de archivo de tu tema. Abordaré algunos problemas que debes considerar para la optimización móvil y cómo resolverlos.

Nota: Este es un tutorial de nivel avanzado para aquellos que se sienten cómodos editando temas de WordPress y tienen conocimientos suficientes de HTML/CSS.

Paso 1: Agrega las bibliotecas necesarias a tu tema

Actualización: WordPress 3.9 ahora incluye la última versión de Masonry.

Primero, necesitas cargar Masonry en tu tema, usando este código:

if (! function_exists('slug_scripts_masonry') ) :
if ( ! is_admin() ) :
function slug_scripts_masonry() {
    wp_enqueue_script('masonry');
    wp_enqueue_style('masonry’, get_template_directory_uri().'/css/’);
}
add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
endif; //! is_admin()
endif; //! slug_scripts_masonry exists

Este código simplemente carga Masonry y lo pone a disposición de los archivos de plantilla de tu tema (consulta nuestra guía sobre cómo agregar JavaScripts y estilos correctamente en WordPress). Ten en cuenta también que no estamos agregando jQuery como dependencia para ninguno de los dos. Una de las ventajas de Masonry 3 es que no requiere jQuery, pero se puede usar con él. En mi experiencia, inicializar Masonry sin jQuery es más confiable y abre la posibilidad de omitir la carga de jQuery, lo que puede ayudar tanto con los tiempos de carga de la página como con los problemas de compatibilidad.

Paso 2: Inicializar el Javascript

La siguiente función configura Masonry, define los contenedores que se usarán con él y también se asegura de que todo suceda en el orden correcto. Masonry necesita calcular el tamaño de cada uno de los elementos en la página para diseñar su cuadrícula dinámicamente. Un problema que he encontrado con Masonry en muchos navegadores es que Masonry calculará incorrectamente la altura de los elementos con imágenes de carga lenta, lo que provocará que los elementos se superpongan. La solución es usar imagesLoaded para evitar que Masonry calcule el diseño hasta que todas las imágenes se carguen. Esto asegura un tamaño adecuado.

Esta es la función y la acción que generará el script de inicialización en el pie de página:

if ( ! function_exists( 'slug_masonry_init' )) :
function slug_masonry_init() { ?>
<script>
    //set the container that Masonry will be inside of in a var
    var container = document.querySelector('#masonry-loop');
    //create empty var msnry
    var msnry;
    // initialize Masonry after all images have loaded
    imagesLoaded( container, function() {
        msnry = new Masonry( container, {
            itemSelector: '.masonry-entry'
        });
    });
</script>
<?php }
//add to wp_footer
add_action( 'wp_footer', 'slug_masonry_init' );
endif; // ! slug_masonry_init exists

La función se explica paso a paso con comentarios en línea. Lo que hace la función de Javascript es indicarle a Masonry que busque dentro de un contenedor con el id "masonry-loop" elementos con la clase "masonry-entry" y que calcule la cuadrícula solo después de que las imágenes se hayan cargado. Establecemos el contenedor exterior con querySelector y el interior con itemSelector.

Paso 2: Crear el Bucle Masonry

En lugar de agregar el marcado HTML para Masonry directamente a una plantilla, crearemos una parte de plantilla separada para ello. Crea un nuevo archivo llamado “content-masonry.php” y agrégalo a tu tema. Esto te permitirá agregar el bucle Masonry a tantas plantillas diferentes como desees.

En tu nuevo archivo agregarás el código que se muestra a continuación. El marcado es similar a lo que normalmente verías para cualquier vista previa de contenido. Puedes modificarlo como necesites, solo asegúrate de que el elemento más externo tenga la clase “masonry-entry” que establecimos como itemSelector en el último paso.

<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<?php if ( has_post_thumbnail() ) : ?>
    <div class="masonry-thumbnail">
        <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
    </div><!--.masonry-thumbnail-->
<?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5>
        <div class="masonry-post-excerpt">
            <?php the_excerpt(); ?>
        </div><!--.masonry-post-excerpt-->
    </div><!--/.masonry-entry-details -->  
</article><!--/.masonry-entry-->

Este marcado tiene clases para cada una de sus partes para que puedas agregar marcado que coincida con tu tema. Me gusta agregar un borde agradable y ligeramente redondeado a .masonry-entry. Otra buena opción es no tener borde para .masonry-entry, sino darle una ligera sombra. Eso se ve particularmente bien cuando la miniatura de la publicación se extiende hasta el borde del contenedor, lo que se puede lograr dando a .masonry-thumbnail márgenes y rellenos de 0 en todas las direcciones. Querrás agregar todos estos estilos en un archivo llamado masonry.css en el directorio css de tu tema.

Paso 3: Agregar el bucle Masonry a las plantillas

Ahora que tenemos nuestra parte de plantilla, puedes usarla en cualquier plantilla de tu tema que desees. Podrías agregarla a index.php, pero no a category.php si no quieres que se use para archivos de categoría. Si solo quieres que se use en la página de inicio de tu tema, cuando esté configurada para mostrar publicaciones de blog, la usarías en home.php. Dondequiera que elijas, todo lo que necesitas hacer es envolver tu bucle en un contenedor con el id “masonry-loop” y agregar la parte de plantilla al bucle usando get_template_part(). Asegúrate de iniciar el contenedor del bucle masonry antes de while (have_posts() ).

Por ejemplo, aquí está el bucle principal de index.php de twentythirteen:

<?php if ( have_posts() ) : ?>

    <?php /* The loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', get_post_format() ); ?>
    <?php endwhile; ?>

    <?php twentythirteen_paging_nav(); ?>

<?php else : ?>
    <?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

Y aquí está modificado para usar nuestro bucle Masonry:

<?php if ( have_posts() ) : ?>
<div id="masonry-loop">
    <?php /* The loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', 'masonry' ?>
    <?php endwhile; ?>
</div><!--/#masonry-loop-->
    <?php twentythirteen_paging_nav(); ?>

<?php else : ?>
    <?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

Paso 4: Establecer anchos responsivos de los elementos Masonry

Hay varias maneras de establecer el ancho de cada elemento Masonry. Puedes establecer el ancho usando un número de píxeles al inicializar Masonry. No soy fan de hacer eso, ya que uso temas responsivos y requiere consultas de medios complejas para que las cosas funcionen bien en pantallas pequeñas. Para diseños responsivos, he descubierto que lo mejor es establecer un valor de ancho para .masonry-entry con un porcentaje, basado en cuántos elementos quieres en una fila, y dejar que Masonry haga el resto de los cálculos por ti.

Todo esto requiere dividir el 100 por el número de elementos que deseas establecer el porcentaje en una entrada simple en el style.css de tu tema. Por ejemplo, si quieres cuatro elementos en cada fila, podrías hacer esto en tu archivo masonry.css:

.masonry-entry{width:25%}

Paso 5: Optimización móvil

Podríamos detenernos aquí, pero no creo que el resultado final funcione increíblemente bien en pantallas pequeñas de teléfonos. Una vez que estés satisfecho con cómo se ve tu tema con la nueva cuadrícula Masonry en tu escritorio, compruébalo en tu teléfono. Si no estás contento con cómo se ve en tu teléfono, entonces necesitarás hacer un poco de trabajo.

No creo que haya suficiente espacio en la pantalla de un teléfono para todo lo que agregamos a nuestra parte de plantilla content-masonry. Dos buenas soluciones disponibles para ti son acortar el extracto para teléfonos o omitirlo por completo. Aquí tienes una función adicional que puedes agregar al functions.php de tu tema para hacer eso. Como no creo que estos problemas sean un problema en las tabletas, estoy usando un gran plugin Mobble en todos los ejemplos de esta sección para hacer los cambios solo en teléfonos, no en tabletas. También estoy comprobando si Mobble está activo antes de usarlo y, si es necesario, recurriendo a la función de detección móvil más general wp_is_mobile, que está integrada en WordPress.

if (! function_exists('slug_custom_excerpt_length') ) :
function slug_custom_excerpt_length( $length ) {
    //set the shorter length once
    $short = 10;
    //set long length once
    $long = 55;
    //if we can only set short excerpt for phones, else short for all mobile devices
    if (function_exists( 'is_phone') {
        if ( is_phone() ) {
            return $short;
        }
        else {
            return $long;
        }        
    }
    else {
        if ( wp_is_mobile() ) {
            return $short;
        }
        else {
            return $long;
        }
    }
}
add_filter( 'excerpt_length', 'slug_custom_excerpt_length', 999 );
endif; // ! slug_custom_excerpt_length exists

Como puedes ver, comenzamos almacenando la longitud del extracto largo y la longitud del extracto corto en variables, ya que usaremos esos valores dos veces y queremos poder cambiarlos desde un solo lugar si es necesario más adelante. A partir de ahí, probamos si podemos usar is_phone() de Mobble. Si es así, establecemos el extracto corto para teléfonos y el extracto largo si no lo estamos. Después de eso, hacemos lo mismo básico, pero usando wp_is_mobile, que afectará a todos los dispositivos móviles, si is_phone() no se puede usar. Esperamos que la parte else de esta función nunca se use, pero es bueno tener una copia de seguridad por si acaso. Una vez que la lógica de la longitud del extracto está configurada, solo queda enganchar la función al filtro excerpt_length.

Acortar el extracto es una opción, pero también podemos eliminarlo por completo con un proceso simple. Aquí hay una nueva versión de content-masonry, con la porción completa del extracto omitida en teléfonos:

<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<?php if ( has_post_thumbnail() ) : ?>
    <div class="masonry-thumbnail">
        <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
    </div><!--.masonry-thumbnail-->
<?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5>
        <?php 
            //put the excerpt markup in variable so we don't have to repeat it multiple times.
            $excerpt = '<div class="masonry-post-excerpt">';
            $excerpt .= the_excerpt();
            $excerpt .= '</div><!--.masonry-post-excerpt-->';
//if we can only skip for phones, else skip for all mobile devices
            if (function_exists( 'is_phone') {
                if ( ! is_phone() ) {
                    echo $excerpt;
                }
            }
            else {
                if ( ! wp_is_mobile() ) {
                    echo $excerpt;
                }
            }
        ?>
    </div><!--/.masonry-entry-details -->  
</article><!--/.masonry-entry-->

Esta vez estamos probando para ver si no estamos en un teléfono/dispositivo móvil y, si es así, devolvemos la parte del extracto de nuestro bucle. Si estamos en un teléfono/dispositivo móvil, no hacemos nada.

Otra cosa que podrías querer hacer es aumentar el ancho de los elementos de Masonry, lo que reduce el número en una fila, en dispositivos móviles. Para hacer esto, agregaremos un estilo en línea diferente al encabezado basado en la detección del dispositivo. Dado que esta función utiliza wp_add_inline_styles, dependerá de una hoja de estilos específica. En este caso, estoy usando masonry.css, que podrías querer para mantener tus estilos de masonry separados. Si no terminas usando ese, puedes usar el handle de otra hoja de estilos ya registrada.

if ( ! function_exists ( 'slug_masonry_styles' ) ) :
function slug_masonry_styles() {
    //set the wide width
    $wide = '25%';
    //set narrow width
    $narrow = '50%';
    /**Determine value for $width**/
    //if we can only set narrow for phones, else narrow for all mobile devices
    if (function_exists( 'is_phone') {
        if ( is_phone() ) {
            $width = $narrow;
        }
        else {
            $width = $wide;
        }        
    }
    else {
        if ( wp_is_mobile() ) {
            $width = $narrow;
        }
        else {
            $width = $wide;
        }
    }
    /**Output CSS for .masonry-entry with proper width**/
    $custom_css = ".masonry-entry{width: {$width};}";
    //You must use the handle of an already enqueued stylesheet here.
    wp_add_inline_style( 'masonry', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'slug_masonry_styles' );
endif; // ! slug_masonry_styles exists

Esta función agrega la hoja de estilos personalizada y luego establece un valor para el ancho utilizando una lógica que ahora debería ser muy familiar. Después de eso, creamos la variable $custom_css pasando el valor del ancho a un fragmento de CSS de apariencia regular con {$width}. Luego usamos wp_add_inline_style para indicarle a WordPress que imprima nuestros estilos en línea en el encabezado cada vez que se esté utilizando la hoja de estilos de Masonry, y luego conectamos toda la función a wp_enqueue_scripts y listo.

Si eligió combinar sus estilos de Masonry en una hoja de estilos existente, asegúrese de usar el identificador de esa hoja de estilos con wp_add_inline_style o sus estilos en línea no se incluirán. Me gusta usar wp_add_inline_style porque generalmente envuelvo el hook de acción para agregar Masonry en una condición para que solo se agregue cuando sea necesario. Por ejemplo, si solo estoy usando Masonry en el índice de mi blog y en las páginas de archivo, haría esto:

if ( is_home() || is_archive() ) {
    add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
}

Estos últimos ejemplos deberían abrir algunas otras ideas en tu mente. Por ejemplo, podrías usar una lógica similar para omitir Masonry por completo en un dispositivo móvil. Además, wp_add_inline_style() es una función menos utilizada, pero muy útil, ya que te permite establecer programáticamente diferentes estilos basados en cualquier tipo de condición. Puede permitirte cambiar radicalmente el estilo de cualquier elemento basándose no solo en la detección del dispositivo, sino que los cambios también podrían basarse en qué plantilla se está utilizando, o incluso si el usuario ha iniciado sesión o no.

Espero que veas estos diferentes cambios que estoy haciendo como una oportunidad para ser creativo. Los sistemas de cuadrícula de mampostería y similares en cascada han sido populares por un tiempo, así que es hora de darle algunos giros nuevos a esta idea popular. Muéstranos en los comentarios las formas geniales que se te han ocurrido para usar Masonry en un tema de WordPress.

Un tipo de WordPress multipropósito, Josh Pollock escribe sobre WordPress, desarrolla temas, se desempeña como gerente de comunidad para Pods Framework y aboga por soluciones de código abierto para el diseño sostenible.