Este tutorial explica paso a paso cómo diseñar tarjetas de categorías con imagen y efecto hover en WordPress. Incluye el código necesario para añadir una imagen a cada categoría (term meta) desde el administrador, cómo recuperar esa imagen en el front-end y el CSS para conseguir tarjetas visuales, accesibles y responsive con efecto hover suave.

Requisitos y consideraciones previas

• WordPress 4.4 (para soporte de term meta). Si usas una versión anterior, adapta la lógica o utiliza plugins.
• Acceso para editar el tema hijo (child theme) o un plugin personalizado donde colocar el código PHP.
• Conocimientos básicos de PHP, CSS y JavaScript para integrar los snippets.
• Se recomienda trabajar en un tema hijo para no perder cambios al actualizar el tema.

Resumen del flujo

1. Añadir campos en el panel de administración de categorías para subir la imagen (metadato del término).
2. Guardar y recuperar ese metadato (ID del adjunto o URL).
3. Crear la plantilla que genere las tarjetas de categorías (grid).
4. Estilizar con CSS: imagen de fondo, overlay, título, contador y efecto hover.
5. Mejoras: accesibilidad, lazy-loading, tamaños responsivos y fallback.

1. Añadir imagen a la categoría en el administrador

Este bloque de código añade los campos para subir/mostrar la imagen en los formularios de creación/edición de categorías y guarda el ID del adjunto como term meta. Pega esto en functions.php de tu tema hijo o en un plugin personalizado.

// Añadir campos de imagen al formulario de añadir/editar categoría
add_action(category_add_form_fields, cat_image_field_add, 10, 2)
add_action(category_edit_form_fields, cat_image_field_edit, 10, 2)
add_action(created_category, cat_image_field_save, 10, 2)
add_action(edited_category, cat_image_field_save, 10, 2)

function cat_image_field_add(taxonomy) {
    ?>
    

        
        
        

        

        
    
    term_id, category_image_id, true)
    image_thumb = image_id ? wp_get_attachment_image(image_id, thumbnail) : 
    ?>
    
        
        
            >
            

            

            >
        
    
    
JavaScript para abrir el media uploader
Guarda este archivo como js/cat-image-admin.js dentro de tu tema hijo. Controla la carga y la eliminación de la imagen en el formulario.
jQuery(document).ready(function(){
    var frame
    function openMediaUploader(button) {
        if (frame) {
            frame.open()
            return
        }
        frame = wp.media({
            title: Seleccionar imagen de categoría,
            multiple: false,
            library: { type: image }
        })
        frame.on(select, function(){
            var attachment = frame.state().get(selection).first().toJSON()
            (#category_image).val(attachment.id)
            (#category_image_preview).html()
            (#category_image_remove).show()
        })
        frame.open()
    }

    (document).on(click, #category_image_upload, function(e){
        e.preventDefault()
        openMediaUploader((this))
    })

    (document).on(click, #category_image_remove, function(e){
        e.preventDefault()
        (#category_image).val()
        (#category_image_preview).html()
        (this).hide()
    })
})

2. Plantilla front-end: obtener y mostrar tarjetas de categoría
Ejemplo de plantilla que crea un grid de tarjetas con enlace a la categoría. Pega el código donde quieras mostrar la lista (por ejemplo en un archivo template o en un bloque de plantilla de página).
terms = get_terms(array(
    taxonomy => category,
    hide_empty => false,
))

if (!empty(terms)  !is_wp_error(terms)) {
    echo ltdiv class=cat-card-gridgt
    foreach (terms as term) {
        term_link = get_term_link(term)
        image_id = get_term_meta(term->term_id, category_image_id, true)
        image_url = image_id ? wp_get_attachment_image_url(image_id, large) : get_stylesheet_directory_uri() . /assets/img/category-placeholder.jpg
        image_alt = image_id ? get_post_meta(image_id, _wp_attachment_image_alt, true) : term->name
        count = term->count
        // estructura HTML de la tarjeta (se muestra en el front-end se recomienda imprimir con proper escaping)
        ?>
        lta class=cat-card href= aria-label=name) ?>gt
            ltdiv class=cat-card__bg style=background-image: url()gtlt/divgt
            ltdiv class=cat-card__overlaygt
                lth3 class=cat-card__titlegtname) ?>lt/h3gt
                ltspan class=cat-card__countgtlt/spangt
            lt/divgt
        lt/agt
        
Notas sobre el HTML generado

La estructura propuesta usa un enlace (ltagt) por tarjeta para que toda la tarjeta sea clicable.
La imagen se aplica con background-image CSS para permitir recorte y posicionamiento controlado. Si necesitas ltimggt por accesibilidad, sustituye la estructura por ltimggt y añade alt apropiado.
Escapa siempre las salidas con esc_url, esc_html o similares.

3. CSS: diseño del grid y efecto hover
Este CSS crea un grid responsive, tarjetas con imagen de fondo, overlay con degradado, título y contador. En hover se escala la imagen y aparece un sombreado. Ajusta colores y variables según tu identidad visual.
/ Grid responsivo /
.cat-card-grid {
  display: grid
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr))
  gap: 1.25rem
  align-items: stretch
}

/ Tarjeta /
.cat-card {
  position: relative
  display: block
  overflow: hidden
  border-radius: 8px
  height: 180px
  text-decoration: none
  color: inherit
  transition: transform .25s ease, box-shadow .25s ease
  will-change: transform
}

/ Fondo (imagen) /
.cat-card__bg {
  position: absolute
  inset: 0
  background-size: cover
  background-position: center
  transform-origin: center
  transition: transform .6s cubic-bezier(.2,.8,.2,1)
  filter: saturate(0.95) contrast(0.98)
}

/ Overlay con gradiente para legibilidad /
.cat-card__overlay {
  position: absolute
  inset: 0
  display: flex
  flex-direction: column
  justify-content: flex-end
  padding: 1rem
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%)
  transition: background .25s ease
}

/ Título y contador /
.cat-card__title {
  margin: 0
  font-size: 1.05rem
  font-weight: 700
  color: #fff
  text-shadow: 0 1px 2px rgba(0,0,0,.6)
}

.cat-card__count {
  display: inline-block
  margin-top: .35rem
  font-size: .85rem
  color: rgba(255,255,255,.9)
  background: rgba(0,0,0,.25)
  padding: .2rem .5rem
  border-radius: 999px
}

/ Hover y foco: escala la imagen y eleva la tarjeta /
.cat-card:hover,
.cat-card:focus {
  transform: translateY(-6px)
  box-shadow: 0 12px 28px rgba(10,20,30,.12)
  outline: none
}
.cat-card:hover .cat-card__bg,
.cat-card:focus .cat-card__bg {
  transform: scale(1.08)
}

/ Mejora de rendimiento: transición más suave en dispositivos con prefer-reduced-motion /
@media (prefers-reduced-motion: reduce) {
  .cat-card, .cat-card__bg {
    transition: none
  }
}

/ Ajustes responsive para tarjetas más altas en pantallas grandes /
@media (min-width: 1200px) {
  .cat-card { height: 220px }
}

4. Encolar los estilos y el script (front-end)
Ejemplo simple para encolar el CSS en functions.php. También puedes añadir el archivo CSS en tu tema y encolarlo con wp_enqueue_style.
add_action(wp_enqueue_scripts, enqueue_cat_card_styles)
function enqueue_cat_card_styles() {
    wp_enqueue_style(cat-card-styles, get_stylesheet_directory_uri() . /css/cat-card.css, array(), 1.0)
}

5. Mejoras de accesibilidad y rendimiento

Alt y texto alternativo: si usas ltimggt asegúrate de incluir alt relevante. Cuando usas background-image, añade aria-label en el enlace (como en el ejemplo) o incluye un elemento ltspan class=sr-onlygt con título para lectores de pantalla.
Foco visible: asegura que la tarjeta tenga estilo visible cuando recibe foco (teclado). Puedes añadir outline o box-shadow en :focus.
Lazy loading: para background-image no hay lazy nativo considera usar ltimg loading=lazygt dentro de la tarjeta (visualmente oculto o con object-fit) o utilizar una pequeña librería de lazy-loading basada en IntersectionObserver para background images.
Imágenes optimizadas: guarda varias tallas y usa wp_get_attachment_image_srcset para ltimggt con srcset. Para background-image puedes generar la URL de la talla adecuada (thumbnail/medium/large) según el punto de ruptura.
Fallback: incluye una imagen por defecto en caso de que no exista imagen de categoría, como en el ejemplo (assets/img/category-placeholder.jpg).

6. Variantes y efectos avanzados

Overlay de color animado: cambia background del overlay en hover para indicar interacción.
Mostrar extracto o descripción de la categoría: usa term_description(term->term_id).
Tarjetas asimétricas: combinar estilos CSS Grid para destacar categorías principales ocupando más columnas.
Filtrado por categoría o carga dinámica: usar AJAX para filtrar tarjetas sin recargar la página.

7. Checklist antes de lanzar

Verificar que las imágenes subidas se guardan correctamente en term meta.
Comprobar rutas y permisos para los archivos JS/CSS en el tema.
Probar con teclado (tab) que las tarjetas son accesibles y que el foco es visible.
Probar en móvil y en pantallas grandes (retina) y revisar tiempos de carga.
Comprobar compatibilidad con el resto del tema y con plugins de cache/minificación.

Ejemplo completo: estructura HTML propuesta (para referencia)
Este fragmento muestra la estructura que generará el PHP (se incluye aquí como ejemplo en bruto):
ltdiv class=cat-card-gridgt
  lta class=cat-card href=/category/ejemplo aria-label=Ejemplogt
    ltdiv class=cat-card__bg style=background-image:url(/wp-content/uploads/....jpg)gtlt/divgt
    ltdiv class=cat-card__overlaygt
      lth3 class=cat-card__titlegtNombre de la categoríalt/h3gt
      ltspan class=cat-card__countgt12 publicacioneslt/spangt
    lt/divgt
  lt/agt
  lt!-- repetir tarjetas --gt
lt/divgt

Conclusión
Siguiendo estos pasos tendrás un sistema completo para asociar imágenes a tus categorías desde el administrador y mostrarlas en el front-end como tarjetas atractivas y responsivas, con un efecto hover elegante. Personaliza colores, tipografías y tamaños para que encajen con el diseño de tu sitio y aplica optimizaciones como lazy-loading y srcset para mejorar el rendimiento.