Comment insérer un fil d’Ariane dans Divi ? Et où le mettre ?

Mis à jour le 20/05/2019 | Publié le 29/09/2017 | 17 commentaires

Le thème Divi est truffé d’options, on peut presque tout personnaliser depuis son back-office. Sauf que les développeurs ont oublié (ou sciemment omis) de prévoir une option pour le fil d’Ariane.

Pourtant c’est tellement utile, que ce soit pour l’internaute (qui pourra facilement se situer dans votre site) ou pour les robots d’indexation. Cela est également un atout pour améliorer le SEO (référencement naturel).

Dans cet article, vous allez voir comment ajouter un fil d’Ariane gratuitement et surtout vous allez pouvoir décider de l’endroit où l’insérer.

Découvrez tout ce que vous pouvez faire avec le thème Divi

Voici le programme :

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

Quelle est l’utilité d’un fil d’Ariane ?

En effet, vous pourriez ne pas trouver d’utilité à ajouter d’un fil d’Ariane dans votre site ou votre blog et pourtant cela est préconisé pour ne pas dire primordial.

Tout d’abord, pensons à l’utilisateur, c’est-à-dire l’internaute, pour qui cette fonctionnalité peut être bien pratique dans la navigation interne sur votre site, surtout si celui-ci offre de nombreux contenus. Le visiteur sera donc plus à l’aise pour trouver son « chemin », revenir en arrière etc., cela améliore l’UX (l’expérience utilisateur).

Ensuite, pensons au référencement naturel de votre site. Les robots d’indexations apprécient les sites qui font apparaître un fil d’Ariane, il est donc évident de leur faire plaisir ! Cette fonctionnalité est loin d’être superflue et c’est un atout à ne pas négliger en termes de SEO.

Comment insérer un fil d’Ariane dans Divi ?

Pour l’ajouter dans votre thème Divi, vous aurez besoin de trois choses :

1. Installez le plugin Breadcrumb NavNext

Breadcrumb NavNext - fil d'Ariane
Le plugin Breadcrumb NavNext pour insérer un fil d’Ariane

Cela se passe de la même manière que l’on installe n’importe quel plugin :

  • Aller à l’onglet Extensions > Ajouter
  • Recherchez le plugin Breadcrumb NavNext
  • Cliquer sur installer
  • Activez-le

2. Configurez le plugin

Ce plugin gratuit propose quelques options de configuration sur lesquelles je ne m’attarderai pas mais sachez que vous pourrez activer ou désactiver certaines options intéressantes, pour cela :

  • Rendez-vous à l’onglet Réglages > Breadcrumb NavNext
  • Vous trouverez alors 4 onglets : Général, Post Types, Taxonomies et Micellaneous. C’est ici que vous pourrez customiser le contenu de votre fil d’Ariane.
  • Vous pourrez même décider du séparateur des éléments qui composent votre fil d’Ariane. Généralement, on trouve ce symbole « > » mais vous pourrez le changer en vous aidant du guide des symboles disponibles en HTML et mettre une flèche, un cœur, un losange etc.
Choisir le séparateur de son fil d'Ariane
Option pour choisir le séparateur de son fil d’Ariane

3. Affichez votre fil d’Ariane

Une fois le plugin Breadcrumb NavNext paramétré, vous devrez insérer un bout de code à l’intérieur d’un fichier PHP de votre thème enfant pour que le fil d’Ariane apparaisse sur votre site. Voici ce que vous devrez insérer :

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

Où insérer ce fameux fil d’Ariane ?

Maintenant que vous avez toutes les cartes en main, il vous suffira de copier et coller le code que nous venons de voir… mais la grande question est : où insérer ce morceau de code ? Et la réponse à cette question est assez subjective… Voyons quelques exemples :

Cas n°1 : dans le fichier header.php

Le fichier header.php contient l’entête de votre site avec généralement le logo, la ou les navigations etc. C’est donc l’endroit propice pour afficher un fil d’Ariane.

Avec cette méthode, il sera présent sur la totalité des pages de votre site : les pages, les articles, les pages d’archives etc.

Pour l’insérer, vous aurez besoin de dupliquer le fichier header.php contenu dans les fichiers de votre thème Divi (le thème parent) et de coller cette copie dans le dossier de votre thème enfant.

Breadcrumb placé sous le menu - header.php
Fil d’Ariane sous le menu – header.php

Ensuite, vous éditerez ce fichier avec un logiciel (un éditeur de texte tel que SublimText ou Bracket par exemple) et vous choisirez l’endroit idéal pour l’insérer.

Pour l’exemple de ma capture d’écran ci-dessus, j’ai inséré le code après la ligne 60 de mon fichier header.php.

Cas n°2 : dans le fichier single.php en dessous du titre de l’article

Le fichier single.php est le fichier de référence pour afficher les articles de blog.

Si vous désirez que votre fil d’Ariane apparaisse seulement sur vos articles, c’est alors le fichier que vous devrez modifier. Toujours en dupliquant le fichier single.php du thème parent dans votre thème enfant et en le modifiant à l’aide d’un éditeur de texte comme expliqué dans le Cas n°1.

Fil d'Ariane affiché sous le titre de mon article
Fil d’Ariane affiché sous le titre de mon article

Pour cet exemple, je l’ai inséré après la ligne 37 du fichier single.php, juste en dessous du titre que j’ai repéré grâce aux balises <h1> et </h1>.

Cas n°3 : dans le fichier single.php en dessous de l’image à la une

Cela peut également être une solution alternative que j’aime moins mais qui pourrait convenir à certains de vos projets. Il vous suffira de changer l’emplacement du bout de code pour le placer après l’appel de l’image à la une.

Fil d'Ariane placé sous l'image à la une
Fil d’Ariane placé sous l’image à la une

Pour insérer ce bout de code, j’ai repéré la fin de la section nommée .et_post_meta_wrapper, après la ligne 123, comme vous pouvez le voir dans la capture d’écran ci-dessus.

obtenir Divi - get Divi

Une alternative à Breadcrumb NavNext ?

Si vous ne souhaitez pas trop mettre les mains dans le code, vous pouvez toujours opter pour un plugin premium qui fait très bien le boulot.

Il s’agit de l’extension nommée Divi Breadcrumbs Module qui est disponible au tarif de 15$… Ça peut être une bonne alternative.

En conclusion…

Vous avez vu qu’avec quelques bouts de code, on peut personnaliser son thème Divi, non seulement ce n’est pas compliqué mais en plus, cette fonctionnalité sera bénéfique pour le référencement naturel de votre site. Alors, qu’attendez-vous ?

Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantThemes qui regorge d’idées et de tutos !

Comment ajouter un fil d'Ariane dans Divi ?
Comment ajouter un fil d’Ariane dans Divi ? Dites-le sur Pinterest
Divi tutorial : add breadcrumb in divi

Ça devrait vous plaire aussi :

Responsive Design Divi : comment gérer les différentes tailles d’écran ?

Responsive Design Divi : comment gérer les différentes tailles d’écran ?

Beaucoup d’utilisateurs se posent la question : comment optimiser le Responsive Design de Divi ? De nombreuses options sont disponibles nativement dans Divi pour améliorer le design sur vos divers écrans. Mais quelques fois, vous devrez aussi modifier les Medias Queries… Découvrez comment dans ce guide complet !

Créez un bouton « retour vers le haut » personnalisé en quelques clics !

Créez un bouton « retour vers le haut » personnalisé en quelques clics !

Quand je vous dis qu’on peut tout faire avec Divi ! Pas besoin de coder ou d’installer de nombreux plugins… Il suffit de savoir où chercher : les options sont là ! Dans cet article, je vous propose de découvrir comment créer un bouton « retour vers le haut » (back-to-top button) en seulement quelques clics !

17 Commentaires

  1. Jamel

    Bonjour Lycia,

    Meilleurs voeux pour cette nouvelle année!

    J’ai suivi ton tuto. Toutefois, lorsque j’ajoute ton code, le fil d’ariane s’affiche dans le menu secondaire. Je n’ai pas le même rendu…
    J’utilise Divi + Woocommerce. Où placer ce code pour qu’il puisse s’afficher en haut des pages te fiches produits.

    Merci d’avance

  2. Lycia

    Bonjour Jamel ! Meilleurs vœux à toi aussi.
    Concernant le Fil d’Ariane, je me doute que s’il apparaît dans ton menu secondaire c’est que tu l’as inséré à cette endroit dans le code, tu as dû l’insérer dans le fichier header.php, je me trompe ? Il faut donc que tu refasses des essais jusqu’à ce qu’il apparaisse où tu le désires. Pour ma part, sur ce blog Astuces Divi, j’ai utilisé le Cas N°2, c’est à dire, en dessous du titre de mon article, j’ai donc modifié le fichier single.php : regarde en haut de cet article, il est en couleur VIOLET & VERT…
    Concernant WooCommerce, moi aussi je l’utilise et le fil d’Ariane est automatique, je n’ai rien eu à faire, c’est l’extension WooCommerce qui l’a géré toute seule, comme tu peux le voir sur un produit de ma boutique (boutique en cours de construction mais déjà visible), le chemin (fil d’Ariane) est déjà disponible, juste au dessus de l’image de mon produit, regarde sur ce produit par exemple (le fil d’Ariane est en gris, cette fois) : Support Divi
    J’espère que ma réponse va t’aider et n’hésite pas à revenir nous donner ta solution, ça pourrait aider d’autres personnes.
    Bonne continuation.

  3. Philippe Lenders

    Bonjour,

    Une idée pour insérer un fils d’ariane quand on utilise le modèle « blank page » ?

    Merci !

  4. Lycia Diaz

    Bonne question !
    Je n’ai pas testé avec un modèle Blank. Il faudrait voir quel est le modèle de page qui est utilisé par Divi pour afficher une Blank Page. Tu peux utiliser l’extension « Afficher le modèle courant » qui t’indiquera quel fichier modifier. Peut-être l’insérer dans le fichier page.php ??? À tester.

  5. Philippe Lenders

    Non, j’avais déjà essayé avec « page.php » 😉
    Grâce à l’extension « afficher le modèle courant », c’est résolu !
    C’est dans « page-template-blank.php »
    On est cependant « condamné » (je pense) à afficher le fils d’Ariane tout en haut, ce qui n’est pas très joli et moins pratique qu’en dessous du module « menu pleine page » par exemple.
    Peut-être demain avec Divi 4 ?
    Encore merci Lycia !

  6. Lycia Diaz

    Super ! Merci Philippe pour le tuyau !
    Du coup, ça me fait penser à quelque chose : pourquoi ne pas placer le code du fil d’Ariane au sein d’un module « code » de Divi et de le placer où tu veux au sein de ton layout ? Par exemple, en dessous de ton module « menu » ? C’est peut-être faisable ? À tester…

  7. Philippe Lenders

    Ben … non : c’est du PHP qu’il faut insérer. Le module Code n’accepte que HTML, CSS ou Javascript

  8. Lycia Diaz

    Ah mince… je n’avais pas réfléchi… ni essayé… mais du coup avec le nouveau Theme Builder, je me demande comment faire. Il faudrait que je teste…

  9. Philippe Lenders

    Divi 4.0 avec custom header :

    J’ai mis le code dans page.php, après la ligne 17
    Juste avant

    Je pense qu’il y a d’autres possibilité

  10. Philippe Lenders

    Euh, pas une bonne idée de copier coller la ligne en php.
    Donc, coller le code après la ligne 17 juste avant le test «  »have_posts »

  11. Lycia Diaz

    Merci Philippe,
    En effet, tu ne peux pas insérer du PHP en commentaire, c’est une histoire de sécurité 😉 mais merci pour l’info, elle pourra servir pour d’autres utilisateurs.

  12. arlt

    Bonsoir Lycia,

    Merci à nouveau pour ce superbe tutoriel qui va changer ma vie si j’arrive à régler un petit soucis 🙂

    J’ai tout respecté à la lettre, par contre je n’arrive pas à trouver la solution pour que le fil d’ariane soit : accueil > la page et non la catégorie.

    J’ai peut-être un soucis dans la hiérarchie de mon site…

    Au cas où, si jamais tu as quelques minutes pour me sauver, voici comment se présente mon site.

    Dans mon menu, j’ai un onglet blog avec deux sous-rubriques (ce sont des pages). Ces deux pages comprennent des articles de blog qui eux sont classés dans des catégories.

    Voilà rien de plus ! cela ne me paraît pas très déconnant niveau utilisation.
    Mais pour le coup, le fil d’ariane me renvoie vers mes catégories. Je n’ai pas trouvé de solution dans les réglages (ou pas vu). Et pour couronner le tout, je me rends compte que la catégorie vers laquelle il me renvoie, comprend tous mes articles sur une seule page à la suite. Pas top top pour Google.

    En tout cas, je te remercie d’avance si tu as le temps de m’aider.

    Stéphanie

  13. Lycia Diaz

    Salut Stéphanie !
    Je suis allée voir ton site.
    Effectivement, c’est la catégorie qui est prise en compte dans la hiérarchie. Je ne pense pas qu’il y ait une option pour ça. Et bien sûr, un fil d’Ariane est très compliqué à coder, donc, là je ne vois pas de solution.
    Par contre – et cela n’est que mon avis – c’est mieux que la page d’archive de catégorie affiche de nombreux articles plutôt que 5 ou 10 : cela évite à Google d’indexer beaucoup de pages. Par exemple, si tu as 100 articles dans ta catégorie, il vaut mieux que Google indexe 1 page d’archive comprenant 100 articles plutôt que 10 pages de 10 articles, non ? Le budget crawl « coûte cher »…
    Par contre, j’ai une solution pour toi : tu peux customiser ta page d’archive de catégorie depuis le nouveau thème builder et tu pourrais afficher tes cartes de blog avec tes jolies « images à la une » au sein de cette page.
    Au passage j’ai vu que tes articles utilisaient la mention « mis à jour le » : as-tu suivi le tuto publié ici ? Hi hi, c’est un clin d’œil 😉
    Au plaisir d’échanger…

  14. Stéphanie

    Bonjour Lycia,
    Je te remercie pour ton retour et surtout pour ta solution. Je vais voir ce que je peux faire pour garder les choses dans l’état et customiser ma page d’archive.
    Pour répondre à ta dernière question : en effet j’ai suivi le tuto de mise à jour (ce n’est pas le seul d’ailleurs :)). Tes 2 blogs sont pour moi d’excellentes sources d’améliorations et d’inspiration. Un grand merci pour le travail accompli.
    Belle journée,
    Stéphanie

  15. Lycia Diaz

    Merci Stéphanie ! C’est très gentil à toi ! Et oui, je me doute que mon tuto n’est pas le seul, c’est une fonctionnalité plutôt courante 😉 À bientôt
    Lycia

  16. JLuc

    Lycia,
    Pour installer mon fil d’Ariane, je ne suis pas passé par autant d’aspects tech.
    J’ai simplement ajouté à l’emplacement souhaité le module « code » puis j’y ai collé « [wpseo_breadcrumb] ».
    Trop simpliste pour être efficace à ton avis ?

  17. Lycia Diaz

    Non c’est aussi une bonne méthode 😉

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

Pin It on Pinterest

Shares
Share This