Tutorial WordPress: Estilizar el bloque “Archivo” del sidebar con CSS

Introducción

Este tutorial explica con todo lujo de detalles cómo estilizar el bloque “Archivo” (Archives) del sidebar en WordPress usando CSS. Incluye ejemplos prácticos, fragmentos de código listos para usar, variantes de diseño (tarjeta, compacto, con contador) y las mejores prácticas para integrarlo en tu tema o mediante el personalizador. Los ejemplos de código están preparados para pegarlos tal cual en tu proyecto.

1. Entender el marcado generado

Dependiendo de si usas el widget clásico o el bloque de Widgets del editor de bloques, el HTML suele ser similar. Un ejemplo típico producido por el widget de Archivos es:

ltaside id=archives-2 class=widget widget_archivegt
  lth2 class=widget-titlegtArchivoslt/h2gt
  ltulgt
    ltligtlta href=https://tusitio.com/2025/09/gtSeptiembre 2025lt/agtlt/ligt
    ltligtlta href=https://tusitio.com/2025/08/gtAgosto 2025lt/agtlt/ligt
    lt!-- ... --gt
  lt/ulgt
lt/asidegt

En el editor de bloques, la clase del bloque puede ser wp-block-archives o incluir is-style-. Para abarcar la mayoría de casos conviene usar selectores combinados como .widget_archive, .wp-block-archives y el identificador del widget (por ejemplo #archives-2).

2. Selectores recomendados

.widget_archive ul — lista base dentro del widget clásico.
.wp-block-archives — bloque de archivos en entornos de block-based widgets.
#archives- — selector por id (útil para estilos específicos del widget).

3. CSS básico para el sidebar (limpio y moderno)

Este bloque de CSS elimina viñetas, ajusta espaciados, tipografía y añade interacción accesible.

/ 1. Base: destilda viñetas y controla espaciado /
.widget_archive,
.wp-block-archives {
  margin: 0 0 1.5rem 0
  padding: 0
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
  font-size: 0.95rem
  color: #333
}

.widget_archive ul,
.wp-block-archives ul {
  list-style: none
  margin: 0
  padding: 0
}

/ 2. Ítems: separar y aumentar hit area /
.widget_archive li,
.wp-block-archives li {
  margin: 0.25rem 0
}

/ 3. Enlaces: apariencia y foco accesible /
.widget_archive a,
.wp-block-archives a {
  display: inline-block
  width: 100%
  padding: 0.375rem 0.5rem
  color: inherit
  text-decoration: none
  border-radius: 4px
  transition: background-color 180ms ease, color 180ms ease
}

.widget_archive a:hover,
.wp-block-archives a:hover {
  background-color: rgba(0,0,0,0.04)
}

.widget_archive a:focus,
.wp-block-archives a:focus {
  outline: 3px solid #005fcc
  outline-offset: 2px
}

4. Estilo “tarjeta” (card) para destacar el bloque

Un estilo que encaja bien en sidebars modernos: fondo, sombreado sutil y separación del resto del contenido.

/ Contenedor tipo tarjeta /
.widget_archive,
.wp-block-archives {
  background: #fff
  border-radius: 10px
  padding: 1rem
  box-shadow: 0 6px 20px rgba(12, 22, 39, 0.06)
  border: 1px solid rgba(12, 22, 39, 0.04)
}

/ Título del widget /
.widget_archive .widget-title,
.wp-block-archives .widget-title {
  font-size: 1.05rem
  margin: 0 0 0.6rem 0
  padding: 0
  color: #111
}

/ Separador visual entre elementos /
.widget_archive li   li,
.wp-block-archives li   li {
  border-top: 1px solid rgba(12, 22, 39, 0.06)
  padding-top: 0.5rem
  margin-top: 0.5rem
}

5. Versión compacta e inline (lista reducida para sidebars angostos)

Convierte el listado vertical en una lista más compacta o incluso en un scroll horizontal en pantallas pequeñas.

/ Lista compacta /
.wp-block-archives.compact ul,
.widget_archive.compact ul {
  display: flex
  flex-wrap: wrap
  gap: 0.25rem 0.5rem
}

.wp-block-archives.compact li a,
.widget_archive.compact li a {
  padding: 0.25rem 0.4rem
  background: rgba(0,0,0,0.03)
  border-radius: 6px
  font-size: 0.875rem
}

/ Scroll horizontal (útil en móviles) /
@media (max-width: 480px) {
  .wp-block-archives.horizontal ul,
  .widget_archive.horizontal ul {
    display: flex
    overflow-x: auto
    gap: 0.5rem
    padding-bottom: 0.25rem
  }
  .wp-block-archives.horizontal li,
  .widget_archive.horizontal li {
    flex: 0 0 auto
  }
}

6. Mostrar el contador de entradas por mes con formato

WordPress puede mostrar el número de entradas si se activa la opción Mostrar recuento. Sin embargo el número suele aparecer entre paréntesis en el mismo texto. Para poder estilizarlo con CSS conviene envolver el número en un elemento (por ejemplo ltspan class=post-countgt ). Añade este filtro en functions.php para modificar el HTML que genera el enlace de los archivos:

/ functions.php: envolver el contador en un span.post-count /
add_filter( get_archives_link, function( link_html ) {
    // Buscar paréntesis con número y envolver
    link_html = preg_replace(
        /s((d ))s/,
         (1),
        link_html
    )
    return link_html
} )

Una vez que el contador está dentro de ltspan class=post-countgt, podrás moverlo y estilizarlo con CSS:

/ Estilo del contador a la derecha /
.widget_archive .post-count,
.wp-block-archives .post-count {
  float: right
  color: #6b7280
  font-size: 0.85em
  margin-left: 0.5rem
}

7. Variantes visuales avanzadas

Bordes y acentos: usa una barra izquierda colorida para marcar el widget. Ejemplo:

.widget_archive {
  border-left: 4px solid #ff7a59
  padding-left: 0.75rem
}

Pseudo‑íconos CSS: añade un punto o icono antes de cada mes con ::before:

.widget_archive li a::before,
.wp-block-archives li a::before {
  content: •
  display: inline-block
  margin-right: 0.6rem
  color: #ff7a59
  font-size: 1.05em
  vertical-align: middle
}

Modo oscuro: adapta colores con prefers-color-scheme:

@media (prefers-color-scheme: dark) {
  .widget_archive,
  .wp-block-archives {
    background: #0f1724
    color: #e6eef8
    border-color: rgba(255,255,255,0.06)
  }
  .widget_archive a,
  .wp-block-archives a {
    color: #e6eef8
  }
}

8. Accesibilidad y usabilidad

Cuida el contraste entre texto y fondo (WCAG 4.5:1 mínimo, ideal 7:1 para títulos importantes).
Amplía el área de clic (padding suficiente) para usuarios táctiles.
Usa :focus-visible para estilos de foco y evita eliminar el outline por completo.
Si aplicas animaciones, respeta la preferencia de reduce-motion del usuario.

9. Cómo añadir estos estilos en WordPress

Customizer (recomendado para la mayoría): Apariencia → Personalizar → CSS adicional. Pega tu CSS allí.
Child theme: añade el CSS en style.css del child theme.
Enqueue de un CSS específico: si prefieres cargar un archivo CSS desde functions.php añade este snippet:

/ functions.php: encolar css del sidebar /
add_action( wp_enqueue_scripts, function() {
  wp_enqueue_style( mi-sidebar-archivos, get_stylesheet_directory_uri() . /css/sidebar-archivos.css, array(), 1.0 )
} )

10. Uso de variables CSS y theme.json

Si tu tema soporta theme.json puedes exponer colores y tamaños como variables CSS y reutilizarlas. Ejemplo mínimo (aplicable en tu CSS):

:root {
  --sidebar-bg: #fff
  --sidebar-title: #111
  --sidebar-accent: #ff7a59
}

/ Usar variables /
.widget_archive {
  background: var(--sidebar-bg)
}
.widget_archive .widget-title {
  color: var(--sidebar-title)
}
.widget_archive { border-left: 4px solid var(--sidebar-accent) }

11. Consejos prácticos y resolución de problemas

Si tu CSS no se aplica, verifica la especificidad: usa selectores más concretos (ej. #archives-2 .widget-title) antes de usar !important.
Usa las herramientas de desarrollador del navegador (Inspector) para ver clases generadas por el bloque y ajustar selectores.
Si trabajas con caché asegúrate de purgarla tras actualizar estilos.
Comprueba la salida HTML del bloque: algunos constructores o plugins pueden envolver el widget en contenedores adicionales.

12. Ejemplo completo: tarjeta con contador alineado a la derecha

Aquí tienes un ejemplo final que combina tarjeta, separación y contador flotante (requiere el filtro PHP anterior para envolver el contador en ltspan class=post-countgt):

/ Tarjeta con contador a la derecha /
.widget_archive {
  background: #ffffff
  padding: 1rem
  border-radius: 12px
  box-shadow: 0 8px 30px rgba(16,24,40,0.06)
  border: 1px solid rgba(16,24,40,0.04)
}

.widget_archive .widget-title {
  font-weight: 600
  margin-bottom: 0.6rem
}

.widget_archive ul { list-style: none padding: 0 margin: 0 }

.widget_archive li {
  padding: 0.35rem 0
  display: block
}

.widget_archive li a {
  color: #0f1724
  text-decoration: none
  display: block
  padding-right: 2.6rem / espacio para el contador flotante /
}

.widget_archive .post-count {
  float: right
  color: #6b7280
  font-size: 0.85em
}

13. Buenas prácticas finales

Mantén estilos del widget contenidos (usa clases o ID del widget) para no afectar otras listas.
Documenta en tu tema dónde colocaste los estilos para facilitar mantenimiento.
Prueba en diferentes resoluciones y con lectores de pantalla si es posible.

Referencias útiles

Documentación del bloque Archives (WordPress)

SushiHost