Générer un fil d'Ariane sur votre blog WordPress

Pré-requis

Pour commencer, téléchargez puis uploadez le plugin suivant :

  Breadcrumb NavXT 3.1.0 (44,7 KiB, 416 hits)

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"></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).

11 commentaires pour “Générer un fil d'Ariane sur votre blog WordPress”

1. Alexis dit :

   26 février 2009 à 18 h 36 min

   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).

   Répondre
2. L.Jee dit :

   27 février 2009 à 4 h 50 min

   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

   Répondre
3. Maigret dit :

   27 février 2009 à 9 h 12 min

   @Alexis : merci à toi !

   @L.Jee : retour très important en effet. Beaucoup d’hébergeurs ne sont pas encore passés à PHP 5.

   Répondre
4. Jori dit :

   3 mars 2009 à 16 h 03 min

   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.

   Répondre
5. Maigret dit :

   3 mars 2009 à 18 h 54 min

   @Jori : ce doit être mon côté anglais qui ressort…

   Répondre
6. Li-An dit :

   4 mars 2009 à 15 h 39 min

   Ben, j’ai l’impression que mon thème implémentait la fonction sans que je demande rien (youpii, un plugin de moins !)

   Répondre
7. Thomas dit :

   22 mars 2009 à 19 h 11 min

   Je l’ai installé sur mon blog. Plus pour les robots qu’autre chose, mais bon !

   Répondre
8. Maigret dit :

   23 mars 2009 à 17 h 20 min

   @Thomas : visuellement parlant, ça fait plus pro aussi je trouve !

   Répondre
9. Julia dit :

   9 avril 2009 à 13 h 58 min

   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.

   Répondre
10. Franck dit :

    23 juin 2009 à 16 h 03 min

    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..

    Répondre
11. Maigret dit :

    24 juin 2009 à 14 h 19 min

    @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…

    Répondre