Comment créer un fil d’Ariane sur mon blog ?

Comment créer un fil d’Ariane sur mon blog ?

Pour faciliter la navigation sur votre site, il est possible d’afficher un fil d’Ariane dans vos pages et vos articles. Plusieurs extensions payantes vous permettent de les créer sans coder. Si vous ne souhaitez pas débourser ces quelques euros, découvrez ici comment vous y prendre sans vous perdre dans le code HTML.

Initialement, l’expression « Fil d’Ariane » (en anglais « Breadcrumb ») vient d’un mythe grec. Contre la promesse de l’épouser, Ariane fournit à Thesée un fil qu’il déroula pour retrouver son chemin et s’échapper du labyrinthe.

Sur le web, le fil d’Ariane permet à l’internaute de voir le chemin parcouru pour arriver à une page ou un article. Il peut se présenter comme ceci :

Accueil > Catégorie > nom de l’article
ou
Accueil > nom de la page

Pour les débutants et les non-initiés au codage, plusieurs extensions payantes sont disponibles sur WordPress pour l’afficher facilement sur votre site.

Mais il est également facile de créer un fil d’Ariane gratuitement à partir de l’extension Yoast SEO. Installé sur votre blog, ce plugin vous permet de paramétrer plusieurs éléments utiles au référencement (meta-title, méta-données… de la page d’accueil, des articles et pages, des médias, des archives…).

yoast-seo-fil-ariane-3Pour créer le fil d’Ariane, il faut se rendre dans la rubrique « Avancée ».

Dans cette page, vous choisirez :

1. d’activer ce fil sur votre blog,

2. les éléments et textes qui s’afficheront dans ce fil (séparateur, texte d’ancrage pour la page d’accueil, préfixe du fil dans les archives et dans les pages de recherche…).

Une fois ces modifications enregistrées, vous devrez vous rendre dans votre éditeur.

Pour l’afficher dans vos pages, vous devrez vous rendre dans le fichier « page.php ». Avant <?php the_title(); ?>, vous copierez le code suivant :

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

Pour l’afficher dans vos articles, vous devrez vous rendre dans le fichier « single.php », et copier ce même code avant <section id= »XXX » data-section= »blog »>.

Bon surf sur votre site !

Vanessa Asse