Mostrar migas de pan en WordPress

  Introducción

Te presentamos Arkibot,
nuestra nueva herramienta de chatbot.

Pruébala por 9,90€ + impuestos al mes y automatiza el trabajo aburrido.

Ahorra tiempo y dinero aquí

¿Quieres mostrar enlaces de navegación en tu WordPress y no sabes cómo?

¿Te estés preguntando qué son las migas de pan? Si, no te estoy hablando las que dejas en la mesa después de comer, sino las de tu sitio web. Las migas de pan son un sistema de navegación secundaria para indicar a los usuarios dónde se encuentren en tu web con respecto a la página de inicio.

Hay varias formas de añadir la ruta de navegación interna del sitio web, de artículos de tu blog, o de productos de tu tienda con WooCommerce, solo es cuestión de decidir qué método se adapta mejor a tu Tema y tus necesidades, porque no te voy a engañar, esta funcionalidad no es nativa de WordPress y requiere toquetear un poco el código de tu tema para que se muestre la ruta de migas de pan de forma correcta. Pero ¿quién dijo miedo? 😜

En este artículo te voy a contar cómo mostrar migas de pan en WordPress.

  ¿Qué son las migas de pan y por qué las necesitas?

Las migas de pan es un término usado para describir el menú de navegación jerárquica que se presenta como una secuencia de enlaces. Esto se utiliza como navegación secundaria que le permite a los usuarios ir hacia adelante y hacia atrás en la jerarquía de los enlaces.

Se las conoce también como breadcrumbs y marcan la ruta hasta el contenido visualizado en el navegador por parte de usuarios de una web.

Las migas de pan son diferentes al sistema de menús de navegación que tiene WordPress por defecto.

El propósito de las migas de pan es ayudar a los usuarios a navegar por una página web y a entender dónde están ubicados en un sitio.

También ayuda a los motores de búsqueda a entender la jerarquía de los enlaces en una página web. Los motores de búsqueda como Google han comenzado a mostrar las migas de pan debajo del título del sitio en los resultados de búsqueda. Esto le da a tu sitio web más visibilidad en los resultados y aumenta la tasa de clics.

Dicho esto, vamos a ver de qué forma podemos añadir enlaces de navegación de migas de pan en WordPress.

  Mostrar migas de pan en WordPress con el plugin Breadcrumb NavXT

Esta es la forma más sencilla de añadir migas de pan en WordPress. El uso de este plugin es fácil, flexible, y tiene diversas opciones para configurar.

Con este plugin puedes crear rutas o breadcrumbs en tu sitio, principalmente en tu Blog y otros contenidos de similar naturaleza como pueden ser custom post types.

Permite su personalización, como verás a continuación, y cabe destacar las siguientes características:

• Genera migas de pan compatibles con Scgema.org.
• Incorpora un widget para su uso específico.
• Es compatible con los plugins de traducción WPML y Polylang.
• Es compatible con el plugin de Foros bbPress.
• Es compatible con el plugin de intranet BuddyPress.

También incorpora un bloque de “Migas de Pan” para quienes utilicen el editor de bloques Gutenberg, que permite añadirlo en Entradas, en la posición deseada, para mostrar la “ruta de navegación” a los visitantes.

Una vez se inserta en una determinada entrada, se visualizará en el lugar indicado mostrando la ruta jerárquica del contenido.

  Configuración de Breadcrumb NavXT

Ahora te voy a mostrar las migas de pan utilizando Breadcrumb NavXT.

Lo primero que hay que hacer es instalar y activar el plugin Breadcrumb NavXT.

Tras la activación, es necesario ir a la página Configuración » Breadcrumb NavXT para configurar el plugin.

La configuración que viene por defecto debería funcionar para la mayoría de los sitios web. Ahora, si quieres hacer cambios para personalizar la configuración según lo necesites, puedes usar la página de configuración.

En Configuración general, se puede definir cómo se comporta el plugin a nivel general.

En esta pestaña realizas la configuración de:

• General
• Ítem actual
• Incluir Inicio (Home)
• Incluir Inicio (del Blog)
• Migas del sitio principal

En el primer apartado General básicamente determinas qué elemento será el que se use para separar las rutas.

Puedes por ejemplo utilizar alguno de los siguientes (se muestran separados por espacios):

> » | -> >> - · 

Sin embargo para poder utilizar algunos de ellos, sobre todo los que incluyan símbolos como > tienes que convertirlos primero a HTML, para lo que puedes utilizar este conversor online de ASCII a HTML para realizar dicho paso. El resultado seria:

Si por ejemplo vas a utilizar el segundo símbolo » tendrías que poner & raquo;, (todo junto) y lo mismo para cualquier otro símbolo ASCII que quieras poner como separador de ruta.

También podrás elegir cómo deseas mostrar la jerarquía de tus entradas.

Por defecto el plugin usará Título del Sitio > Categoría > Título de la entrada. Puedes reemplazar las categorías por las etiquetas, fechas o entradas que estén por encima.

Las taxonomías y las fichas de autor tienen patrones similares para sus enlaces de migas de pan.

No olvides guardar cambios una vez que hayas configurado todo 🙂

El plugin requiere hacer algunas modificaciones en un archivo de tu plantilla de WordPress.

Es necesario añadir este código en tu plantilla, en el lugar en donde quieras mostrar las migas de pan, usualmente en el archivo header.php (o archivo similar de tu plantilla que muestra la cabecera), también puedes usar el archivo

header.php

del tema hijo (child theme) en caso hayas configurado un tema hijo (recomendable) añadiendo dicho código al final del mismo.

/** Añadir breadcrumbs con el plugin Breadcrumb NavXT */
if(function_exists('bcn_display'))
    {
        bcn_display();
    }
?>

Una vez modificado este archivo, eso es todo. Ahora ya puedes ver las migas de pan visitando cualquier entrada o página de tu sitio.

  Mostrar migas de pan en WordPress con el plugin Yoast SEO

De la misma manera que puedes utilizar un plugin específico para “breadcrumbs” también puedes hacer uso de plugins para SEO como Yoast SEO o Rank Math, para configurar y mostrar las “migas de pan” en tu sitio web.

Lo primero que tienes que hacer es instalar y activar el plugin Yoast SEO. Es muy probable que ya tengas instalado este plugin, es uno de los plugins esenciales que deberías tener en tu web.

Por lo que es una ventaja usar este plugin en este caso, si no quieres agregar otro plugin a tu web.

Ya dentro del plugin Yoast SEO, debes ir a la siguiente ruta y seleccionar la opción Migas de Pan.

Yoast SEO   Apariencia buscador   Migas de Pan   Ajustes migas de pan

En este apartado podrás establecer el separador (en este caso no es necesario convertirlo a HTML), qué texto antecede al enlace de página o entrada, prefijo de ruta y archivo (si lo vas a utilizar, sino déjalo en blanco) y si quieres que la ruta (breadcrumbs) se muestre en negrita para destacarse de otros contenidos de tu web.

Una vez hecho esto, tienes varias opciones para mostrar las migas de pan en tu sitio.

Algunas plantillas de WordPress soportan las migas de pan configurándolas con el plugin Yoast sin modificar nada.

Puedes verificarlo visitando tus páginas y entradas para ver si se muestras las migas de pan.

Si el tema no muestra automáticamente las migas de pan, entonces tendrás que añadir un pequeño fragmento de código a tu plantilla de WordPress.

Puedes añadir el siguiente código en tu plantilla en el archivo header.php (o archivo similar de tu plantilla que muestra la cabecera como single.php y/o page.php), también puedes usar el archivo header.php del tema hijo en caso hayas configurado un tema hijo y añadir el código al final de dicho archivo.

<?php if ( function_exists('yoast_breadcrumb') )
	{yoast_breadcrumb('<p id="breadcrumbs">','</p>');
}?>

Ya con esto hecho, ahora puedes visitar tu sitio web para ver las migas de pan en acción.

  Conclusiones

Mostrar la ruta de navegación interna de tu sitio web es tan importante como publicar el sitemap de tu sitio para los visitantes, no solo para los robots de indexado de contenidos para motores de búsqueda, ya que facilita que quienes se pasean por tu sitio sepan donde están con respecto a la página principal del sitio (home) y puedan ser capaces de ir hacia atrás en la ruta dentro de la jerarquía de tus menús o contenidos.

Además el uso de breadcrumbs es bueno para el SEO de tu web y mejora muchísimo la experiencia del usuario, pues frente a un sitio que no tenga establecidas “migas de pan” las tasas de abandono pueden suceder con mayor frecuencia que si existe una ruta que incite al visitante a descubrir otros apartados o contenidos por medio de la navegación que ofrece breadcrumb en tu sitio web.