Comment ajouter simplement un fil d’Ariane à Divi

25 Oct 2018

Bonjour à tous,

Dans cet article nous allons voir comment ajouter très simplement un fil d’Ariane sous l’entête de page Divi de votre site web, en utilisant uniquement le plugin Yoast (ou tout autre plugin dédié au fil d’Ariane comme Breadcrumb NavXT).

Qu’est-ce qu’un fil d’Ariane sur un site web ?

Le fil d’Ariane est matérialisé sur chaque page d’un site par une ligne affichant le chemin de la page visitée, dans lequel chaque niveau de profondeur est un lien vers la page associée. On le trouve généralement en haut de page.
Fil d'ariane sur un site web

A quoi sert un fil d’Ariane ?

L’expression est issue de la mythologie grecque : Ariane, la fille du roi Minos, donna un fil à Thésée, qui l’avait séduite, afin qu’il retrouve son chemin dans le fameux labyrinthe construit par Dédale (dans lequel était enfermé le Minotaure).

Vous l’aurez compris, le fil d’Ariane est utilisé pour se repérer et se déplacer sur un site web. C’est un élément fondamental dans la construction du maillage interne de votre site, notamment pour les sites de grande taille.

Sachez qu’il est également utilisé (un fil au sens propre, cette fois) par les plongeurs qui explorent des épaves ou des galeries souterraines pour retrouver leur chemin en cas de visibilité réduite.

Fil d’Ariane et navigation

Le fil d’Ariane est un atout majeur pour l’ergonomie d’un site, en particulier si sa structure est constituée de plusieurs niveaux de profondeur.

Il permet ainsi au visiteur de :

  • savoir où il se trouve dans l’arborescence des pages du site ;
  • comprendre la structure globale du site ;
  • se déplacer rapidement dans un dossier parent de la page courante (par exemple une catégorie de produit sur un site e-commerce) ;
  • découvrir une partie du site qu’il n’aurait jamais visitée sinon.

Fil d’Ariane et SEO (référencement naturel)

Le fil d’Ariane est un outil très apprécié des moteurs de recherche car :

  • il améliore l’expérience utilisateur ;
  • il facilite le travail des robots crawlers qui parcourent le web pour indexer vos pages.

En outre, c’est un moyen très efficace de :

  • proposer une alternative au retour en arrière ;
  • réduire le taux de rebond, puisque le visiteur a l’opportunité de remonter en un clic dans la structure du site ;
  • faire remonter le « jus du référencement » des pages dites de « longue traîne » vers les pages de plus haut niveau.

C’est donc un moyen naturel, élégant et non intrusif de favoriser la navigation sur le site et d’engager un peu plus l’internaute, et par là-même de remonter du PageRank vers l’accueil.

Mise en œuvre du fil d’Ariane dans Divi

Afin d’ajouter un breadcrumb à Divi, nous allons :

  • activer le fil d’Ariane sur votre site avec le plugin de votre choix (pour moi c’est Yoast car je l’installe systématiquement sur tous mes sites),
  • utiliser un hook WordPress (ou « crochet ») pour insérer automatiquement dans le modèle d’entête de toutes les pages du site (ou seulement certaines) le code chargé de générer le HTML à afficher sur le site.

Activation du fil d’Ariane

Exemple avec le plugin Yoast

Page de paramétrage du fil d'Ariane de Yoast
Vous noterez que la page de paramétrage du fil d’Ariane Yoast propose de nombreux réglages, notamment le séparateur des différents niveaux de hiérarchie dans le chemin affiché.

Récupération du code à insérer

Si vous utilisez Yoast, naviguez sur cette page d’aide à la mise en place du fil d’Ariane et récupérez le code proposé (ou patientez 30 secondes, car il est intégré ci-après).

Pour les autres extensions, référez-vous à la documentation 😉

Insertion automatique du code

Pour inclure automatiquement le code HTML du fil d’Ariane sur toutes les pages du site, nous utilisons le hook WordPress et_before_main_content, de type action, fourni par Divi dans le fichier header.php.

Ce crochet permet d’injecter du code juste après l’entête Divi, avant le contenu de la page, sans modifier le fichier header.php, donc sans risque pour les futures mises à jour de ce fichier par Elegant Themes.

Code à ajouter dans le fichier functions.php de votre thème enfant :

add_action( 'et_before_main_content', function () {
  if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb('<p id="breadcrumbs">','</p>');
  }
} );

Et avec le style ?

Alors évidemment, tel quel, le rendu n’est pas forcément génial, puisqu’on injecte un élément HTML « p » au milieu de rien, entre le header et le contenu de la page. Il est ainsi fort probable que le texte affiché soit collé au bord gauche de votre écran et à l’entête.

A votre charge donc de styliser ce paragraphe en CSS pour l’intégrer proprement dans votre design.

Une solution plus directe et plus élégante consiste à carrément injecter une section Divi, contenant une ligne et un module texte, afin de profiter du style de mise en page par défaut (ou celui que vous avez déjà défini dans votre feuille de style) sur desktop et mobile, notamment les marges horizontales, pour rester homogène avec le reste du site :

add_action( 'et_before_main_content', function () {
  if ( function_exists('yoast_breadcrumb') ) {
?>
<div id="section-breadcrumbs" class="et_pb_section et_pb_with_background et_section_regular">
  <div class="et_pb_row">
    <div class="et_pb_column et_pb_column_4_4 et_pb_css_mix_blend_mode_passthrough et-last-child">
      <div class="et_pb_module et_pb_text et_pb_bg_layout_light et_pb_text_align_left">
        <div class="et_pb_text_inner">
          <?php yoast_breadcrumb('<p id="breadcrumbs">','</p>'); ?>
        </div>
      </div>
    </div>
  </div>
</div>
<?php
  }
} );

Attention, vous aurez surement malgré tout des ajustements à effectuer en CSS, par exemple pour réduire la hauteur de la section insérée ; j’ai ajouté pour cela l’identifiant « section-breadcrumbs » à la section. Par exemple :

#section-breadcrumbs {
  padding: 20px 0 !important;
}
#section-breadcrumbs .et_pb_row {
  padding: 0 !important;
}

A noter que pour un menu « fixe » ou « sticky » (qui ne défile pas avec la page mais qui reste collé en haut de la fenêtre), il faut ajouter la hauteur du menu au padding supérieur de la section. Par exemple pour une hauteur de menu de 160 pixels :

#section-breadcrumbs {
  padding: 180px 0 20px 0 !important;
}
#section-breadcrumbs .et_pb_row {
  padding: 0 !important;
}

Filtrage des pages

Sur certaines pages, le fil d’Ariane est inutile, comme la plupart du temps sur la page d’accueil (si le visiteur est perdu dès la page d’accueil, il faut peut-être revoir le design et l’ergonomie de votre site !).

Et pour toutes sortes de raisons qui ne me regardent pas, vous pouvez décider de ne pas afficher le fil d’Ariane sur certaines pages.

Dans ce cas, il est possible de filtrer les pages grâce à des fonctions WordPress comme is_front_page(), is_page() ou is_single().

Par exemple pour masquer le fil d’Ariane sur l’accueil et les articles :

add_action( 'et_before_main_content', function () {
  if ( (! is_front_page()) && (! is_single()) && function_exists('yoast_breadcrumb') ) {
?>
<div id="section-breadcrumbs" class="et_pb_section et_pb_with_background et_section_regular">
  <div class="et_pb_row">
    <div class="et_pb_column et_pb_column_4_4 et_pb_css_mix_blend_mode_passthrough et-last-child">
      <div class="et_pb_module et_pb_text et_pb_bg_layout_light et_pb_text_align_left">
        <div class="et_pb_text_inner">
          <?php yoast_breadcrumb('<p id="breadcrumbs">','</p>'); ?>
        </div>
      </div>
    </div>
  </div>
</div>
<?php
  }
} );

Compléments

Fil d’Ariane « manuel »

Yoast propose également le shortcode [wpseo_breadcrumb] que vous pouvez insérer dans n’importe quel contenu afin d’afficher le fil d’Ariane manuellement.

Cela peut-être utile par exemple sur un site avec un nombre de pages réduit pour positionner le breadcrumb à un endroit plus spécifique.

Libellés des niveaux de profondeur

Par défaut, Yoast récupère les titres de page pour générer les libellés des niveaux de hiérarchie dans le fil d’Ariane. Si vous souhaitez utiliser des libellés différents (par exemple en ne conservant que les mots-clés essentiels), vous pouvez le faire via les paramètres Yoast de chaque page :
Paramètres Yoast pour une page WordPress

Conclusion

Le fil d’Ariane est un élément essentiel pour tous les sites web de grande taille, tant au niveau ergonomie qu’au niveau SEO. Ne le négligez pas !

Il est facile à mettre en place, et vous ferez plaisir aux visiteurs tout en optimisant votre référencement naturel.

Enfin, même si je n’ai pas abordé cet aspect, je pense qu’il peut être un élément de design intéressant !

A noter que Yoast m’a suffit jusqu’ici pour la réalisation de cette tâche, mais que les extensions spécifiques proposent moultes réglages et outils supplémentaires.