Las migas de pan o breadcrumbs son un elemento de navegación que se usa en los sitios web para mostrar al usuario en qué parte se encuentra a medida que se va moviendo por la página.
Suelen colocarse en la parte superior de entradas, páginas y productos para mostrar la arquitectura de la web y que el usuario pueda retroceder si lo necesita.
Las migas de pan están compuestas de enlaces que se encargan de estructurar y jerarquizar los contenidos, por lo que son recomendables para mejorar el SEO del sitio web, pues mejoran la experiencia de usuario y facilitan a Google su rastreo e indexación.
Resumen
Ejemplos de breadcrumbs en Divi
Para que entiendas mejor que son las migas de pan o breadcrumbs, te dejamos varios ejemplos:
Ejemplo de migas de pan en una entrada de blog, compuestas de página de inicio, categoría y título del post.
En este ejemplo, puedes ver la migas de pan en la parte superior de una ficha de producto en un ecommerce (nuestra propia web).
Añadir migas de pan o breadcrumbs en Divi
Ahora que ya sabes qué son las migas de pan, te vamos a mostrar como añadirlas paso a paso, pues Divi no las incluye por defecto.
Lo primero que debes hacer es activarlas en el plugin de Yoast SEO. Para ello, debes ir a: SEO > Apariencia en el buscador > Migas de pan > Activo > Guardar cambios.
El siguiente paso es pegar un código en las plantillas de tus entradas y páginas de WordPress.
Te lo explicamos con más detalle:
#1 Migas de pan / breadcrumbs en entradas de Divi
Para añadir migas de pan en las entradas de Divi, debes pegar el siguiente código en el archivo single.php de tu tema hijo.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('
<p id="breadcrumbs">','</p>
');
}
?>Si quieres que se muestren debajo del título, pega el código detrás de la etiqueta </h1>
Y si quieres añadir las migas de pan debajo de la imagen de portada del post, pégalo después de <!– .et_post_meta_wrapper –>
#2 Migas de pan / breadcrumbs en páginas de Divi
Para mostrar las migan de pan en las páginas, el proceso es muy similar. Simplemente tienes que pegar el mismo código en el archivo page.php
Para que aparezcan debajo del título, que es el lugar más habitual, pega el código detrás de la etiqueta </h1>
Otra forma de integrar las migas de pan de Yoast SEO con Divi es añadir el siguiente shortcode en tu entradas o página:
[wpseo_breadcrumb]Para ello, tienes 2 opciones:
1. Pegar el shortcode de forma manual en cada vez que publiques una entrada o página, tanto si la editas con Divi como si lo haces con Gutenberg.
2. Añadir el shortcode desde el generador de temas, como puedes ver a continuación, para que las migas de pan sean visibles por defecto en el tipo de contenido que elijas.
#3 Migas de pan / breadcrumbs en productos de Divi
En el caso de las fichas de producto de WooCommerce, las migan de pan ya están integradas por defecto, por lo que no tienes que hacer nada más.
Por eso, te dejamos un pequeño código CSS por si quieres personalizarlas o darles un toque diferente.
Para personalizar las migas en entradas y páginas de Divi:
#breadcrumbs {
background-color: #f89637;
color: #ffffff !important;
font-weight: bold;
font-size: 12px !important;
padding: 5px 20px 5px 20px !important;
}
#breadcrumbs a {
color: #ffffff;
}Para personalizar las migas de pan en productos de WooCommerce:
.woocommerce-breadcrumb {
background-color: #f89637;
color: #ffffff !important;
font-weight: bold;
font-size: 12px !important;
padding: 5px 20px 5px 20px !important;
}
Solo tienes que pegarlo en las opciones del tema Divi y personalizarlo con los colores de tu web.
Por último, aquí tienes un vídeo en el que te mostramos todo el proceso, por si necesitas apoyo visual para añadir las migas de pan en tu web.
Hasta aquí este tutorial para añadir migas de pan o breadcrumbs en Divi paso a paso. Recuerda que, aunque parezca difícil porque hay que tocar la plantilla, si sigues estos pasos, es algo muy sencillo ;)
Genial Max! Justo lo que estaba buscando.
Está super-bien explicado.
A ver si me puedes ayudar con esta pregunta: Al copiar todo el archivo con la modificación en el tema hijo, ¿que pasa si en una actualización de Divi se modificara el archivo, por ejemplo, single.php ? Entiendo que el archivo «hijo» no cogería el cambio ¿no?
Hola Susana,
Si haces cambios en el archivo single.php del tema hijo y hay una actualización de Divi, no tendrías ningún problema. Precisamente para eso se crean los temas hijos :)
Saludos
Si, pero me refiero al venir de una actualizacion Divi, cambios en el archivo padre: A ver si me explico mejor:
Copias con la modificacion el archivo single.php en el hijo. Despues hay una actualizacion oficial Divi del archivo single.php, Entiendo que no lo transmite al hijo porque hemos copiado todo el archivo y no solo la variable que queremos modificar.
Gracias por tu paciencia!
Eso es Susana. Si metes los cambios en el archivo del tema hijo y se actualiza el padre, no pierdes nada, porque los cambios están en el hijo, que es el que prevalece. Para eso precisamente estás creando el child theme.
Espero haber resuelto tu duda ;)
Muy bueno Max, muchas gracias por la instrucción. Tengo un par de situaciones en las que me gustaría por favor una ayuda:
-En el home de mi sitio web luego de hacer este proceso que describes, me están apareciendo las Migas de Pan. ¿cuál es el fragmento de código que debo usar y en qué parte lo inserto para que no se muestren las migas en el home?
-Este sitio web en cuestión lo estoy haciendo desde cero con Divi, es mi primer proyecto web con esta herramienta y por supuesto apenas estoy en la curva de aprendizaje. El encabezado o header lo hice desde cero con el Generador de Temas.
Menciono esto porque no se si tenga algo que ver pero las migas de pan aparecen con el color de hipervínculo del estilo asignado, con el tamaño de letra y demás características normales, pero curiosamente no funcionan como enlace, pese a tener el color del hipervínculo no funcionan como tal, en la práctica sólo son textos. ¿Sabes qué puede estar ocurriendo o si se debe hacer algo con código para dicha función?
De antemano mil gracias por la ayuda que puedas brindarme.
Hola Ron,
En este caso, no sabría decirte sin verlo. Nunca he utilizado las migas de pan con el generador de temas de Divi. Siempre lo he hecho como explico en el vídeo, con single.php y page.php
Si necesitas ayuda específica, ponte en contacto conmigo y lo vemos.
Saludos
Hola Max! gracias por compartir, lo he hecho y genial. Me falta únicamente en las páginas de los proyectos, supongo que no me aparece porque el fichero php será otro. He encontrado en el tema padre el fichero single-project.php pero no consigo ver las migas, ¿te suena si el fichero tiene otro nombre? No todas las webs tienen proyectos, pero en mi caso los tengo.
Gracias de nuevo.
Hola Marisin,
Para añadir las migas de pan a un proyecto en Divi, simplemente tienes que pegar el mismo código en el archivo single-project.php del tema hijo. Lo he probado y puedes ver cómo queda en este ejemplo.
Saludos
Hola Max,
Gran trabajo y buen aporte.
Pero llevo días probando donde insertar el código para la personalización de las migas y no doy con la tecla.
Espero puedas ayudarme… No domino muy bien el código, pero si logre hacer aparecer las migas.
Gracias por adelantado!