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

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

Génère un fil d'Ariane pour indiquer à vos visiteurs où ils se situent.

Taille : 89,8 KiB  •  Date : 20 mars 2010 •  Hits : 2 331

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

26 commentaires

  1. Alexis

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

  2. L.Jee

    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

  3. Jori

    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.

  4. Julia

    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.

  5. Franck

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

    1. Aurélien Denis auteur de l’article

      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.

    1. Capucine

      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

      1. R-win

        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.

  6. Merz

    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

  7. Célia

    Est-ce que quelqu’un saurait comment, en utilisant ce plugin, supprimer l’apparition du fil d’ariane sur la page d’accueil ? Ça fait pas terrible ….

  8. djidj

    bonjour à tous,
    j’essaie de mettre en place un breadcrumb avec des posts dans plusieurs catégories, j’ai essayer avec navXT mais lorsqu’un post est dans plusieurs categories il affiche uniquement la premiere categorie dans lequel le post se trouve.

    Est ce que vous avez une idee de comment faire??

    Merci à tous !!!

    djidj

Laisser un commentaire