Cómo usar la albañilería para añadir una cuadrícula de estilo interesante en WordPress

Este es un artículo invitado de Josh Pollock

El despliegue de la cuadrícula de mensajes en forma de Pintero ha sido un diseño popular para las páginas de índice de blog de WordPress durante un tiempo. Es popular no sólo porque imita el aspecto del popular sitio de medios sociales, sino también porque hace el mejor uso del espacio en la pantalla. En un índice de blog de WordPress, permite que la vista previa de cada entrada sea del tamaño que necesita naturalmente, sin dejar espacio extra.

En este tutorial, le mostraré cómo usar la popular Masonry JavaScript Library para crear diseños de cuadrícula en cascada para su índice de blog, así como páginas de archivo para su tema. Me referiré a algunos de los 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: Añadir bibliotecas necesarias a su tema

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

Primero necesitas cargar Masonería en tu tema, usando este código:

123456789if(! function_exists(‘slug_scripts_masonry’)) :if( ! is_admin()) :functionslug_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 la albañilería y la pone a disposición de los archivos de plantilla de su tema (vea nuestra guía sobre cómo agregar correctamente JavaScripts y Estilos en WordPress). También tenga en cuenta que no estamos añadiendo 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 Masonería 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: Inicializar el Javascript

Esta siguiente función configura la albañilería, define los contenedores que se utilizará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 de la página para poder diseñar su cuadrícula de forma dinámica. Un problema con el que me he topado con Masonry en muchos navegadores es que Masonry calcula mal la altura de los elementos con imágenes de carga lenta, lo que lleva a que los elementos se superpongan. La solución es usar imagesLoaded para evitar que Masonry calcule el diseño hasta que todas las imágenes estén cargadas. Esto asegura un tamaño adecuado.

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

12345678910111213141515161718if(!function_exists( ‘slug_masonry_init’)) :functionslug_masonry_init() { ?> //set the container that Masonry will be inside of in a varcontainer = document.querySelector(‘#masonry-loop’); //create empty var msnry var msnry varmsnry; // initialize Masonry después de que todas las imágenes hayan cargado imágenesLoaded( container, function() { msnry = newMasonry( container, { itemSelector: ‘.entrada de albañilería’ }); });<?php }//add to wp_footeradd_action('wp_footer', 'slug_masonry_init');endif; // ! slug_masonry_init existe

La función se explica paso a paso con comentarios en línea. Lo que hace la función Javascript es decirle a la Masonería que mire dentro de un contenedor con el identificador «masonry-loop» para los artículos con la clase «masonry-entry» y que calcule la cuadrícula sólo después de que se hayan cargado las imágenes. El contenedor exterior con querySelector y el interior con itemSelector.

Paso 2: Crear un bucle de mampostería

En lugar de añadir el marcado HTML para la albañilería directamente a una plantilla, vamos a crear una parte de plantilla separada para ella. Cree un nuevo archivo llamado «content masonry.php» y añádalo a su tema. Esto le permitirá añadir el bucle de albañilería a tantas plantillas diferentes como desee.

En su nuevo archivo usted agregará el código que se muestra a continuación. La marcación es similar a la que vería normalmente para cualquier vista previa del contenido. Puede modificarlo de todas formas, pero asegúrese de que el elemento más exterior tenga la clase de «entrada de albañilería» que establecimos como itemSelector en el último paso.

12345678910111213>> «»title=»»>»> >        

«»title=»»>>        >                         

Esta marcación tiene clases para cada una de sus partes, por lo que puede añadir una marcación que coincida con el tema. Me gusta añadir un bonito borde ligeramente redondeado a la entrada de .masonry. Otra buena opción es no ponerle un borde a la entrada de .mampostería, sino darle una ligera sombra. Esto se ve particularmente bien cuando la miniatura de la publicación se extiende hasta el borde del contenedor, lo que puede lograrse dando márgenes de miniatura de .masonería y rellenos de 0 en todas las direcciones. Usted querrá agregar todos estos estilos en un archivo llamado masonry.css en el directorio css de su tema.

Paso 3: Añadir un bucle de albañilerí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 utilice para los archivos de categorías. Si sólo quieres que se use en la página de inicio de tu tema, cuando esté configurado para mostrar entradas de blog, lo usarás en home.php. Dondequiera que elija, todo lo que necesita hacer es envolver su bucle en un contenedor con la identificación «masonry-loop» y añadir la parte de la plantilla en el bucle usando get_template_part(). Asegúrese de iniciar el contenedor de bucle de albañilería antes de (have_posts()).

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

123456789101112

Y aquí se modifica para usar nuestro bucle de albañilería:

123456789101112″masonry-loop»>

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

Hay varias maneras de establecer el ancho de cada elemento de albañilería. Puede establecer el ancho usando un número de píxeles al inicializar Masonería. No me gusta hacer eso, ya que utilizo temas con capacidad de respuesta y requiere algunas consultas complejas de los medios de comunicación para que las cosas funcionen correctamente en las pantallas pequeñas. Para diseños sensibles, he encontrado que lo mejor que se puede hacer es establecer un valor de ancho para la entrada de albañilería.masonry con un porcentaje, basado en la cantidad de elementos que usted quiere en una fila y dejar que la albañilería 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 el style.css de su tema. Por ejemplo, si desea cuatro elementos en cada fila, puede hacerlo en su archivo masonry.css:

.entrada de albañilería{ancho:25%}

Paso 5: Optimización móvil

Podríamos parar aquí, pero no creo que el resultado final funcione increíblemente bien en las pantallas de los teléfonos pequeños. Una vez que esté satisfecho con el aspecto de su tema con la nueva cuadrícula de albañilería de su escritorio, compruébelo en su teléfono. Si no estás contento con el aspecto que tiene el teléfono, tendrás que trabajar un poco.

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 contenido de masonería. Dos buenas soluciones disponibles para usted son acortar el extracto para los teléfonos o saltarlo por completo. Aquí hay una función extra que puede añadir a su tema functions.php para hacer eso. Debido a que no creo que estos problemas sean un problema en las tabletas, estoy usando un gran plugin Mobble en todos los ejemplos de esta sección para hacer los cambios sólo en los teléfonos, no en las tabletas. También estoy comprobando 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.

123456789101112131414151617181920212223242526if(! function_exists(‘slug_custom_excerpt_length’) ) :functionslug_custom_excerpt_length( $length) { //set the shorter length once $short= 10; //set long length once $long= 55; //si sólo podemos establecer short excerpt para teléfonos, si no short excerpt para todos los dispositivos móviles si(function_existe(‘is_phone’) { if( is_phone() ) { return$short; } else{ return$long; }            else{ if( wp_is_mobile()) { return$short; } else{ return$long; }    addd_filter(‘excerpt_length’, ‘slug_custom_excerpt_length’, 999 );endif; // ! existe slug_custom_excerpt_length

Como se puede 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 es necesario más adelante. A partir de ahí probamos si podemos usar is_phone() de Mobble. Si es así, configuramos el extracto corto para los teléfonos y el extracto largo si no lo somos. Después de eso hacemos lo mismo, pero usando wp_is_mobile, que afectará a todos los dispositivos móviles ,si no se puede usar is_phone(). Esperemos que la otra parte de esta función nunca se utilice, pero es bueno tener una copia de seguridad por si acaso. Una vez que se establece la lógica de longitud de extractos, la función se reduce a enganchar la función al filtro de longitud de extractos.

Acortar el extracto es una opción, pero también podemos eliminarlo por completo con un simple proceso. Aquí hay una nueva versión de la masonería de contenido, con toda la porción del extracto omitida en los teléfonos:

1234567891011121314141516171718192021222324252627>> «»title=»»> >        

«»title=»»>>             

Esta vez estamos probando si no estamos en un teléfono o dispositivo móvil y si es así devolvemos el extracto de nuestro bucle. Si estamos en un teléfono o dispositivo móvil no hacemos nada.

Otra cosa que usted puede ser que desee hacer es aumentar la anchura de los artículos de la albañilería, que reduce el número en una fila, en dispositivos móviles. Para ello, añadiremos un estilo en línea diferente al encabezado basado en la detección de dispositivos. Como esta función utiliza wp_add_inline_styles, dependerá de una hoja de estilo específica. En este caso estoy usando masonry.css, el cual usted podría querer, para mantener sus estilos de albañilería separados. Si no terminas usando eso, puedes usar el handle de otra hoja de estilos ya registrada.

123456789101112131414151617181819202122232425262728293031if( ! function_existe (‘slug_masonry_styles’) ) :functionslug_masonry_styles() { //set the wide width $wide= ‘25%’; //set narrow width $narrow= ‘50%’; /**Determine el valor de $width**/////si sólo podemos establecer narrow para teléfonos, o narrow para todos los dispositivos móviles si(function_existe( ‘is_phone’) { if( is_phone() { $width= $narrow; } else{ $width= $wide; }            else{ if( wp_is_mobile()) { $width= $narrow; } else{ $width= $wide; }    }    /**CSS de salida para una entrada de albañilería con el ancho apropiado**/ $custom_css= «.masonry-entry{width: {$width};}»; // Debe usar el mango de una hoja de estilo ya en cola aquí.    wp_add_inline_style(‘masonry’, $custom_css);}add_action(‘wp_enqueue_scripts’, ‘slug_masonry_styles’);endif; // ! slug_masonry_styles existe

Esta función eneuques la hoja de estilo personalizada, y luego establece un valor para el ancho utilizando lo que ahora debería ser la lógica muy familiar. Después creamos la variable $custom_css pasando el valor de width a un bit de CSS de aspecto normal con {$width}. Después usamos wp_add_inline_style para decirle a WordPress que imprima nuestros estilos en línea en el encabezado siempre que se use la hoja de estilo Masonry y luego enganchamos toda la función a wp_enqueue_scripts y listo.

Si eligió combinar sus estilos de albañilería en una hoja de estilo existente, asegúrese de usar la manija 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 encolar Masonería en un condicional para que sólo se añada cuando sea necesario. Por ejemplo, si sólo estoy usando masonería en mi índice de blog y páginas de archivo, lo haría:

123if( is_home() ||| is_archive() ) { add_action( ‘wp_enqueue_scripts’, ‘slug_scripts_masonry’);}}; </ i&gt.

Estos últimos ejemplos deberían abrirte otras ideas en tu cerebro. Por ejemplo, podría utilizar una lógica similar para omitir la masonería por completo en un dispositivo móvil. También wp_add_inline_style() es una función menos utilizada, pero muy útil, ya que le permite establecer de forma programática diferentes estilos basados en cualquier tipo de condicional. Puede permitirle cambiar radicalmente el estilo de cualquier elemento basándose no sólo en la detección de dispositivos, sino que los cambios también pueden basarse en qué plantilla se está utilizando, o incluso si el usuario ha iniciado sesión o no.

Espero que veas estos diferentes cambios que estoy haciendo como una oportunidad para ser creativo. La albañilería y los sistemas de rejilla en cascada similares han sido populares desde hace tiempo, por lo que es hora de dar nuevos giros a esta popular idea. Muéstranos en los comentarios las mejores maneras que has encontrado para usar Masonry en un tema de WordPress.

Un tipo multipropósito de WordPress, Josh Pollock escribe sobre WordPress, hace desarrollo de temas, sirve como administrador de la comunidad para el marco de trabajo de Pods y aboga por soluciones de código abierto para el diseño sostenible.

Deja un comentario