Al crear diseños de sitios de WordPress, ¿alguna vez ha tenido la necesidad de crear una vista de cuadrícula de publicaciones? El diseño de cuadrícula funciona muy bien para sitios centrados en medios u otro sitio tipo escaparate. Los frameworks temáticos como Genesis ya tienen un sistema Grid Loop predeterminado. 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 cíclica de la cuadrícula de miniaturas de la publicación en su tema de WordPress.
Nota: Debe tener una buena comprensión de CSS y cómo funciona el ciclo de WordPress.
Antes de comenzar, echemos un vistazo a lo que estamos tratando de lograr:
Si lo nota, las publicaciones en esta página se muestran en una cuadrícula. Hay un borde en los postes del lado izquierdo, pero no del 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 se vería extraño. También tenga en cuenta que el espaciado es bastante simétrico. Lo que todavía 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 lograrlo.
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á.
Después de configurar las miniaturas y los tamaños, comencemos. Configuremos 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 estado comentando en línea. Una cosa que probablemente debería modificar es la variable posts_per_page para que se adapte a sus necesidades. También puede agregar otros parámetros de consulta si lo desea. Ahora que hemos comenzado el ciclo, veamos 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 the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" 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 the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" 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 que muestra nuestra cuadrícula izquierda. Simplemente entramos y comenzamos un div con una clase CSS personalizada «griditemleft». Dentro 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 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, hemos agregado un elseif que verifica si el contador de $ coincide con el número especificado en nuestras cuadrículas de $ (que debería ser porque estaremos en la segunda publicación). Si el contador coincide, entonces podemos mostrar nuestra cuadrícula derecha comenzando con una clase CSS personalizada «griditemright». Observe que después de cerrar div griditemright, estamos agregando una clase clara. Explicaremos esto cuando lleguemos a la parte de CSS.
Una vez finalizado el ciclo, restablecemos 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 publicaciones anterior es porque muchas personas usan un plugin o método de visualización diferente para esto. Dejemos que decida usted mismo.
Entonces, nuestro código de ciclo 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 the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" 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 the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" 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, veamos 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 oriente en la dirección correcta hacia la creación de una vista de bucle de cuadrícula para sus publicaciones de WordPress.
¿Te ha resultado útil??
0 / 0