Esta es una publicación invitada de Josh Pollock
La vista 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 un tiempo. Es popular no solo porque imita el aspecto 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, permite que la vista previa de cada publicación tenga el tamaño que naturalmente necesita, sin dejar ningún 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 considerar para la optimización móvil y cómo solucionarlos.
Nota: Este es un tutorial de nivel avanzado para aquellos que se sienten cómodos con la edición de 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 necesitas 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 el ladrillo y lo pone a disposición en los archivos de plantilla de su tema (consulte nuestra guía sobre cómo agregar correctamente JavaScript y estilos en WordPress). También tenga en cuenta que no estamos agregando jQuery como una dependencia para ninguno de ellos. Uno de los beneficios de Masonry 3 es que no requiere jQuery, pero se puede usar 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: inicializar JavaScript
La 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. Albañilería necesita calcular el tamaño de cada uno de los elementos de la página para organizar su cuadrícula de forma dinámica. Un problema que he encontrado con Masonry en muchos navegadores es que Masonry calcula incorrectamente la altura de los elementos con imágenes de carga lenta, lo que lleva a 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 tamaño correcto.
Esta es la función y acción que producirá 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. Lo que hace la función Javascript es decirle a Masonry que busque dentro de un contenedor con el identificador «masonry-loop» los elementos con la clase «masonry-entry» 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: crea un anillo de mampostería
En lugar de agregar el marcado HTML para Masonry directamente a una plantilla, crearemos 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 tantos modelos como desee.
En su nuevo archivo, agregará el código que se muestra a continuación. El marcado es similar al que vería normalmente en cualquier vista previa de contenido. Puede cambiarlo de todos modos, solo asegúrese de que el elemento más externo tenga la clase «entrada de mampostería» que configuramos 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 marcado para que coincida con su tema. Me gusta agregar un bonito borde ligeramente redondeado a .masonry-entry. Otra buena opción no es el borde de la entrada de mampostería, sino darle un tono claro. Esto se ve especialmente bien cuando la miniatura de la publicación se extiende hasta el borde del contenedor, lo que se puede lograr proporcionando márgenes .masonry-thumbnail y relleno 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 bucles de mampostería a los modelos
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ías. Si desea que se use solo 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 tiene que hacer es envolver su bucle en un contenedor con la identificación «masonry-loop» y agregar la parte del modelo 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 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 modifica para 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: Establecer los anchos reactivos de los elementos de mampostería
Hay varias formas de establecer el ancho de cada elemento de mampostería. Puede establecer el ancho utilizando una cantidad de píxeles al inicializar Masonry. No soy un fanático de hacer esto, ya que uso temas receptivos y requiere algunas consultas de medios complejas para hacer las cosas bien en pantallas pequeñas. Para proyectos receptivos, he descubierto que lo mejor que se puede hacer es establecer un valor de ancho para .masonry-entry con un porcentaje, según la cantidad de elementos que desee en una fila, y dejar que Masonry haga el resto de los cálculos por usted.
Todo lo que esto requiere es dividir 100 por la cantidad de elementos cuyo porcentaje desea establecer en una entrada simple en el archivo style.css del 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. Una vez que esté satisfecho con el aspecto de su tema con la nueva cuadrícula de ladrillos en el escritorio, eche un vistazo en su teléfono. Si no está satisfecho con el aspecto de su teléfono, tendrá que trabajar un poco.
No creo que haya suficiente espacio de pantalla en un teléfono para todo lo que hemos agregado a nuestra parte del modelo 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 al functions.php de su tema para hacer eso. Como no creo que estos problemas sean un problema en las tabletas, estoy usando un excelente plugin Mobble en todos los ejemplos de esta sección para realizar cambios solo en teléfonos, no en tabletas. También estoy comprobando si Mobble está activo antes de usarlo y, si es necesario, volviendo 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, comencemos almacenando la longitud del extracto largo y la longitud del extracto corto en variables, ya que usaremos estos 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 teléfonos y el extracto largo si no lo estamos. 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 del extracto, solo es cuestión de 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 mampostería de contenido, con toda la parte del extracto ocupada en los teléfonos:
<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 estamos probando para ver si no estamos en un teléfono / dispositivo móvil y, de ser así, devolvemos la parte extraída de nuestro ciclo. Si estamos en un teléfono / dispositivo móvil no hacemos nada.
Otra cosa que puede querer hacer es aumentar el ancho de los elementos de mampostería, reduciendo el número de filas, en dispositivos móviles. Para hacer esto, agregaremos un estilo en línea diferente al encabezado basado en la detección del dispositivo. Dado que 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 separados los estilos de mampostería. Si no terminas usándolo, puedes 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 elimina la hoja de estilo personalizada, luego establece un valor para el ancho usando lo que ahora debería ser una lógica muy familiar. A continuación, creamos la variable $ custom_css pasando el valor del ancho en un CSS de apariencia normal con {$ width}. 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 Masonry, luego conectamos toda la función a wp_enqueue_scripts y eso es todo.
Si ha elegido combinar sus estilos de mampostería en una hoja de estilo existente, asegúrese de usar ese identificador de hoja de estilo con wp_add_inline_style, de lo contrario, sus estilos en línea no se incluirán. Me gusta usar wp_add_inline_style porque generalmente adjunto el gancho de acción para agregar Masonry en un condicional para que solo se agregue cuando sea necesario. Por ejemplo, si estoy usando Masonry solo en el índice de mi blog y las páginas de archivo, lo haría:
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. Wp_add_inline_style () también 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 basado no solo en la detección del dispositivo, sino que los cambios también podrían basarse en el modelo utilizado o incluso si el usuario está conectado o no.
Espero que vean estos diferentes cambios que estoy haciendo como una oportunidad para ser creativo. La mampostería y los sistemas de cuadrícula en cascada similares han sido populares durante algún tiempo, por lo que es hora de dar algunos nuevos giros a esta popular idea. Muéstranos en los comentarios las increíbles formas que se te han ocurrido para usar la masonería en un tema de WordPress.
Un tipo multiusos de WordPress, Josh Pollock escribe sobre WordPress, desarrolla temas, actúa como administrador de la comunidad para Pods Framework y apoya soluciones de código abierto para el diseño sostenible.
¿Te ha resultado útil??
0 / 0