Introducción
En este tutorial detallado aprenderás a ocultar las migas de pan (breadcrumbs) en dispositivos móviles y mostrarlas en escritorio usando únicamente CSS. Cubriremos cómo identificar la clase/ID que usa tu tema o plugin, las mejores prácticas para no perjudicar la accesibilidad ni el SEO, ejemplos prácticos para los selectores más comunes (Yoast, Rank Math, WooCommerce, Breadcrumb NavXT, temas comerciales), y formas seguras de implementar el CSS en WordPress (Personalizador o child theme).
Por qué usar CSS para ocultar migas en móvil
- Rendimiento y UX: En pantallas pequeñas a veces las migas ocupan espacio valioso o hacen la interfaz más recargada.
- SEO: Mantener las migas en el DOM pero escondidas con CSS no suele penalizar al SEO. Evita eliminar completamente la estructura del HTML a menos que sepas lo que haces.
- Simplicidad: Es una solución rápida, no invasiva y fácil de revertir o ajustar con media queries.
Consideraciones antes de empezar
- Identifica el selector correcto usando Herramientas de desarrollador (Inspector) del navegador.
- Elige un breakpoint apropiado para tu diseño (por ejemplo 768px para separar móvil de tablet/escritorio).
- Mantén las migas en el DOM para accesibilidad si ocultas visualmente, evita impedir el acceso a lectores de pantalla sin querer.
- Si tu tema o plugin imprime estilos con mucha especificidad, puede que necesites usar selectores más concretos o la regla !important como último recurso.
Cómo identificar la clase o ID de las migas de pan
Abre la página donde aparecen las migas, haz clic derecho sobre ellas y selecciona Inspeccionar. Busca contenedores típicos como:
- .breadcrumbs
- .breadcrumb
- .yoast-breadcrumb
- #breadcrumbs
- .breadcrumb-trail
- .woocommerce-breadcrumb
Anota el selector exacto (incluyendo selectores padre si es necesario) para usarlo en el CSS.
Estrategia CSS general
La técnica más común es usar una media query que oculte las migas en pantallas pequeñas y las muestre en pantallas grandes. A continuación se muestran ejemplos:
Ejemplo básico — ocultar en móvil (hasta 767px) y mostrar en escritorio
Si el selector de las migas es .breadcrumbs:
/ Mostrar por defecto (escritorio) /
.breadcrumbs {
display: block
}
/ Ocultar en pantallas pequeñas (móvil) /
@media (max-width: 767px) {
.breadcrumbs {
display: none
}
}
Ejemplo inverso — ocultar por defecto y mostrar solo en pantallas grandes
Útil si tu tema imprime migas por defecto y quieres forzar ocultarlas salvo en anchos muy grandes:
/ Oculto por defecto /
.breadcrumbs {
display: none
}
/ Mostrar solo en escritorio amplio /
@media (min-width: 1024px) {
.breadcrumbs {
display: block
}
}
Ejemplos para selectores comunes (Yoast, Rank Math, WooCommerce, Breadcrumb NavXT)
Prueba estos snippets cambiando los selectores según tu caso. Si tu tema añade contenedores adicionales, ajusta el selector.
Yoast SEO
/ Yoast /
.yoast-breadcrumb {
display: block
}
@media (max-width: 767px) {
.yoast-breadcrumb {
display: none
}
}
Rank Math
/ Rank Math /
.rank-math-breadcrumb {
display: block
}
@media (max-width: 767px) {
.rank-math-breadcrumb {
display: none
}
}
WooCommerce breadcrumbs
/ WooCommerce /
.woocommerce-breadcrumb {
display: block
}
@media (max-width: 767px) {
.woocommerce-breadcrumb {
display: none
}
}
Breadcrumb NavXT (plugin)
/ Breadcrumb NavXT /
.breadcrumb-trail,
.breadcrumb_trail {
display: block
}
@media (max-width: 767px) {
.breadcrumb-trail,
.breadcrumb_trail {
display: none
}
}
Si el estilo del tema tiene mucha especificidad
Si tu regla no se aplica porque el tema usa selectores muy específicos o inline styles, prueba una de estas opciones:
- Crear un selector más específico: por ejemplo .site-header .breadcrumbs { … }
- Usar !important como último recurso:
@media (max-width: 767px) {
.breadcrumbs {
display: none !important
}
}
Cómo añadir este CSS en WordPress (opciones seguras)
- Personalizador: Apariencia → Personalizar → CSS adicional. Pega tu CSS y guarda. Rápido y no modifica archivos del tema.
- Child theme: Añade el CSS en tu archivo style.css del child theme o encola un archivo CSS desde functions.php (opción recomendada para producción).
Ejemplo: encolar un archivo CSS desde functions.php (child theme)
Archivo PHP que encola un fichero custom-breadcrumbs.css. Inserta en functions.php de tu child theme:
Luego crea el archivo /css/custom-breadcrumbs.css en el child theme con las reglas CSS anteriores.
Accesibilidad y SEO
- Mantén las migas en el DOM para que los motores de búsqueda y los lectores de pantalla sigan reconociéndolas. Ocultarlas con CSS es la opción segura.
- Si por razones de accesibilidad quieres ocultarlas visualmente pero que sigan disponibles para lectores de pantalla, usa técnicas CSS específicas (no display:none). Por ejemplo:
@media (max-width: 767px) {
.breadcrumbs {
position: absolute !important
width: 1px
height: 1px
padding: 0
margin: -1px
overflow: hidden
clip: rect(0 0 0 0)
clip-path: inset(50%)
white-space: nowrap
border: 0
}
}
Esta técnica visualmente oculta pero mantiene el contenido accesible para tecnologías de asistencia. Úsala si quieres que el breadcrumb siga indexable y legible por lectores de pantalla en móvil sin ocupar espacio visual.
Alternativas a CSS
- JavaScript: Detectar ancho y ocultar elementos. No recomendado por dependencia del JS y posibles flashes (FOUC).
- PHP condicional: Renderizar las migas solo en escritorio con lógica server-side, por ejemplo usando wp_is_mobile(). Ten en cuenta que wp_is_mobile() usa la detección del user agent y puede no ser perfecta. Además, eliminar el HTML impide que buscadores vean las migas en mobile.
Ejemplo de PHP condicional (usar con precaución)
, )
}
}
?>
Pruebas y comprobaciones
- Ver en distintos dispositivos: móvil real (Android/iOS) y escritorio.
- Usa las herramientas de responsive del navegador para simular distintos tamaños.
- Si usas caché o CDN, purga la caché tras aplicar cambios.
- Comprueba en Google Search Console (si procede) que no se pierde la indexación de datos estructurados relacionados con breadcrumbs.
Resumen y recomendaciones finales
- Identifica el selector correcto con el inspector del navegador.
- Usa media queries para ocultar en móviles y mostrar en escritorio por ejemplo max-width: 767px para móviles.
- Prefiere mantener el HTML en el DOM por accesibilidad y SEO si quieres ocultarlo visualmente pero preservarlo para lectores de pantalla, utiliza la técnica de visually-hidden.
- Implementa via Personalizador para cambios rápidos o via child theme para producción.
- Evita modificar archivos del tema padre directamente usa un child theme.
Bloques de ejemplo listos para copiar
CSS compacto para la mayoría de casos (ajusta selectores y breakpoints):
/ Ajusta .breadcrumbs por el selector real de tu tema/plugin /
.breadcrumbs,
.yoast-breadcrumb,
.rank-math-breadcrumb,
.woocommerce-breadcrumb,
.breadcrumb-trail {
display: block
}
/ Ocultar en móviles /
@media (max-width: 767px) {
.breadcrumbs,
.yoast-breadcrumb,
.rank-math-breadcrumb,
.woocommerce-breadcrumb,
.breadcrumb-trail {
display: none
}
}
Este artículo resume buenas prácticas y varios ejemplos para ocultar migas de pan en móvil y mantenerlas visibles en escritorio usando CSS en WordPress. Ajusta selectores y breakpoints según tu diseño y realiza pruebas antes de desplegar en producción.
Leave a Reply