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

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 :

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