Tutorial WordPress: Cómo ocultar breadcrumbs en páginas de aterrizaje con CSS

Introducción

Este tutorial explica, paso a paso y con ejemplos prácticos, cómo ocultar los breadcrumbs (migas de pan) en páginas de aterrizaje (landing pages) de un sitio WordPress usando CSS. Se incluyen métodos seguros: selección por clase de plantilla o por ID de página, ejemplos para plugins comunes (Yoast, WooCommerce), cómo añadir una clase específica desde PHP si la plantilla no la expone y buenas prácticas para pruebas y accesibilidad.

Requisitos previos

Acceso al panel de administración de WordPress (Apariencia → Personalizar → CSS adicional) o a los archivos del tema (preferiblemente un tema hijo).
Conocimientos básicos de inspección con las herramientas de desarrollador del navegador (Inspector).
Si vas a editar functions.php, acceso FTP o al editor de temas (recomendado: editor de un tema hijo).

Fase 1 — Identificar el selector de breadcrumbs

Antes de escribir CSS necesitas identificar la clase o el elemento HTML que genera las migas de pan. Abre la página de aterrizaje en el navegador, haz clic derecho → Inspeccionar y busca la estructura. Algunos selectores habituales son:

.breadcrumbs
.breadcrumb
.yoast-breadcrumb
nav.breadcrumb, nav.breadcrumbs
.woocommerce-breadcrumb

Anota el selector exacto que aparece en tu tema. También fíjate en las clases del body WordPress añade clases útiles como page-id-123 o page-template-template-landing que permiten apuntar sólo a ciertas páginas.

Fase 2 — Método rápido: ocultar por clase de cuerpo (landing) con CSS

Si tu plantilla de landing ya añade una clase en el elemento body, por ejemplo landing-page o page-template-landing, usa la siguiente regla CSS reemplazando .breadcrumbs por el selector real de tu tema:

body.landing-page .breadcrumbs {
  display: none !important
}

Si la clase del body es algo como page-template-landing, sustituye por esa clase:

body.page-template-landing .breadcrumbs {
  display: none !important
}

Dónde añadir este CSS

Personalizador → CSS adicional
Hoja style.css del tema hijo
Plugin de CSS personalizado

Fase 3 — Ocultar breadcrumbs sólo en una página concreta usando page-id

WordPress añade clases de página como page-id-123. Para ocultar breadcrumbs exclusivamente en la página con ID 123:

body.page-id-123 .breadcrumbs,
body.page-id-123 .yoast-breadcrumb {
  display: none !important
}

Fase 4 — Si no hay clase de cuerpo específica: añadir una con PHP (tema hijo)

Si la plantilla de landing no añade una clase de body útil, agrega una clase condicional vía functions.php de tu tema hijo. El siguiente fragmento añade la clase landing-page cuando la página usa la plantilla template-landing.php o cuando la página tiene el slug landing:

Después de añadir este código, usa la regla CSS del apartado anterior para ocultar las migas.

Fase 5 — Selectores específicos de plugins y temas populares

Algunos plugins y temas usan selectores propios. Aquí tienes ejemplos listos para usar (reemplaza el selector si tu tema usa otro):

Yoast SEO:

body.landing-page .yoast-breadcrumb { display: none !important }

WooCommerce:

body.landing-page .woocommerce-breadcrumb { display: none !important }

Themes basados en Genesis (ejemplo):

body.landing-page .breadcrumb { display: none !important }

Fase 6 — Ocultar sólo en móvil o sólo en escritorio

Si deseas ocultar breadcrumbs según el tamaño de pantalla, usa media queries:

/ Ocultar solo en móviles (max-width 767px) /
@media (max-width: 767px) {
  body.landing-page .breadcrumbs { display: none !important }
}

/ Ocultar solo en escritorio /
@media (min-width: 768px) {
  body.landing-page .breadcrumbs { display: none !important }
}

Fase 7 — Alternativa: ocultar visualmente pero mantener para accesibilidad

Si ocultas breadcrumbs visualmente pero quieres que los lectores de pantalla sigan teniendo acceso, evita display:none. Usa técnicas de ocultamiento accesible:

body.landing-page .breadcrumbs {
  position: absolute !important
  left: -9999px !important
  top: auto !important
  width: 1px !important
  height: 1px !important
  overflow: hidden !important
}

Con esta técnica el contenido queda fuera de la vista pero disponible para tecnologías asistivas. Si prefieres eliminarlas también para lectores de pantalla, usa display:none pero considera el impacto en la navegación.

Fase 8 — Pruebas y recomendaciones finales

Inspecciona la página después de aplicar CSS para comprobar que el selector es correcto y no afectas elementos no deseados.
Limpia caché (plugin de caché, CDN como Cloudflare) para ver los cambios en producción.
Prioriza las reglas colocándolas en el CSS del tema hijo o en el Personalizador. Evita editar el tema padre directamente.
Evita selector demasiado genéricos (por ejemplo, .breadcrumb sin qualifying parent) para no romper otras secciones que usan la misma clase.
Si el breadcrumb se genera con CSS pseudo-elementos o con JavaScript, asegúrate de apuntar al contenedor correcto y considera usar !important si una regla previa lo está anulando.

Problemas comunes y soluciones

Regla no funciona: comprueba especificidad y caché, usa el inspector para ver qué regla está aplicando.
El breadcrumb reaparece tras actualización del tema: añade tu CSS al tema hijo o al Personalizador (CSS adicional) para evitar sobreescrituras.
No hay selector identificable: agrega una clase con el filtro body_class (ver ejemplo PHP) o, si no puedes editar PHP, usar una regla CSS basada en la jerarquía del DOM tras inspeccionar.

Resumen práctico (pasos rápidos)

Inspecciona la landing y anota el selector del breadcrumb y las clases del body.
Prueba en el inspector una regla como body.page-id-123 .breadcrumbs { display:none }.
Si funciona, copia la regla en Personalizador → CSS adicional o en style.css del tema hijo.
Si no existe una clase de body adecuada, añade una vía functions.php y repite.
Limpia caché y prueba en diferentes dispositivos y con herramientas de accesibilidad.

Ejemplos finales

Ejemplo: ocultar breadcrumbs en la página con slug landing usando PHP y CSS.

/ Ocultar breadcrumbs para esa landing /
body.landing-page .breadcrumbs,
body.landing-page .yoast-breadcrumb,
body.landing-page .woocommerce-breadcrumb {
  display: none !important
}

Notas finales

Los ejemplos mostrados permiten una solución rápida y controlada para ocultar las migas de pan en páginas de aterrizaje sin tocar la estructura HTML del tema ni eliminar funcionalidad importante. Usa un tema hijo para cambios permanentes y comprueba el impacto en la usabilidad y accesibilidad de tu sitio.

SushiHost