Mois : mai 2025

Un autre super plugin de fil d’Ariane, c’est Breadcrumbs NavXT. Vous pouvez l’afficher sous la forme d’un widget ou bien grâce à un code PHP à insérer dans votre thème:

Fil d’ariane avec séparateur

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

Fil d’ariane sous forme de liste

<ol class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
	<?php if(function_exists('bcn_display_list'))
	{
		bcn_display_list();
	}?>
</ol>

Pour en savoir plus, consultez la documentation en ligne de l’extension Breadcrumbs NavXT.

Autres extensions pour créer un fil d’Ariane avec WordPress

Il existe d’autres plugins pour créer un fil d’Ariane pour WordPress, citons :

• Flexy Breadcrumb, est un plugin léger pour créer un fil d’Ariane,
• Breadcrumb, un super léger plugin pour créer un fil d’Ariane,
• Breadcrumbs Divi Module, une extension super légère pour concevoir un fil d’Ariane,
• Catch Breadcrumb, vous permet d’afficher un fil d’Ariane n’importe où dans votre site web,
• Lana Breadcrumb, indique la position dans une hiérarchie de navigation.

Un fil d’Ariane est vraiment utile ne serait ce que pour savoir où on se trouve dans un site web. Cela évite de se perdre et de quitter alors le site internet par agacement!

L’accueil dans un fil d’Ariane

Ce qui est pas mal de faire c’est de représenter la page d’accueil avec une icône en forme de maison. Cela est très répandu sur le web!

Le fil d’Ariane est aussi important qu’un bon menu de navigation. Cela évite que vous vous perdiez dans le site web.

Un fil d’Ariane, je le répète, est très important pour la navigation sur votre site internet. Il permet d’afficher une hiérarchie horizontale des pages que vous visitez. Avec WordPress, c’est facile grâce à l’ajout d’une extension qui fait le job à votre place! Pour trouver des extensions WordPress, je vous invite à consulter cet article en remontant un peu au niveau de cette page.

ATTENTION : certains thèmes WordPress inclut l’ajout d’un fil d’Ariane dans les réglages d’apparence>Personnaliser.

Allé, encore quelques explications sur le fil d’Ariane avec WordPress. Que dire de plus? Et bien, voici une vidéo de 33 minutes “Tutoriel complet : création d’un fil d’Ariane dynamique avec Next.js” :

Comme vous pouvez le voir sur YOUTUBE, on trouve de tout et surtout de bons tutoriels en vidéos. Suivez ces vidéos et vous continuerez comme ça votre apprentissage en matière de création de sites web.

Le fil d’Ariane est également bon pour référencer votre contenu de site web. Oui, en effet, cela permet un positionnement des pages de votre blog/site.

Créer un fil d’Ariane en CSS et HTML

Il existe un super tutoriel simple et rapide sur le site de Mozilla pour les développeurs ici : https://developer.mozilla.org/fr/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation. Comme quoi avec un petit peu de style CSS et une couche d’HTML on peut faire des miracles.

Je vous transmet ci-dessous le code d’abord en CSS :

.breadcrumb {
padding: 0 .5rem;
}

.breadcrumb ul {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}

.breadcrumb li:not(:last-child)::after {
display: inline-block;
margin: 0 .25rem;
content: "→";
}

Et voilà le code HTML :

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li><a href="#">Sub Category</a></li>
    <li><a href="#">Type</a></li>
    <li><span aria-current="page">Product</span></li>
  </ul>
</nav>

Voilà, cet article touche à sa fin, merci de m’avoir suivi jusqu’au bout et à bientôt pour de nouvelles infos avec le CMS WordPress.