Introducción

Este tutorial explica, con todo lujo de detalles, cómo redondear las esquinas de las imágenes destacadas (featured images) solo en las pantallas de archivos y categorías de WordPress. Verás varias técnicas: solución rápida con CSS, carga condicional de estilos desde functions.php, y un ejemplo con filtro para añadir clases específicas a las miniaturas. Se incluyen ejemplos listos para pegar en tu tema hijo o en un plugin de funcionalidad. Antes de tocar nada, haz una copia de seguridad y trabaja en un tema hijo.

Conceptos clave

• Archivos y categorías: En WordPress se identifican con las funciones condicionales is_archive() y is_category(), y el elemento ltbodygt suele llevar clases como archive o category.
• Selector objetivo: Localiza la clase que envuelve la imagen destacada en tu tema (ej. .post-thumbnail, .featured-image, .entry-thumbnail o la propia .wp-post-image en la etiqueta ltimggt).
• Compatibilidad de tema: Algunos temas aplican estilos propios o usan background-image en lugar de ltimggt — adapta los selectores según el HTML real.

1. Solución CSS rápida (sin tocar PHP)

Si tu tema agrega la clase archive o category al body (práctica común), puedes aplicar estilos que solo afecten a esas pantallas. Este método no requiere editar PHP.

Pasos

1. Inspecciona la página de categoría/archivo para confirmar las clases del ltbodygt y la clase que envuelve la imagen destacada.
2. Agrega el CSS en Apariencia → Personalizar → CSS adicional, o en el archivo CSS de tu tema hijo.

Ejemplo CSS

/ Redondear esquinas solo en archivos y categorías /
body.archive .post-thumbnail,
body.category .post-thumbnail {
  overflow: hidden       / evita que la img sobresalga del borde redondeado /
  border-radius: 12px    / radio de las esquinas, cámbialo a tu gusto /
}

/ Asegurarse de que la imagen herede el borde redondeado /
body.archive .post-thumbnail img,
body.category .post-thumbnail img {
  display: block
  width: 100%
  height: auto
  border-radius: inherit
}

Notas

• Si la clase del contenedor es diferente (por ejemplo .featured-image), sustituye .post-thumbnail por la clase correcta.
• Si tu tema usa background-image, aplica el border-radius al contenedor y asegúrate de que no tenga overflow visible.

2. Cargar un archivo CSS solo en archivos y categorías (recomendado)

Para mantener el código ordenado y no cargar estilos innecesarios en single posts, puedes encolar un archivo CSS solo cuando la página es archivo o categoría. Esto se hace desde functions.php del tema hijo o desde un plugin de sitio.

Código PHP para functions.php

Contenido de mi-archive-styles.css

/ Archivo: /wp-content/themes/tu-tema-hijo/css/mi-archive-styles.css /
.post-thumbnail {
  overflow: hidden
  border-radius: 14px
}
.post-thumbnail img {
  display: block
  width: 100%
  height: auto
  border-radius: inherit
}

Instrucciones

1. Crea el archivo CSS en la ruta indicada dentro del tema hijo.
2. Pega el CSS y ajusta los selectores si tu tema usa nombres distintos.
3. Pega el snippet PHP en functions.php de tu tema hijo.
4. Vacía caché si usas plugins de caché.

3. Añadir una clase a la miniatura solo en archivos/categorías mediante filtro

Si quieres tener control directo sobre la etiqueta ltimggt o el HTML que imprime la miniatura, usa el filtro post_thumbnail_html para inyectar una clase únicamente en contextos de archivo o categoría.

Código PHP de ejemplo

CSS asociado

/ Estilos para la clase inyectada /
.mi-miniatura-archivo {
  border-radius: 12px
  display: block
  width: 100%
  height: auto
}

4. Casos especiales y soluciones

• Tema que usa background-image: aplica border-radius al contenedor (no a la imagen), y añade overflow: hidden.
• Imagen con enlace que aplica padding o borde: apunta al selector del enlace: body.archive .post-thumbnail a { display:block overflow:hidden border-radius:12px }.
• Imágenes con different aspect ratios: usa object-fit si tu HTML usa ltimggt con medidas fijas: img { object-fit: cover }, pero revisa compatibilidad y diseño.
• Plugins que generan HTML propio: ajusta la prioridad del filtro o usa una técnica basada en CSS más específica (inspeccionar e identificar el selector exacto).

5. Buenas prácticas y comprobaciones finales

1. Haz los cambios en un tema hijo, nunca en el tema padre.
2. Prueba en varios navegadores y en móviles. Ajusta el border-radius si es necesario.
3. Si usas CDN o plugins de caché, purga las cachés tras hacer cambios.
4. Si no ves cambios, inspecciona con las DevTools para comprobar si tus selectores están siendo sobrescritos. Si es así, aumenta la especificidad antes que usar !important.

Conclusión

Redondear las esquinas de las imágenes destacadas solo en archivos y categorías se puede lograr de forma simple con CSS usando las clases del ltbodygt, o con mayor control vía PHP (encolando CSS condicionalmente o inyectando clases con filtros). Escoge la técnica según el nivel de control que necesites y la estructura de tu tema. Recuerda probar en un tema hijo y limpiar cachés para ver los cambios en producción.