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.