Tutorial WordPress: Cómo ocultar la categoría “Sin categoría” de listados con CSS

·

·

Introducción

Este tutorial explica, paso a paso y con todo detalle, cómo ocultar la categoría por defecto “Sin categoría” de los listados de WordPress usando únicamente CSS. El método es rápido y no requiere tocar plantillas PHP, por lo que es ideal para usuarios que quieren una solución no destructiva y fácilmente reversible. También incluiré variantes y recomendaciones para hacerlo robusto según el tema y dónde aparece esa categoría (widget, metadatos del post, listas de categorías, menús, etc.).

Consideraciones previas

Antes de aplicar CSS conviene tener en cuenta:

Cómo identificar la clase o el ID de la categoría

  1. En el Frontend, ve a una entrada que muestre la categoría “Sin categoría” o a la lista de categorías (widget o página de categorías).
  2. Haz clic derecho → Inspeccionar elemento (DevTools) y localiza el enlace o el elemento que contiene “Sin categoría”.
  3. Busca clases como:
    • cat-item-123 (aparece en listas generadas por wp_list_categories 123 es el ID real)
    • category-sin-categoria o category-slug (aparece en las clases de post)
    • o un enlace con href que contenga /category/sin-categoria
  4. Si no sabes el ID, puedes averiguarlo desde el Escritorio → Entradas → Categorías y al pasar el ratón sobre “Editar” verás en la URL term_id=NNN (ese NNN es el ID).

Reglas CSS típicas (ejemplos listos para copiar)

A continuación tienes varias soluciones según dónde quieras ocultar la categoría. Ajusta el ID o el slug al tuyo.

1) Ocultar la categoría en el widget “Categorías” (lista generada por wp_list_categories)

Suele usar la clase .cat-item-ID. Reemplaza 123 por el ID real.

/ Oculta la categoría Sin categoría en el widget de Categorías /
.widget_categories .cat-item-123 {
  display: none !important
}

2) Ocultar el enlace por slug buscando en el atributo href

Útil cuando no hay clase específica pero el enlace apunta a /category/sin-categoria. Usa para coincidir parcialmente la URL (más tolerante a la estructura del sitio).

/ Oculta cualquier enlace que contenga /sin-categoria /
a[href=/sin-categoria] {
  display: none !important
}

3) Ocultar la categoría en los metadatos del post (lista de categorías del artículo)

Muchos temas imprimen las categorías dentro de .entry-meta o .post-meta y dentro de un contenedor .cat-links. Esta regla oculta la categoría dentro de la barra de metadatos del post:

/ Oculta la categoría Sin categoría dentro de los metadatos del post /
.entry-meta a[href=/sin-categoria],
.post-meta a[href=/sin-categoria] {
  display: none !important
}

4) Ocultar la etiqueta de categoría aplicada al post (clase de post)

WordPress añade clases tipo category-slug a los elementos de post. Si tu tema imprime esa clase en el contenedor del post, puedes ocultar el label así:

/ Si el post tiene la clase .category-sin-categoria y el tema muestra esa etiqueta /
.category-sin-categoria .cat-links,
.post.category-sin-categoria .cat-links {
  display: none !important
}

5) Ocultar en un menú personalizado (si añadiste la categoría al menú)

Si la categoría se agregó manualmente a un menú, el selector puede basarse en el enlace del menú o en una clase .menu-item identificada. Ejemplo por href:

/ Oculta el elemento del menú cuyo enlace apunta a la categoría /
nav a[href=/sin-categoria],
.main-navigation a[href=/sin-categoria] {
  display: none !important
}

Cómo añadir el CSS en WordPress

  1. Apariencia → Personalizar → CSS adicional: pega la regla CSS y guarda.
  2. O edita el style.css de tu child theme y añade las reglas al final del archivo.
  3. Si necesitas insertar dinámicamente el ID desde PHP (por ejemplo, si quieres que el ID no esté hardcodeado), puedes obtener el ID por slug y generar el CSS en functions.php. Ejemplo a continuación.

Cómo obtener el ID de la categoría por slug (snippet PHP)

Si prefieres automatizar la generación del selector cat-item-ID, este snippet PHP te devuelve el ID de la categoría con slug sin-categoria:

term_id )
} else {
    echo Categoría no encontrada
}
?>

Ejemplo: añadir CSS desde functions.php usando el ID obtenido

Este ejemplo genera e inyecta una regla CSS que oculta .cat-item-{ID}. Úsalo en el functions.php de un child theme.

term_id )
        echo 
    }
}
?>

Caveats y recomendaciones finales

Snippet rápido para eliminar la categoría de wp_list_categories vía PHP (alternativa)

Si prefieres no depender de CSS y quieres excluir la categoría del listado generado por wp_list_categories, puedes usar este filtro (añádelo en functions.php):


Este enfoque elimina la categoría a nivel de servidor del widget de categorías y es más limpio desde el punto de vista del HTML generado.

Resumen

Ocultar “Sin categoría” con CSS es rápido y reversible: identifica la clase o href asociado, escribe una regla CSS específica y añádela en el Personalizador o en tu child theme. Para eliminar la categoría definitivamente del HTML generado o de widgets, usa soluciones PHP. Siempre verifica en varios dispositivos y limpia la caché tras aplicar cambios.



Leave a Reply

Your email address will not be published. Required fields are marked *