DiviFast: plantillas para Divi


Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Search in posts
Search in pages

Cómo añadir migas de pan o breadcrumbs en Divi

Cómo añadir migas de pan o "breadcrumbs" en Divi

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.

Ejemplos de breadcrumbs en Divi

Para que entiendas mejor que son las migas de pan o breadcrumbs, te dejamos varios ejemplos:

Cómo añadir migas de pan o "breadcrumbs" en Divi

Ejemplo de migas de pan en una entrada de blog, compuestas de página de inicio, categoría y título del post.

Cómo añadir migas de pan o "breadcrumbs" en Divi

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.

Cómo añadir migas de pan o "breadcrumbs" en Divi

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.

añadir migas de pan en Divi con SEO Yoast
migas de pan Yoast SEO + Gutenberg
añadir migas de pan en Divi con SEO Yoast
migas de pan Yoast SEO + Divi Builder

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.

añadir migas de pan en Divi con SEO Yoast
migas de pan Yoast SEO + generador temas Divi

#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 😉

8 Comentarios

  1. Susana Albares

    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?

    Responder
    • Max Camuñas

      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

      Responder
      • Susana Albares

        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!

        Responder
        • Max Camuñas

          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 😉

          Responder
  2. Ron Jeremy

    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.

    Responder
    • Max Camuñas

      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

      Responder
  3. Marisin

    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.

    Responder
    • Max Camuñas

      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

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada.

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Search in posts
Search in pages

Nuestras plantillas

Llévatelas todas

Plantillas Divi | Divi templates

te regalamos un diseño gratis para divi

Información Básica sobre Protección de Datos

Responsable: DiviFast. Finalidad: suscripción a nuestra newsletter. Legitimación: Consentimiento. Destinatarios: No se ceden a terceros. Se pueden producir transferencias. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en hola@divifast.es así como el derecho a presentar una reclamación ante una autoridad de control. Información adicional: en nuestra política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal, incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.