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

Al crear diseños de sitios de WordPress, ¿ha tenido alguna vez la necesidad de crear una cuadrícula de publicaciones? El diseño de cuadrícula funciona muy bien para sitios centrados en los medios, como nuestra galería de WordPress u otro sitio de tipo escaparate. Los marcos de temas como Genesis ya tienen un sistema Grid Loop preconstruido. Sin embargo, si está intentando hacer una visualización de cuadrícula en su tema personalizado de WordPress, entonces estamos aquí para ayudarlo. En este artículo, le mostraremos cómo crear una visualización de bucle de cuadrícula de miniaturas de publicaciones en su tema de WordPress.

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

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

Visualización de publicación de cuadrícula

Si observa, las publicaciones en esta página se muestran en una cuadrícula. Hay un borde en las publicaciones en el lado izquierdo, pero no en el lado derecho. Con un bucle 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 espacio es bastante simétrico. Lo que de nuevo no es posible con el bucle 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 las publicaciones de WordPress. También debe pensar en cómo desea 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 con esto. Vamos a configurar nuestras consultas de bucle:


El código anterior parece bastante sencillo porque hemos hecho comentarios en línea. Una cosa que probablemente deba editar es la variable posts_per_page para satisfacer sus necesidades. También puede agregar otros parámetros de consulta si así lo desea. Ahora que comenzamos el ciclo, veamos cómo queremos mostrar las publicaciones dentro de él.


			
" title="">

" title="">

" title="">

" title="">

Comenzamos el código comprobando si el contador es 1, lo que significa mostrar nuestra cuadrícula izquierda. Simplemente entramos y comenzamos un div con una clase css personalizada “griditemleft”. En su interior agregamos la miniatura de la publicación y el título de la publicación. Puede agregar o restar cualquier elemento de bucle (como extractos, fechas, información del autor, recuento de comentarios, etc.). Aviso: en nuestras miniaturas, estamos llamando a un tamaño de imagen adicional. Probablemente tendrá que reemplazar el nombre del tamaño con el tamaño que creó.

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

Después de que el bucle termina con esto, restablecemos el contador a 0, para que pueda comenzar nuevamente en la siguiente fila.

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


El código anterior básicamente continúa con el contador hasta que alcanza el límite especificado en nuestra variable query_post. La razón por la que no agregamos el código de navegación posterior es porque muchas personas usan un complemento o un método de visualización diferente para esto. Así que lo dejamos abierto para que usted decida por sí mismo.

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

" title="">

" title="">

" title="">

" title="">

Ahora que tenemos listo el código PHP, veamos cómo lo vamos a diseñar.

Nuestra salida predeterminada se vería así:

Post Image

Post Title

Post Image

Post Title

Estas son las clases que necesita 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 lo guíe en la dirección correcta para hacer una visualización de bucle de cuadrícula para sus publicaciones de WordPress.