Introducción
Este tutorial explica paso a paso cómo resaltar la categoría principal de una entrada de WordPress usando una pill CSS. Cubriremos cómo detectar la categoría principal (soporte para Yoast SEO y fallback), cómo renderizar la pill en la plantilla del tema, estilos CSS recomendados, opciones para colores dinámicos por categoría, accesibilidad y buenas prácticas. Los fragmentos de código están listos para copiar y pegar en functions.php o en las plantillas del tema.
1. ¿Qué entendemos por categoría principal?
En WordPress una entrada puede tener varias categorías. Muchas tiendas y blogs quieren destacar una sola categoría principal. Plugins como Yoast SEO permiten marcar una categoría principal. Si no existe ese dato, usaremos la primera categoría asignada al post como fallback.
Mapeo de meta-keys de los plugins populares
| Plugin | Meta key (ejemplo) |
| Yoast SEO | _yoast_wpseo_primary_category |
| Rank Math | _rank_math_primary_category |
2. Función PHP para obtener la categoría principal
Coloca esta función en el archivo functions.php del tema hijo (o en un plugin de snippets). Intenta primero obtener la categoría marcada por Yoast o Rank Math y si no existe utiliza la primera categoría asignada.
lt?php
function get_primary_category_for_post( post_id = 0 ) {
if ( ! post_id ) {
post_id = get_the_ID()
}
// 1) Intentar Yoast
yoast = get_post_meta( post_id, _yoast_wpseo_primary_category, true )
if ( ! empty( yoast ) ) {
term = get_term( (int) yoast )
if ( term ! is_wp_error( term ) ) {
return term
}
}
// 2) Intentar Rank Math
rank = get_post_meta( post_id, _rank_math_primary_category, true )
if ( ! empty( rank ) ) {
term = get_term( (int) rank )
if ( term ! is_wp_error( term ) ) {
return term
}
}
// 3) Fallback: la primera categoría asignada
categories = get_the_category( post_id )
if ( ! empty( categories ) is_array( categories ) ) {
return categories[0]
}
return false
}
?gt
3. Renderizar la pill en la plantilla
Inserta este bloque donde quieras mostrar la categoría (por ejemplo en single.php, content.php o en la parte del meta del post). El código imprime un enlace con la clase category-pill y una clase identificadora basada en el slug de la categoría para permitir estilos específicos por categoría.
lt?php
primary_term = get_primary_category_for_post()
if ( primary_term ) {
term_link = get_term_link( primary_term )
if ( ! is_wp_error( term_link ) ) {
slug_class = cat- . sanitize_html_class( primary_term-gtslug )
aria = sprintf( Categoría: %s, esc_html( primary_term-gtname ) )
echo lta href= . esc_url( term_link ) . class= . esc_attr( category-pill . slug_class ) . aria-label= . esc_attr( aria ) . gt
echo esc_html( primary_term-gtname )
echo lt/agt
}
}
?gt
4. Estilos CSS para la pill
Agrega este CSS al fichero style.css del tema hijo o en el panel de CSS personalizado del tema.
/ Estilo base de la pill /
.category-pill {
display: inline-block
padding: 0.25rem 0.75rem
border-radius: 999px
font-size: 0.85rem
font-weight: 600
text-decoration: none
color: #ffffff
background-color: #6c757d / color por defecto /
transition: background-color 0.15s ease, transform 0.08s ease
box-shadow: 0 1px 0 rgba(0,0,0,0.06)
}
/ Hover / foco accesible /
.category-pill:hover,
.category-pill:focus {
transform: translateY(-1px)
text-decoration: none
outline: none
box-shadow: 0 4px 8px rgba(0,0,0,0.08)
}
/ Tamaños /
.category-pill.small { padding: 0.15rem 0.5rem font-size: 0.75rem }
.category-pill.large { padding: 0.4rem 1rem font-size: 1rem }
/ Ejemplo de colores por categoria (usar clases generadas por el slug) /
.category-pill.cat-actualidad { background-color: #e74c3c }
.category-pill.cat-opinion { background-color: #3498db }
.category-pill.cat-tecnologia { background-color: #2ecc71 }
.category-pill.cat-cultura { background-color: #9b59b6 }
5. Usar colores dinámicos guardados como term meta
Si quieres que cada categoría tenga un color editable desde el panel de administración, guarda un meta para cada término llamado por ejemplo category_color (puedes usar ACF, Term Meta UI o añadir campos personalizados manualmente). Luego usa este código para renderizar inline style con ese color.
lt?php
primary_term = get_primary_category_for_post()
if ( primary_term ) {
term_link = get_term_link( primary_term )
color = get_term_meta( primary_term-gtterm_id, category_color, true )
style =
if ( color ) {
// Validar color básico (hex)
if ( preg_match( /^#([A-Fa-f0-9]{3}[A-Fa-f0-9]{6})/, color ) ) {
style = style=background-color: . esc_attr( color ) . color:#fff
}
}
echo lta href= . esc_url( term_link ) . class= . esc_attr( category-pill ) . aria-label= . esc_attr( Categoría: . primary_term-gtname ) . . style . gt
echo esc_html( primary_term-gtname )
echo lt/agt
}
?gt
Guardar meta en la página de edición de categoría (opcional)
A continuación tienes un ejemplo compacto para añadir y guardar un campo de color en la edición de categorías. Añádelo a functions.php.
lt?php
// Mostrar campo color en formulario de edición
add_action( category_add_form_fields, function() {
echo ltdiv class=form-fieldgtltlabel for=category_colorgtColor de la categoríalt/labelgt
echo ltinput name=category_color id=category_color type=color value=#2ecc71gtlt/divgt
})
add_action( category_edit_form_fields, function( term ) {
value = get_term_meta( term-gtterm_id, category_color, true ) ?: #2ecc71
echo lttr class=form-fieldgtltth scope=rowgtltlabel for=category_colorgtColor de la categoríalt/labelgtlt/thgtlttdgt
echo ltinput name=category_color id=category_color type=color value= . esc_attr( value ) . gt
echo lt/tdgtlt/trgt
})
// Guardar el valor
add_action( created_category, function( term_id ) {
if ( isset( _POST[category_color] ) ) {
update_term_meta( term_id, category_color, sanitize_text_field( _POST[category_color] ) )
}
})
add_action( edited_category, function( term_id ) {
if ( isset( _POST[category_color] ) ) {
update_term_meta( term_id, category_color, sanitize_text_field( _POST[category_color] ) )
}
})
?gt
6. Accesibilidad y SEO
- Usa atributo aria-label en el enlace para anunciar que es una categoría: aria-label=Categoría: Nombre.
- Evita colores con bajo contraste comprueba relación de contraste entre texto y fondo (WCAG).
- Si el enlace es puramente decorativo en ciertos contextos, considera usar aria-hidden, pero normalmente la categoría es un enlace navegable.
- Escapa siempre salida con esc_html() y esc_url() para seguridad.
7. Integración en editores modernos (Block Themes / Full Site Editing)
Si trabajas con bloques o un theme.json, puedes:
- Crear un bloque reutilizable que invoque la función PHP (vía render_callback en un bloque dinámico) para mantener la lógica centralizada.
- O bien incluir la salida PHP en un template.part usado por tu theme.
8. Buenas prácticas y consideraciones finales
- Coloca la lógica en un tema hijo o plugin para evitar pérdidas al actualizar el tema.
- Comprueba compatibilidad con plugins SEO que gestionen la categoría principal (Yoast, Rank Math) si tu sitio depende de ese dato.
- Si necesitas más variantes visuales (outline, ghost, con borde) añade clases utilitarias y gestiona el color mediante CSS variables para facilitar mantenimiento.
- Prueba en móvil y en distintos tamaños de texto para asegurarte de que la pill no genera solapamientos en diseños responsivos.
Ejemplo completo: plantilla mínima
Plantilla corta (ejecutar en contexto de loop de WP):
lt?php
// Dentro del loop
primary = get_primary_category_for_post()
if ( primary ) {
link = get_term_link( primary )
echo ltspan class=meta-infogt
echo lta href= . esc_url( link ) . class=category-pill aria-label=Categoría: . esc_attr( primary-gtname ) . gt
echo esc_html( primary-gtname )
echo lt/agt
echo lt/spangt
}
?gt
Con esto tendrás una pill visual consistente, accesible y con posibilidad de personalizar colores por categoría. El enfoque es modular: la función PHP centraliza la obtención de la categoría principal y la plantilla solo la renderiza los estilos permanecen separados en CSS para un mantenimiento limpio.
Leave a Reply