Cómo crear una visualización en cuadrícula de las miniaturas de las publicaciones en los temas de WordPress

Cuando creas diseños de sitios de WordPress, ¿alguna vez has tenido la necesidad de crear una visualización en cuadrícula de las publicaciones? El diseño en cuadrícula funciona muy bien para los sitios centrados en los medios de comunicación, como nuestro Galería WordPress u otro sitio de tipo escaparate. Los frameworks de temas como Genesis ya tienen un sistema de Grid Loop preconstruido. Sin embargo, si estás intentando hacer una visualización de cuadrícula en tu tema personalizado de WordPress, estamos aquí para ayudarte. En este artículo, te mostraremos cómo crear una visualización en bucle de rejilla de las miniaturas de las entradas en tu tema de WordPress.

Nota: necesitas tener un buen conocimiento de CSS y de cómo funciona el bucle de WordPress.

Antes de empezar, veamos qué es lo que queremos conseguir:

Si te das cuenta, los mensajes de esta página se muestran en una cuadrícula. Hay un borde en las entradas del lado izquierdo, pero no en el lado derecho. Con un bucle de posts normal, todos los posts siguen el mismo estilo, por lo que tendrás un borde a la derecha en ambos posts, lo que se vería raro. También observa que el espaciado es bastante simétrico. Lo que de nuevo no es posible con el bucle normal para hacer algo como esto. Ahora que puedes ver lo que estamos tratando de lograr, vamos a echar un vistazo a cómo lograrlo.

Lo primero que tienes que hacer es asegurarte de que tu tema tiene activadas las miniaturas de las entradas de WordPress. También debes pensar en cómo quieres redimensionar tus imágenes de WordPress porque lo vas a necesitar.

Una vez que hayas configurado las miniaturas y los tamaños, vamos a poner esto en marcha. Vamos a configurar nuestras consultas de bucle:

<?php
$counter = 1; //start counter

$grids = 2; //Grids per row

global $query_string; //Need this to make pagination work

/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');

if(have_posts()) :	while(have_posts()) :  the_post();
?>

El código anterior parece bastante sencillo porque hemos hecho comentarios en línea. Una cosa que probablemente tendrías que editar es la variable posts_per_page para adaptarla a tus necesidades. También puedes añadir otros parámetros de consulta si lo deseas. Ahora que tenemos el bucle iniciado, vamos a ver cómo queremos mostrar las entradas dentro de él.

<?php
//Show the left hand side column
if($counter == 1) :
?>
			<div class="griditemleft">
				<div class="postimage">
					<a href="<?php%20the_permalink();%20?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
				</div>
                <h2><a href="<?php%20the_permalink();%20?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
				<div class="postimage">
					<a href="<?php%20the_permalink();%20?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
				</div>
                <h2><a href="<?php%20the_permalink();%20?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>

Comenzamos el código comprobando si el contador es 1, lo que significa mostrar nuestra cuadrícula izquierda. Simplemente entramos y empezamos un div con una clase css personalizada "griditemleft". Dentro de él añadimos la miniatura del post y el título del mismo. Puedes añadir o restar cualquier elemento de la rejilla (como extractos, fechas, información del autor, recuento de comentarios, etc.). Fíjate: En nuestras miniaturas, estamos llamando a un tamaño de imagen adicional. Probablemente tendrás que sustituir el nombre del tamaño por el tuyo propio que hayas creado.

Después de la primera rejilla, añadimos un elseif que busca si el $contador coincide con el número especificado en nuestro $grids (que debería porque estaremos en el segundo puesto). Si el contador coincide, entonces podemos mostrar nuestra rejilla derecha, que comienza con una clase css personalizada "griditemright". Observa que después de cerrar el div griditemright, estamos añadiendo una clase clara. Esto lo explicaremos cuando lleguemos a la parte del CSS.

Después de que el bucle termine con esto, reiniciamos el contador a 0, para que pueda empezar de nuevo en la siguiente fila.

Podemos simplemente terminar el bucle que hemos iniciado añadiendo este código:

<?php
$counter++;
endwhile;
//Post Navigation code goes here
endif;
?>

El código anterior básicamente está continuando el contador hasta que alcanza el límite que se especifica en nuestra variable query_post. La razón por la que no hemos añadido el código de navegación del post arriba es porque mucha gente utiliza un plugin o un método de visualización diferente para esto. Así que lo dejamos abierto para que lo decidas tú mismo.

Así que nuestro código de bucle final tendrá este aspecto:

<div id="gridcontainer">
<?php
$counter = 1; //start counter

$grids = 2; //Grids per row

global $query_string; //Need this to make pagination work


/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');


if(have_posts()) :	while(have_posts()) :  the_post(); 
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
			<div class="griditemleft">
				<div class="postimage">
					<a href="<?php%20the_permalink();%20?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
				</div>
                <h2><a href="<?php%20the_permalink();%20?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
				<div class="postimage">
					<a href="<?php%20the_permalink();%20?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
				</div>
                <h2><a href="<?php%20the_permalink();%20?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>
</div>

Ahora que tenemos el código PHP listo, vamos a ver cómo vamos a darle estilo

Nuestra salida por defecto tendría este aspecto:

<div id="gridcontainer"> 
<div class="griditemleft"> 
<div class="postimage">	Post Image</div> 
<h2>Post Title</h2> 
</div> 
<div class="griditemright"> 
<div class="postimage">	Post Image</div> 
<h2>Post Title</h2> 
</div> 
<div class="clear"></div> 
</div>

Estas son las clases que debes modificar:

#gridcontainer{margin: 20px 0; width: 100%; }
#gridcontainer h2 a{color: #77787a; font-size: 13px;}
#gridcontainer .griditemleft{float: left; width: 278px; margin: 0 40px 40px 0;}
#gridcontainer .griditemright{float: left; width: 278px;}
#gridcontainer .postimage{margin: 0 0 10px 0;}

Esperamos que este tutorial te oriente en la dirección correcta para hacer una pantalla de bucle de rejilla para tus entradas de WordPress.