Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment afficher les liens de navigation en fil d’ariane dans WordPress

Si vous cherchez un moyen de rendre votre site WordPress plus facile à naviguer, nous vous recommandons d’ajouter des liens de fil d’Ariane.

La navigation en fil d’Ariane indique aux utilisateurs/utilisatrices où ils se trouvent sur un site web par rapport à la page d’accueil. Ce chemin de navigation en fil d’ariane est ensuite également affiché dans les résultats de recherche, ce qui permet à votre site de se démarquer.

Nous utilisons les fils d’Ariane sur nos propres sites et nous avons constaté que cette fonctionnalité permet aux lecteurs de se déplacer plus facilement sur les différentes pages. Et dans cet article, nous allons vous montrer comment afficher des liens de navigation en fil d’Ariane dans WordPress.

How to display breadcrumbs navigation in WordPress

Qu’est-ce que la navigation en fil d’ariane et pourquoi en avez-vous besoin ?

La navigation fil d’ariane est un terme utilisé pour décrire un menu de navigation hiérarchique présenté sous la forme d’un chemin de liens. Elle est souvent utilisée comme navigation secondaire qui permet aux utilisateurs/utilisatrices de remonter dans la hiérarchie des pages du site.

Navigational links preview in WPBeginner

Les liens de navigation en fil d’ariane sont différents du système de menu de navigation par défaut de WordPress.

La navigation en fil d’ariane aide les utilisateurs à naviguer sur votre site et les moteurs de recherche à comprendre la structure et la hiérarchie des liens sur une page web.

Si vos fils d’ariane sont correctement configurés, les moteurs de recherche comme Google les afficheront avec le titre de la page dans les résultats de recherche. Cela donne à votre site une plus grande visibilité dans les résultats de recherche et augmente votre taux de clics.

Breadcrumb navigation links in search results

Les Réglages de ce guide vous aideront à configurer correctement les fils ariane en utilisant le balisage schema. Schema est un code de balisage intelligent qui aide Google à identifier vos fils d’ariane afin qu’ils s’affichent dans les résultats de recherche.

Ceci étant dit, voyons comment ajouter des liens de navigation fil d’ariane en WordPress. Nous allons vous afficher deux méthodes, et vous pourrez choisir celle qui vous convient le mieux :

Cette méthode est plus simple et recommandée pour tous les utilisateurs/utilisatrices de WordPress.

Pour cette méthode, nous utiliserons All in One SEO pour WordPress, qui est la meilleure extension de référencement WordPress sur le marché. Il vous aide à améliorer facilement votre référencement WordPress sans aucune compétence technique. Il est également livré avec une fonctionnalité de fil d’ariane facile à utiliser.

Remarque: il existe également une version gratuite de All in One SEO avec des fonctionnalités limitées, notamment les fils d’Ariane. Cependant, nous recommandons de passer à la version payante du plugin pour avoir accès à des fonctionnalités premium telles qu’un assistant de liens, des sitemaps avancés, et plus encore.

Une fois activé, vous accéderez à l’assistant de configuration du plugin. Vous pouvez suivre les instructions à l’écran pour configurer l’extension.

All in One SEO setup

Besoin d’aide pour la configuration ? Consultez notre tutoriel étape par étape sur la façon d’installer et de configurer All in One SEO.

Ensuite, vous devez vous rendre sur la page  » All in One SEO  » Réglages généraux et passer à l’onglet  » Fil d’ariane « .

Enable breadcrumbs in AIOSEO

Le balisage du schéma des fils d’ariane est automatiquement ajouté par All in One SEO au code de votre site afin que les moteurs de recherche puissent le trouver.

Toutefois, si vous souhaitez également afficher des liens de navigation fil d’ariane sur votre site, vous devez activer l’option « Activer les fils d’ariane ».

Le fait de permuter vous permet de voir les différents réglages d’affichage du fil d’ariane que vous pouvez utiliser sur votre site WordPress.

Show breadcrumbs on website options

Il existe quatre façons d’afficher le chemin de navigation en fil d’ariane sur votre site WordPress.

1. Ajout d’une navigation en fil d’ariane à l’aide du code court

La méthode du shortcode est facile et vous permet d’afficher des liens de navigation fil d’Ariane dans vos publications et pages WordPress ou dans les pages de produits de votre boutique en ligne.

Il suffit de modifier la publication, la page ou le produit et d’ajouter le code court suivant à l’endroit où vous souhaitez afficher le chemin de navigation en fil d’ariane :

[aioseo_breadcrumbs]

Si vous utilisez l’éditeur de blocs par défaut, le code court sera automatiquement converti en bloc Shortcode.

Add shortcode for breadcrumbs

Vous pouvez maintenant enregistrer votre publication ou votre page et la prévisualiser pour voir le menu de navigation fil ariane en action.

Voici ce que cela donne sur notre site de test.

Preview of shortcode breadcrumbs navigational links

2. Ajout d’une navigation fil d’ariane à l’aide du bloc Gutenberg.

Si vous ne souhaitez pas utiliser l’option du code court ou si vous ne vous souvenez pas du code court, vous pouvez afficher la navigation en fil d’ariane en utilisant le bloc AIOSEO – Breadcrumbs.

Il suffit de modifier la publication ou la page où vous souhaitez afficher la navigation fil d’ariane et d’ajouter le bloc AIOSEO – Breadcrumbs.

AIOSEO breadcrumbs block

L’extension chargera alors une Prévisualisation en direct de vos liens de navigation fil d’ariane et l’affichera dans la zone de contenu.

N’oubliez pas de mettre à jour ou de publier vos modifications.

AIOSEO breadcrumbs block preview

3. Ajout d’une navigation en fil d’ariane à l’aide d’un widget

Les deux méthodes ci-dessus vous obligent à ajouter un code court ou un bloc dans chaque publication ou page où vous souhaitez afficher des liens de navigation fil d’ariane.

Et si vous vouliez afficher automatiquement des fils d’ariane pour chaque publication ou page ?

Le widget «  fil d’ariane » de l’AIOSEO vous permet de le faire facilement.

Il vous suffit de vous rendre sur la page Apparence  » Widgets et d’ajouter le bloc widget AIOSEO – Fil d’Ariane. Vous pouvez l’ajouter à la colonne latérale de votre site, au pied de page ou à n’importe quelle zone de widget.

Add AIOSEO breadcrumbs to widget

Vous pouvez fournir un titre pour le widget ou le laisser vide si vous préférez.

N’oubliez pas de cliquer sur le bouton « Mettre à jour » pour stocker vos Réglages.

Enter breadcrumbs widget title

Vous pouvez maintenant visiter votre site et voir le menu de navigation en fil d’ariane sur toutes les publications et pages.

4. Ajout d’une navigation en fil d’ariane à l’aide d’un code

Cette méthode vous permet d’afficher les liens de navigation fil en driane exactement là où vous le souhaitez. Cependant, elle nécessite l’ajout de code dans les fichiers de votre thème WordPress.

Si vous ne l’avez pas encore fait, n’oubliez pas de consulter notre article sur l ‘ajout d’extraits de code dans WordPress.

Tout d’abord, vous devez décider où afficher les liens du fil d’Ariane. L’endroit le plus courant est sous le titre de la publication, de la page ou du produit.

Les thèmes WordPress utilisent des fichiers de modèles pour afficher les différentes sections de votre site. Par exemple, de nombreux thèmes utilisent un fichier appelé content-single.PHP situé dans le dossier template-parts de votre thème.

Consultez notre antisèche pour trouver les fichiers à modifier dans un thème WordPress.

Ensuite, vous devez modifier le fichier de votre thème à l’aide d’un client FTP. Consultez notre guide sur l’utilisation du FTP pour téléverser des fichiers sur WordPress pour obtenir des instructions.

Placez ensuite le code suivant à l’endroit où vous souhaitez afficher les liens de navigation en fil d’ariane :

<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>

N’oubliez pas d’enregistrer vos modifications et de téléverser le fichier sur votre site.

Vous pouvez maintenant visiter votre site pour voir les liens du fil ariane en action.

Preview of  breadcrumbs navigational links

Par défaut, All in One SEO utilise un Modèle pour afficher vos liens de navigation fil’driane. Il contient un lien vers votre page d’accueil, votre catégorie, votre page parente et le titre de la publication ou de la page, séparés par le symbole ‘ ».

Vous pouvez modifier cela en visitant la page All in One SEO  » Réglages généraux et en vous rendant sur l’onglet ‘Fil d’ariane’. Ensuite, défilez simplement vers le bas jusqu’à la section Réglages des fils d’ariane.

AIOSEO breadcrumbs settings

À partir de là, vous pouvez modifier le séparateur, afficher ou masquer le lien d’accueil, ajouter un préfixe, etc.

Une fois terminé, n’oubliez pas de stocker vos Réglages.

Méthode 2 : Ajouter la navigation en fil d’ariane avec Breadcrumb NavXT

Cette méthode peut être utilisée avec n’importe quel autre plugin WordPress SEO. Elle est facile à utiliser si vous avez un thème compatible, mais si vous n’en avez pas, vous devrez modifier les fichiers de votre thème pour afficher les liens de navigation du fil d’Ariane.

La première chose à faire est d’installer et d’activer l’extension Breadcrumb NavXT. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, vous devez visiter la page Réglages  » Fil d’ariane NavXT pour définir les paramètres de l’extension.

Breadcrumbs NavXT settings

Les réglages par défaut devraient convenir à la plupart des sites. Réglages : vous pouvez personnaliser les paramètres selon vos besoins.

La page des Réglages est divisée en plusieurs sections. Dans l’onglet des paramètres généraux, vous pouvez modifier le style et les Réglages de vos fils d’ariane.

Vous remarquerez également que ces marqueurs de liens utilisent la balise Schema.org dans le marqueur identifié.

L’onglet des types de publication sous les réglages du plugin vous permet de configurer des liens de fil ariane pour les articles, les pages et tout type de publication personnalisé.

Post types breadcrumbs settings

Vous pouvez choisir la manière dont vous souhaitez afficher la hiérarchie de vos publications. Par défaut, l’extension utilise la hiérarchie « Titre du site > Catégorie > Titre de la publication ».

Vous pouvez remplacer les catégories par des identifiants, des dates ou le parent de la publication et modifier le séparateur.

Choose post hierarchy

Les onglets Taxonomies et Divers proposent des modèles similaires pour vos liens de navigation en fil d’ariane.

N’oubliez pas d’enregistrer vos modifications lorsque vous avez terminé.

Breadcrumb NavXT offre plusieurs façons d’afficher des liens de navigation en fil d’ariane sur votre site.

1. Afficher la navigation fil d’ariane avec le support du thème

Certains des thèmes WordPress les plus populaires sont dotés d’une option intégrée permettant d’afficher la navigation fil d’ariane en choisissant Breadcrumb NavXT ou votre plugin WordPress SEO comme source.

Par exemple, si vous utilisez Astra, vous pouvez vous rendre sur la page Apparence  » Personnalisation et cliquer sur le menu ‘Fil d’Ariane’.

Choisissez ensuite l’emplacement des fils d’ariane dans le menu déroulant « Position de l’en-tête ».

Dans la section « Breadcrumb Source », vous devez choisir « Breadcrumb NavXT ».

Adding breadcrumbs with theme customizer

Si vous consultez une publication unique ou une page, vous verrez un aperçu direct de vos liens de navigation fil d’ariane.

N’oubliez pas de cliquer sur le bouton « Publier » pour enregistrer vos modifications.

2. Afficher les liens de navigation en fil d’ariane

Vous pouvez également afficher les liens de navigation en fil d’ariane en utilisant le bloc Chemin de navigation en fil d’ariane.

Il vous suffit de vous rendre dans votre éditeur/éditrice de contenu WordPress et d’ajouter le bloc Chemin Fil ariane à l’endroit où vous souhaitez afficher les liens de navigation.

Add breadcrumb trail block

Ensuite, vous pouvez mettre à jour ou publier votre contenu.

Ensuite, visitez votre site pour voir les liens de navigation en action.

Breadcrumb trail preview

3. Ajout d’une navigation en fil d’Ariane à l’aide d’un widget

L’extension fournit également un widget que vous pouvez utiliser pour afficher la navigation fil d’ariane dans la colonne latérale ou dans toute zone prête à recevoir un widget.

Tout d’abord, rendez-vous sur la page Apparence  » Widgets et ajoutez le bloc de widgets « Chemin de navigation d’ariane » à la zone de widgets de votre site, comme la colonne latérale ou le pied de page.

Add breadcrumb trail widget

Les réglages par défaut des widgets conviennent à la plupart des sites, mais vous pouvez les définir si nécessaire. Par exemple, vous pouvez vouloir masquer la piste sur la page d’accueil.

N’oubliez pas de cliquer sur le bouton « Mettre à jour » pour stocker les réglages de votre widget.

4. Ajout d’une navigation en fil d’ariane à l’aide d’un code

L’extension propose également une méthode de code pour afficher les liens de navigation en fil d’ariane pour les utilisateurs/utilisatrices avancés.

Tout d’abord, vous devez vous connecter à votre site WordPress à l’aide d’un client FTP. Ensuite, naviguez jusqu’au dossier de votre thème WordPress actuel situé dans le répertoire /wp-content/themes/.

Les thèmes WordPress utilisent des fichiers de modèles pour afficher les différentes sections de votre site. Par exemple, de nombreux thèmes utilisent un fichier appelé content-single.php situé dans le dossier template-parts de votre thème.

Consultez notre antisèche pour trouver les fichiers à modifier dans un thème WordPress.

Ouvrez le fichier de modèle pour le modifier, puis placez le code suivant à l’endroit où vous souhaitez afficher le chemin de navigation ariane :

<?php if( function_exists( 'bcn_display' ) ) bcn_display(); ?>

N’oubliez pas d’enregistrer vos modifications et de téléverser le fichier sur votre site.

Vous pouvez maintenant visiter votre site pour voir le chemin de navigation en liens d’ariane en action.

Breadcrumb trail preview

Tutoriel vidéo

Subscribe to WPBeginner

Nous espérons que cet article vous a aidé à apprendre comment afficher des liens de navigation en fil d’Ariane sur WordPress. Vous pouvez également consulter notre guide sur la façon d’afficher différents menus pour les utilisateurs connectés sur WordPress ou comment ajouter un méga menu sur votre site WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

36 commentairesLaisser une réponse

  1. 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!

  2. 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.

      Administrateur

  3. Surjeet Kumar Verma

    Thanks for sharing valuable content on breadcrumbs in WordPress. I really like it.

    • WPBeginner Support

      Glad our guide was helpful :)

      Administrateur

  4. 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 :)

      Administrateur

  5. 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?

  6. Varun

    Thank you finally problem is solved

    • WPBeginner Support

      Glad our recommendations could help :)

      Administrateur

  7. Hammad Rashid

    The plugin is awesome…. Thank You!

    • WPBeginner Support

      Glad we could recommend it :)

      Administrateur

  8. 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.

      Administrateur

  9. 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.

  10. 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 ?

  11. 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.

  12. DUy

    Is it posible to change the font size and the font color of Breadcrumb?

    thanks

  13. 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 ?

  14. 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.

  15. 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.

      Administrateur

  16. 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.

  17. 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.

  18. 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.

  19. Sunil

    Thanks for great post. Cheers!

  20. Raymond Chukwuman

    Thank you so much. It is really working on my website God bless you

  21. 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.

      Administrateur

      • 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.

  22. JOY

    Great! This is really useful! Thanks a lot! :)

  23. malek

    thanks you , really usefull

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.