Cómo usar la mampostería para agregar la cuadrícula de publicaciones de estilo Pinterest en WordPress

Este es un post invitado por Josh Pollock

La visualización en forma de cuadrícula de publicaciones de Pinterest ha sido un diseño popular para las páginas de índice del blog 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 necesita naturalmente, sin dejar espacio adicional.

En este tutorial, te mostraré cómo usar la popular Biblioteca de JavaScript de Masonería para crear diseños de cuadrícula en cascada para el índice de tu blog, así como páginas de archivo para tu tema. Abordaré algunos problemas que debe 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 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 Masonería.

Primero necesitas cargar la masonería 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 ('mampostería', get_template_directory_uri (). '/ css /');  add_action ('wp_enqueue_scripts', 'slug_scripts_masonry'); terminara si; //! is_admin () endif; //! slug_scripts_masonry existe 

Este código simplemente carga la 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 no estamos agregando jQuery como una 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 la Masonería sin jQuery es más confiable y abre la posibilidad de omitir la carga de jQuery, que puede ayudar tanto con los tiempos de carga de página como con los problemas de compatibilidad..

Paso 2: Inicializar el Javascript

Esta siguiente función configura la Masonería, define los contenedores que se utilizarán con ella y también se asegura de que todo suceda en el orden correcto. La mampostería debe calcular el tamaño de cada uno de los elementos de la página para diseñar su cuadrícula de forma dinámica. Un problema que he encontrado con la Masonería en muchos navegadores es que la Masonería calculará mal la altura de los elementos con las imágenes de carga lenta, lo que llevará a la superposición de elementos. La solución es usar imagesLoaded para evitar que la Masonería calcule el diseño hasta que se carguen todas las imágenes. 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 () ?> // configura el contenedor en el que estará la Masonería dentro de un var var container = document.querySelector ('# masonry-loop'); // crea vacio var msnry var msnry; // inicialice la Masonería después de que todas las imágenes hayan cargado imagesLoaded (container, function () msnry = new Masonry (container, itemSelector: '.masonry-entry'););   
La función se explica paso a paso con comentarios en línea. Lo que hace la función de Javascript es decirle a la Masonería que mire dentro de un contenedor con el "bucle de albañilería" para los elementos de la clase "entrada de albañilería" y que calcule la cuadrícula solo después de que se carguen 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 formato HTML para la mampostería directamente a una plantilla, vamos a crear una parte de la plantilla por separado. 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ía para cualquier vista previa del contenido. Puede modificarlo de cualquier manera que necesite, solo asegúrese de que el elemento más externo tenga la clase de "entrada de albañilería" que establecimos como el Selector de elementos en el último paso.
 
 
             
 
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 la entrada de masonería. Otra buena opción es que no haya borde para .masonry-entry, sino para darle una ligera sombra. Esto se ve particularmente bien cuando la miniatura del post se extiende hasta el borde del contenedor, lo que puede lograrse al proporcionar márgenes y rellenos de miniaturas de miniaturas en 0 en todas las direcciones. Querrá agregar todos estos estilos en un archivo llamado masonry.css en el directorio css de su tema.
 
Paso 3: Agregar bucle de mampostería a las plantillas
 
Ahora que tenemos nuestra parte de la plantilla, puede utilizarla en cualquier plantilla del tema que desee. Puede agregarlo a index.php, pero no category.php si no desea que se use para los archivos de categorías. Si solo quieres que se use en la página de inicio de tu tema, cuando esté configurado para mostrar publicaciones de blog, lo usarías en home.php. Donde quiera que elija, todo lo que necesita hacer es envolver su bucle en un contenedor con el id "bucle de mampostería" y agregar la parte de la plantilla en el 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 de index.php de veinte trece:
 
          
 
Y aquí se modifica para poder utilizar nuestro bucle de albañilería:
 
            
 
Paso 4: Establecer los anchos de respuesta de los elementos de mampostería
 
Hay varias formas en que puede establecer el ancho de cada elemento de mampostería. Puede establecer el ancho utilizando una cantidad de píxeles al inicializar la Masonería. No soy un fanático de hacer eso ya que uso temas sensibles y requiere algunas consultas complejas de medios para hacer las cosas bien en pantallas pequeñas. Para diseños receptivos, lo mejor que he hecho es establecer un valor de ancho para .masonry-entry con un porcentaje, según la cantidad de elementos que desees en una fila y dejar que la Masonería haga el resto de las matemáticas por ti..
 
Todo lo que se requiere es dividir los 100 por el número de elementos que desea establecer en una entrada simple en el estilo de su tema.css. Por ejemplo, si desea cuatro elementos en cada fila, puede hacer esto en su archivo masonry.css:
 
.entrada de albañilería ancho: 25%
 
Paso 5: Optimización móvil
 
Podríamos detenernos 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 albañilería en su escritorio, verifíquelo en su teléfono. Si no está contento con el aspecto que tiene en su teléfono, tendrá que trabajar un poco..
 
No creo que haya suficiente espacio en la pantalla de un teléfono para todo lo que agregamos a nuestra parte de la plantilla de albañilerí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 hacer eso. Como no creo que estos problemas sean un problema en las tabletas, estoy usando un gran 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 comprobando 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 que está integrada en WordPress. 
 
 if (! function_exists ('slug_custom_excerpt_length')): function slug_custom_excerpt_length ($ length) // establece la longitud más corta una vez $ short = 10; // establecer long length una vez $ long = 55; // si solo podemos establecer un extracto corto para los teléfonos, sino también un cortocircuito para todos los dispositivos móviles si (function_exists ('is_phone') if (is_phone ()) return $ short; else return $ long; else else if (wp_is_mobile ()) return $ short; else return $ long; add_filter ('excerpt_length', 'slug_custom_excerpt_length', 999); endif; //! slug_custom_excerpt_length existe 
 
Como puede ver, comenzamos por almacenar 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í, verificamos si podemos usar el 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 no se puede usar is_phone (). Con suerte, la otra parte de esta función nunca se utilizará, pero es bueno tener una copia de seguridad por si acaso. Una vez que se establece la lógica de longitud de extracto, se reduce a 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 toda la parte del extracto que se encuentra en los teléfonos:
 
 
           
 
Esta vez tenemos pruebas para ver si no estamos en un teléfono / dispositivo móvil y si es así, devolvemos el fragmento de nuestro bucle. Si estamos en un teléfono / dispositivo móvil no hacemos nada..
 
Otra cosa que podría querer 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 de línea diferente al encabezado en función de la detección del dispositivo. Dado que esta función utiliza wp_add_inline_styles, dependerá de una hoja de estilo específica. En este caso, estoy usando masonry.css, lo que quizás desee, para mantener sus estilos de mampostería separados. Si no terminas usando eso, puedes usar el manejador de otra hoja de estilo ya registrada..
 
 if (! function_exists ('slug_masonry_styles')): function slug_masonry_styles () // establece el ancho ancho $ wide = '25% '; // establecer ancho angosto $ estrecho = '50% '; / ** Determine el valor para $ ancho ** / // si solo podemos establecer restringido para teléfonos, sino también estrecho para todos los dispositivos móviles si (function_exists ('is_phone') if (is_phone ()) $ width = $ narrow;  else $ width = $ wide; else else if if (wp_is_mobile ()) $ width = $ narrow; else $ width = $ wide; / ** Salida de CSS para .masonry-entry con el ancho adecuado ** / $ custom_css = ".masonry-entry width: $ width;"; // Debe usar el identificador de una hoja de estilo encolada aquí. wp_add_inline_style ('masonry', $ custom_css); add_action (' wp_enqueue_scripts ',' slug_masonry_styles '); endif; //! slug_masonry_styles existe 
 
Esta función amplía 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 de ancho a un bit de CSS que por lo demás parece regular 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 mampostería y luego conectamos toda la función a wp_enqueue_scripts y terminamos.
 
Si eligió combinar sus estilos de mampostería en una hoja de estilo existente, asegúrese de usar el controlador de esa hoja de estilo 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 en un condicional, de modo 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 por completo 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 en función de cualquier tipo de condicional mediante programación. Puede permitirle cambiar radicalmente el estilo de cualquier elemento basándose no solo en la detección de dispositivos, 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 realizando 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 un nuevo giro a esta idea popular. Muéstrenos en los comentarios las maneras geniales que ha ideado para usar la Masonería en un tema de WordPress.
 
Josh Pollock, un usuario de WordPress de usos múltiples, escribe sobre WordPress, desarrolla temas, se desempeña como administrador de la comunidad para el Marco Pods y aboga por soluciones de código abierto para el diseño sostenible.