¡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:
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.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:
<?phpif ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );}?>
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
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.
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.
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
Relacionado con este tema
Wp hide login: Plugin para proteger el acceso al panel de adminitracion
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.
Configurar el plugin breadcrumbs WordPress
Desde el Ajustes > Breadcrumb Nav XT podemos acceder al panel de configuración de este plugin.
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*/}
¡Hola! Soy Matías Romero, diseñador web y consultor de SEO local. Me verás por aquí hablando de diseño web, wordpress, consejos de SEO, Google Maps y lo que se me vaya ocurriendo.
Nos vemos en las SERPS 😉
Hola! muy buen post! He incluido el codigo en header y aparece demasiado arriba, justo incluso antes del menú en lugar de debajo del H1 o un poco antes. ¿Cómo se puede arreglar esto?
Gracias!
Hola, Ana,
Necesitaría saber un poco más de información para darte una respuesta ¿Que plantilla estás utilizando? Y que metodo has utilizado para activar las migas de pan ¿Yoast, NAVxt u otro?
Buenas, fantástico tutorial.
Tengo un problema a la hora de implementarlo ya que cuando voy a mi childtheme no me aparece el archivo single.php para poder añadir el código para que funcione en las entradas.
¿Lo añado entonces al single.php del tema principal?
Gracias de antemano, un saludo.
Gracias por tu comentario, mirk. Exacto puedes agregarlo en el single.php del tema principal o incluso replicar ese archivo y copiarlo dentro de la carpeta del childtheme, de ambas maneras deberia funcionarte. Ya me vas comentando. Un saludo.