En este breve tutorial integraremos Masonry, el plugin Jquery de diseño en cuadrilla y lo haremos sin necesidad de instalar ningún plugin en nuestro wordpress, lo integraremos directamente en el theme.
Piensa en ello como la otra cara de los flotantes de CSS o inline-block. Mientras que la flotación organiza los elementos horizontalmente y luego verticalmente, Masonry organiza los elementos verticalmente tomando en cuenta la altura del elemento y luego lo organiza horizontalmente según una cuadrícula. El resultado minimiza los espacios verticales, esos que no se ven muy bien en el diseño de elemento de dintintas alturas, igual que el orden que usan los albañiles para colocar los ladrillo en una pared.
Aquí encontré una explicación gráfica de la diferencia entre estas 2 formas comúnmente de organizar nuestro grid layout, generalmente he visto que usan Masonry para presentar los post de wordpress, porque no siempre los post tiene la misma altura al presentarlos en el front end. Mira los números de la gráfica, muestran el orden de los elementos en tu código HTML:
Bien, ahora que ya tenemos claro que hará el plugin de cuadrilla Masonry en nuestro grid layout de wordpress, nos ponemos manos a la obra, realizaré la integración lo mas sencilla posible y lo haré para presentar los post de wordpress, para ello usaremos los siguientes archivos de tu theme: footer.php, single.php (en el caso que desees usarlos en los post, como yo), y style.css.
Agregando lo necesario para integrar Masonry en WordPress
Ahora tendremos que agregar la libreria Jquery, masonry y una función para que funcione correctamente nuestra integración
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
$(window).load(function() {
$('.grid').masonry({
// optiones
itemSelector: '.grid-item',
singleMode: true
});
});
</script>
Integrando Masonry a nuestro theme wordpress
En este caso lo realizare en los post (como lo mencione anteriormente), por lo tanto usare single.php
<div class="grid">
<?php if(have_posts()) : while (have_posts()) : the_post(); ?>
<div class="grid-item">
<div class="contenedor-post">
<h3><?php the_title(); ?></h3>
<time><?php the_time('F j, Y') ?></time>
<?php the_category(' | ', 'single', false);?>
<?php the_excerpt(); ?>
<a href="<?php the_permalink();?>">Leer Más</a>
</div>
</div>
<?php endwhile;?>
<?php endif; ?>
</div>
Como puede ver, Masonry necesita básicamente 2 elementos, el elemento padre que tiene la clase (grid) que es el contenedor, y el elemento hijo que tiene la clase (grid-item) que serían los post de wordpress.
Agregando CSS a Masonry en wordpress
Ahora que tenemos todo listo y funcional necesitaremos agregar un poco de estilos para que nuestra cuadrilla tenga el efecto de cuadrilla masonry.
.grid {
width: 800px;
}
.grid-item{
width: 170px;
padding: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
Integrando Masonry con Bootstrap
Cuando utilice por primera vez el plugin masonry lo integre a un sitio web que tenia bootstrap, por ello te demostrare como hacerlo con la grillas de bootstrap, entonces no necesitaremos el CSS usado anteriormente, porque usaremos la organización de columnas del mismo.
<div class="container">
<div class="row grid">
<?php if(have_posts()) : while (have_posts()) : the_post(); ?>
<div class="col-sm-3 col-xs-12 grid-item">
<div>
<h3>
<a href="<?php the_permalink();?>" title="<?php the_title(); ?>"><span><?php the_title(); ?></span></a>
</h3>
<div>
<time><?php the_time('F j, Y') ?></time>
<?php the_category(' | ', 'single', false);?>
</div>
<div>
<?php the_excerpt(); ?>
</div>
<a href="<?php the_permalink();?>">Leer</a>
</div>
<div class="clearfix visible-lg"></div>
</div>
<?php endwhile;?>
<?php endif; ?>
</div>
</div>
