Como activar «breadcrumbs» o migas de pan en Divi

por | 16 Comentarios

Las migas de pan es un elemento visual que nos indica en todo momento dónde nos encontramos dentro de una página web. El valor SEO que proporciona es de sobra conocido, proporcionando una mejor navegación y experiencia de usuario, por lo que no entraré en debate sobre ello. Vamos a ver cómo activamos las migas de pan en Divi.

Suscríbete:

Configuración de las migas de pan en el tema Divi

Divi es un tema muy completo, tiene unas características y unas opciones impresionantes que permiten crear y configurar cualquier tipo de web. Os invito a que lo descubráis en este enlace.

Si alguno quiere probarlo, dentro de la Zona Premium está la descarga del tema para que lo podáis instalar en vuestro WordPress y comprobar su potencial.

Pero siempre hay detalles que, por su dificultad técnica o porque no se considera importante por su creador, no están reflejadas en las opciones. Una de ellas son las migas de pan en Divi.

La activación de las migas de pan en Divi requieren modificar el archivo de la cabecera (header.php), por lo que es muy recomendable realizar este cambio sobre un tema hijo para no perder los cambios con futuras actualizaciones del tema.

Instalar el plugin «Child Theme Configurator»

Este plugin nos facilitará la creación del tema hijo y la duplicación de los archivos necesarios. La instalación se realiza como cualquier plugin de WordPress.

Tras la instalación y activación de «Child Theme Configurator» hay que acceder a las opciones para generar el tema hijo de Divi desde la pestaña «Herramientas > Child Theme«.

En la imagen podéis ver las opciones generales que debéis marcar en la pestaña «Parent/child«.

Migas de pan en Divi. Tema Hijo
Opciones del plugin Child Theme Configurator

Cuando pinchemos en «Create New Child Theme» se activarán las pestañas superiores. Debemos seleccionar la que corresponde a los archivos «Files» y marcar el archivo «header.php» para duplicarlo. Podemos aprovechar y marcar otros archivos, como el «footer.php», por si necesitamos realizar cambios en un futuro.

migas de pan en Divi. archivo header
Duplicado del header.php y footer.pho

Una vez terminado el proceso, vamos a la pestaña «Apariencia > Temas» y activamos el nuevo tema hijo que hemos creado. No debemos eliminar el tema padre, ya que dejaría de funcionar la web.

Como ya no necesitaremos el plugin, podemos desactivarlo y borrarlo de nuestro WordPress. Es importante mantener nuestro sitio lo más limpio posible.

Instalar el plugin «Yoast SEO»

Este plugin es de los imprescindibles que debemos tener instalados, sea cual sea el tema que utilicemos. Nos ayudará a mejorar el SEO y, por consiguiente, el posicionamiento en internet. Dentro del curso avanzado de WordPress explico cómo configurar este potente plugin.

Entre las muchas opciones de este plugin, existe una para configurar las migas de pan.

Una vez instalado, accedemos a la opción «Apariencia en el buscador» del complemento Yoast SEO y seleccionamos la pestaña «Migas de Pan» (Bread Crumbs).

migas de pan o breadcrumbs en yoast seo
Activar migas de pan

Cuando activamos la pestaña, aparecen algunas opciones de configuración de las migas de pan y podemos configurar la apariencia básica que tendrán. Guardamos los cambios y hacemos scroll en la pantalla hasta abajo del todo.

Mostrar las migas de pan en Divi

Ya tenemos todo preparado, ahora queda decidir en que ligar colocaremos las migas de pan, para eso tenemos que pegar un código que encontraremos en la página de Yoast SEO en el archivo header.php del tema hijo.

Añadir el código de las migas de pan en Divi

Desde la ventana que hemos dejado abierta del plugin «Yoast SEO«, hay un link para copiar el código, en la sección llamada «Como insertar las migas de pan en tu tema«.

Código de las migas de pan en Divi con Yoast SEO
Link de acceso al código php

El código que encontraremos en la página, tenemos que añadirlo dentro de una etiqueta «div» HTML, así podremos adaptarlo mejor con la configuración del tema Divi, además añadimos una de las clases que trae el tema ya configurado al código php de Yoast SEO. El código completo que podéis utilizar es el siguiente:

Con el código copiado en el portapapeles, editamos el archivo header.php del tema hijo desde «Apariencia > Editor» y lo pegamos al final del documento, justo debajo de la última etiqueta HTML que encontremos.

Guardamos los cambios y ya podremos ver las migas de pan en Divi.

Migas de pan en Divi. Código header.php
Migas de pan en Divi. Código header.php

Si no queréis ocultar las migas de pan en Divi en la página de inicio, y esta tiene una cabecera transparente sobre la que está el menú, el código php de Yoast SEO hay que colocarlo dentro de las etiquetasdel archivo header.php, con la precaución de no meterlo dentro de ningún código php que ya exista.

Adaptar el aspecto visual de las migas de pan en Divi

El aspecto de las migas de pan se adapta con las hojas de estilo, yo os voy a proporcionar un código para que lo podáis utilizar y modificar a conveniencia.

Dentro del «Personalizador de Temas«, en la pestaña «CSS adicional«, pegamos las siguientes líneas:

El anterior código añade el estilo que queremos mostrar en la página, y la última parte oculta las migas de pan en la página de inicio y las que trae woocommerce por defecto, para dejar sólo las que hemos puesto nosotros.

Es importante que tengamos configurado el sitio para que tenga una página específica como página de inicio (ajustada desde la pestaña «Ajustes de portada» del personalizador de WordPress), de lo contrario, para ocultar las migas de pan tendremos que localizar la clase a la que hace referencia y sustituir «.home» por la nueva.

Podéis cambiar todos los valores, pero los más comunes son los siguientes:

  • Color del fondo, background-color: cambiar el valor hexadecimal del color por el que queráis. En este enlace podéis localizar el que más os guste.
  • Borde inferir, border-bottom: Si lo queréis eliminar lo borráis, si queréis cambiar el grosor o el color, es en esta línea donde se hace.
  • Altura de la franja, padding: el primer valor es para determinar la distancia entre el texto y el borde superior e inferior, el segundo valor para los lados.
  • Tamaño de la fuente, font-size: tamaño de la fuente en píxeles.
  • Color de la fuente, color: Color de la fuente en valor hexadecimal, podéis buscar el color en el mismo enlace del color de fondo.

Si tenéis alguna duda de cómo insertar las migas de pan en Divi, podéis dejar un comentario.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

16 Comentarios

  1. Emili Prades

    Hola Juan!

    Tengo instalado el tema Extra (child) desde hace tiempo y quería instaurar las Migas de Pan.

    Pero cuando voy al editor de temas y selecciono Extra Child solo aparecen tres carpetas; style.css, functions.php y footer.php.
    No aparece la carpeta header.php y no se porque ni como resolverlo.

    ¿Puedes echarme un cable?

    Gracias!!!

    Responder
    • Juan

      Hola Emili Prades, cuando creas el tema hijo (child theme) desde el plugin, en la pestaña «Files» tienes que seleccionar el archivo header.php para que se cree dentro de la carpeta del child theme. En el minuto 2:14 del vídeo puedes ver cómo se hace.

      Si ya creaste el tema hijo no hace falta que lo vuelvas a crear. Desde el mismo plugin puedes elegir la opción de modificar un tema ya creado, el que tengas, luego accede a la pestaña «files» y marca el archivo «header.php». guardas y ya lo tienes. Otra forma es hacerlo por FTP accediendo a los archivos, duplicas el archivo header del tema padre (Extra) y lo mueves a la carpeta del tema hijo.

      Responder
      • Emili

        Hecho!!
        Muchas gracias Juan!!

        Saludos y salud!!

        Responder
  2. José

    Muy agradecido por tu post, después de un par de días buscando una solución al css del breacrumbs llegaste tu a proporcionarla. Saludos cordiales.

    Responder
  3. Ernest

    La verdad es que tus consejos me han servido de gran ayuda, una pregunta que tengo, por defecto las migas de pan me salen demasiado a la izquierda de la pantalla, imagino que existe algún código para desplazar un poco el texto hacia la derecha verdad?

    Responder
    • Juan

      Hola Ernest,

      Una vez que insertas las migas de pan o «breadcrumbs» puedes adaptarlas a tu plantilla con CSS.
      En el personalizado, dentro de la pestaña «CSS adicional» puedes pegar este código que he personalizado exclusivo para tu web, no vale para otras plantillas ya que cada personalización es diferente. Espero que te solucione el problema.

      #breadcrumbs {

      width: 90% !important;

      max-width: 1170px;

      margin: auto;

      padding: 10px 15px;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      }
      @media (min-width: 992px) {
      #breadcrumbs {

      max-width: 970px;
      }
      }
      @media (min-width: 768px) {
      #breadcrumbs {
      max-width: 750px;
      }
      }

      Responder
      • Ernest

        Perfecto Juan, muchas gracias, me as ayudado mucho, de verdad te lo digo, seguiré visitando tu web y visitando tus post porque eres de los que mejor se explica, o mejor dicho, al menos yo te entiendo mejor que a otros jejejejjee, un fuerte abrazo.

        Responder
  4. Ariel

    Hola Juan!

    No se si has borrado mi consulta o que paso, pero ya no la veo. Vuelvo a hacer la consulta…

    Como adapto el codigo para mi theme I-Amaze ?

    Añadir una de las clases que trae el tema ¿Donde la encuentro?

    El código completo que podéis utilizar es el siguiente:

    if ( function_exists(‘yoast_breadcrumb’) ) {
    yoast_breadcrumb( ‘
    ‘,’
    ‘ );
    }
    ?>

    Claramente a mi no me funciona porque es otra plantilla. Me gustaría saber como has llegado a modificar el codigo, de donde has sacado la información, para que pueda aprender del tutorial y no sea solamente un tutorial para copy page

    Muchísimas gracias por tus enseñanzas 😉

    Responder
    • Juan

      Hola Ariel,

      Perdona que no contestara antes, recibo muchaos comentarios y en diferentes soportes que tengo que filtrar con diferentes preferencias.

      Este artículo lo escribí antes de que cambiaran el editor de WordPress a Gutenberg, y parece que algunos códigos de ejemplo se modificaron, poco a poco los voy corrigiendo, como en este caso.

      Esta información no está sacada de ningún sitio, sólo muestro las indicaciones que ofrece el mismo plugin Yoast SEO para implementar sus migas de pan. Puedes acceder desde el mismo plugin a la información (en inglés), como muestro en una de las imágenes del artículo.

      Prueba a utilizar lo nuevos códigos corregidos, pegalos al final del todo del archivo head de tu tema y luego acomódalos con CSS a tu gusto.

      Responder
  5. Ramon

    Hola Juan
    Antes que nada felicidades por todos tus videos y tu gran capacidad de comunicación.
    Quisiera preguntarte ¿la class que has introducido es solo válida para el tema DIVI o sería válida para otros temas, en mi caso, SALIENT?

    Muchas gracias y un saludo

    Responder
    • Juan

      El estilo creado en el artículo es sólo para DIVI, si quieres utilizarlo para otro tema tendrás que localizar que etiqueta HYML hace referencia a las migas de pan, y sustituir «et_pb_row» por la que indique tu tema.

      Responder
  6. Ángel

    Hola Juan:
    Probé a colocar las migas de pan tal como indicas y va perfecto!!
    Estoy tratando de que aparezcan solamente en pantallas de ordenador y no en teléfonos móviles, pero no doy con el código adecuado o lo coloco en el lugar equivocado.
    Creo que debería de ser sencillo hacerlo: dependiendo del número de px del ancho… Pero no lo consigo.
    ¿Puedes decirme cómo hacer para que se vea las migas de pan en pc y no se vean en móviles… o en taplets?
    Saludos y gracias de antemano.

    Responder
    • Juan

      Hola Ángel,
      Puedes ocultarlas con un código en las hojas de etilo, en la pestaña «Css adicional» del personalizador del tema, o dentro de las opciones de DIVI, abajo del todo de la pestaña «General», añade lo siguiente:

      @media only screen and (max-width: 1024px) {
      .migasdepan {
      display: none;
      }
      }

      Esto hará que cuando se muestre en un dispositivo con resolución menor a 1024px desaparezcan las migas de pan. Puedes cambiar la resolución a la que quieras que se oculten. Ten presente que si has cambiado el nombre de la etiqueta div del ejemplo del artículo, también tienes que cambiarlo en este fragmento de código.

      Responder
      • Ángel

        Muchas gracias Juan.
        Funciona perfectamente!!
        Estaba cometiendo errores tontos en el código.
        Muchas gracias por enseñar y orientar tan bien.

        Responder
  7. Javier

    He instalado las breadcrumbs tal y como describes y funciona todo, pero tengo un problema: me aparecen tambien en la página de inicicio, y me gustaría que ahí no apareciesen ya que no tienen ninguna utilidad.
    ¿Es posible desactivarlas en esta página de alguna forma?
    Gracias

    Responder
    • Juan

      Hola Javier, el artículo tiene ya un tiempo y está un poco desactualizado, así que en los próximos días lo cambiaré. De momento he cambiado los códigos que hay para que se adapten mejor las migas de pan. Puedes sustituirlos.
      El nuevo código oculta las migas de pan en la página principal y sustituye las que trae por defecto woocommerce si lo tienes instalado para tener una tienda online.

      Si te vale con lo que has hecho, y sólo quieres ocultar las migas de pan en la página de inicio, añade en la pestaña «Css adicional» a continuación de lo que ya tienes el siguiente código:
      .home .migasdepan {display: none;}

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Hosting WordPress de SiteGround

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido