Uso de mampostería para agregar cuadrícula de publicaciones de estilo Pinterest en WordPress

La visualización de cuadrícula de publicaciones similar a Pinterest ha sido un diseño popular para las páginas de índice de blogs de WordPress durante algún 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 de la pantalla. En un índice de blog de WordPress, la vista previa de cada publicación puede tener el tamaño que necesita naturalmente sin dejar espacio adicional.

En este tutorial, le mostraré cómo usar la popular biblioteca Masonry JavaScript para crear diseños de cuadrícula en cascada para el índice de su blog y las páginas de archivo para su tema. Voy a abordar algunos problemas que debe considerar en la optimización de dispositivos móviles y cómo resolverlos.

Captura de pantalla del diseño de la cuadrícula de mampostería en WordPress

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

Paso 1: agregue las bibliotecas necesarias a su tema

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

Primero necesitas cargar Masonry en tu tema con 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 su tema (consulte nuestra guía sobre cómo agregar correctamente JavaScripts y estilos en WordPress). También tenga en cuenta que tampoco estamos agregando jQuery como una dependencia. Una de las mejores cosas 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 ser útil tanto con los tiempos de carga de la página como con los problemas de compatibilidad.

Paso 2: inicializa Javascript

La siguiente función configura Masonry, define los contenedores que se usarán con ella y también se asegura de que todo vaya en el orden correcto. La mampostería debe calcular el tamaño de cada elemento en la página para dinamizar la cuadrícula. Un problema que he encontrado con Masonry en muchos navegadores es que Masonry calcula mal la altura de los elementos con imágenes de carga lenta, lo que resulta en elementos superpuestos. La solución es usar imagesLoaded para evitar que Masonry calcule el diseño hasta que se carguen todas las imágenes. Esto asegura el dimensionamiento correcto.

Esta es la función y acción con la que se genera 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. La función Javascript indica a Masonry que busque elementos con la clase «masonry-entry» en un contenedor con el ID «masonry-loop» y que calcule la cuadrícula solo después de que se hayan cargado las imágenes. Configuramos el contenedor externo con querySelector y el interno con itemSelector.

Paso 2: crea un bucle de mampostería

En lugar de agregar el marcado HTML para Masonry directamente a una plantilla, estamos creando una parte de plantilla separada para ella. Cree un nuevo archivo llamado «content-masonry.php» y agréguelo a su tema. De esta manera, puede agregar el arco de mampostería a tantas plantillas diferentes como desee.

En su nuevo archivo, agregue el código que se muestra a continuación. El marcado es similar al que vería normalmente en una vista previa del contenido. Puede cambiarlo según sea necesario. Sin embargo, asegúrese de que el elemento más externo tenga la clase «Masonry Entry», que establecemos 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, por lo que puede agregar el marcado que se adapte a su tema. Me gusta agregar un borde agradable y ligeramente redondeado a .masonry-entry. Otra buena opción no es un borde para una entrada .masonry, sino darle una sombra clara. Esto se ve especialmente bien cuando la miniatura de la publicación se extiende hasta el borde del contenedor. Esto se puede lograr especificando los márgenes de las miniaturas .masonry y el relleno de 0 en todas las direcciones. Desea agregar todos estos estilos en un archivo llamado masonry.css en el directorio CSS de su tema.

Paso 3: agregar un bucle de mampostería a las plantillas

Ahora que tenemos nuestra parte de plantilla, puedes usarla en cualquier plantilla de tu tema que te guste. Puede agregarlo a index.php, pero no a category.php si no desea que se use para archivos de categorías. Si desea que solo se use en la página de inicio de su tema y en las publicaciones del blog, utilícelo en home.php. Donde quiera que decida, solo tiene que envolver su bucle en un contenedor con el ID «masonry-loop» e insertar la parte de la plantilla en el bucle con get_template_part (). Asegúrese de iniciar el contenedor para el bucle de mampostería antes de 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í se modificó para poder usar nuestro bucle de mampostería:

<?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: establezca el ancho de reacción de los elementos de mampostería

Hay varias formas de establecer el ancho de cualquier mampostería. Puede establecer el ancho con varios píxeles al inicializar Masonry. No soy fanático de esto, ya que uso temas receptivos y se necesitan algunas consultas de medios complejas para hacer las cosas bien en pantallas pequeñas. Para diseños receptivos, he descubierto que es mejor establecer un valor de ancho para .masonry-entry con un porcentaje basado en la cantidad de elementos que desea en una fila y dejar que Masonry haga el resto de los cálculos por usted.

Todo lo que tiene que hacer es dividir el 100 por la cantidad de elementos para los que desea establecer el porcentaje en una entrada simple en el style.css de su tema. Por ejemplo, si desea cuatro elementos en cada línea, puede hacerlo en su archivo masonry.css:

.masonry-entry{width:25%}

Paso 5: optimización móvil

Podríamos detenernos allí, pero no creo que el resultado final funcione increíblemente bien en pantallas de teléfonos pequeños. Cuando esté satisfecho con la nueva rejilla de mampostería en su escritorio, puede verificarla en su teléfono. Si no está satisfecho con cómo se ve en su teléfono, entonces hay un poco de trabajo por hacer.

No creo que haya suficiente espacio en la pantalla de un teléfono para todo lo que agregamos a nuestra sección de plantillas de mampostería de contenido. Hay dos buenas soluciones disponibles para acortar la extensión de los teléfonos o para omitirlas por completo. Aquí hay una función adicional que puede agregar al archivo functions.php de su tema para hacer esto. Como no creo que estos problemas sean un problema en las tabletas, estoy usando un excelente complemento Mobble Para todos los ejemplos de esta sección, los cambios se realizan solo en teléfonos, no en tabletas. También verifico si Mobble está activo antes de usarlo y, si es necesario, recurro a la función de detección móvil más general wp_is_mobile 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 puede ver, primero almacenamos la longitud de volcado larga y la longitud de volcado corta en variables porque vamos a usar estos valores dos veces y queremos cambiarlos en un lugar más adelante si es necesario. A partir de ahí, probamos si podemos usar Mobbles is_phone (). Si es así, ponemos el extracto corto para teléfonos y el extracto largo cuando no lo estamos. Después de eso, hacemos lo mismo, pero usamos wp_is_mobile, que afecta a todos los dispositivos móviles si no se puede usar is_phone (). Con suerte, la otra parte de esta función nunca se usará, pero es bueno tener una copia de seguridad por si acaso. Tan pronto como se define la lógica de longitud de extensión, la función solo necesita estar vinculada con el filtro excerpt_length.

Acortar el extracto es una opción, pero también podemos eliminarlo fácilmente. Aquí hay una nueva versión de mampostería de contenido con el extracto completo en teléfonos omitido:

<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 probamos que no estamos en un teléfono / dispositivo móvil y si es así devolvemos la parte de extracción de nuestro bucle. Cuando estamos en un teléfono / dispositivo móvil, no hacemos nada.

También puede aumentar el ancho de los elementos de mampostería en dispositivos móviles, lo que reducirá el número en una fila. Para hacer esto, agregaremos un estilo en línea diferente al encabezado según el descubrimiento de dispositivos. Dado que esta función usa wp_add_inline_styles, depende de una hoja de estilo específica. En este caso, estoy usando masonry.css, que es lo que quizás desee para mantener separados los estilos de mampostería. Si no lo usa, puede usar el identificador de otra hoja de estilo 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 habilita la hoja de estilo personalizada y luego establece un valor para el ancho, utilizando la lógica ahora muy familiar. Luego creamos la variable $ custom_css pasando el valor de ancho a un bit CSS de apariencia normal con {$ ancho}. Después de eso, usaremos wp_add_inline_style para decirle a WordPress que imprima nuestros estilos en línea en el encabezado cuando use la hoja de estilo Masonry. Luego vinculamos la función completa con wp_enqueue_scripts y terminamos.

Si desea combinar sus estilos de mampostería en una hoja de estilo existente, debe usar el identificador de esa hoja de estilo con wp_add_inline_style. De lo contrario, sus estilos en línea no serán considerados. Me gusta usar wp_add_inline_style porque generalmente envuelvo el gancho de acción del revestimiento de ladrillos en una condición para que solo se agregue cuando sea necesario. Por ejemplo, si solo uso mampostería para el índice de mi blog y 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 su cerebro. Por ejemplo, puede usar una lógica similar para omitir completamente la mampostería en un dispositivo móvil. Además, wp_add_inline_style () es una función menos utilizada pero muy útil, ya que le permite establecer diferentes estilos mediante programación en función de cualquier tipo de condición. Puede cambiar radicalmente el estilo de un elemento basándose no solo en la detección del dispositivo, sino también en la plantilla utilizada, o incluso en si el usuario está conectado o no.

Espero que vean estos diversos 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, por lo que es hora de dar algunos nuevos giros a esta popular idea. Muéstranos en los comentarios qué formas geniales has encontrado para usar Masonry en un tema de WordPress.