Tutorial WordPress: Personalizar el bloque “Más leído” del tema con CSS

Introducción

Este artículo explica paso a paso cómo personalizar el bloque Más leído (o Most read/Popular posts) de tu tema de WordPress únicamente con CSS. Incluye cómo detectar la estructura HTML del bloque, seleccionar los selectores adecuados, aplicar estilos modernos (grid/flexbox), añadir numeración con pseudo-elementos, adaptar la presentación a móviles, mejorar la accesibilidad y usar variables CSS para facilitar la personalización. También verás ejemplos listos para pegar en Apariencia → Personalizar → CSS adicional o en el archivo style.css de un child theme.

1. Diagnosticar el bloque “Más leído”

Antes de escribir CSS, inspecciona el HTML del bloque con las herramientas de desarrollo del navegador (Inspector). Busca el contenedor principal y las clases o IDs que utiliza el tema o plugin. Algunos selectores habituales:

.most-read
.popular-posts
.widget_popular_posts
.jetpack-most-read
.wp-block-custom-most-read (bloques personalizados)

Ejemplo de estructura típica que te puedes encontrar:


  Más leído
  
    
      
        
        
          Título del artículo
          12.3k vistas

2. Dónde añadir el CSS

Apariencia → Personalizar → CSS adicional (rápido y seguro).
En el style.css de un child theme (si vas a mantener muchos cambios y quieres versionado).
Encolar un archivo CSS propio con functions.php del child theme si necesitas cargarlo condicionalmente.
Plugins de CSS personalizado tipo “Simple Custom CSS” o similares.

3. Estrategias y patrones de personalización

3.1. Reset y variables

Define valores base y variables para colores, tamaños y espacios. Facilita mantener coherencia y crear modos (ej. claro/oscuro).

:root{
  --mr-bg: #ffffff
  --mr-accent: #0073aa
  --mr-title: #222222
  --mr-meta: #666666
  --mr-gap: 12px
  --mr-radius: 8px
  --mr-thumb-size: 64px
}

3.2. Layout básico: lista vertical (estilo widget clásico)

Ideal para sidebars o áreas con poco ancho.

/ Contenedor base /
.widget.popular-posts,
.most-read {
  background: var(--mr-bg)
  padding: 12px
  border-radius: var(--mr-radius)
  box-shadow: 0 1px 3px rgba(0,0,0,0.04)
}

/ Lista y items /
.popular-posts-list {
  list-style: none
  margin: 0
  padding: 0
  display: block
}
.popular-post {
  display: flex
  gap: var(--mr-gap)
  align-items: center
  padding: 8px 4px
  border-radius: 6px
  transition: background .18s ease, transform .12s ease
}
.popular-post   .popular-post { margin-top: 6px }

/ Miniatura /
.popular-post-thumb{
  width: var(--mr-thumb-size)
  height: var(--mr-thumb-size)
  object-fit: cover
  border-radius: 6px
  flex: 0 0 var(--mr-thumb-size)
}

/ Títulos y meta /
.popular-post-title{
  font-size: 0.95rem
  color: var(--mr-title)
  margin: 0 0 2px 0
}
.popular-post-meta{
  font-size: 0.82rem
  color: var(--mr-meta)
}

/ Hover / focus /
.popular-post:hover,
.popular-post:focus-within {
  background: rgba(0,0,0,0.03)
  transform: translateY(-2px)
}

3.3. Grid compacto (típico en páginas principales)

Transforma la lista en un grid de mini-cards, útil en áreas amplias o en el pie.

.popular-posts.grid {
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
  gap: 12px
}
.popular-posts.grid .popular-post {
  display: block
}
.popular-posts.grid .popular-post-link {
  display: block
  padding: 10px
  border-radius: 8px
  background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent)
}
.popular-posts.grid .popular-post-thumb{
  width: 100%
  height: 120px
  object-fit: cover
  border-radius: 6px
  margin-bottom: 8px
}

3.4. Numeración automática (ranking) con contadores CSS

Si el HTML no incluye número de posición, usa counters para añadirlos visualmente.

.popular-posts-list {
  counter-reset: popular-rank
}
.popular-post {
  position: relative
  padding-left: 44px / espacio para el número /
}
.popular-post::before{
  counter-increment: popular-rank
  content: counter(popular-rank)
  position: absolute
  left: 8px
  top: 50%
  transform: translateY(-50%)
  background: var(--mr-accent)
  color: #fff
  width: 30px
  height: 30px
  line-height: 30px
  text-align: center
  border-radius: 50%
  font-weight: 700
  box-shadow: 0 1px 2px rgba(0,0,0,0.12)
}

3.5. Rango visual con pseudo-elementos (números grandes)

Haz un estilo más llamativo para los top 3.

.popular-post:nth-child(1)::before { background: linear-gradient(45deg,#ffb347,#ff6a6a) transform: translateY(-50%) scale(1.08) }
.popular-post:nth-child(2)::before { background: linear-gradient(45deg,#ffd36b,#ff9f6b) }
.popular-post:nth-child(3)::before { background: linear-gradient(45deg,#f0f0f0,#d9d9d9) color:#111 }

3.6. Mejora de accesibilidad

Usa focus-visible y outline para usuarios que navegan con teclado.
Conserva texto alternativo en imágenes (alt) y no abuses de colores como única señal visual.

.popular-post a:focus-visible {
  outline: 3px solid rgba(0,115,170,0.25)
  border-radius: 6px
}
.screen-reader-text {
  position: absolute
  left: -10000px
  top: auto
  width: 1px
  height: 1px
  overflow: hidden
}

3.7. Soporte para modo oscuro y preferencias del usuario

@media (prefers-color-scheme: dark) {
  :root {
    --mr-bg: #0f1720
    --mr-title: #e6eef6
    --mr-meta: #a7b4c2
    --mr-accent: #2b8cd6
  }
  .widget.popular-posts {
    box-shadow: none
  }
}

3.8. Responsive: adaptar miniatura y títulos

@media (max-width: 600px) {
  :root { --mr-thumb-size: 54px }
  .popular-post {
    gap: 8px
    padding: 6px 2px
  }
  .popular-post-title { font-size: 0.92rem }
}

4. Ejemplos prácticos completos

4.1. Estilo compacto para sidebar con numeración y meta

/ Variables /
:root{
  --bg: #fff
  --accent: #1177cc
  --title: #111
  --meta: #777
  --thumb: 56px
}

/ Contenedor /
.widget.popular-posts {
  background: var(--bg)
  padding: 10px
  border-radius: 10px
}

/ Lista e item /
.popular-posts-list { list-style: none margin:0 padding:0}
.popular-post { display:flex gap:10px align-items:center padding:6px transition:.12s position:relative }
.popular-post:hover { background: rgba(17,119,204,0.04) transform: translateY(-1px) }

/ Numeración /
.popular-posts-list { counter-reset: p }
.popular-post::before{
  counter-increment: p
  content: counter(p)
  position:absolute left:8px top:50% transform:translateY(-50%)
  width:26px height:26px line-height:26px text-align:center
  border-radius:50% background:var(--accent) color:#fff font-weight:600
}

/ Thumb y texto con padding para dejar espacio al número /
.popular-post-thumb{ width:var(--thumb) height:var(--thumb) object-fit:cover border-radius:6px flex:0 0 var(--thumb) margin-left:28px }
.popular-post-title{ margin:0 font-size:0.95rem color:var(--title) }
.popular-post-meta{ color:var(--meta) font-size:0.82rem }

4.2. Transformación a tarjeta con overlay del porcentaje de lecturas

.popular-posts.grid .popular-post-link{
  position:relative
  display:block
  border-radius:10px
  overflow:hidden
  color:inherit
}
.popular-posts.grid .popular-post-thumb{ width:100% height:140px object-fit:cover display:block }
.popular-posts.grid .popular-post-meta {
  position:absolute
  right:8px top:8px
  background: rgba(0,0,0,0.5)
  color:#fff padding:4px 8px border-radius:20px
  font-size:0.82rem
}
.popular-posts.grid .popular-post-content { padding:10px background:linear-gradient(0deg, rgba(255,255,255,0.05), transparent) }

5. Casos especiales y trucos

5.1. Cuando el plugin imprime estilos que interfieren

Si el plugin tiene CSS muy específico, prueba añadir selectores igual de específicos o usar !important en casos límite. Mejor opción: cargar tu CSS después del plugin (priority en enqueue) o sobrescribir con selectores más concretos.

/ Ejemplo si necesitas forzar color /
.widget.popular-posts .popular-post-title {
  color: #1a1a1a !important
}

5.2. Añadir clase al bloque desde PHP (child theme)

Si tu bloque es un bloque del editor y quieres añadir una clase contenedora programáticamente, puedes usar un filtro para añadirla al render. Coloca esto en functions.php de tu child theme.

add_filter(render_block, function(block_content, block){
  if ( isset(block[blockName])  block[blockName] === mytheme/most-read ){
    // Envuelve el contenido con un contenedor con clase extra
    return  . block_content . 
  }
  return block_content
}, 10, 2)

5.3. Optimizar imágenes (object-fit y dimensiones)

Usa object-fit: cover y tamaños fijos (o min-height) para que el bloque no salte cuando las imágenes cargan.

.popular-post-thumb {
  width: 100%
  height: 100px
  object-fit: cover
  display:block
  background: #efefef / placeholder mientras carga /
}

6. Probar y depurar

Inspecciona el HTML y anota clases específicas.
Aplica cambios en DevTools y prueba diferentes selectores.
Vuelve a poner el CSS final en Apariencia → Personalizar → CSS adicional o en tu child theme.
Prueba en móviles, tablet y modo oscuro.
Verifica con lectores de pantalla y navegación por teclado que todo sea accesible.

7. Buenas prácticas

Usar un child theme para cambios permanentes en style.css.
Evitar el uso intensivo de !important usar selectores más precisos cuando sea posible.
Separar estilos por componentes y documentar variables CSS.
Probar el rendimiento: minimizar CSS y evitar reglas costosas (selectores universales o demasiado anidados).
Mantener contrastes adecuados y estados focus visibles.

Conclusión

Con CSS bien planteado puedes transformar el bloque “Más leído” desde un simple listado a una pieza visual atractiva, accesible y adaptable a tu diseño. Inspecciona la estructura HTML, usa variables para mantener coherencia, añade numeración con contadores y adapta el layout con flexbox o grid. Guarda los cambios en el lugar apropiado (CSS adicional o child theme) y prueba en distintos dispositivos y modos de color para asegurar una experiencia consistente.

SushiHost