Tutorial WordPress: Estilizar el widget de “Entradas recientes” como tarjetas con CSS

Introducción

En este tutorial detallado aprenderás a transformar el widget nativo de “Entradas recientes” de WordPress en elegantes tarjetas (cards) usando CSS y —si quieres mostrar miniaturas— un pequeño fragmento de PHP para integrar la imagen destacada. Cubriremos varias aproximaciones: estilos sólo con CSS para el HTML que ya genera el widget, cómo sustituir/extendender el widget por uno que incluya thumbnails y la hoja de estilos completa para que las tarjetas sean responsivas, accesibles y rápidas.

Requisitos y recomendaciones previas

Usa un child theme o un plugin de snippets para añadir PHP (para no perder cambios en actualizaciones).
Haz copia de seguridad antes de tocar functions.php.
Prueba primero en un entorno de staging o local.
El CSS puede añadirse en Apariencia → Personalizar → CSS adicional o en el style.css del child theme.

Visión general de las soluciones

CSS puro: estilizar el HTML que ya produce el widget de Entradas recientes (útil si sólo quieres cambiar aspecto y el widget no muestra thumbnails).
PHP CSS: registrar/usar un widget que imprima miniatura, título, meta y (opcional) extracto. Perfecto si quieres tarjetas con imagen.
Plugin: instalar un plugin como alternativa rápida (p. ej. Recent Posts Widget With Thumbnails).

Método 1 — CSS puro para transformar la lista en tarjetas

El widget nativo suele generar una estructura tipo ltulgtltligtltagtTítulolt/agtlt/ligt… dependiendo del tema. Con CSS puedes convertir cada ltligt en una tarjeta y reorganizarla en columnas.

Ejemplo de CSS para el widget clásico (selectores comunes):

/ Contenedor: grid responsive /
.widget_recent_entries ul,
.widget_recent_entries .recent-posts {
  list-style: none
  margin: 0
  padding: 0
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
  gap: 16px
}

/ Cada elemento como tarjeta /
.widget_recent_entries li {
  background: #ffffff
  border-radius: 10px
  box-shadow: 0 6px 18px rgba(20,20,30,0.06)
  padding: 12px
  display: flex
  gap: 12px
  align-items: center
  transition: transform 0.18s ease, box-shadow 0.18s ease
  overflow: hidden
}

/ Si tu tema ya imprime una imagen dentro del enlace /
.widget_recent_entries li a {
  display: flex
  gap: 12px
  align-items: center
  color: inherit
  text-decoration: none
}

/ Miniatura /
.widget_recent_entries li img {
  width: 72px
  height: 72px
  object-fit: cover
  border-radius: 8px
  flex-shrink: 0
  display: block
}

/ Título y meta dentro de la tarjeta /
.widget_recent_entries li .post-title {
  font-weight: 600
  font-size: 15px
  color: #111
  line-height: 1.15
}
.widget_recent_entries li .post-meta {
  font-size: 12px
  color: #6b6b6b
  margin-top: 4px
}

/ Efecto hover / focus (accesible) /
.widget_recent_entries li:hover,
.widget_recent_entries li:focus-within {
  transform: translateY(-4px)
  box-shadow: 0 14px 34px rgba(20,20,30,0.08)
}
.widget_recent_entries li a:focus {
  outline: 3px solid rgba(21,156,228,0.18)
  outline-offset: 2px
}

/ Adaptaciones para el bloque Latest posts (Gutenberg) /
.wp-block-latest-posts ul {
  list-style: none
  margin: 0
  padding: 0
  display: grid
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr))
  gap: 14px
}

Notas importantes:

Si el widget no imprime img, la tarjeta quedará sin miniatura el CSS mantiene la estructura para cuando sí exista imagen.
Usa object-fit:cover para mantener recorte correcto de las miniaturas.

Método 2 — Añadir miniaturas al widget (PHP) y luego estilizar

Si quieres tarjetas con imagen destacada, hay varias opciones: instalar un plugin o reemplazar/ extender el widget nativo. A continuación tienes un ejemplo de una clase que extiende WP_Widget_Recent_Posts, imprime miniatura con atributo loading=lazy, título y fecha. Añádelo en el functions.php de tu child theme o en un plugin de snippets.

id_base )
    number = ! empty( instance[number] ) ? absint( instance[number] ) : 5

    r = new WP_Query( array(
      posts_per_page => number,
      no_found_rows  => true,
      post_status    => publish,
    ) )

    if ( r->have_posts() ) {
      echo args[before_widget]
      if ( title ) {
        echo args[before_title] . title . args[after_title]
      }

      echo 
      while ( r->have_posts() ) {
        r->the_post()
        echo 
          // Miniatura (si existe)
          if ( has_post_thumbnail() ) {
            thumb = get_the_post_thumbnail( get_the_ID(), thumbnail, array( loading => lazy, alt => get_the_title() ) )
            echo  . thumb . 
          }
          // Cuerpo de la tarjeta
          echo 
            echo  . get_the_title() . 
            echo  . get_the_date() . 
          echo 
        echo 
      }
      echo 

      echo args[after_widget]
      wp_reset_postdata()
    }
  }
}

// Reemplazar el widget nativo por el nuevo
function replace_recent_posts_widget() {
  unregister_widget( WP_Widget_Recent_Posts )
  register_widget( My_Recent_Posts_With_Thumb )
}
add_action( widgets_init, replace_recent_posts_widget )
?>

Explicación rápida:

La clase reutiliza la consulta para listar posts y construye ltul class=my-recent-cardsgt con ltligt tarjetas.
get_the_post_thumbnail() añade la imagen con loading=lazy para mejorar rendimiento.
Al final se unregister el widget nativo y se register el nuevo para que el nombre en Apariencia→Widgets sea el mismo pero con miniaturas.

CSS para la estructura generada por el PHP anterior

/ Grid de tarjetas /
.my-recent-cards {
  list-style: none
  margin: 0
  padding: 0
  display: grid
  gap: 14px
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

/ Tarjeta individual /
.my-recent-cards .recent-card {
  display: flex
  gap: 12px
  align-items: center
  background: #fff
  padding: 12px
  border-radius: 10px
  box-shadow: 0 8px 26px rgba(15,20,30,0.06)
  transition: transform 0.18s ease, box-shadow 0.18s ease
  overflow: hidden
}

/ Imagen /
.my-recent-cards .card-thumb img {
  width: 88px
  height: 88px
  object-fit: cover
  border-radius: 8px
  display: block
}

/ Texto /
.my-recent-cards .card-title {
  display: block
  font-weight: 600
  color: #111
  text-decoration: none
  margin-bottom: 6px
}
.my-recent-cards .card-title:hover,
.my-recent-cards .card-title:focus {
  text-decoration: underline
}
.my-recent-cards .card-meta {
  font-size: 13px
  color: #6e6e6e
}

/ Hover /
.my-recent-cards .recent-card:hover {
  transform: translateY(-4px)
  box-shadow: 0 18px 36px rgba(14,20,30,0.08)
}

/ En dispositivos pequeños, apilar contenido si prefieres /
@media (max-width:420px) {
  .my-recent-cards .recent-card {
    flex-direction: row
    gap: 10px
  }
}

Método 3 — Usar un plugin

Si no quieres tocar PHP puedes instalar plugins que ya añaden miniaturas al listado y ofrecen opciones. Uno muy conocido es Recent Posts Widget With Thumbnails. Añádelo desde el repositorio y configura el estilo. En caso de usar un plugin, aplica el CSS anterior apuntando a las clases que el plugin genere.

Enlace del plugin: https://es.wordpress.org/plugins/recent-posts-widget-with-thumbnails/

Consejos de accesibilidad y rendimiento

Añade alt descriptivo a las miniaturas: get_the_post_thumbnail permite pasar el atributo alt.
Usa loading=lazy para imágenes fuera de la pantalla inicial.
Define tamaños de imagen adecuados (thumbnail / custom image sizes) para evitar cargar imágenes enormes.
Usa colores y contraste adecuados para la legibilidad. Asegura focus visible en enlaces para navegación por teclado.

Sugerencias de personalización adicional

Mostrar extracto: puedes usar get_the_excerpt() en la tarjeta y limitar la longitud con wp_trim_words().
Mostrar categorías o autor: get_the_category_list(), get_the_author_meta(display_name).
Añadir transición de color en hover o un badge para posts recientes.

Solución de problemas y selectores alternativos

Si tu widget usa otra clase revisa el HTML real con las herramientas de desarrollo (Inspector) y adapta selectores.
En sitios con bloques (Gutenberg), el bloque “Latest posts” usa .wp-block-latest-posts adapta el CSS a ese selector.
Si el tema aplica estilos muy específicos, añade más especificidad o usa inspección para detectar conflictos. Evita !important salvo casos puntuales.

Dónde colocar el código

CSS: Apariencia → Personalizar → CSS adicional (rápido), o style.css del child theme (persistente).
PHP: functions.php del child theme o mediante un plugin tipo Code Snippets para no editar archivos del tema principal.

Conclusión

Con relativamente poco trabajo puedes convertir el widget de Entradas recientes en tarjetas modernas y responsivas. Si sólo quieres cambiar el aspecto, el CSS es suficiente. Si además quieres miniaturas, añade un fragmento PHP (o instala un plugin). Sigue las buenas prácticas de accesibilidad y rendimiento (alt, lazy loading, tamaños de imagen) y prueba en diferentes dispositivos.

SushiHost