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

 

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 un fil d’Ariane 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 ! Insérer un fil d’Ariane dans son site n’est pas superflu et c’est un atout à ne pas négliger en terme de SEO.

 

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

Pour ajouter un fil d’Ariane 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, votre fil d’Ariane 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.

Fil d'Ariane 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 insérer votre fil d’Ariane. 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 modifié. 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, j’ai inséré le fil d’Ariane 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.

 

Une alternative à Breadcrumbs 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 pour lui insérer un fil d’Ariane, 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 ?

Comment ajouter un fil d'Ariane dans Divi ?

Comment ajouter un fil d’Ariane dans Divi ? Dites-le sur Pinterest

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

D'autres Tips pour Divi :

Pin It on Pinterest

Shares
Share This