Crear tarjetas con indicador de categoría por color en WordPress — Tutorial completo

Este tutorial muestra varias formas profesionales y accesibles de añadir un indicador visual de categoría en las tarjetas de posts de WordPress usando CSS. Cubriremos desde soluciones simples (mapear clases CSS a categorías) hasta implementaciones dinámicas (guardar color en la taxonomía y aplicar variables CSS). Incluye código listo para copiar/pegar y recomendaciones de accesibilidad y rendimiento.

Resumen de enfoques

• Mapeo CSS estático: defines colores en CSS para cada slug de categoría. Fácil y rápido.
• Mapeo en functions.php: defines un array con slugs→colores y los inyectas como variables CSS o clases.
• Meta de término (dinámico): añades un campo color en el editor de categorías y recuperas ese color en el front para renderizar indicadores. Recomendado para proyectos con editores no técnicos.

Requisitos previos

• Acceso a los archivos del tema (o un child theme) para editar functions.php y hojas de estilo.
• Conocimientos básicos de PHP y CSS para integrarlo en tus plantillas (index.php, archive.php, content.php o template-parts).

Diseño visual propuesto

La idea es tener una tarjeta de post con una franja de color (o pequeño punto) que represente la categoría principal. El indicador puede ser:

• Una franja superior de 6–8px.
• Un borde izquierdo coloreado.
• Un badge/redondo con el color y el nombre de la categoría.

CSS base (estético y accesible)

Ejemplo de estilo de tarjeta y del indicador (usando pseudo-elemento ::before para la franja superior):

.card {
  position: relative
  background: #ffffff
  border-radius: 8px
  box-shadow: 0 6px 18px rgba(20,20,30,0.06)
  overflow: hidden
  transition: transform .18s ease, box-shadow .18s ease
  padding: 18px
}

.card:hover {
  transform: translateY(-6px)
  box-shadow: 0 14px 32px rgba(20,20,30,0.10)
}

/ Indicador: franja superior /
.card::before {
  content: 
  display: block
  height: 6px               / grosor de la franja /
  width: 100%
  position: absolute
  top: 0
  left: 0
  background: var(--cat-color, #cccccc) / color por defecto si no hay categoría /
}

/ Opcional: badge con color y texto de categoría /
.card .cat-badge {
  display: inline-flex
  align-items: center
  gap: 8px
  padding: 6px 10px
  border-radius: 999px
  font-size: 0.85rem
  background: rgba(0,0,0,0.06)
  color: inherit
}

.cat-swatch {
  width: 12px
  height: 12px
  border-radius: 50%
  background: var(--cat-color, #999)
  box-shadow: 0 1px 2px rgba(0,0,0,0.08)
}

/ Responsive: tarjetas dentro de grid /
.grid {
  display: grid
  grid-template-columns: repeat(auto-fill,minmax(260px,1fr))
  gap: 18px
}

Opción A — Implementación rápida: clases por slug CSS

Si no necesitas que los colores sean editables desde el admin, la manera más directa es asignar en el marcado una clase con el slug de la categoría y en CSS declarar el color para esa clase.

1) Ejemplo HTML/PHP dentro del loop (añadiendo clase con slug)

lt?php
// Dentro del Loop de WordPress:
categories = get_the_category()
cat_class = 
if ( ! empty( categories ) ) {
    // usar la primera categoría (puedes seleccionar otra lógica)
    cat_class = cat- . sanitize_html_class( categories[0]->slug )
}
?gt

ltarticle class=card gt
  ltheadergt
    lth3 class=entry-titlegtlta href=lt?php the_permalink() ?gtgtlt?php the_title() ?gtlt/agtlt/h3gt
    ltdiv class=cat-badgegt
      ltspan class=cat-swatchgtlt/spangt
      ltspan class=cat-namegtlt?php echo esc_html( categories[0]->name ) ?gtlt/spangt
    lt/divgt
  lt/headergt
  ltdiv class=excerptgtlt?php the_excerpt() ?gtlt/divgt
lt/articlegt

2) CSS: mapear slugs a colores

Define en tu CSS reglas para .cat-TU-SLUG que ajusten la variable CSS –cat-color:

/ ejemplo de mapeo /
.card.cat-news { --cat-color: #ff5a5f }      / categoría news /
.card.cat-tutorial { --cat-color: #1e90ff }  / categoría tutorial /
.card.cat-opinion { --cat-color: #ffb020 }   / categoría opinion /

Ventajas y desventajas

• Ventaja: muy simple y sin backend extra.
• Desventaja: si se añaden nuevas categorías hay que editar CSS manualmente.

Opción B — Dinámico: color guardado en la taxonomía (recomendado para editores)

Permite a los administradores elegir un color por categoría en el panel de WordPress. La implementación usa term meta y añade un color picker en las pantallas de creación/edición de términos.

1) Registrar el campo color en añadir/editar categoría

Ejemplo resumido (functions.php). Incluye encolar el script de color picker y añadir los campos en la UI de categorías.

/ Añadir campo color al crear/editar categoría /
add_action(category_add_form_fields, my_term_color_field_add, 10, 2)
add_action(category_edit_form_fields, my_term_color_field_edit, 10, 2)

function my_term_color_field_add(taxonomy) {
    ?>
    ltdiv class=form-field term-color-wrapgt
      ltlabel for=term_colorgtColor (hex)lt/labelgt
      ltinput name=term_color id=term_color type=text value=#0073aa class=term-color-field /gt
      ltpgtColor usado para indicadores de esta categoría.lt/pgt
    lt/divgt
    lt?php
}

function my_term_color_field_edit(term) {
    color = get_term_meta(term->term_id, term_color, true) ?: #0073aa
    ?>
    lttr class=form-field term-color-wrapgt
      ltth scope=rowgtltlabel for=term_colorgtColor (hex)lt/labelgtlt/thgt
      lttdgt
        ltinput name=term_color id=term_color type=text value=lt?php echo esc_attr(color) ?gt class=term-color-field /gt
        ltp class=descriptiongtColor usado para indicadores de esta categoría.lt/pgt
      lt/tdgt
    lt/trgt
    lt?php
}

/ Guardar meta /
add_action(created_category, my_save_term_color, 10, 2)
add_action(edited_category, my_save_term_color, 10, 2)

function my_save_term_color(term_id, tt_id = null) {
    if ( isset(_POST[term_color]) ) {
        update_term_meta(term_id, term_color, sanitize_hex_color(_POST[term_color]))
    }
}

2) Encolar color picker en admin

add_action(admin_enqueue_scripts, my_terms_color_enqueue)
function my_terms_color_enqueue(hook_suffix){
    // cargar solo en pantallas de edición de taxonomías (opcional: limitar a taxonomy=category)
    wp_enqueue_style(wp-color-picker)
    wp_enqueue_script(my-term-color, get_stylesheet_directory_uri() . /js/term-color.js, array(wp-color-picker), false, true)
}

// archivo: js/term-color.js
jQuery(document).ready(function(){
  (.term-color-field).wpColorPicker()
})

3) Output en front: aplicar variable CSS con color del término

Cuando renderices la tarjeta, inyecta un atributo style o una variable CSS con el color obtenido de get_term_meta.

lt?php
// Dentro del loop
categories = get_the_category()
css_var = 
if ( ! empty( categories ) ) {
    term = categories[0]
    color = get_term_meta( term->term_id, term_color, true )
    if ( color ) {
        // inyectar variable CSS --cat-color
        css_var = style=--cat-color:  . esc_attr( color ) . 
    }
}
?gt

ltarticle class=card name ) ?gtlt/spangt
    lt/divgt
    lth3 class=entry-titlegtlta href=lt?php the_permalink() ?gtgtlt?php the_title() ?gtlt/agtlt/h3gt
  lt/headergt
  ltdiv class=excerptgtlt?php the_excerpt() ?gtlt/divgt
lt/articlegt

Ventajas de esta aproximación

• Los editores pueden elegir colores sin tocar código.
• Mantiene la separación entre datos y presentación: los colores viajan con la taxonomía.

Indicadores para múltiples categorías y prioridad

Si un post tiene varias categorías tienes estas opciones:

1. Usar la primera categoría (orden por ID o por asignación) — implementación simple.
2. Marcar una categoría primaria (p. ej. con Yoast SEO o un campo personalizado) y usarla para el color.
3. Mostrar pequeños swatches para cada categoría (cada badge con su color) — útil si quieres reflejar todas las categorías.

Ejemplo: mostrar swatches para cada categoría

lt?php
categories = get_the_category()
if ( ! empty( categories ) ) {
    echo ltdiv class=cats-listgt
    foreach ( categories as cat ) {
        color = get_term_meta( cat->term_id, term_color, true ) ?: #999
        echo ltspan class=cat-badge style=--cat-color:. esc_attr(color) .gt
        echo ltspan class=cat-swatchgtlt/spangt
        echo ltspan class=cat-namegt. esc_html( cat->name ) .lt/spangt
        echo lt/spangt
    }
    echo lt/divgt
}
?gt

Accesibilidad y contraste

• Asegúrate de que el texto superpuesto tenga suficiente contraste con el fondo. Para badges con fondo coloreado, considera usar color de texto ajustado (blanco/negro) según la luminosidad del color.
• Si el color sirve sólo como decoración (no imprescindible para entender el contenido), asegúrate de que la información textual de la categoría también sea visible (p. ej. nombre de la categoría).

Función auxiliar para elegir color de texto según contraste

function my_contrast_text_color(hexcolor) {
    hexcolor = str_replace(#, , hexcolor)
    r = hexdec(substr(hexcolor,0,2))
    g = hexdec(substr(hexcolor,2,2))
    b = hexdec(substr(hexcolor,4,2))
    // fórmula de luminancia relativa
    l = (0.2126r   0.7152g   0.0722b) / 255
    return l > 0.6 ? #111 : #fff
}

Usa esa función para imprimir un style=color: … en la badge si usas un fondo sólido.

Buenas prácticas y rendimiento

• Evita inyectar estilos inline en grandes cantidades lo ideal es usar variables CSS y pocas reglas globales.
• Si tienes muchas categorías y colores, considera generar un CSS dinámico una sola vez (transient cache) en lugar de recalcular en cada carga.
• Minimiza las dependencias JavaScript en el front. El color picker solo se usa en admin.

Ejemplo completo resumido (mapa en CSS PHP minimal)

Este es el flujo más corto: asignar clase con slug y mapear en CSS. Rápido para prototipos.

lt?php
// inside loop
cats = get_the_category()
slug = !empty(cats) ? sanitize_html_class(cats[0]->slug) : 
?gt

ltarticle class=card gt
  lth3gtlta href=lt?php the_permalink() ?gtgtlt?php the_title() ?gtlt/agtlt/h3gt
  ltdiv class=excerptgtlt?php the_excerpt() ?gtlt/divgt
lt/articlegt

.card.cat-news { --cat-color: #ff5a5f }
.card.cat-tutorial { --cat-color: #1e90ff }
.card.cat-opinion { --cat-color: #ffb020 }

/ y el CSS base del inicio se aplica tal cual /

Conclusión

Elegir entre un mapeo estático o una solución dinámica depende de quién administre los contenidos. Para sitios con editores no técnicos, el uso de term meta con un color picker es la opción más flexible. Para prototipos o sitios pequeños, el mapeo por CSS con clases de slug es rápido y robusto. Independientemente del método, usar variables CSS (–cat-color) y pseudo-elementos permite separar presentación de contenido y mantener una implementación limpia y eficiente.