Guide web : créez un fil d’Ariane sur WordPress facilement.
Quand on explore un site web, on peut parfois se sentir comme le Petit Poucet et ses frères : totalement perdus.
On atterrit sur une page à partir d’un moteur de recherche ou d’un réseau social, et il devient difficile de savoir où l’on se trouve sur le site.
Heureusement, à la manière des miettes de pain du héros, il existe un moyen pour l’internaute de retrouver son chemin : le fil d’Ariane.
(Pour info, en anglais, on parle de « breadcrumb », ce qui signifie littéralement « miette de pain ».)
Dans cet article, nous vous expliquerons en détail comment créer un fil d’Ariane sur WordPress, en prenant en compte les différentes situations possibles.
SOMMAIRE
Qu’est-ce qu’un fil d’Ariane ?
Un fil d’Ariane est une représentation visuelle de la structure d’un site web.
La plupart du temps, il se présente sous forme d’une liste de liens alignés horizontalement. Il est généralement situé près du titre de la page et/ou du menu (son emplacement précis variant d’un site à l’autre).
Chaque élément du fil d’Ariane affiche des liens vers les pages « parentes » de la page que l’internaute est en train de consulter, permettant ainsi de retracer le chemin que l’internaute peut emprunter pour retourner à la page d’accueil :
Le fil d’Ariane peut varier en longueur et en complexité, ce qui est déterminé par ce qu’on appelle le niveau de profondeur. Ce terme fait référence au nombre « d’étapes » nécessaires pour revenir à la page d’accueil.
Il est important de souligner que tous les sites ne nécessitent pas un fil d’Ariane. S’il n’y a qu’un seul niveau de profondeur, il n’est pas indispensable, car le chemin vers la page d’accueil est direct.
À quoi sert un fil d’Ariane ?
Le fil d’Ariane sur un site web offre plusieurs avantages :
- Repère dans l’arborescence du site: Il donne à l’internaute un point de repère clair dans la structure du site, lui permettant de comprendre où il se situe et comment il peut naviguer.
- Navigation rapide: Il offre un moyen de navigation rapide, permettant à l’internaute de retourner rapidement en arrière dans l’arborescence du site jusqu’à la page d’accueil.
- Amélioration de la présentation dans les moteurs de recherche: Il contribue à améliorer la présentation du site dans les moteurs de recherche en fournissant une structure claire et organisée, ce qui peut influencer positivement le classement dans les résultats de recherche.
- Renforcement du maillage interne pour le référencement naturel (SEO): Il renforce le maillage interne du site, ce qui est bénéfique pour le référencement naturel en aidant les moteurs de recherche à indexer et à comprendre la structure du site.
Le principal avantage est de permettre à l’internaute de s’orienter facilement sur le site. De plus, les moteurs de recherche utilisent ces informations pour comprendre la structure du site et personnaliser l’affichage des résultats, ce qui souligne leur importance dans l’expérience utilisateur et le référencement.
Pourquoi WordPress ne propose pas de fil d’Ariane par défaut ?
Pour créer un fil d’Ariane sur WordPress, quelques manipulations sont nécessaires, que nous allons décrire ci-après.
On peut se demander pourquoi cette option n’est pas disponible par défaut, étant donné qu’il s’agit d’un élément de navigation présent sur de nombreux sites web.
Cette question a suscité plusieurs discussions parmi les contributeurs au projet WordPress.
Il en ressort que la création d’un fil d’Ariane est considérée comme relevant des fonctions attendues d’une extension ou d’un thème, et non du cœur même de WordPress.
De plus, comme évoqué précédemment, tous les sites n’ont pas besoin d’un fil d’Ariane. Il est donc plus simple pour l’utilisateur d’installer un plugin adapté à ses besoins.Créer et ajouter un fil d’Ariane
Il y a deux façons de créer un fil d’Ariane avec WordPress :
- Si vous avez des compétences en développement, vous pouvez coder directement dans le thème.
- Si ce n’est pas le cas, vous devrez utiliser une extension ou avoir cette fonctionnalité intégrée dans votre thème.
Dans cet article, nous allons nous pencher sur la deuxième option et détailler le processus.
Où ajouter le fil d’Ariane ?
Avant de plonger dans les détails de la création, il est crucial de comprendre où positionner cet élément de navigation.
En effet, les extensions ne l’ajouteront pas automatiquement à votre thème. Elles vous fourniront un morceau de code à insérer à l’endroit où vous souhaitez le voir apparaître.
Comme mentionné dans les exemples précédents, il est généralement placé à proximité du menu ou du titre de la publication.
Dans la plupart des cas, vous devrez modifier l’un de ces trois fichiers :
- header.php (dans 99 % des cas) ;
- single.php ;
- page.php.
Si ce n’est pas déjà fait, nous vous recommandons de créer un thème enfant avant d’apporter ces modifications. Cela évitera que celles-ci soient écrasées lors d’une mise à jour du thème.
Enfin, avec le développement des éditeurs de site, si votre thème est compatible, vous n’aurez pas besoin de modifier les fichiers. Il vous suffira d’utiliser le bloc proposé par l’extension, s’il est disponible.
Si ce n’est pas le cas, vous pourrez toujours insérer le code court (shortcode).C’est gratuit et sans engagement.
Sans extension
Je vais peut-être vous décevoir, mais il n’existe pas de solution universelle.
En effet, la démarche varie en fonction du thème que vous avez choisi. En cas de doute, le moyen le plus simple est de consulter la documentation ou de contacter l’équipe de développement, si cela est possible.
Cependant, voici les étapes à suivre pour certains des principaux thèmes WordPress :
Dans les cas d’Astra et Blocksy, l’emplacement est prédéfini par le thème. Si cela ne vous convient pas, ces deux thèmes offrent un code court que vous pouvez utiliser pour afficher votre fil d’Ariane où vous le souhaitez :
Avec une extension
Nous avons présélectionné six extensions qui facilitent la création d’un fil d’Ariane. Pour chacune d’entre elles, nous allons expliquer en détail comment les intégrer dans votre thème.
Créer un fil d’Ariane avec Yoast SEO
Il s’agit de l’extension phare en matière de SEO. Elle propose une multitude d’options, parmi lesquelles la possibilité de créer un fil d’Ariane. Une fois que vous avez installé et activé l’extension, suivez ces étapes : accédez à l’onglet « Réglages », puis sélectionnez « Avancé » et enfin « Fil d’Ariane ».
L’écran vous propose diverses options de personnalisation en fonction de vos besoins.
En cas de doute, n’hésitez pas à effectuer des tests !
Une fois le fil configuré, il vous suffit de l’ajouter à votre thème.
Si vous avez sélectionné « Désactivé » dans l’option « Activer le fil d’Ariane pour votre thème », celui-ci ne sera pas visible sur votre thème. Cela va de soi ! Pour l’intégrer à votre thème, vous avez plusieurs options :
1. En utilisant le bloc « Fil d’Ariane de Yoast » et l’éditeur de site
C’est l’option la plus simple, mais elle requiert que votre thème soit compatible avec l’éditeur de site (anciennement Full Site Editing ou FSE). Si votre thème est récent ou a été mis à jour récemment, il y a de fortes chances qu’il le soit.
Pour le vérifier, survolez le menu « Apparence ». Si un lien « Éditeur » apparaît, votre thème est compatible. Ensuite, sélectionnez les différents modèles de pages sur lesquels vous souhaitez afficher le fil d’Ariane.
Dans la plupart des cas, cela inclura les modèles suivants :
Selon les thèmes et les types de sites, vous pourriez avoir besoin d’ajouter le fil d’Ariane à d’autres modèles. Cette liste n’est donc pas exhaustive.
2. En insérant manuellement le bloc dans chacune de vos publications
Cette méthode est similaire à la précédente, mais elle cible les personnes qui ne veulent pas ou ne peuvent pas utiliser l’éditeur de site.
Ici, le bloc est ajouté manuellement à chaque publication (pages, articles, produits, etc.). Cette approche permet de créer un fil d’Ariane facilement, mais elle nécessite d’intervenir sur chaque publication individuellement. Cela peut être fastidieux si vous avez déjà publié beaucoup de contenu.
De plus, vous êtes limités en termes d’options de positionnement.
3. Dans le fichier adéquat
Cette méthode s’adresse principalement aux utilisateurs expérimentés, car elle implique la manipulation de code.
Avant toute manipulation, il est fortement recommandé de sauvegarder votre thème.
Il vous suffit de copier et coller le code suivant à l’endroit où vous souhaitez afficher le fil d’Ariane :
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>Créer un fil d’Ariane avec SEOPress
SEOPress est une extension française dédiée au SEO. Notez cependant que la création du fil d’Ariane est une fonctionnalité disponible uniquement dans la version premium de l’extension.
Pour explorer toutes les fonctionnalités de cette extension, vous pouvez consulter notre guide dédié à ce plugin SEO pour WordPress. Une fois l’extension installée et activée, cliquez sur l’onglet « PRO », puis sur « Fil d’Ariane ». Vous aurez alors accès à différentes options de personnalisation en fonction de vos besoins.
Une fois le fil d’Ariane configuré, vous pouvez l’intégrer à votre thème.
Vous avez 3 méthodes :
1. En utilisant le bloc « Breadcrumbs » et l’éditeur de site
La procédure est similaire à celle décrite précédemment :
- Dans le menu « Apparence » de WordPress, cliquez sur « Éditeur ».
- Ajoutez le bloc « Breadcrumbs » à l’emplacement souhaité dans les différents modèles de pages concernés.
2. En insérant manuellement le bloc dans chacune de vos publications
Dans cette approche, le bloc est ajouté manuellement à chaque publication (pages, articles, produits, etc.)
3. En modifiant le fichier adéquat
SEOPress vous propose un morceau de code à coller dans le ou les fichiers PHP appropriés :
<?php
if(function_exists("seopress_display_breadcrumbs")) {
seopress_display_breadcrumbs();
}
?>Créer un fil d’Ariane avec Rank Math SEO
Rank Math est souvent considéré comme le « couteau suisse du SEO WordPress », rivalisant avec Yoast SEO. Ce plugin propose une multitude de fonctionnalités pour améliorer votre SEO, y compris la création d’un fil d’Ariane (sinon, nous n’en parlerions pas ici ????).
Voici comment créer un fil d’Ariane avec Rank Math :
- Installez et activez l’extension.
- Dans l’interface d’administration de WordPress, cliquez sur « Tableau de bord » (le lien juste en dessous de Rank Math).
- En haut à droite de votre écran, cliquez sur « Mode avancé ».
- Cliquez ensuite sur « Réglages généraux ».
- Enfin, cliquez sur « Fil d’Ariane » puis sur « Activer la fonction du fil d’Ariane ».
Contrairement à ses concurrents, au moment de la rédaction de cet article, Rank Math ne propose pas de bloc WordPress dédié.
En l’absence de bloc dédié, vous devrez utiliser un code court.
Avec cette méthode, vous pourrez ajouter votre fil d’Ariane à votre site avec l’éditeur de site ou manuellement, publication par publication, comme nous l’avons vu avec Yoast SEO ou SEOPress.
1. Grâce au code court
Pour intégrer le fil d’Ariane de Rank Math en utilisant un code court, suivez ces étapes :
Cela affichera le fil d’Ariane de Rank Math sur votre page ou article.
2. Directement dans les fichiers PHP
Ici, la procédure est similaire à celle décrite pour Yoast SEO et SEOPress.
Voici le code à coller dans les fichiers appropriés :
/**
* Use the following code in your theme template files to display breadcrumbs:
*/
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>Créer un fil d’Ariane avec Breadcrumb NavXT
Les trois extensions précédemment présentées étaient axées sur l’optimisation SEO de votre site, où la création d’un fil d’Ariane n’était qu’une des fonctionnalités offertes.
Si vous avez besoin uniquement de cet élément de navigation et que vous optimisez votre SEO différemment, nous vous recommandons Breadcrumb NavXT.
Créée en 2017, cette extension a été téléchargée plusieurs millions de fois et est très appréciée par de nombreux webmasters pour sa flexibilité et sa simplicité d’utilisation.
De plus, elle peut être enrichie grâce à des add-ons. Une fois l’extension installée et activée, allez dans « Réglages » puis dans le menu « Breadcrumb NavXT ».
Une fois configuré, vous pouvez ajouter le bloc « Breadcrumb Trail » dans l’éditeur de contenu ou manuellement dans chaque publication.
Pour les utilisateurs avancés, voici le code à ajouter dans les fichiers :
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>Comment ajouter un fil d’Ariane avec Elementor ?
Par défaut, Elementor ne propose pas de fonctionnalité pour créer un fil d’Ariane.
Vous devrez donc utiliser l’une des extensions mentionnées précédemment pour la création et la configuration du fil d’Ariane.
Elementor sera utile pour afficher le fil d’Ariane sur votre thème et personnaliser son apparence sans avoir à manipuler les fichiers de votre thème.
Notons que seul Breadcrumb NavXT propose une intégration gratuite avec Elementor.
Il vous suffit de rechercher le bloc approprié dans la bibliothèque d’éléments d’Elementor et de l’ajouter à votre page. Le fonctionnement est similaire avec SEOPress et Rank Math, mais vous devez disposer de la version payante de ces extensions pour bénéficier du widget Elementor.
Pour Yoast SEO, l’utilisation du widget « Breadcrumbs » nécessite la version payante d’Elementor. Si vous ne pouvez ou ne souhaitez pas payer, vous pouvez toujours utiliser les codes courts suivants :
Ces codes courts doivent être utilisés avec le widget « Code court » d’Elementor.
Comment ajouter un fil d’Ariane avec Divi ?
Comme Elementor, son principal concurrent Divi ne propose pas nativement d’option pour créer et ajouter un fil d’Ariane.
Pour remédier à cela, vous pouvez utiliser soit le plugin gratuit « Breadcrumbs Divi Module », soit une des extensions suivantes avec son code court associé :
Ajouter un fil d’Ariane sur une boutique WooCommerce
Le fil d’Ariane est intégré par défaut dans WooCommerce, vous n’avez donc rien à faire pour le créer.
Pour le personnaliser, des connaissances techniques sont requises, et vous pouvez trouver des détails à ce sujet dans notre article intitulé « Comment personnaliser le fil d’Ariane de WooCommerce ».
Personnaliser le style
Les extensions mentionnées dans cet article permettent de personnaliser le contenu du fil d’Ariane, mais elles ne permettent pas de modifier son apparence visuelle.
L’apparence dépend du thème que vous utilisez, lequel propose généralement une mise en forme par défaut.
Pour adapter le rendu graphique selon vos besoins, vous devrez utiliser du code CSS.
Dans la plupart des cas, le code HTML généré pour afficher le fil d’Ariane contient un attribut class= »breadcrumb », que vous pouvez ensuite cibler en CSS.
Le nom exact de la classe peut varier (par exemple, pour WooCommerce, elle peut s’appeler woocommerce-breadcrumb), mais il contient toujours le mot « breadcrumb ».
Les détails du code CSS dépendent de vos besoins spécifiques et de votre site, donc il n’est pas possible d’aller plus loin dans les explications ici. Vous devrez adapter le CSS en fonction de vos besoins et de votre thème.
Conclusion
Le fil d’Ariane est un élément discret mais crucial de la navigation sur un site web.
Voici un rappel de ses principales fonctions :
Lorsque vous créez un fil d’Ariane sur WordPress, vous avez trois options : le coder vous-même, choisir un thème qui en propose un par défaut, ou utiliser une extension.
Quelle que soit l’option que vous choisissez, vous avez maintenant toutes les miettes de pain en main pour que vos internautes ne se perdent plus.
Et vous, proposez-vous un fil d’Ariane sur votre site WordPress ? Si oui, quelle méthode utilisez-vous pour l’afficher ? Dites-nous tout en commentaire.
Passionné de marketing, de voyage et de littérature, j’ai posé mes valises en Nouvelle-Aquitaine. Depuis 2004, je vis de mes sites. Je partage ici mes tests, bons plans et autres coups de cœur autour de l’affiliation et plus généralement du business en ligne.
