Al crear diseños de sitios de WordPress, ¿alguna vez ha tenido la necesidad de crear una vista de cuadrícula de las publicaciones? El diseño de cuadrícula funciona muy bien para sitios centrados en medios como el nuestro. Galería de WordPress u otro sitio de tipo escaparate. Los marcos temáticos como Génesis ya tienen un sistema Grid Loop prediseñado. Sin embargo, si está buscando mostrar una cuadrícula en su tema personalizado de WordPress, estamos aquí para ayudarlo. En este artículo, le mostraremos cómo crear una vista de cuadrícula de miniaturas de publicaciones en su tema de WordPress.

Nota: debe tener una buena comprensión de CSS y cómo funciona el bucle de WordPress.

Antes de comenzar, echemos un vistazo a lo que estamos tratando de lograr:

Si nota, las publicaciones en esta página se muestran en una cuadrícula. Hay un borde en los postes del lado izquierdo, pero no en el lado derecho. Con un ciclo de publicación normal, todas las publicaciones siguen el mismo estilo, por lo que tendrá un borde derecho en ambas publicaciones que parecería extraño. También tenga en cuenta que el espaciado es bastante simétrico. Lo cual nuevamente no es posible con el ciclo normal para hacer algo como esto. Ahora que puede ver lo que estamos tratando de lograr, echemos un vistazo a cómo hacerlo realidad.

Lo primero que debe hacer es asegurarse de que su tema tenga activadas las miniaturas de publicaciones de WordPress. También debe pensar en cómo cambiar el tamaño de sus imágenes de WordPress porque lo necesitará.

Una vez que haya configurado las miniaturas y los tamaños, comencemos. Configuremos nuestros bucles de consulta:

<?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 estado comentando en línea. Una cosa que probablemente debería cambiar es la variable posts_per_page para satisfacer sus necesidades. Si lo desea, también puede agregar otros parámetros de consulta. Ahora que comenzamos el ciclo, echemos un vistazo a cómo queremos mostrar las publicaciones 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;
?>

Comencemos el código verificando si el contador es 1, lo que significa mostrar nuestra cuadrícula izquierda. Entremos y comencemos un div con una clase CSS “griditemleft” personalizada. En el interior, hemos agregado la miniatura de la publicación y el título de la publicación. Puede agregar o restar cualquier elemento del ciclo (como extractos, fechas, información del autor, recuento de comentarios, etc.). Aviso: En nuestras miniaturas, llamamos a un tamaño de imagen adicional. Probablemente necesitará reemplazar el nombre del tamaño con su propio tamaño que creó.

Después de la primera cuadrícula, agregamos un elseif que intenta ver si el contador de $ coincide con el número especificado en nuestra cuadrícula de $ (que debería ser porque estaremos en la segunda publicación). Si el contador coincide, podemos mostrar nuestra cuadrícula derecha comenzando con una clase de CSS personalizada “griditemright”. Observe que después de cerrar el div griditemright, estamos agregando una clase clara. Explicaremos esto cuando lleguemos a la parte de CSS.

Cuando el ciclo esté completo, restablezca el contador a 0 para que pueda comenzar de nuevo en la siguiente línea.

Simplemente podemos terminar el ciclo que comenzamos agregando este código:

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

El código anterior básicamente continúa el contador hasta que alcanza el límite especificado en nuestra variable query_post. La razón por la que no hemos agregado el código de navegación de la publicación anterior es porque muchas personas usan un complemento o método de visualización diferente. Así que te dejamos libre para que decidas por ti mismo.

Así que nuestro código de bucle final se verá así:

<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, echemos un vistazo a cómo lo modelaremos.

Nuestra salida predeterminada se vería así:

<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 necesita editar:

#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 lo guíe en la dirección correcta para crear una vista de cuadrícula para sus publicaciones de WordPress.