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.
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.
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".
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.
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.
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).
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".
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:
1 2 3 4 5 6 7 | <div class="migasdepan"> <?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb( '<p id="breadcrumbs">','</p>' ); } ?> </div> |
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.
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /*--MIGAS DE PAN--*/ .migasdepan { width: 100% !important; position: relative; z-index: 1; background:#F1F1F1 !important; border-bottom: 1px solid #ddd; } .migasdepan .et_pb_row { padding: 5px; } #breadcrumbs { font-size: 12px; line-height: 1.3em; color: #000; } .home .migasdepan, .woocommerce-breadcrumb { display: none; } |
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.
Divi Cloud, el diseño de páginas web en la nube- Configurar copias de seguridad con UpdraftPlus en WordPress
- Quitar el link principal de un menú desplegable en WordPress
- Poner la fecha de actualización en las entradas de WordPress
- Añadir funciones personalizadas en WordPress sin usar un tema hijo
- Cómo diseñar una landing page creada con Divi y Extra
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!!!
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.
Hecho!!
Muchas gracias Juan!!
Saludos y salud!!
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.
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?
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;
}
}
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.
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 😉
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.
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
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.
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.
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.
Muchas gracias Juan.
Funciona perfectamente!!
Estaba cometiendo errores tontos en el código.
Muchas gracias por enseñar y orientar tan bien.
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
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;}