Si busca una forma de facilitar la navegación por su sitio web en WordPress, le recomendamos que añada enlaces de migas de pan.
La navegación por migas de pan indica a los usuarios dónde se encuentran en un sitio web en relación con la página de inicio. Este rastro de migas de pan también se muestra en los resultados de búsqueda, lo que hace que su sitio web destaque.
Utilizamos migas de pan en nuestros propios sitios web y hemos comprobado que esta función facilita a los lectores el desplazamiento por las distintas páginas. Y en este artículo, le mostraremos cómo mostrar enlaces de navegación de migas de pan en WordPress.
¿Qué es la navegación por migas de pan y por qué es necesaria?
La navegación por migas de pan es un término utilizado para describir un menú de navegación jerárquico presentado como un rastro de enlaces. Suele utilizarse como navegación secundaria que permite a los usuarios subir en la jerarquía de páginas del sitio web.
Los enlaces de navegación de migas de pan son diferentes al sistema de menús de navegación por defecto en WordPress.
La navegación con migas de pan ayuda a los usuarios a navegar por su sitio web y a los motores de búsqueda a comprender la estructura y jerarquía de los enlaces de una página web.
Si las migas de pan están establecidas correctamente, los motores de búsqueda como Google las mostrarán junto con el título de la página en los resultados de búsqueda. De este modo, su sitio web tendrá más visibilidad en los resultados de búsqueda y aumentará su tasa de clics.
Los métodos de esta guía le ayudarán a establecer correctamente las migas de pan utilizando el marcado schema. Schema es un código de marcado inteligente que ayuda a Google a identificar tus migas de pan para que aparezcan en los resultados de búsqueda.
Dicho esto, vamos a ver cómo añadir migas de pan a los enlaces de navegación en WordPress. Le mostraremos dos métodos, y usted puede elegir el que mejor funcione para usted:
Método 1: Añadir migas de pan de navegación en WordPress usando All in One SEO (Recomendado)
Este método es más sencillo y recomendable para todos los usuarios de WordPress.
Para este método, vamos a utilizar All in One SEO para WordPress, que es el mejor plugin de WordPress SEO en el mercado. Le ayuda a mejorar fácilmente su WordPress SEO sin ningún conocimiento técnico. También viene con una característica fácil de usar migas de pan.
Nota: También existe una versión gratuita de All in One SEO con funciones limitadas, incluidas las migas de pan. Sin embargo, te recomendamos que actualices a la versión de pago para acceder a funciones premium como un asistente de enlaces, mapas de sitio avanzados y mucho más.
Una vez activado, accederá al asistente de configuración del plugin. Puede seguir las instrucciones en pantalla para establecer el plugin.
¿Necesita ayuda con la configuración? Consulte nuestra guía práctica sobre cómo establecer y configurar All in One SEO.
A continuación, debe visitar la página Todo en uno SEO ” Ajustes generales y cambiar a la pestaña “Migas de pan”.
All in One SEO añade automáticamente el esquema de migas de pan al código de su sitio web para que los motores de búsqueda puedan encontrarlo.
Sin embargo, si también desea mostrar enlaces de navegación con migas de pan en su sitio web, deberá activar la opción “Activar migas de pan”.
Conmutando el conmutador podrá ver los diferentes ajustes de visualización de migas de pan que puede utilizar en su sitio web WordPress.
Hay cuatro formas de mostrar la ruta de navegación de migas de pan en su sitio web WordPress.
1. Añadir migas de pan de navegación utilizando el shortcode
El método shortcode es fácil y te permite mostrar enlaces de navegación breadcrumb en tus entradas y páginas de WordPress o páginas de producto en tu tienda online.
Simplemente edite la entrada, página o producto y añada el siguiente shortcode donde desee mostrar la ruta de navegación de migas de pan:
[aioseo_breadcrumbs]
Si utiliza el editor de bloques por defecto, el shortcode se convertirá automáticamente en el bloque Shortcode.
Ahora puedes guardar tu entrada o página y verla previa para ver el menú de navegación de migas de pan en acción.
Así se ve en nuestro sitio de prueba.
2. Cómo añadir navegación con migas de pan mediante el bloque de Gutenberg
Ahora bien, si no desea utilizar la opción shortcode o no recuerda el shortcode, entonces puede mostrar la navegación con migas de pan utilizando el bloque AIOSEO – Migas de pan.
Simplemente edite la entrada o página en la que desea mostrar la navegación con migas de pan y añada el bloque AIOSEO – Migas de pan.
El plugin cargará una vista previa en directo de sus enlaces de navegación con migas de pan y la mostrará en el área de contenido.
No olvides actualizar o publicar tus cambios.
3. Añadir navegación por migas de pan mediante widget
Los dos métodos anteriores requieren que usted añada un shortcode o bloque en cada entrada o página en la que desea mostrar migas de pan enlaces de navegación.
¿Y si quisiera mostrar automáticamente migas de pan para cada entrada o página?
El widget de migas de pan de AIOSEO le permite hacerlo fácilmente.
Simplemente vaya a la página Apariencia ” Widgets y añada el bloque de widget AIOSEO – Migas de pan. Puede añadirlo a la barra lateral de su sitio, al pie de página o a cualquier zona de widgets.
Puede dar un título al widget o dejarlo en blanco si lo prefiere.
No olvides hacer clic en el botón “Actualizar” para guardar tus ajustes.
Ahora puede visitar su sitio web y ver el menú de navegación de migas de pan en todas las entradas y páginas.
4. Añadir navegación por migas de pan mediante código
Este método le permite enlazar migas de pan exactamente donde usted quiera. Sin embargo, requiere que añada código a los archivos de su tema de WordPress.
Si no lo ha hecho antes, no olvide consultar nuestro artículo sobre cómo añadir fragmentos de código en WordPress.
En primer lugar, debe decidir dónde mostrar los enlaces de migas de pan. El lugar más habitual es debajo del título de cada entrada, página o producto.
Los temas de WordPress utilizan archivos de plantilla para mostrar diferentes secciones de su sitio web. Por ejemplo, muchos temas utilizan un archivo llamado content-single.php que se encuentra dentro de la carpeta template-parts del tema.
Consulte nuestra hoja de trucos para saber qué archivos debe editar en un tema de WordPress.
Después de eso, necesitas editar el archivo de tu tema usando un cliente FTP. Consulte nuestra guía sobre cómo utilizar FTP para subir archivos a WordPress para obtener instrucciones.
A continuación, coloque el siguiente código donde desee mostrar los enlaces de navegación breadcrumb:
<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>
No olvides guardar los cambios y volver a subir el archivo a tu sitio web.
Ahora puede visitar su sitio web para enlazar las migas de pan.
Cambiar la forma de enlazar las migas de pan en AIOSEO
Por defecto, All in One SEO utiliza una plantilla para enlazar sus migas de pan. Contiene un enlace a su inicio, categoría, página principal, y el título de la entrada o página separados por el símbolo ‘” ‘.
Puedes cambiar esto visitando la página Todo en Uno SEO ” Ajustes Generales y encabezando la pestaña ‘Migas de pan’. A continuación, simplemente desplácese hacia abajo hasta la sección de ajustes de migas de pan.
Desde aquí, puede cambiar el separador, mostrar u ocultar el enlace de inicio, añadir un prefijo, etc.
Una vez que hayas terminado, no olvides guardar tus ajustes.
Método 2: Añadir navegación por migas de pan con Breadcrumb NavXT
Este método se puede utilizar con cualquier otro plugin SEO para WordPress. Es fácil de usar si tienes un tema compatible, pero si no lo tienes, entonces tendrás que editar los archivos de tu tema para mostrar tus enlaces de navegación breadcrumb.
Lo primero que debe hacer es instalar y activar el plugin Breadcrumb NavXT. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado, debe visitar la página Ajustes ” Migas de pan NavXT para establecer los ajustes del plugin.
Los ajustes por defecto deberían funcionar para la mayoría de los sitios web. No obstante, puede personalizar los ajustes según sus necesidades.
La página de ajustes está dividida en diferentes secciones. En la pestaña de ajustes generales, puede cambiar el estilo y los ajustes de sus migas de pan.
También advertirá que estas plantillas de enlace utilizan el marcado Schema.org en la etiqueta de enlace.
La pestaña de tipos de entradas en los ajustes del plugin le permite establecer enlaces de migas de pan para entradas, páginas y cualquier tipo de contenido personalizado.
Puedes elegir cómo quieres mostrar la jerarquía de tus entradas. Por defecto, el plugin utilizará la jerarquía ‘Título del sitio > Categoría > Título de la entrada’.
Puede sustituir las categorías por etiquetas, fechas o el padre de la entrada y cambiar el separador.
Las pestañas Taxonomías y Varios tienen plantillas similares para enlazar sus migas de pan.
No olvides guardar los cambios cuando hayas terminado.
Breadcrumb NavXT ofrece múltiples formas de enlazar migas de pan en su sitio web.
1. Mostrar navegación por migas de pan con soporte de temas
Algunos de los temas más populares de WordPress vienen con una opción integrada para mostrar la navegación de migas de pan eligiendo Breadcrumb NavXT o su plugin WordPress SEO como fuente.
Por ejemplo, si utiliza Astra, puede ir a la página Apariencia ” Personalizador y hacer clic en el menú “Migas de pan”.
A continuación, elija dónde desea que se muestren las migas de pan en el menú desplegable “Posición de la cabecera”.
En “Fuente de migas de pan”, deberá elegir “NavXT de migas de pan”.
Si estás viendo una sola entrada o página, verás una vista previa en directo de tus enlaces de navegación con migas de pan.
No olvides hacer clic en el botón “Publicar” para guardar los cambios.
2. Mostrar enlaces de navegación con el bloque de migas de pan
También puede enlazar las migas de pan mediante el bloque Rastro de migas de pan.
Simplemente diríjase a su editor de contenido de WordPress y añada el bloque Ruta de migas de pan donde desee mostrar los enlaces de navegación.
A continuación, puede actualizar o publicar sus contenidos.
Después, visite su sitio web para ver los enlaces de navegación en acción.
3. Añadir navegación por migas de pan mediante un widget
El plugin también proporciona un widget que puede utilizar para mostrar la navegación de migas de pan en la barra lateral o en cualquier zona preparada para widgets.
En primer lugar, vaya a la página Apariencia ” Widgets y añada el bloque de widgets “Ruta de migas de pan” a la zona de widgets de su sitio, como la barra lateral o el pie de página.
Los ajustes por defecto del widget servirían para la mayoría de los sitios web, pero puedes cambiarlos si es necesario. Por ejemplo, puede que desee ocultar el rastro en la página de inicio.
No olvides hacer clic en el botón “Actualizar” para guardar los ajustes de tu widget.
4. Añadir navegación por migas de pan mediante código
El plugin también ofrece un método de código para mostrar enlaces de navegación con migas de pan para usuarios avanzados.
En primer lugar, debe conectarse a su sitio de WordPress mediante un cliente FTP. A continuación, vaya a la carpeta de temas de WordPress que se encuentra en el directorio /wp-content/themes/.
Los temas de WordPress utilizan archivos de plantilla para mostrar diferentes secciones de su sitio web. Por ejemplo, muchos temas utilizan un archivo llamado content-single.php ubicado dentro de la carpeta template-parts de su tema.
Consulte nuestra hoja de trucos para saber qué archivos debe editar en un tema de WordPress.
Abra el archivo de plantilla para editarlo y, a continuación, coloque el siguiente código donde desee mostrar el rastro de migas de pan:
<?php if( function_exists( 'bcn_display' ) ) bcn_display(); ?>
No olvides guardar los cambios y volver a subir el archivo a tu sitio web.
Ahora puede visitar su sitio web para ver el rastro de las migas de pan enlazadas en acción.
Tutorial en vídeo
Esperamos que este artículo te haya ayudado a aprender cómo mostrar enlaces de navegación breadcrumb en WordPress. Puede que también quieras ver nuestra guía sobre cómo mostrar diferentes menús a usuarios registrados en WordPress o cómo añadir un mega menú en tu sitio WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Steven Jæger
I have tried different breadcrumbs variants now also the NavXT. The breadcrumb show up and all looks fine.
My main menu are based on pages. My articles are made as posts, I add them in categories. It’s when I visit an article and try to use a link in the breadcrumb to go back one step it goes wrong.
WPBeginner Support
You may want to resave your permalinks to ensure there wasn’t a hiccup there, otherwise, you would need to reach out to the support for the plugin you are currently using for the support to take a look.
Administrador
Surjeet Kumar Verma
Thanks for sharing valuable content on breadcrumbs in WordPress. I really like it.
WPBeginner Support
Glad our guide was helpful
Administrador
Rintesh Roy
The plugin is not at all documented. At least, I could not find any.
WPBeginner Support
The documentation for the plugin is linked on the plugin’s page
Administrador
Elizabeth Morgan
I am using the Breadcrumb NavXT plugin and I added the code you suggested to my header.php file and it gave me this error:
“Your PHP code changes were rolled back due to an error on line 68 of file wp-content/themes/generatepress/header.php. Please fix and try saving again.
syntax error, unexpected ‘<', expecting end of file"
What do I do about this?
WPBeginner Support
There are a few possible reasons, you may want to take a look at our article here: https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Administrador
Varun
Thank you finally problem is solved
WPBeginner Support
Glad our recommendations could help
Administrador
Hammad Rashid
The plugin is awesome…. Thank You!
WPBeginner Support
Glad we could recommend it
Administrador
Andres
Hi WPBeginner,
Amazing post.
I wonder the following.
How do you make the “home” breadcrumb (in your case WPBEGINNER) appear in blogs and posts but not in your HOME page.
I mean, when you go “home” I dont see the breadcrumb, but when I click on other page I see the breadcrumb.
Thanks a lot for your time.
Editorial Staff
In our theme, we have it set to only add breadcrumbs on singular pages and not the homepage template.
Administrador
Manish Ransubhe
Hello, I am not using any plugin and I have never enabled Breadcrumbs.
Why my search Result showing breadcrumbs help me to disable this
Thank you
Ravi Singh
same problem happened with me. So I check my theme panel and my theme had enabled breadcrumbs. you can also check your theme panel for more info about this. and I was using Newspaper theme. So if you are also using this theme then it is the one who is create difficulties for you. Disable it from there.
Dua Centre
I have used seo yoast plugin. Breadcrumbs are being displayed on my webpages but not google search results . When will they start displaying in google search result as well ?
Walter
Hello! Do you know if is it possible to insert the breadcrumbs inside the menu? I have to design a website with a vertical side menu, and the customer wants to have the breadcrumbs at the bottom of the menu.
DUy
Is it posible to change the font size and the font color of Breadcrumb?
thanks
Sameer
Hello,
I’m using breadcrumbs using the Yoast SEO method, But it’s only showing on homepage it’s not showing in Google Search.
Ex : the ideal structure should be Domain.com>Category but it’s showing as Domain.com/Category. can you please tell me how to implement this ?
Joshua
Hello.. I am using breadcrumb navxt and its widget is working. I inserted the code for the header.php using “insert header and footer” plugin but I can’t see any changes to my site even after saving and refreshing it.
Pls help, because the widgets area is working but no breadcrumb is showing in my sites header.
juan luis
Hi. I’m afraid to manipulate codes. In case something goes wrong, can I just delete the inserted code without consequences?
WPBeginner Support
Hi Juan,
If you don’t want to use code method, then you can try the plugin method. This way you will be able to undo changes by simply deactivating the plugin.
Administrador
Nate Balcom
By the way I’m using the Yoast code that you have above and it doesn’t display the correct hierarchy. It omits a link for categories, projects, galleries. Anything that isn’t a post basically gets handled the same way. It’s close, but not correct.
Nate Balcom
Thanks for posting this. I’ve been looking for a way to properly display my breadcrumb trail for the spiders. It gets a bit jenky with categories, projects, galleries and the like. I’ve been hand coding mine, but the php handles the hierarchy in the incorrect order. This is a huge help.
Anna
My child theme (GeneratePress, from their own child theme download) doesn’t have a header.php file.
I’ve added the code into the parent GP theme header.php and the breadcrumbs are working now. But when I update GP …?
subhan
Just copy the header.php to the the generate press child theme forlder.
Sunil
Thanks for great post. Cheers!
Raymond Chukwuman
Thank you so much. It is really working on my website God bless you
Abiodun
I followed the steps, didn’t really work for me with the posts. I just saw the ‘Home Breadcrumbs’on my homepage. How do I make it appear for my posts please? I’m using Yoast SEO
WPBeginner Support
Breadcrumbs should automatically appear. If they don’t then please contact your theme’s support.
Administrador
Abiodun
It worked…but the category do not appear before my posts, I just get Home>>posts title. How do I make categories appear before posts?
Michelle
Hey! You have to set a parent page for your page that you are publishing. mine was only showing home > current page until i set the current page as ‘child’ of the articles page, and the articles page as ‘child’ of the homepage. you can do it in the page editor.
JOY
Great! This is really useful! Thanks a lot!
malek
thanks you , really usefull