Tutorial WordPress: Cómo ocultar categorías específicas de la página de blog con CSS

·

·

Introducción

En este tutorial completo verás cómo ocultar entradas pertenecientes a categorías concretas en la página principal del blog de WordPress usando únicamente CSS. Cubriremos cómo identificar las clases que genera WordPress, cómo escribir selectores CSS precisos para distintos temas y ubicaciones (listado de entradas, widgets de categorías, enlaces en la meta de la entrada), ejemplos prácticos, variantes para slug e ID de categoría y buenas prácticas (caché, accesibilidad y SEO). Al final incluyo una alternativa con PHP para quienes necesiten excluir las entradas del bucle y no sólo ocultarlas visualmente.

Paso 1 — Identificar la categoría: slug o ID y las clases que aplica WordPress

WordPress añade clases relacionadas con la categoría directamente a los elementos de las entradas y a la lista de categorías. Dos identificadores habituales:

Cómo encontrar el slug o ID:

  1. En el administrador: Entradas → Categorías: ahí verás el slug y, al pasar el ratón sobre editar, en la URL verás tag_ID=12 (ese es el ID).
  2. En el frontend: abre Herramientas de desarrollador y selecciona la entrada inspecciona el elemento article o el contenedor de la entrada y busca clases como category-news o category-12.

Paso 2 — Dónde añadir el CSS

Patrones de selectores CSS útiles

Los selectores dependen del marcado que tu tema genera, pero estos patrones cubren la mayoría de los casos:

Ejemplo 1 — Ocultar una categoría por slug en la página de blog

Si el slug de la categoría es news y las entradas usan un

con la clase category-news, añade este CSS:

.home article.category-news,
.blog article.category-news {
  display: none
}

Si tu tema usa otra estructura (por ejemplo .post en lugar de article), ajusta el selector:

.home .post.category-news {
  display: none
}

Ejemplo 2 — Ocultar varias categorías a la vez (por slug)

Para ocultar las categorías news y updates:

.home article.category-news,
.home article.category-updates {
  display: none
}

Ejemplo 3 — Usando ID de categoría

Si prefieres usar ID y la categoría tiene clase category-12 o el widget usa cat-item-12:

/ Ocultar entradas en el listado principal /
.home article.category-12 {
  display: none
}

/ Ocultar opción del widget de categorías /
.widget_categories .cat-item-12 {
  display: none
}

Ejemplo 4 — Ocultar enlaces a la categoría dentro de la meta de la entrada

Algunos temas muestran enlaces a las categorías en la meta de la entrada para ocultar esos enlaces que contienen /category/news:

.entry-meta a[href=/category/news],
.post-meta a[href=/category/news] {
  display: none
}

Ejemplo 5 — Ocultar solo el título/thumbnail pero mantener estructura (si no quieres eliminar todo el articulo)

Si quieres que siga mostrándose el contenedor pero ocultar solo el título o la miniatura:

/ Oculta solo el título dentro de la entrada /
.home article.category-news .entry-title {
  display: none
}

/ Oculta solo la imagen destacada /
.home article.category-news .post-thumbnail {
  display: none
}

Comprobar y adaptar según tu tema

  1. Inspecciona el HTML del elemento de la entrada con las herramientas de desarrollador (F12). Identifica la clase exacta que marca la categoría.
  2. Prueba los selectores en la consola CSS o en la pestaña Estilos de las DevTools antes de pegarlos en el Customizer.
  3. Si tu tema no usa article o .post, cambia el selector por el contenedor correcto (.entry, .post-item, .card, etc.).

Limitaciones y consideraciones importantes

  • Visibilidad vs. eliminación: CSS solo oculta visualmente el contenido las entradas siguen en el HTML del sitio y pueden ser indexadas por motores de búsqueda. Si necesitas excluirlas completamente del bucle, usa la solución en PHP (más abajo).
  • Accesibilidad: ocultar con display:none hace que el contenido no esté disponible para lectores de pantalla si esa es la intención, está bien, pero asegúrate de que no estés rompiendo la navegación esperada de usuarios.
  • Caché y minificación: después de aplicar CSS, purga caché de plugins y CDN, y asegúrate de que la hoja de estilos no quede combinada en una versión previa.
  • Compatibilidad con móviles: revisa en distintos tamaños de pantalla a veces el tema cambia el marcado en responsive y necesitarás selectores adicionales.

Alternativa (cuando quieras eliminar realmente las entradas del bucle): usar PHP

Si tu objetivo no es solo ocultar visualmente sino que las entradas no aparezcan en la consulta principal del blog, modifica la consulta principal con un hook pre_get_posts. Añade este código al functions.php del tema hijo o mediante un plugin específico de snippets.

add_action( pre_get_posts, function( query ) {
    if ( is_admin()  ! query->is_main_query() ) {
        return
    }

    // Aplica solamente a la página principal / blog
    if ( query->is_home() ) {
        // Excluir categorías por ID (por ejemplo 12 y 34)
        query->set( cat, -12,-34 )
    }
}, 10 )

Nota: la clave es usar IDs y precederlos con signo menos para excluir. Este método evita que las entradas se carguen en la consulta, por lo que no afectará al SEO ni al DOM del lado cliente.

Resumen rápido de pasos prácticos

  1. Identifica slug o ID en el admin o inspeccionando el HTML.
  2. Prueba selector en DevTools: por ejemplo article.category-slug o .home article.category-slug.
  3. Pega el CSS final en Apariencia → Personalizar → CSS adicional.
  4. Purgar caché y verificar en móvil y escritorio.
  5. Si necesitas excluir del loop por completo, usa la solución en PHP con pre_get_posts.

Recursos útiles

Notas finales

Con el enfoque CSS puedes controlar rápidamente la visibilidad de categorías en la página del blog sin tocar PHP, pero recuerda las implicaciones mencionadas (indexación y accesibilidad). Ajusta selectores según el HTML que tu tema genere y comprueba siempre en distintos dispositivos.



Leave a Reply

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