Logo Sistemas Olympia

Agregar breadcrumb (Migas de pan) en WordPress en el tema Divi

Uriel Antonio Hurtado Arias

El tema Divi de Eleganthemes no tiene un módulo que permita agregar las migas de pan o breadcrumb a la plantilla.

El proceso para instalar y activar las migas de pan incluye la instalación de un tema hijo (Child theme) y el plugin Yoast SEO.

Para crear el child theme puede usarse un plugin llamado “Child Theme Configuration” teniendo en cuenta copiar los archivos functions.php, header.php, y footer.php y pinchando la casilla del numeral 8 para que guarde los cambios en caso de actualizar la plantilla principal de Divi.

Una vez creado el tema hijo debemos activarlo y mediante FTP accedemos al archivo header.php y agregamos al final el siguiente código:

 

<!-- aqui empiezo el breadcrumb -->	    

<div class="migasdepan">

       <?php  if ( function_exists('yoast_breadcrumb') ) {

yoast_breadcrumb( '

<p id="breadcrumbs" class="et_pb_row">','</p>

' );

}

?>

</div>

El código CSS es el siguiente

/*--MIGAS DE PAN--*/
.migasdepan {
width: 100% !important;
position: relative;
z-index: 1;
background:#000 !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;
}

Para evitar que las migas de pan se vean en un dispositivo menor que 1024 px


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