Le fil d’Ariane ou breadcrumb en anglais présente l’avantage de pouvoir visuellement se situer dans l’arborescence d’un site. Mais pas seulement :).

Parmi les autres avantages et intérêts de celui-ci, il offre la possibilité à un utilisateur de facilement naviguer dans un autre dossier parent du site, il sert de fil conducteur aux moteurs de recherches et améliore l’ergonomie du site.

Alors comme d’habitude comme c’est un besoin régulier sur les sites que je développe, j’en ai fait une fonction que j’implémente facilement sur les sites Internet qui le requiert.

Le code :

/* Fil d'ariane */
function ariane($class) {
global $post, $cat, $ThePath;
$separator = ' » ';
   if($ThePath!="") {
      /* si on est déjà passé, inutile de refaire la même chose, donc on défini juste la classe ;)... */
      echo '<div class="ariane '.$class.'"><a class="home" title="Allez à la page d\'accueil" href="/">Accueil</a>'.$separator.$ThePath.'</div>';
      return;
   }
   if(is_single()) {
      $categories = get_the_category($post->ID);
      if(count($categories)==1 ) {
         $category =$categories[0]->cat_ID;
         $ThePath=get_category_parents($category, true, $separator);
      }
      else {
         $ThePath = '';
         if($categories){
            foreach($categories as $category) {
               $ThePath .= '<a href="'.get_category_link( $category->term_id ).'">'.$category->cat_name.'</a>'.$separator;
            }
         }
      }
      $ThePath.= get_the_title( $post->ID );
   }
   else {
      $ThePath=get_category_parents($cat, true, $separator);
      $ThePath=trim($ThePath, $separator);
   }
   echo '<div class="ariane '.$class.'"><a class="home" title="Allez à la page d\'accueil" href="/">Accueil</a>'.$separator.$ThePath.'</div>';
}

Et voilà, maintenant pour pouvoir appeler notre fonction, il suffit d’ajouter dans la page « category.php » ou bien « single.php » cet appel là où vous souhaitez voir apparaître votre fil d’Ariane 🙂 .
Moi, pour le fil du haut, j’utilise :

ariane('top');

et pour celui du bas :

ariane('foot');

Comme vous pouvez le constater, j’ai utilisé les classes « top » et « foot » qui sont assez parlantes et qui, dans ma feuille de styles, utilisent respectivement :

.ariane.top {
   border-bottom: 1px solid grey;
   padding-bottom: 10px;
   margin: 20px 0;
 }
.ariane.foot {
   border-top: 1px solid grey;
   padding-top: 10px;
   margin: 20px 0;
 }

Le résultat, vous l’avez sous les yeux en haut et en bas de page ;). A vous de jouer !