Cómo usar mampostería para agregar Pinterest Estilo Post Grid en WordPress

Este es un post invitado por Josh Pollock

los PinterestLa visualización en cuadrícula de publicaciones ha sido un diseño popular para las páginas de índice de blogs de WordPress por un tiempo. Es popular no solo porque imita el aspecto del popular sitio de redes sociales, sino también porque hace el mejor uso del espacio en la pantalla. En un índice de blog de WordPress, permite que cada vista previa de la publicación tenga el tamaño que naturalmente debe tener, 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, así como páginas de archivo para su tema. Abordaré algunos problemas que debe tener en cuenta 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 suficiente conocimiento 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 debes 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 mampostería 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 para ninguno. Una de las ventajas de Masonry 3 es que no requiere jQuery, pero puede usarse con él. En mi experiencia, la inicialización de 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: inicializa el Javascript

La siguiente función configura Masonry, define los contenedores que se usarán con ella y también se asegura de que todo suceda en el orden correcto. La albañilería 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 con el que me 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 usar imagesLoaded para evitar que Masonry calcule el diseño hasta que se carguen todas las imágenes. Esto asegura el tamaño adecuado.

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

if (! function_exists ('slug_masonry_init')): función slug_masonry_init () {?>

La función se explica paso a paso con comentarios en línea. Lo que hace la función Javascript es decirle a Masonry que mire dentro de un contenedor con la identificación "masonry-loop" para buscar elementos con la clase "masonry-entry" y que calcule la cuadrícula solo después de cargar las imágenes. Configuramos el contenedor externo con querySelector y el interno con itemSelector.

Paso 2: Crear bucle de mampostería

En lugar de agregar el marcado HTML para Masonry directamente a una plantilla, vamos a crear una parte de plantilla separada para ella. Cree un nuevo archivo llamado "content-masonry.php" y agréguelo a su tema. Esto le permitirá agregar el bucle de mampostería a tantas plantillas diferentes como desee.

En su nuevo archivo agregará 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. Puede modificarlo de cualquier forma que necesite, solo asegúrese de que el elemento más externo tenga la clase de "entrada de albañilería" que configuramos como itemSelector en el último paso.

 >

    
        " title="">
    


    
        " title="">

Este marcado tiene clases para cada una de sus partes, por lo que puede agregar marcado para que coincida con su tema. Me gusta agregar un borde bonito y ligeramente redondeado a .masonry-entry. Otra buena opción es que no hay borde para .masonry-entry, sino para 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 márgenes de miniatura de mampostería y rellenos de 0 en todas las direcciones. Deberá agregar todos estos estilos en un archivo llamado masonry.css en el directorio css de su tema.

Paso 3: Agregue el bucle de mampostería a las plantillas

Ahora que tenemos nuestra parte de plantilla, puede usarla en cualquier plantilla de su tema que desee. Puede agregarlo a index.php, pero no a category.php si no desea que se use para archivos de categoría. Si solo desea que se use en la página de inicio de su tema, cuando esté configurado para mostrar publicaciones de blog, lo usaría en home.php. Donde quiera que elija, todo lo que necesita hacer es envolver su bucle en un contenedor con el id "masonry-loop" y agregar la parte de la plantilla al bucle usando get_template_part (). Asegúrese de iniciar el contenedor de bucle de mampostería antes de while (have_posts ()).

Por ejemplo, aquí está el bucle principal del index.php de veintitrés:

Y aquí se modifica para usar nuestro bucle de mampostería:

Paso 4: Establecer anchos de respuesta de elementos de mampostería

Hay varias formas de establecer el ancho de cada elemento de mampostería. Puede establecer el ancho usando una cantidad de píxeles cuando inicializa la mampostería. No soy fanático de hacerlo, ya que uso temas receptivos y requiere algunas consultas complejas de los medios para hacer las cosas bien en pantallas pequeñas. Para diseños receptivos, he descubierto que lo mejor que puede hacer es establecer un valor de ancho para .masonry-entry con un porcentaje, en función de cuántos elementos desea en una fila y dejar que Masonry haga el resto de las matemáticas por usted.

Todo lo que esto requiere es dividir los 100 por el número de elementos que desea establecer el porcentaje en una entrada simple en style.css de su tema. Por ejemplo, si desea cuatro elementos en cada fila, puede hacerlo en su archivo masonry.css:

.masonry-entry {ancho: 25%}

Paso 5: optimización móvil

Podríamos parar aquí, pero no creo que el resultado final funcione increíblemente bien en pantallas de teléfonos pequeños. Una vez que esté satisfecho con el aspecto de su tema con la nueva cuadrícula de mampostería en su escritorio, compruébelo en su teléfono. Si no está contento con el aspecto de su teléfono, deberá 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 de mampostería de contenido. Dos buenas soluciones disponibles para usted son acortar el extracto para teléfonos u omitirlo por completo. Aquí hay una función adicional que puede agregar a las funciones de su tema.php para hacerlo. Debido a que no creo que estos problemas sean un problema en las tabletas, estoy usando un excelente complemento Mobble en todos los ejemplos de esta sección para hacer solo los cambios en los teléfonos, no en las tabletas. También estoy verificando 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 puede 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 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 somos. 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. Esperemos que la otra parte de esta función nunca se use, pero es bueno tener una copia de seguridad por si acaso. Una vez que se establece la lógica de longitud del extracto, se reduce a conectar 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 la mampostería de contenido, con la parte completa del extracto omitida en los teléfonos:

 >

    
        " title="">
    


    
        " title=""> 
        ';
            $excerpt .= the_excerpt();
            $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;
                }
            }
        ?>

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

Otra cosa que puede hacer es aumentar el ancho de los elementos de mampostería, 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 según la detección del dispositivo. Como esta función usa wp_add_inline_styles, dependerá de una hoja de estilo específica. En este caso, estoy usando masonry.css, que es posible que desee, para mantener sus estilos de mampostería separados. Si no termina usando eso, puede usar el controlador de otra hoja de estilo ya registrada.

Esta función usa la hoja de estilo personalizada y luego establece un valor para el ancho utilizando lo que ahora debería ser una lógica muy familiar. Después de eso, creamos la variable $ custom_css pasando el valor del ancho a un bit de CSS que de otro modo sería normal con {$ ancho}. Después de eso, usamos wp_add_inline_style para decirle a WordPress que imprima nuestros estilos en línea en el encabezado cada vez que se usa la hoja de estilo de Masonry y luego conectamos toda la función a wp_enqueue_scripts y terminamos.

Si elige combinar sus estilos de mampostería en una hoja de estilos existente, asegúrese de usar el controlador 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 gancho de acción para poner en cola la Masonería de manera condicional para que solo se agregue cuando sea necesario. Por ejemplo, si solo uso Masonry en el índice de mi blog y en las páginas de archivo, haría esto:

Estos últimos ejemplos deberían abrir algunas otras ideas en su cerebro. Por ejemplo, podría usar una lógica similar para omitir la masonerí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 mediante programación diferentes estilos basados en cualquier tipo de condicional. Puede permitirle 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 cambios diferentes que estoy haciendo como una oportunidad para ser creativo. La mampostería y los sistemas de cuadrícula en cascada similares han sido populares desde hace un tiempo, por lo que es hora de algunos nuevos giros en esta idea popular. Muéstranos en los comentarios qué formas geniales has creado para usar Masonry en un tema de WordPress.

Josh Pollock, un tipo de WordPress multipropósito, escribe sobre WordPress, desarrolla temas, sirve como administrador de la comunidad para Pods Framework y aboga por soluciones de código abierto para un diseño sostenible.