¡Hola lector! ¿Has oído hablar de las migas de pan? Imagino que sí, por eso estás aquí. No son las que utilizaban Hansel y Gretel para marcar el camino de vuelta cuando se adentraron en el bosque.

Aún que, al igual que en el cuento, la funcionalidad es bastante parecida, las migas de pan en una página web sirven para que los usuarios naveguen entre sus contenidos de una manera más fácil e intuitiva.

Además de mejorar la experiencia de usuario también favorece al posicionamiento seo de tu web. Las migas de pan o breadcrumbs no dejan de ser enlaces internos, y estos enlaces permiten distribuir mejor el pagerank entre las distintas páginas de tu web.

Te voy a explicar dos métodos muy sencillos para que añadas las migas de pan en tu WordPress. El primero es aprovechando una funcionalidad del plugin Yoast SEO y el segundo con Breadcrumb NavXT.

⌛ Tiempo estimado del tutorial: 10 minutos

Cómo agregar las migas de pan con YoastSEO

Si aún no tienes instalado Yoast y no utilizas ningún otro plugin de SEO en tu sitio web, esta es una buena oportunidad para que empieces a usarlo.

Lo puedes instalar y activar desde el repositorio de plugins de WordPress:

instalar yoast seo wordpress

Agregar código PHP en nuestro tema WordPress

No te asustes, es mucho más fácil de lo que parece. Simplemente vamos a añadir unas líneas de código a nuestro tema para que muestre correctamente las migas de pan.

Añade este código en tu tema hijo o child theme, no lo edites en el tema principal ya que si lo haces así se te borrarán estos cambios cuando haya una nueva actualización.

Primero tenemos que elegir donde queremos que se muestren estas migas de pan, en función de eso debemos elegir editar un archivo u otro:

header page y single php

Header.php: Edita este archivo si quieres que las migas de pan aparezcan en todo tu sitio web.

Single.php: Si quieres que las migas solo aparezcan en las entradas de tu blog entonces edita este archivo.

Page.php: Añadiendolo en este archivo, aparecerán en todas las páginas de tu WordPress.

Este es el código que debemos añadir:

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
añadir codigo migas de pan headerphp

Habilitar migas de pan desde Yoast

Una vez hayamos agregado el código, vamos a nuestro panel WordPress > SEO > Apariencia de búsqueda > Migas de Pan

Y marcamos el botón de activar.

Podemos configurar y personalizar distintas opciones a nuestro gusto:

– Separador
– Texto del enlace para la página de inicio
– Prefijo de la ruta de las migas de pan
– Prefijo para los archivos
– Prefijo para las páginas de búsqueda
– Mensaje de error en resultados 404

activar migas de pan yoast seo

En este ejemplo voy a utilizar el tema por defecto que trae WordPress pero funciona con cualquier tema, incluso en Divi o Astra.

Aquí podemos ver como ya aparecen las migas de pan en nuestra web justa por encima de la entrada y por debajo de la cabecera.

ver migas de pan wordpress
[bctt tweet="Cómo añadir las Migas de Pan en tu WordPress paso a paso con YoastSEO y Breadcrumbs NavXT"]

Modificar apariencia migas de pan WordPress

Podemos aplicarle un estilo personalizado e incluso ajustar los márgenes, para ello vamos accedemos desde la barra superior a Personalizar > CSS Adicional

#breadcrumbs {
 
/*Añade el código personalizado aqui*/
 
}

En este ejemplo lo que he hecho es aplicarle un margen para que se ajuste con el título de las entradas. Pero le puedes aplicar cualquier tipo de estilo css.

editar apariencia migas de pan

Cómo se agregan las migas de pan utilizando un shortcode

Si quieres insertar el cajón de las migas en cualquier localización de tu web puedes utilizar el shortcode de Yoast.

[ wpseo_breadcrumb ] *Sin espacios entre los corchetes y el texto

Añadir las migas de pan con Breadcrumb NAVXT

De igual manera que con Yoast, lo primero es instalar y activar el plugin.

En cuanto esté instalado lo siguiente será agregar el código correspondiente en nuestro editor de temas.

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php
    if(function_exists('bcn_display'))
    {
            bcn_display();
    }?>
</div>

Una vez hayamos añadido este código en cualquiera de los 3 archivos que he mencionado anteriormente (header.php page.php o single.php) veremos como aparece en la parte superior de nuestra web.

Para esta prueba he utilizado otro de los temas que vienen por defecto en WordPress, pero como te he comentado antes, funciona en cualquier tema.

añadir migas de pan breadcrumb navxt

Configurar el plugin breadcrumbs WordPress

Desde el Ajustes > Breadcrumb Nav XT podemos acceder al panel de configuración de este plugin.

configurar plugin breadcrumb navxt

Nos permite editar de manera independiente las plantillas que se utilizarán en las migas de pan en función de la localización donde se muestre.

Ya sea en entradas, páginas, medios, taxonomías y búsquedas.

Cambiar apariencia con estilos CSS

Igual que con Yoast seo tenemos la posibilidad de aplicarle estilos CSS personalizados. En este caso el código que debemos utilizar desde la opción de Personalizar > CSS Personalizado

.breadcrumbs {
 
/*añade aquí tu estilo CSS Personalizado*/
 
}