Un fil d’Ariane – breadcrumb en anglais, permet d’afficher le chemin de navigation sur un blog. De cette manière, vos visiteurs connaissent précisément l’endroit où il se trouve sur votre site ainsi que le système hiérarchique employé – page parente, catégorie, tags… Ce tutoriel a donc pour objectif de mettre en place un tel système à l’aide d’un plugin WordPress simple et complet.
Pré-requis
Pour commencer, téléchargez puis uploadez le plugin suivant :
Breadcrumb NavXT
Rendez-vous ensuite dans le menu Extensions. Là, il est nécessaire d’activer :
- Breadcrumb NavXT – Administration ;
- Breadcrumb NavXT – Core ;
Ceci fait, vous remarquerez la présence d’un nouveau widget dans le menu Apparence. Ceci dit, il n’est guère très pratique d’utiliser un widget pour indiquer une position.
Il nous faut donc intervenir via le code source de votre thème que vous utilisez.
N.B : au préalable, je vous conseille d’effectuer une copie de sauvegarde de votre dossier /wp-content/votre-thème/ pour parer à toute modification malencontreuse.
De plus, cette extension requiert d’être en version 5 de PHP.
Édition du thème WordPress
Connectez-vous à votre administration WordPress – si ce n’est déjà fait, déroulez le menu Apparence puis cliquez sur Éditeur. Ouvrez à présent le fichier qui contiendra le bout de code nécessaire. Généralement, le fil d’Ariane se positionne dans le header.php (en-tête) mais c’est à vous de voir en fonction de votre thème et de l’emplacement souhaité. Par exemple, j’ai placé le mien dans le fichier single.php.
Copiez puis insérez le code suivant :
<div class="breadcrumb">
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}
?>
</div>
Pour enregistrer les changements, cliquez sur Mettre à jour le fichier.
Comme vous pouvez le remarquer, nous utilisons une balise <div> dont la classe est breadcrumb autrement dit, il nous suffit d’ajouter cette dernière à votre feuille de style pour personnaliser l’affichage du chemin de navigation.
Pour ce faire, ouvrez votre feuille de style CSS – toujours dans le module Éditeur du menu Apparence, puis insérez le bout de code suivant :
.breadcrumb {
}
Libre à vous désormais d’ajouter des propriétés CSS – le mieux étant d’utiliser Firefox avec l’extension Firebug pour vous faire une idée en temps réel du résultat souhaité.
Notez enfin que vous pouvez remplacer la classe par une ID en indiquant <div id= »breadcrumb »> dans le premier bout de code ce qui vous offrira plus de flexibilité. Vous ne serez pas, pour ainsi dire, contraint par les styles précédents. De même, dans la feuille de style CSS indiquez le code suivant – en lieu et place du précédent :
#breadcrumb {
}
Là encore, n’oubliez pas de cliquez sur Mettre à jour le fichier après chaque modification.
Félicitations ! Votre blog est à présent doté d’un fil d’Ariane qui saura guider promptement vos visiteurs offrant ainsi une qualité de navigation supérieure. Pour en savoir plus sur les usages avancés que permet ce plugin, consultez le site officiel (en anglais).
Excellente astuce!
Les fils d’ariane sont très pratiques sur les blogs et sites web, tant sur le point ergonomique(permet de mieux s’y retrouver) que pour le référencement(mot clé bien placés dans la page).
Merci pour l’explication et au passage. Etant chez OVH ça n’a pas marché à cause de php5 et m’a indiqué une erreur ici : breadcrumb-navxt/breadcrumb_navxt_admin.php on line 37
Solution, il suffit de mettre dans le htaccess : SetEnv PHP_VER 5
Si ça peut aider de futurs utilisateurs
Super !!! merci pour le tuyau, car j’avais également ce problème !!!
@Alexis : merci à toi !
@L.Jee : retour très important en effet. Beaucoup d’hébergeurs ne sont pas encore passés à PHP 5.
Perso, je préfere l’expression française « fil d’ariane », c’est tellement plus poétique que « breadcrumb »
J’aime beaucoup ce type d’organisation du contenu, pratique pour se reperer dans un site, nous, et evidemment, les moteurs de recherche.
@Jori : ce doit être mon côté anglais qui ressort…
Ben, j’ai l’impression que mon thème implémentait la fonction sans que je demande rien
(youpii, un plugin de moins !)
Je l’ai installé sur mon blog. Plus pour les robots qu’autre chose, mais bon
!
@Thomas : visuellement parlant, ça fait plus pro aussi je trouve !
Merci pour ce petit tuto, ça m’a bien aidé.
Pour ce qui est de l’activation du plugins, si vous avez une erreur du genre le premier plugin activé et le second ne peut pas l’être parce qu’il génére une fatal error, c’est normal, il ne faut activer qu’UNE SEULE des deux extensions.
Bonjour,
oups… petit problème avec WP 2.8.
il m’affiche un message d’erreur « fatale » au moment ou j’active l’extension…
y a-t-il une solution? un remède miracle ?
je suis bien en PHP5..
@Franck : je vérifierais ce weekend mais normalement ce plugin est compatible avec WordPress 2.8. As-tu le commentaire de Julia, juste au-dessus du tien ? Peut-être est-ce la solution…
Bonjour,
le code suivant class= »breadcrumb »
à coller dans la page header
je peux le mettre n’importe où, çà a une incidence ?
Je me suis aperçu d’une erreur dans le premier bout de code qui ne contenait pas la fonction PHP nécessaire pour afficher le fil d’Ariane.
Ce bout de code est à insérer là où vous souhaitez voir s’afficher ce fil.
Des bases de HTML sont donc requises.
Bonjour
Saurais tu comment ne pas afficher le titre de l’article dans le fil d’ariane ?
Je te remercie d’avance et continue comme ça !
Bonjour, je me pose la même question que toi : je ne veux pas que le titre de l’article s’affiche.
As tu trouvé une astuce pour palier cela ?
Merci d’avance
Non je n’ai pas trouvé malheureusement. Je ne sais pas pourquoi tu veux le supprimer mais perso c’est pour Google … faudrait pas qu’il pense que je met 50 fois le titre dans la page, déjà que je le met deux fois j’aurai aimé supprimer cette troisième fois.
Merci quand même ! Pour ma part, c’était plutôt pour une questio esthétique, mais tant pis je ferai avec.
Un autre tutoriel pour créer un fil d’Ariane sans plugin existe !
Dans ce cas de figure, on peut facilement contrôler l’affichage.
Si jamais dans la DIV et dans le CSS il faut mettre la même expression. Breadcrumb ou breadcrumbs, mais il faut que ce soit identique dans les deux fichiers, ce qui n’est pas le cas dans l’exemple…sinon ca ne marche pas! Pour les nuls comme moi
Bug corrigé, merci !