Introducción: chips de etiquetas con fondo suave usando HSLA

En este tutorial detallado aprenderás a crear “chips” o etiquetas visuales para WordPress con un aspecto suave y moderno usando colores HSLA en CSS. La técnica se centra en utilizar canales HSL con el componente alfa para obtener fondos translúcidos, bordes sutiles y texto legible. Verás el marcado HTML mínimo, estilos CSS robustos (variables CSS, estados hover/focus, variantes de contraste) y ejemplos de integración en WordPress mediante snippets PHP (shortcode y encolado de estilos).

Por qué usar HSLA para chips suaves

• Control fino de saturación/luminosidad: HSL facilita ajustar la saturación y luminosidad sin cambiar el tono (hue).
• Alfa para fondos suaves: Con el canal alpha obtienes un fondo que se integra con el color del contenedor, dando un efecto “soft” sin perder contraste.
• Consistencia visual: Variables CSS permiten definir paletas reutilizables y variantes (hover, contrast).

Marcado HTML recomendado para cada chip

Usa enlaces cuando la etiqueta lleve a una página de archivo de taxonomía usa span o enlaces con role si solo son decorativas. Ejemplo mínimo:

lta class=tag-chip href=/tag/ejemplo title=Ver posts con la etiqueta EjemplogtEjemplolt/agt

CSS base: variables, fondo HSLA y estilos accesibles

Este bloque CSS usa variables para controlar hue/saturation/lightness/alpha y define estilos para estado hover y focus. Incluye una variante de alto contraste para textos pequeños.

:root{
  --chip-h: 210       / hue (0-360) /
  --chip-s: 85%       / saturación /
  --chip-l: 55%       / luminosidad base /
  --chip-a: 0.10      / alpha para fondo suave /
  --chip-border-a: 0.18 / alpha para borde /
  --chip-radius: 999px
  --chip-padding: 0.25rem 0.6rem
  --chip-font-size: 0.875rem
  --chip-gap: 0.5rem
}

/ Estilo base del chip /
.tag-chip{
  display: inline-flex
  align-items: center
  gap: var(--chip-gap)
  padding: var(--chip-padding)
  font-size: var(--chip-font-size)
  line-height: 1
  border-radius: var(--chip-radius)
  text-decoration: none
  color: hsl(var(--chip-h) 8% 8%) / texto oscuro legible /
  background: hsla(var(--chip-h), var(--chip-s), var(--chip-l), var(--chip-a))
  border: 1px solid hsla(var(--chip-h), var(--chip-s), calc(var(--chip-l) - 10%), var(--chip-border-a))
  transition: background 160ms ease, transform 120ms ease, box-shadow 120ms ease
  white-space: nowrap
}

/ Hover / focus: aumenta la opacidad del fondo y añade elevación sutil /
.tag-chip:hover,
.tag-chip:focus{
  background: hsla(var(--chip-h), var(--chip-s), var(--chip-l), calc(var(--chip-a)   0.08))
  box-shadow: 0 1px 6px rgba(0,0,0,0.06)
  transform: translateY(-1px)
  outline: none
}

/ Variante compacta y accesible para texto pequeño /
.tag-chip--compact{
  padding: 0.15rem 0.45rem
  font-size: 0.78rem
}

/ Variante de alto contraste (cuando necesites legibilidad máxima) /
.tag-chip--contrast{
  background: hsla(var(--chip-h), var(--chip-s), calc(var(--chip-l) - 10%), 0.20)
  color: hsl(var(--chip-h) 8% 0%) / texto más oscuro /
  border-color: hsla(var(--chip-h), var(--chip-s), calc(var(--chip-l) - 25%), 0.28)
}

/ Soporte responsive: permitir que los chips se envuelvan /
.chips-wrap{
  display: flex
  gap: 0.5rem
  flex-wrap: wrap
  align-items: center
}

Ejemplo de variantes de color por etiqueta (inline custom properties)

Si quieres que cada etiqueta tenga su propio tono, puedes añadir inline CSS con variables HSL por chip. Por ejemplo: –chip-h para el matiz.

lta class=tag-chip style=--chip-h: 330 --chip-s: 70% --chip-l: 60% --chip-a: 0.12 href=/tag/rosagtRosalt/agt
lta class=tag-chip style=--chip-h: 200 --chip-s: 85% --chip-l: 55% --chip-a: 0.10 href=/tag/azulgtAzullt/agt

Integración en WordPress: shortcode para mostrar etiquetas como chips

Este snippet crea un shortcode [post_tags_chips] que muestra las etiquetas del post actual como chips enlazados. Incluye escape de atributos y uso de get_the_terms para flexibilidad.

/
  Shortcode: [post_tags_chips]
  Muestra las etiquetas del post actual como chips.
 /
function wp_chips_tags_shortcode( atts ) {
  global post
  if ( ! post ) return 

  terms = get_the_terms( post->ID, post_tag )
  if ( ! terms  is_wp_error( terms ) ) return 

  output = ltdiv class=chips-wrapgt
  foreach ( terms as term ) {
    link = esc_url( get_term_link( term ) )
    name = esc_html( term->name )

    / Opcional: usar color guardado en term meta (ej. hue) /
    hue = get_term_meta( term->term_id, chip_hue, true )
    style = hue ? style=--chip-h: . intval( hue ) . : 

    output .= lta class=tag-chip {style} href={link}gt{name}lt/agt
  }
  output .= lt/divgt
  return output
}
add_shortcode( post_tags_chips, wp_chips_tags_shortcode )

Encolar el CSS desde un plugin o theme

Para mantener el CSS separado y aprovechar cache, encola el fichero CSS en tu tema o plugin. Ruta de ejemplo desde un plugin:

function wp_chips_enqueue_styles() {
  wp_enqueue_style( wp-chips-style, plugin_dir_url( __FILE__ ) . assets/css/chips.css, array(), 1.0.0 )
}
add_action( wp_enqueue_scripts, wp_chips_enqueue_styles )

Asignar colores por etiqueta en el admin (opcional)

Una forma elegante es añadir un campo de término para guardar el hue (0-360). Luego, en el frontend se lee ese meta para aplicar –chip-h en el HTML (ve el ejemplo de PHP del shortcode donde se usa get_term_meta).

Accesibilidad y contraste

• Prueba contraste de texto sobre el fondo HSLA. Si el chip se usa en texto pequeño, considera aumentar la opacidad o aplicar la clase tag-chip–contrast.
• Asegura estados focus visibles (aumentar box-shadow o outline en focus). Si usas outline: none en hover, compensa con otra pista visual.
• Evita texto en minúsculas extremadamente pequeño dentro de chips el espacio y legibilidad importan.

Variantes útiles y mejoras

• Con icono: añade un SVG inline o pseudo-elemento antes del texto (usar display:flex y gap ya en el CSS).
• Con contador: mostrar número de posts de la etiqueta, p.ej. get_term(term_id)->count y añadir dentro del enlace.
• Modo oscuro: usa media query prefers-color-scheme para ajustar –chip-l o alpha en dark mode.

Ejemplo: adaptación a modo oscuro

@media (prefers-color-scheme: dark) {
  :root {
    --chip-l: 48%
    --chip-a: 0.08
  }
  .tag-chip {
    color: hsl(var(--chip-h) 8% 98%) / texto claro en oscuro /
    border-color: hsla(var(--chip-h), var(--chip-s), calc(var(--chip-l) - 40%), 0.12)
  }
}

Buenas prácticas y performance

1. Guardar colores de término como valores sencillos (ej. hue) en term meta para no generar estilos inline complejos.
2. Minimizar reglas CSS y usar variables para reusar estilos y permitir modificaciones globales.
3. Cachear la salida del shortcode si tienes muchos términos y cargas altas (transients o fragment caching).
4. Evitar cargas innecesarias de assets: encola el CSS solo cuando se usa el shortcode o el template que muestra chips.

Resumen práctico

Implementa chips visuales en WordPress con HSLA usando:

• Marcado simple: enlaces o spans con clase tag-chip.
• CSS con variables: controla hue/saturation/lightness/alpha y crea variantes (compact, contrast).
• PHP para inyectar chips en el frontend (shortcode o integración en templates) y para leer meta de términos si asignas colores por etiqueta.

Ejemplo final combinado (marcado estilo mínimo)

ltdiv class=chips-wrapgt
  lta class=tag-chip style=--chip-h: 210 --chip-s: 85% --chip-l: 55% --chip-a: 0.12 href=/tag/uxgtUXlt/agt
  lta class=tag-chip tag-chip--compact style=--chip-h: 330 --chip-s: 70% --chip-l: 60% --chip-a: 0.14 href=/tag/disenogtDiseñolt/agt
  lta class=tag-chip tag-chip--contrast style=--chip-h: 45 --chip-s: 88% --chip-l: 58% --chip-a: 0.16 href=/tag/frontendgtFrontendlt/agt
lt/divgt

Con estas piezas puedes construir una experiencia visual consistente y moderna para tus etiquetas en WordPress, usando HSLA para controlar precisión y suavidad en el fondo, manteniendo buena legibilidad y rendimiento.