Introducción

Este tutorial explica, con todo lujo de detalles, cómo estilizar el bloque de archivos por fecha (mes/año) en WordPress usando CSS. Cubre desde identificar la salida HTML del bloque hasta técnicas avanzadas: rejilla responsiva, separación visual entre mes y año (incluso con un pequeño filtro PHP para envolver el año en un span), estilos accesibles, y dónde colocar el CSS. Los ejemplos de código están listados para copiar y pegar tal cual.

1. ¿Qué bloque estamos estilizando y cómo se ve su HTML?

El bloque de Archivos (Archives) de WordPress suele renderizar esta estructura sencilla:

  

    
Junio 2025
    
Mayo 2025
    
  

En temas antiguos o en el widget clásico puede aparecer como:

La clase más común en el editor bloque es .wp-block-archives. En el widget clásico la clase es normalmente .widget_archive. Estas clases son las que utilizaremos en los selectores CSS.

2. Primeros pasos: localizar el selector y añadir una clase personalizada

1. Abre la página con el bloque de Archivos y usa las herramientas de desarrollo (Inspector) del navegador para ver el HTML exacto que genera tu tema.
2. Si quieres un objetivo más seguro, en el editor de bloques selecciona el bloque de Archivos y en la barra lateral añade en Avanzado un valor en Additional CSS class(es), por ejemplo: my-archives-grid. Así tu CSS será menos invasivo.
3. Decide dónde poner tu CSS: Appearance → Customize → Additional CSS (rápido), o en el style.css de un child theme (permanente), o a través de un plugin de CSS personalizado.

3. Estilo básico: lista horizontal y apariencia limpia

/ Estilo base para el bloque de archivos /
.wp-block-archives,
.widget_archive { margin: 0 padding: 0 }

.wp-block-archives ul,
.widget_archive ul { list-style: none padding: 0 margin: 0 display: flex flex-wrap: wrap gap: .5rem }

.wp-block-archives li,
.widget_archive li {
  background: #f7f7f8
  border-radius: 6px
  padding: .35rem .6rem
  list-style: none
}

.wp-block-archives a,
.widget_archive a {
  color: #1a73e8
  text-decoration: none
  font-weight: 600
  display: inline-block
}

.wp-block-archives a:hover,
.widget_archive a:hover,
.wp-block-archives a:focus,
.widget_archive a:focus {
  text-decoration: underline
  outline: 2px solid rgba(26,115,232,.12)
}

4. Convertir la lista en una rejilla de “tiles” responsiva

Si prefieres tarjetas (tiles) más uniformes, cambia el layout a CSS Grid. Utiliza una clase personalizada para no afectar otros elementos:

/ Rejilla responsiva usando clase añadida en el bloque: .my-archives-grid /
.my-archives-grid ul {
  display: grid
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))
  gap: .6rem
  padding: 0
  margin: 0
}

.my-archives-grid li { list-style: none background: #fff border: 1px solid #e6e6e6 padding: .6rem border-radius: 8px text-align:center }

.my-archives-grid a { display:block color:#0b5dd7 text-decoration:none }

5. Separar mes y año para un diseño tipográfico (requiere envolver el año)

Por defecto el texto del enlace es un único string (“Junio 2025”). Para dar estilo independiente a mes y año necesitamos salida HTML con spans. Dos opciones:

• Modificar la salida con un pequeño filtro PHP (recomendado cuando deseas control fino).
• Si no puedes tocar PHP, buscar un plugin que permita filtrar get_archives o simplemente aceptar estilos en línea únicos (menos control).

5.1 Filtro PHP: envolver el año en un span

Este snippet añade spans alrededor del mes y del año. Está pensado para colocarse en el functions.php de tu child theme o en un plugin de snippets.

add_filter(get_archives_link, wrap_archives_month_year)
function wrap_archives_month_year(link_html) {
    return preg_replace_callback(
        />([^<]?)(d{4})([^<]) . esc_html(month_text) .   . esc_html(year) . <
        },
        link_html
    )
}

Notas:

• El patrón busca el último bloque de cuatro dígitos (año). Funciona bien con idiomas que escriben el año con 4 dígitos al final.
• Usamos esc_html() para escapar valores y mantener seguridad.
• Si tu formato local incluye palabras como “de” (p. ej. “junio de 2025”) la expresión aún envuelve correctamente el año y coloca el resto como month_text.

5.2 CSS para estilizar mes y año (tras aplicar el filtro PHP)

/ Estilos cuando el enlace tiene  y  /
.wp-block-archives .archive-month,
.widget_archive .archive-month {
  display: block
  font-size: 1rem
  font-weight: 700
  color: #202124
}

.wp-block-archives .archive-year,
.widget_archive .archive-year {
  display: block
  font-size: .78rem
  color: #6b7280
  margin-top: .12rem
  font-weight: 500
}

6. Estilizar y destacar el mes actual

WordPress suele añadir clases como current-month o en el widget clásico current. Usa esas clases para destacar el mes actual:

/ Destacar mes actual /
.wp-block-archives li.current-month,
.widget_archive li.current {
  background: linear-gradient(90deg, #fffbe6, #fff5d6)
  border-color: #ffd54f
  box-shadow: 0 1px 0 rgba(0,0,0,.03)
}

7. Enfoque de accesibilidad y movilidad

• Contraste: asegúrate de que el color del texto y el fondo cumplan WCAG mínimo (4.5:1 para texto normal). Usa herramientas de contraste para verificar.
• Focus visible: mantiene un contorno claro para navegación por teclado.
• Prefers-reduced-motion: evita animaciones que puedan producir mareo.
• Atajos táctiles: aumenta padding en enlaces para que sean fáciles de pulsar en móviles.

/ Focus y accesibilidad /
.wp-block-archives a:focus,
.widget_archive a:focus {
  outline: 3px solid #ffb703
  outline-offset: 2px
  border-radius: 4px
}

/ Aumentar tappable area en móvil /
.wp-block-archives li a,
.widget_archive li a { padding: .4rem .3rem display:inline-block }

8. Media queries para ajustes finos

/ Ajustes para móviles /
@media (max-width: 600px) {
  .wp-block-archives ul,
  .widget_archive ul { flex-direction: column gap: .35rem }
  .my-archives-grid ul { grid-template-columns: 1fr }
}

9. theme.json: estilos globales para el bloque (opcional)

Si trabajas en un theme o child theme con soporte Block Themes, puedes definir estilos por bloque en theme.json. Ejemplo mínimo:

{
  version: 2,
  styles: {
    blocks: {
      core/archives: {
        spacing: {
          blockGap: 0.5rem
        },
        elements: {
          link: {
            color: {
              text: #1a73e8
            }
          }
        }
      }
    }
  }
}

10. Buenas prácticas y solución de problemas

• Especificidad: si tu CSS no se aplica, aumenta la especificidad (por ejemplo .my-archives-grid .wp-block-archives a) o usa la regla importante solo como último recurso.
• Minificación/caching: limpia la cache del plugin de cache o CDN tras modificar CSS.
• Comprobar selectores: algunos temas envuelven el bloque en marcas adicionales inspecciona el DOM real para ajustar tus selectores.
• Compatibilidad con idiomas: el filtro PHP que envuelve el año usa búsqueda de cuatro dígitos (año) si tu sitio usa formatos inusuales adapta la regex.

11. Ejemplo completo — estilo tipo tarjeta con mes y año separados

Resumen de los pasos: 1) añade la clase my-archives-grid al bloque 2) pega el filtro PHP en functions.php 3) añade el CSS siguiente en el Customizer o en el style.css del child theme.

/ CSS completo de ejemplo /
.my-archives-grid ul { display: grid grid-template-columns: repeat(auto-fill, minmax(140px,1fr)) gap:.7rem padding:0 margin:0 }
.my-archives-grid li { list-style:none background:#ffffff border:1px solid #e9e9ee padding:.7rem border-radius:10px text-align:center transition:transform .12s ease, box-shadow .12s ease }
.my-archives-grid li:hover { transform: translateY(-3px) box-shadow: 0 6px 18px rgba(32,33,36,.06) }
.my-archives-grid .archive-month { display:block font-size:1.02rem font-weight:700 color:#111827 }
.my-archives-grid .archive-year { display:block font-size:.82rem color:#6b7280 margin-top:.12rem }
.my-archives-grid a:focus { outline: 3px solid rgba(59,130,246,.16) outline-offset: 3px border-radius:6px }
@media (max-width:600px) {
  .my-archives-grid ul { grid-template-columns: 1fr }
}

12. Conclusión

Estilizar el bloque de archivos mes/año es un proceso sencillo si sigues estos pasos: identifica la salida HTML, añade una clase al bloque para aislar los estilos, opcionalmente envuelve el año con un filtro PHP para mayor control tipográfico, y finalmente aplica CSS bien estructurado y accesible. Con las técnicas vistas puedes transformar una lista plana en una rejilla moderna, clara y usable en cualquier dispositivo.

Fragmento final de muestra del HTML resultante (tras aplicar el filtro PHP)

  

    
Junio 2025
    
Mayo 2025