En ocasiones queremos mostrar la página de archive del tema Astra para WordPress como un grid, es decir en formato de cuadrícula.
Pues bien, esto es algo que me han pedido varios clientes y que se consigue con cierta facilidad. Tan solo hay que modificar el CSS de nuestro tema activo.
Índice de contenidos
Código
Tan solo tienes que añadir este código CSS a tu child theme, y tendrás las páginas de archive en modo grid.
Si estás usando otro tema, ten en cuenta que este código solo es para el theme Astra. Pero puede servirte de base para adaptarlo a la estructura HTML de tu tema.
/* ver en grid los archive de astra theme */
#main .ast-row{
display:flex;
flex-wrap:wrap;
justify-content:center;
}
#main .ast-row article{
width:100% !important;
max-width:280px !important;
margin:10px;
padding:10px;
-webkit-box-shadow: 0px 0px 15px 5px rgba(256,256,256,0.35);
box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.1);
}
#main .ast-row article .entry-meta, #main .ast-row article .entry-content{
display:none;
}Otras consideraciones
- Ten en cuenta que puedes modificar el css para adaptarlo a mostrar el número de elementos que desees por cada fila.
- También puedes modificar la configuración de WordPress para que muestre un número determinado de elementos en cada archive, y de esta forma que quede todo «cuadrado»
Bonus – Diseño en grid paralelo
Como regalo te traigo otro diseño que me ha pedido un cliente. No es un gris, sería más bien un listado. Pero te puede ser igualmente útil. Aquí te dejo el código CSS.
/* listado o pseudogrid archive en paralelo para astra theme*/
#main .ast-row{
display:flex;
flex-wrap:wrap;
justify-content:center;
}
#main .ast-row article{
width:100% !important;
}
#main .ast-row article .entry-meta, #main .ast-row article .entry-content{
display:none;
}
.post-content.ast-grid-common-col{
display:flex !important;
flex-direction:row !important;
align-items: center;
}
.post-content .ast-grid-common-col img{
width: 100%;
max-width:300px !important;
}
.post-content.ast-grid-common-col header{
margin-left:20px;
width:100 % !important;
max-width: calc(100% - 300px);
}
@media only screen and (max-width: 700px){
.post-content.ast-grid-common-col{
display:flex !important;
flex-direction:column !important;
align-items: center;
}
.post-content.ast-grid-common-col header{
margin-left:0px;
width:100 % !important;
max-width: 100%;
}
}