Cómo utilizar la mampostería para añadir una cuadrícula de publicaciones al estilo de Pinterest en WordPress

Este es un post invitado de Josh Pollock

La visualización de las entradas en forma de cuadrícula como la de Pinterest ha sido un diseño popular para las páginas de índice de los blogs de WordPress durante un tiempo. Es popular no sólo porque imita el aspecto del popular sitio de redes sociales, sino también porque aprovecha al máximo el espacio en la pantalla. En el índice de un blog de WordPress, permite que la vista previa de cada entrada tenga el tamaño que naturalmente necesita, sin dejar espacio extra.

En este tutorial, te mostraré cómo utilizar 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é algunas cuestiones que debes tener en cuenta para la optimización para móviles y cómo resolverlas.

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

Paso 1: Añade las bibliotecas necesarias a tu tema

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

Primero tienes que cargar Masonry en tu tema, utilizando 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 añadir correctamente JavaScripts y Estilos en WordPress). Ten en cuenta también que no añadimos jQuery como dependencia para ninguno de los dos. Una de las ventajas de Masonry 3 es que no requiere jQuery, pero puede utilizarse con él. Según mi experiencia, inicializar Masonry sin jQuery es más fiable, y abre la posibilidad de omitir la carga de jQuery, lo que puede ayudar tanto a los tiempos de carga de la página como a los problemas de compatibilidad.

Paso 2: Inicializar el Javascript

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

Esta es la función y la acción que dará salida al 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 inline. Lo que hace la función de Javascript es decirle a Masonry que busque dentro de un contenedor con el id "masonry-loop" los elementos con la clase "masonry-entry" y que calcule la cuadrícula sólo después de cargar las imágenes. Establecemos el contenedor exterior con querySelector y el interior con itemSelector.

Paso 2: Crear el bucle de mampostería

En lugar de añadir el marcado HTML para la masonería directamente a una plantilla, vamos a crear una parte de plantilla separada para ella. Crea un nuevo archivo llamado "content-masonry.php" y añádelo a tu tema. Esto te permitirá añadir el bucle de Masonería a tantas plantillas diferentes como quieras.

En tu nuevo archivo añadirás el código que se muestra a continuación. El marcado es similar a lo que normalmente verías en cualquier vista previa de contenido. Puedes modificarlo como necesites, sólo asegúrate de que el elemento más externo tiene la clase "mampostería-entrada" 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%20the_permalink('%20')%20?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
    </div><!--.masonry-thumbnail-->
<?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php%20the_permalink('%20')%20?>" 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, por lo que puedes añadir marcas que se ajusten a tu tema. Me gusta añadir un bonito borde ligeramente redondeado a .masonry-entry. Otra buena opción es no poner borde a .masonry-entry, pero darle una ligera sombra. Esto queda especialmente bien cuando la miniatura de la entrada se extiende hasta el borde del contenedor, lo que puede conseguirse dando a .masonry-thumbnail márgenes y rellenos de 0 en todas las direcciones. Querrás añadir todos estos estilos en un archivo llamado masonry.css en el directorio css de tu tema.

Paso 3: Añadir el bucle de mampostería a las plantillas

Ahora que tenemos nuestra parte de la plantilla puedes usarla en cualquier plantilla de tu tema que quieras. Podrías añadirlo a index.php, pero no a category.php si no quieres que se utilice para los archivos de categorías. Si sólo quieres que se utilice en la página de inicio de tu tema, cuando esté configurado para mostrar las entradas del blog, lo utilizarías en home.php. Dondequiera que elijas, todo lo que tienes que hacer es envolver tu bucle en un contenedor con el id "masonry-loop" y añadir la parte de la plantilla en el bucle utilizando get_template_part(). Asegúrate de iniciar el contenedor del bucle de mampostería antes del while (have_posts() ).

Por ejemplo, aquí está el bucle principal del 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 conseguir utilizar 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 la anchura responsiva de los elementos de la mampostería

Hay varias formas de establecer la anchura de cada elemento de Masonería. Puedes establecer la anchura utilizando un número de píxeles cuando inicialices Masonry. Yo no soy partidario de hacer eso, ya que utilizo temas responsivos y requiere algunas consultas de medios complejas para hacer las cosas bien en pantallas pequeñas. Para los diseños responsivos, he descubierto que lo mejor es establecer un valor de anchura para .masonry-entry con un porcentaje, basado en el número de elementos que quieres en una fila y dejar que Masonry haga el resto de los cálculos por ti.

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

.masonry-entry{width:25%}

Paso 5: Optimización para móviles

Podríamos parar aquí, pero no creo que el resultado final funcione increíblemente bien en las pantallas pequeñas de los teléfonos. Una vez que estés satisfecho con el aspecto de tu tema con la nueva rejilla de mampostería en tu escritorio, compruébalo en tu teléfono. Si no estás contento con el aspecto que tiene en tu teléfono, tendrás que hacer un pequeño trabajo.

No creo que haya suficiente espacio en la pantalla de un teléfono para todo lo que hemos añadido a nuestra parte de la plantilla de mampostería. Dos buenas soluciones disponibles son acortar el extracto para los teléfonos u omitirlo por completo. Aquí tienes una función extra que puedes añadir al functions.php de tu tema para hacerlo. Como no creo que estas cuestiones sean un problema en las tabletas, estoy utilizando un gran plugin Mobble en todos los ejemplos de esta sección para realizar los cambios sólo en teléfonos, no en tabletas. También compruebo si Mobble está activo antes de utilizarlo y, si es necesario, recurro a la función más general de detección de móviles wp_is_mobile que incorpora 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, empezamos 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 lugar si lo necesitamos más adelante. A partir de ahí comprobamos si podemos utilizar la función is_phone() de Mobble. Si es así, establecemos el extracto corto para los teléfonos y el extracto largo en caso contrario. Después hacemos lo mismo básico, pero utilizando wp_is_mobile, que afectará a todos los dispositivos móviles ,si no se puede utilizar is_phone(). Esperemos que la parte else de esta función no se utilice nunca, pero es bueno tener una copia de seguridad por si acaso. Una vez establecida la lógica de la longitud del extracto, sólo hay que 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 sencillo. Aquí tienes una nueva versión de content-masonry, con toda la parte del extracto omitida en los 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%20the_permalink('%20')%20?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
    </div><!--.masonry-thumbnail-->
<?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php%20the_permalink('%20')%20?>" 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 comprobando si no estamos en un teléfono/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 puedes hacer es aumentar la anchura de los elementos de la mampostería, lo que reduce el número en una fila, en los dispositivos móviles. Para ello, añadiremos un estilo inline diferente a la cabecera en función de la detección del dispositivo. Como esta función utiliza wp_add_inline_styles, dependerá de una hoja de estilo específica. En este caso estoy usando masonry.css, que puede ser que quieras, para mantener tus estilos de mampostería separados. Si no acabas usándolo, puedes utilizar el manejador 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 eneuques la hoja de estilos personalizada, y luego establece un valor para la anchura utilizando lo que ahora debería ser una lógica muy familiar. Después creamos la variable $custom_css pasando el valor de la anchura a un trozo de CSS de aspecto normal con {$width}. Después utilizamos wp_add_inline_style para decirle a WordPress que imprima nuestros estilos inline en la cabecera siempre que se utilice la hoja de estilos Masonry y, a continuación, enganchamos toda la función a wp_enqueue_scripts y ya está.

Si decides combinar tus estilos Masonry en una hoja de estilos existente, asegúrate de utilizar el manejador de esa hoja de estilos con wp_add_inline_style o tus estilos en línea no se incluirán. Me gusta utilizar wp_add_inline_style porque generalmente envuelvo el gancho de acción para poner en cola a Masonry en un condicional para que sólo se añada cuando sea necesario. Por ejemplo, si sólo utilizo 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 otras ideas en tu cerebro. Por ejemplo, podrías utilizar una lógica similar para omitir completamente Masonry en un dispositivo móvil. También wp_add_inline_style() es una función menos utilizada, pero muy útil, ya que te permite establecer mediante programación diferentes estilos basados en cualquier tipo de condicional. Puede permitirte cambiar radicalmente el estilo de cualquier elemento basándose no sólo en la detección del dispositivo, sino que los cambios también podrían basarse en la plantilla que se esté utilizando, o incluso si el usuario está conectado o no.

Espero que veas estos diferentes cambios que estoy haciendo como una oportunidad para ser creativo. La mampostería y los sistemas de rejilla en cascada similares han sido populares durante un tiempo, así que ha llegado el momento de dar nuevos giros a esta popular idea. Muéstranos en los comentarios qué formas geniales se te han ocurrido para utilizar la masonería en un tema de WordPress.

Un tipo de WordPress polivalente, Josh Pollock escribe sobre WordPress, desarrolla temas, es el gestor de la comunidad de Pods Framework y defiende las soluciones de código abierto para el diseño sostenible.