Introducción
Este tutorial explica, paso a paso y con ejemplos listos para usar, cómo crear en WordPress una cuadrícula (grid) de entradas agrupadas por etiquetas usando únicamente CSS Grid para el maquetado. La idea es que el servidor (WordPress) genere una estructura HTML sencilla por cada etiqueta y sus posts a partir de esa estructura, el diseño y la disposición responsiva se controlan exclusivamente con CSS Grid, sin JavaScript para la colocación visual.
Requisitos
- Un tema de WordPress hijo o plantilla donde puedas editar plantillas de PHP (por ejemplo, un archivo de plantilla o un bloque dentro de una página).
- Conocimientos básicos de PHP en WordPress: get_terms, get_posts, setup_postdata, wp_reset_postdata.
- Soporte para imágenes destacadas en las entradas (post thumbnails).
Estrategia general
- En PHP, obtener las etiquetas con posts y, por cada etiqueta, pintar una sección que contenga un título y un contenedor con los posts de esa etiqueta.
- Cada contenedor de posts será un grid CSS. El CSS controlará el número de columnas, las proporciones, el espaciado, y los spans (por ejemplo, hacer que el primer post ocupe más espacio en pantallas grandes).
- No se usa JavaScript para posicionar elementos todo el diseño es responsivo y adaptativo mediante CSS Grid y media queries.
Estructura HTML resultante (ejemplo)
Technology
Paso 1 — Código PHP para iterar etiquetas y posts
Coloca este bloque en la plantilla donde quieras mostrar la cuadrícula (por ejemplo, un template part o page template). Ajusta posts_per_page por etiqueta según tus necesidades.
lt?php
// Obtener etiquetas con posts
tags = get_terms( array(
taxonomy => post_tag,
hide_empty => true,
) )
if ( ! empty( tags ) ! is_wp_error( tags ) ) {
foreach ( tags as tag ) {
// Obtener posts de la etiqueta actual (limitado a 6 como ejemplo)
posts = get_posts( array(
post_type => post,
posts_per_page => 6,
tax_query => array(
array(
taxonomy => post_tag,
field => term_id,
terms => tag->term_id,
),
),
) )
if ( empty( posts ) ) {
continue
}
// Abrir sección por etiqueta. Usamos la slug como clase para poder personalizar colores si se desea.
echo ltsection class=tag-group tag-. esc_attr( tag->slug ) .>
echo lth3 class=tag-title> . esc_html( tag->name ) . lt/h3>
echo ltdiv class=posts-grid>
foreach ( posts as index => post ) {
setup_postdata( post )
thumb = get_the_post_thumbnail_url( post->ID, large ) // tamaño ajustable
echo ltarticle class=post-item>
if ( thumb ) {
// La miniatura se muestra como background para facilitar el recorte (object-fit alternativa)
echo lta class=post-thumb href= . get_permalink( post ) . style=background-image:url( . esc_url( thumb ) . ) aria-hidden=true>lt/a>
}
echo ltdiv class=post-body>
echo lta class=post-link href= . get_permalink( post ) . > . get_the_title( post ) . lt/a>
echo ltp class=post-excerpt> . wp_trim_words( get_the_excerpt( post ), 18, ... ) . lt/p>
echo lt/div> // .post-body
echo lt/article>
}
wp_reset_postdata()
echo lt/div> // .posts-grid
echo lt/section>
}
}
?gt
Paso 2 — CSS usando únicamente CSS Grid
Incluye este CSS en tu hoja de estilos principal o en un archivo CSS encolado. El diseño se basa en un grid con columnas fluidas y reglas para que el primer post destaque ocupando más columnas en pantallas anchas.
/ Contenedor por etiqueta /
.tag-group {
margin: 2.25rem 0
}
/ Título de la etiqueta /
.tag-title {
font-size: 1.25rem
margin: 0 0 0.5rem 0
color: #111
}
/ Grid de posts: columnas fluidas /
.posts-grid {
display: grid
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))
gap: 1rem
align-items: start
}
/ Item individual /
.post-item {
background: #fff
border-radius: 8px
overflow: hidden
display: flex
flex-direction: column
box-shadow: 0 1px 6px rgba(10,10,10,0.05)
}
/ Thumbnail como fondo para mantener 16:9 /
.post-thumb {
display: block
padding-top: 56.25% / 16:9 ratio /
background-size: cover
background-position: center
text-decoration: none
}
/ Cuerpo del post /
.post-body {
padding: 0.75rem
display: flex
flex-direction: column
gap: 0.5rem
min-height: 80px
}
.post-link {
color: #111
text-decoration: none
font-weight: 600
}
/ Extracto /
.post-excerpt {
margin: 0
font-size: 0.95rem
color: #555
}
/ Destacar el primer post dentro de cada etiqueta (ocupa doble columna en pantallas grandes) /
@media (min-width: 1000px) {
.posts-grid .post-item:first-child {
grid-column: span 2
}
}
/ En pantallas aún más grandes, permitir que el primer y segundo post sean más grandes /
@media (min-width: 1400px) {
.posts-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr))
}
.posts-grid .post-item:first-child {
grid-column: span 2
}
.posts-grid .post-item:nth-child(2) {
grid-column: span 1
}
}
/ Ajustes visuales: poner un overlay ligero en hover para la miniatura /
.post-item:hover .post-thumb {
filter: contrast(1.03) brightness(0.96)
transition: filter 160ms ease
}
/ Ejemplo: colorear título por etiqueta usando la clase con la slug /
.tag-group.tag-technology .tag-title { color: #0a66c2 }
.tag-group.tag-design .tag-title { color: #b23a90 }
/ Accesibilidad: enfocar enlaces dentro del grid /
.post-link:focus {
outline: 3px solid #ffd54f
outline-offset: 3px
}
Variantes y ajustes avanzados
- Cambiar qué post ocupa más espacio: puedes usar .post-item:nth-child(2) o combinar selectores para que el elemento que ocupe más columnas sea, por ejemplo, el más reciente con una clase especial desde PHP (p. ej. añadir class=post-item featured).
- Control de número de columnas: modifica grid-template-columns y minmax para adaptarlo a tu diseño. Usar repeat(auto-fill, minmax(…)) genera columnas fluidas que rellenan el contenedor.
- Imágenes responsivas: en PHP, llama a get_the_post_thumbnail_url con tamaños adecuados (medium, large o un custom size) y considera usar srcset si prefieres
en lugar de background-image.
- Colores por etiqueta automáticos: si necesitas colores automáticos, puedes guardar un meta para cada etiqueta (term meta) con el color y imprimirlo como style inline o como data-attribute, luego usar selectores attribute en CSS o generar reglas dinámicas en el .
- Paginar o limitar: si hay muchas etiquetas o muchos posts por etiqueta, limita posts_per_page y ofrece un enlace Ver más que lleve al archivo de la etiqueta.
Optimización y accesibilidad (puntos clave)
- Performance: limita imágenes cargadas y usa imágenes dimensionadas. Considera lazy loading nativo (loading=lazy) si cambias a ltimggt.
- Estructura semántica: usa ltarticlegt para cada post y enlaces con texto visible para mejorar SEO.
- Accesibilidad: asegúrate de contrastes adecuados en colores, de estados :focus visibles y de texto alternativo (si usas background-image también añade aria-labels o incluir ltimg alt=…gt oculto para lectores).
- Cache y consultas: si el listado por etiquetas es costoso en sitios grandes, implementa cache transiente para la consulta o prerender en un bloque estático.
Ejemplo adicional: registrar un tamaño de imagen en functions.php
// En functions.php de tu tema hijo
add_action( after_setup_theme, function() {
add_image_size( grid-thumb, 1200, 675, true ) // 16:9 recortada
} )
Y en el loop PHP principal usarías grid-thumb en get_the_post_thumbnail_url( post->ID, grid-thumb ).
Conclusión
Con esta técnica obtienes una cuadrícula visualmente atractiva y totalmente responsiva usando solo CSS Grid para la disposición. El servidor (WordPress) se encarga de la estructura y la semántica —las etiquetas y sus posts— y el CSS controla el layout: número de columnas, spans destacados, adaptabilidad por puntos de ruptura y estilos por etiqueta. Es una solución ligera, accesible y fácil de personalizar para la mayoría de sitios WordPress.
Leave a Reply