Fil d’Ariane WordPress

Photo de profile de Cédric Chevillard

Besoin d’un conseil pour votre site internet ?

Expert Elementor

En tant qu'expert en Elementor, je propose mon aide pour optimiser la conception, la personnalisation et la performance de votre site web avec ce plugin.

Vous vous êtes sûrement demandé comment ajouter un fil d’Ariane sur votre site WordPress, n’est-ce pas ?

Je vais vous guider pas à pas pour que vous puissiez intégrer facilement cet outil à votre site et vous expliquer pourquoi il est précieux d’en avoir un lors de la création de site internet.

Vous verrez, c’est plus simple que vous ne le pensez.

Comment ajouter un fil d’Ariane dans WordPress ?

Ajouter un fil d’Ariane avec une extension dédiée

Breadcrumb NavXT est une extension très appréciée pour sa simplicité et son efficacité. Une fois installée et activée, elle génère automatiquement des fils d’Ariane pour vos pages.

Vous pouvez personnaliser son apparence et son comportement via le menu des réglages.

  1. Installation : Rendez-vous dans votre tableau de bord WordPress, cliquez sur « Extensions » puis « Ajouter ». Recherchez « Breadcrumb NavXT » et installez-la.
  2. Activation : Activez l’extension après l’installation.
  3. Configuration : Allez dans les réglages de l’extension (Réglages > Breadcrumb NavXT) et configurez les options selon vos préférences.
  4. Application : A travers Gutenberg, vous avez le module : « Breadcrumb Trail ».
Plugin Breadcrumb NavXT dans le répertoire de WordPress

Flexy Breadcrumb

Flexy Breadcrumb est une autre option intéressante.

Elle offre une multitude de styles et de configurations pour que votre fil d’Ariane s’intègre parfaitement à votre design.

De plus, son interface intuitive vous permettra de la prendre en main rapidement.

  1. Installation : Comme pour Breadcrumb NavXT, allez dans « Extensions » > « Ajouter » et recherchez « Flexy Breadcrumb ». Installez et activez l’extension.
  2. Personnalisation : Rendez-vous dans les réglages de Flexy Breadcrumb pour personnaliser l’apparence et le comportement du fil d’Ariane. Vous pouvez choisir parmi plusieurs styles et options d’affichage.
  3. Application : Vous pouvez utiliser le shortcode suivant : « [flexy_breadcrumb] »
Plugin Flex Breadcrumb dans le répertoire de WordPress

Utiliser votre extension SEO pour ajouter un fil d’Ariane

Saviez-vous que certaines extensions SEO proposent également des fonctionnalités de fil d’Ariane ?

Voici comment utiliser les plus connues.

Yoast SEO

Yoast SEO est l’une des extensions SEO les plus populaires et elle inclut une option (activé par défaut) pour les fils d’Ariane.

Rendez-vous dans les réglages SEO de Yoast :

  1. Installation et Activation : Installez et activez Yoast SEO si ce n’est pas déjà fait.
  2. Configuration : Allez dans « Yoast SEO » > « Réglages » > « Avancé » > « Fil d’Ariane » et configurer votre fil d’Ariane.
Page d'administration de Yoast SEO dans WordPress pour éditer le fil d'Ariane
Page d’administration de Yoast SEO dans WordPress pour éditer le fil d’Ariane.

Pour ajouter le fil d’Ariane avec Gutenberg, utilisez le bloc « Yoast SEO Breadcrumb ». Glissez-déposez ce bloc où vous le souhaitez sur votre page.

Yoast SEO permet également l’utilisation d’un shortcode Vous êtes ici : Accueil » Blog » Fil d’Ariane WordPress que vous pouvez insérer directement dans vos articles ou pages.

Si vous préférez ajouter le fil d’Ariane directement dans le code, ajoutez la ligne suivante à votre thème :

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

Je vous conseille d’ouvrir le fichier header.php ou single.php de votre thème sur mesure ou enfant et insérez le code PHP à l’endroit où vous souhaitez afficher le fil d’Ariane.

Rank Math SEO

Rank Math est une autre extension SEO complète qui inclut une option pour les fils d’Ariane.

Pour retrouver les réglages, c’est par içi :

  1. Installation et Activation : Installez et activez Rank Math SEO.
  2. Configuration : Allez dans « Rank Math SEO » > « Réglages généraux » > « Fil d’Ariane » et activez l’option « Activer la fonction du fil d’Ariane » puis configurer le.
Page d'administration de Rank Math dans WordPress pour éditer le fil d'Ariane
Page d’administration de Rank Math dans WordPress pour éditer le fil d’Ariane.

Avec Rank Math, vous pouvez ajouter le bloc « Rank Math Breadcrumbs » directement dans Gutenberg.

Ajoutez le bloc « Rank Math Breadcrumbs » dans l’éditeur Gutenberg et placez-le à l’endroit souhaité ou vous pouvez utiliser le shortcode [rank_math_breadcrumb] pour ajouter votre fil d’Ariane.

Sinon la troisième méthode consiste à ajouter ce code à votre thème pour afficher le fil d’Ariane :

	
	<?php if ( function_exists('rank_math_the_breadcrumbs') ) { rank_math_the_breadcrumbs(); } ?>.

SEOPress

Dans SEOPress (vous devez disposer de la version pro pour cette fonctionnalité), activez le fil d’Ariane depuis les réglages de l’extension.

Vous trouverez cette option :

  1. Installation et Activation : Installez et activez SEOPress.
  2. Configuration : Allez dans SEO > Pro > Fil d’Ariane et activez le fil d’Ariane.

Cherchez et ajoutez le bloc « Breadcrumbs » dans l’éditeur Gutenberg ou sinon comme pour Rank Math utilisez le shortcode [seopress_breadcrumbs]pour afficher le fil d’Ariane.

Pour intégrer le fil d’Ariane directement via le code, utilisez :

	
	<?php if ( function_exists('seopress_display_breadcrumbs') ) { seopress_display_breadcrumbs(); } ?>.

SEOKEY

SEOKEY propose également une option pour le fil d’Ariane. Cette option est disponible par défaut, il n’est pas nécessaire de l’activé.

Par contre, vous ne disposez de réglages particuliers dans cette extension et vous n’avez également pas à disposition un bloc Gutenberg…

Page d'administration de SEOKEY dans WordPress pour récupérer le shortcode du fil d'Ariane
Page d’administration de SEOKEY dans WordPress pour récupérer le shortcode du fil d’Ariane.

Pour ajouter le fil d’Ariane, vous devez utiliser le shortcode [seokey_breacrumbs_print] pour insérer le fil d’Ariane dans votre contenu.

Intégrez le fil d’Ariane avec ce code :

	
	<?php if ( function_exists('seokey_breacrumbs_print') ) { seokey_breacrumbs_print(); } ?>.

Ajouter un fil d’Ariane via votre thème WordPress

Certains thèmes WordPress intègrent directement un fil d’Ariane.

Par exemple, le thème Astra offre cette fonctionnalité native.

Page d'administration du thème Astra dans WordPress pour mettre en place le fil d'Ariane
Page d’administration du thème Astra dans WordPress pour mettre en place le fil d’Ariane.

Vérifiez les options de votre thème dans les réglages ou la personnalisation pour voir si cette option est disponible.

  1. Vérification : Allez dans « Apparence » > « Personnaliser » et recherchez les options de fil d’Ariane.
  2. Activation : Si votre thème propose cette fonctionnalité, activez-la et personnalisez-la selon vos préférences.

Ajouter un fil d’Ariane sans plugin et sans thème

Si vous préférez ne pas utiliser de plugin ou que votre thème ne propose pas de fil d’Ariane, vous pouvez ajouter un fil d’Ariane manuellement en modifiant le code de votre thème.

  1. Ajout de code PHP : Insérez un script PHP personnalisé dans votre fichier functions.php pour générer le fil d’Ariane.
  2. Modification des templates : Ajoutez le code nécessaire dans vos templates de page, par exemple dans header.php ou single.php.

Voici un exemple de code que vous pourriez utiliser dans votre functions.php :

	function custom_breadcrumb() {
        // Ne pas afficher sur la page d'accueil
        if (is_front_page()) {
            return;
        }

        // Commencez le fil d'Ariane avec un lien vers la page d'accueil
        echo '<nav aria-label="breadcrumb">';
        echo '<ol class="breadcrumb">';
        echo '<li class="breadcrumb-item"><a href="' . home_url() . '">Accueil</a></li>';

        // Déterminer le chemin du fil d'Ariane
        if (is_category() || is_single()) {
            // Afficher la catégorie
            $category = get_the_category();
            if ($category) {
                echo '<li class="breadcrumb-item">' . $category[0]->name . '</li>';
            }

            // Afficher le titre de l'article
            if (is_single()) {
                echo '<li class="breadcrumb-item active" aria-current="page">' . get_the_title() . '</li>';
            }
        } elseif (is_page()) {
            // Afficher les pages parentes
            if ($post->post_parent) {
                $parent_id  = $post->post_parent;
                $breadcrumbs = array();
                while ($parent_id) {
                    $page = get_page($parent_id);
                    $breadcrumbs[] = '<li class="breadcrumb-item"><a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a></li>';
                    $parent_id  = $page->post_parent;
                }
                $breadcrumbs = array_reverse($breadcrumbs);
                foreach ($breadcrumbs as $crumb) {
                    echo $crumb;
                }
            }
            // Afficher la page actuelle
            echo '<li class="breadcrumb-item active" aria-current="page">' . get_the_title() . '</li>';
        } elseif (is_search()) {
            // Afficher les résultats de recherche
            echo '<li class="breadcrumb-item active" aria-current="page">Résultats de recherche pour : ' . get_search_query() . '</li>';
        } elseif (is_404()) {
            // Afficher l'erreur 404
            echo '<li class="breadcrumb-item active" aria-current="page">Erreur 404</li>';
        }

        echo '</ol>';
        echo '</nav>';
    }

Et ajoutez l’appel de fonction à l’endroit souhaité dans vos templates :

	
	
	<?php if ( function_exists('custom_breadcrumb') ) { custom_breadcrumb(); } ?>

Sinon voici également un shortcode qui vous permettra de mettre le fil d’Ariane où vous voulez :

	
	add_shortcode('breadcrumb', 'custom_breadcrumb');

Vous pouvez ajouter des styles à vos breadcrumbs pour les rendre plus attrayants. Voici un exemple de styles CSS que vous pouvez ajouter à votre fichier style.css :

  .breadcrumb {
      padding: 8px 15px;
      margin-bottom: 20px;
      list-style: none;
      background-color: #f5f5f5;
      border-radius: 4px;
  }

  .breadcrumb-item {
      display: inline;
      font-size: 14px;
  }

  .breadcrumb-item + .breadcrumb-item::before {
      content: "/";
      padding: 0 5px;
      color: #555;
  }

  .breadcrumb-item > a {
      color: #0275d8;
      text-decoration: none;
  }

  .breadcrumb-item > a:hover {
      text-decoration: underline;
  }

  .breadcrumb-item.active {
      color: #555;
  }

Comment ajouter un fil d’Ariane avec Elementor

Elementor, le constructeur de pages populaire, propose aussi des solutions pour intégrer un fil d’Ariane.

En tant qu’expert Elementor, il m’est arrivé d’utiliser différentes extensions pour ajouter un fil d’Ariane, et ma préférence se porte sur Yoast SEO.

Sinon en général, les extensions SEO (comme Yoast et Rank Math) offrent des modules spécifiques pour Elementor.

  1. Utilisation des modules SEO : Installez une extension SEO compatible, puis utilisez le module adéquat, générale « …Breadcrumb… » ou « … fil d’Ariane… » dans l’éditeur Elementor.
  2. Insertion de shortcode : Si l’extension SEO ne propose pas de module, utilisez les shortcodes fournis et insérez-les dans un widget shortcode Elementor.

Sinon, vous pouvez utiliser les shortcodes des extensions mentionnées précédemment pour intégrer le fil d’Ariane directement dans vos pages créées avec Elementor.

Voici un exemple en image avec Yoast :

Constructeur Elementor avec le module Fil d'Ariane de Yoast SEO
Constructeur Elementor avec le module Fil d’Ariane de Yoast SEO
Constructeur Elementor avec les configurations possibles du module Fil d'Ariane de Yoast SEO
Constructeur Elementor avec les configurations possibles du module Fil d’Ariane de Yoast SEO

Comment ajouter un fil d’Ariane avec Divi

Contrairement à Elementor, Divi ne dispose pas de module pour ajouter un fil d’Ariane en utilisant les extensions comme Yoast et Rank Math.

Utilisez les shortcodes fournis (par exemple, Vous êtes ici : Accueil » Blog » Fil d’Ariane WordPress pour Yoast) et insérez-les dans un module de texte Divi.

Voici un exemple en image avec Yoast :

Constructeur Divi avec le module Texte pour ajouter un shortcode
Constructeur Divi avec le module Texte pour ajouter un shortcode.
Constructeur Divi après avoir ajouté le shortcode de Yoast SEO pour le fil d'Ariane
Constructeur Divi après avoir ajouté le shortcode de Yoast SEO pour le fil d’Ariane.

Pourquoi WordPress ne propose pas de fil d’Ariane ?

Vous vous demandez peut-être pourquoi WordPress ne propose pas de fil d’Ariane par défaut.

En réalité, cela tient à la flexibilité de WordPress qui laisse aux développeurs et aux utilisateurs le soin de personnaliser leur site comme ils le souhaitent, y compris l’ajout d’un fil d’Ariane selon leurs besoins spécifiques.

WordPress est conçu pour être extensible, et les fils d’Ariane, bien qu’utile, ne sont pas indispensables pour tous les sites.

Cette approche modulaire permet aux utilisateurs de choisir les fonctionnalités qu’ils souhaitent ajouter en fonction de leurs besoins spécifiques, ce qui est l’un des grands avantages de WordPress.

Pourquoi mettre un fil d’Ariane sur son site internet ?

Améliore l’expérience utilisateur

Un fil d’Ariane guide vos visiteurs à travers votre site, facilitant leur navigation et améliorant ainsi leur expérience.

Ils peuvent voir en un coup d’œil où ils se trouvent et revenir facilement à des pages précédentes.

  1. Navigation facilitée : Les visiteurs peuvent facilement retracer leurs pas et revenir à des pages précédentes.
  2. Orientation : Un fil d’Ariane permet aux utilisateurs de mieux comprendre la structure de votre site.

Améliore le référencement naturel

Les fils d’Ariane aident aussi les moteurs de recherche à comprendre la structure de votre site, ce qui peut améliorer votre référencement naturel.

En montrant clairement la hiérarchie de vos pages, vous permettez aux moteurs de recherche de mieux indexer votre contenu.

  1. Meilleure indexation : Les moteurs de recherche peuvent mieux comprendre la structure de votre site.
  2. SEO amélioré : Les fils d’Ariane peuvent améliorer le positionnement de vos pages dans les résultats de recherche.

Incite le lecteur à découvrir d’autres pages

Un fil d’Ariane encourage vos visiteurs à explorer davantage de contenu sur votre site, augmentant ainsi le temps qu’ils y passent et diminuant votre taux de rebond.

  1. Exploration du site : Les utilisateurs sont encouragés à découvrir d’autres pages.
  2. Réduction du taux de rebond : Les visiteurs restent plus longtemps sur votre site, ce qui peut avoir des effets positifs sur votre SEO.

Où mettre le fil d’Ariane ?

Le fil d’Ariane est généralement placé en haut de la page, juste en dessous de la barre de navigation principale.

Cela permet aux visiteurs de le voir immédiatement et de l’utiliser facilement pour naviguer sur votre site.

  1. Position optimale : Placez le fil d’Ariane en haut de la page, sous la barre de navigation.
  2. Visibilité : Assurez-vous que le fil d’Ariane est facilement visible et accessible pour vos visiteurs.

Pour finir, petit rappel sur ce qu’est le fil d’Ariane

Un fil d’Ariane, également connu sous le terme anglais « breadcrumbs », est un élément de navigation utilisé sur les sites web pour aider les utilisateurs à comprendre leur position par rapport à la structure du site.

Il s’agit généralement d’une série de liens qui montrent le chemin parcouru depuis la page d’accueil jusqu’à la page actuelle.

Concrètement, le fil d’Ariane se présente ainsi :

  1. Structure hiérarchique : Il affiche une structure hiérarchique des pages, par exemple :
    « Accueil > Blog > Catégorie > Article« 
  2. Liens cliquables : Chaque élément du fil d’Ariane est généralement cliquable, permettant aux utilisateurs de revenir rapidement à une page précédente. Cela améliore l’expérience utilisateur en facilitant la navigation.
  3. Positionnement : Il est souvent placé en haut de la page, juste en dessous de la barre de navigation principale, pour être immédiatement visible.

Pourquoi est-il appelé « fil d’Ariane » ?

Le terme « fil d’Ariane » fait référence à la mythologie grecque.

Dans le mythe, Ariane donne un fil à Thésée pour l’aider à retrouver son chemin hors du labyrinthe du Minotaure.

De manière similaire, le fil d’Ariane sur un site web aide les utilisateurs à ne pas se perdre dans les méandres du contenu en leur indiquant constamment où ils se trouvent.

En résumé, un fil d’Ariane est un outil de navigation essentiel qui améliore à la fois l’expérience utilisateur et le référencement de votre site.

En suivant ce guide, vous pouvez facilement ajouter un fil d’Ariane à votre site WordPress, que ce soit via une extension, un thème ou du code personnalisé.

Alors n’hésitez plus, et rendez votre site encore plus accueillant et navigable pour vos visiteurs.

Mes autres articles

Infographie pour représenter une personne en train de travailler dans un café à Grenoble

Les meilleurs cafés pour travailler à Grenoble

Travailler à domicile peut être pratique, mais changer d’air peut aussi booster votre créativité et votre productivité. C’est pourquoi j’ai exploré pour vous les meilleurs...

Page d'accueil de la documentation de l'API Resabooking afin de s'y connecter

Intégrer Resabooking dans votre site WordPress

Si vous gérez un camping et souhaitez améliorer votre site internet, l’intégration de Resabooking dans votre site WordPress est une solution idéale. En tant que...

Infographie de l'article pourquoi choisir WordPress représentant une personne en pleine réflexion devant son ordinateur

Pourquoi choisir WordPress ?

Découvrez les avantages de choisir WordPress pour votre site web. Je vous explique pourquoi WordPress est leader sur le marché !...