skip to Main Content

Comment afficher un fil d’Ariane sur votre blog WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Voulez-vous afficher un fil d’Ariane sur votre blog WordPress ? Le fil d’Ariane est un système de navigation secondaire permettant d’indiquer aux utilisateurs leur position dans un site par rapport à la page d’accueil. Dans cet article, nous allons vous montrer comment afficher le fil d’Ariane ou Breadcrumb.

breadscrumb-bpc

C’est quoi fil d’Ariane et pourquoi en avez-vous besoin?

Le fil d’Ariane est un terme utilisé pour décrire un menu de navigation hiérarchique présenté comme un chemin de liens. Il est souvent utilisé comme un système de navigation secondaire et permet aux utilisateurs de monter/descendre dans la hiérarchie des liens.

Les liens de navigation Breadcrump sont différents du menu de navigation par défaut de WordPress.

Le but du Breadcrump est d’aider les utilisateurs à comprendre où ils se trouvent dans un site. Il aide également les moteurs de recherche à comprendre la hiérarchie des liens sur une page web.

Les moteurs de recherche comme Google ont commencé à afficher des liens de navigation en dessous des titre de sites dans les résultats de recherche. Cela donne à votre site une plus grande visibilité dans les résultats et augmente votre taux de clic.

fildariane-google

Nous allons à présent voir comment ajouter un fil d’Ariane sur votre blog WordPress.

La mise en place du fil d’Ariane à l’aide du plugin Breadcrump NavXT

Ceci est de loin le moyen le plus facile pour mettre en place une navigation Breadcrump sur un site WordPress. Il est très flexible, facile à utiliser, et dispose de bien plus d’options que vous pouvez imaginer.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

La première chose à faire c’est d’installer et activer le plugin Breadcrump NavXT. Après l’activation, vous devez aller à la page Paramètres »Breadcrump NavXT pour configurer les paramètres du plugin.

breadcrumbnavxt-settings

Les paramètres par défaut devrait fonctionner pour la plupart des sites. Mais vous pouvez personnaliser les paramètres en fonction de vos besoins.

La page des paramètres est divisée en différentes sections. Dans l’onglet « General », vous pouvez définir comment le plugin se comporte globalement sur votre site.

Vous pouvez y modifier le modèle de liens de navigation. Vous remarquerez alors que ces modèles de liens utilisent les paramètres de schema.org dans l’étiquette du lien.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

L’onglet « Post Types« , dans les paramètres du plugin, vous permet de configurer les liens de navigation en fonction des articles, pages, et tous autres types de publication personnalisée.

Vous pouvez choisir comment vous souhaitez afficher la hiérarchie des publications. Par défaut le plugin utilisera Titre du site> Catégorie> Titre de la publication. Vous pouvez remplacer les catégories avec des étiquettes, des dates ou des articles parents.

Les onglets « Taxonomies » et « Miscellaneous » ont des modèles similaires pour vos liens de navigation Breadcrump. Enfin, veuillez à cliquer sur le bouton « Enregistrer les modifications », pour sauvegarder vos réglages.

L’apparence de Breadcrump NavXT sur votre site

Le plugin nécessite quelques modifications dans des fichiers du thème ou encore du thème enfant sur lequel vous souhaitez mettre en place la navigation Breadcrump. Vous devez notamment ajouter ce code au fichier « header.php » du thème en  question.

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

Et voilà! Vous pouvez à présent ouvrir votre site et voir les liens de navigation Breadcrump en visitant un article ou une page.

La mise en place du fil d’Ariane à l’aide du plugin Yoast SEO

La première chose à faire c’est d’installer et activer le plugin Yoast SEO. Nous allons aller étape par étape.

Lors de l’activation, vous devez aller à la page SEO »advanced et cocher l’option « Enable Breadcrumps » (Activer le fil d’Ariane).

yoastbreadcrumb-1Vous trouverez plusieurs options vous permettant modifier l’apparence de Breadcrump sur votre site. Les paramètres par défaut devrait fonctionner, mais vous êtes libre de les changer comme vous le souhaitez.

Une fois que vous avez terminé, cliquez sur le bouton « Enregistrer les modifications« .

L’apparence de Yoast sur votre site

Certains thèmes WordPress sont déjà compatibles à la navigation Breadcrump de Yoast. Pour voir si votre thème affiche les liens de navigation Breadcrump, allez juste sur votre site Web et cliquez sur n’importe quel article ou page.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Si votre thème ne présente pas automatiquement une navigation Breadcrump, vous devrez alors ajouter un petit extrait de code à votre thème WordPress.

Il suffit d’ajouter ce code dans le fichier « header.php » de votre thème ou encore votre thème enfant. Le code doit être placé à la fin du fichier.

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

Voilà tout! Visitez maintenant votre site pour voir le fil d’Ariane en action. Nous espérons que cet article vous a aidé à afficher un fil d’Ariane sur WordPress.

Nous vous prions de laisser vos commentaires dans la section dédiée.

Cet article comporte 2 commentaires
  1. Bonjour,
    J’ai installé Breadcrump NavXT en collant la « div » dans le header.php. Ça marche très bien.
    Mais si je fais une copie de header.php dans mon thème enfant, ça ne marche plus.
    Bien sûr, la « div » est effacée du fichier original header.php et n’existe que dans le thème enfant.
    Où est le problème ?
    Merci d’avance, si vous avez une solution.
    Cordialement
    Christian Belluard

    1. Bonjour,
      En ce qui concerne les thèmes enfants, vous avez certaines choses que vous devez vérifier.
      – Le thème enfant est reconnu en tant que celui du thème parent
      – Comme le thème parent inclus-t-il le header.php ? si cela est fait avec include_once, include, require ou require_once, il est fort probable que ce soit la raison, car ces fonctions ne sont pas compatible avec les thèmes enfants, surtout si je chemin d’accès. Voir https://developer.wordpress.org/reference/functions/get_template_part/
      – Est ce qu’il existe une erreur qui empêche à PHP de s’exécuter normalement sur ce fichier. Rassurez-vous que les erreurs ne sont pas masquées.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
2 Partages
Partagez
Tweetez
Enregistrer2