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.

Captura de pantalla del dise√Īo de cuadr√≠cula de alba√Īiler√≠a en WordPress

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.

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 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:

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, 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.