Réaliser un fil d'Ariane

Written by bazooka07 16 november 2010 3 comments

Les fils d’ariane aussi appelés breadcrumbs en anglais sont utilisés pour faciliter la navigation sur un site web. Aujourd’hui nous allons voir comment l'ajouter sur votre thème. Le but de ce tutoriel est d’arriver à créer un fil d’ariane constitué de liens simples.

Modifications de notre thème

Éditez le template home.php de votre thème et ajoutez où vous souhaitez le voir (en général avant le contenu) ce code:

			<div id="breadcrumbs">		
					<?php $plxShow->mainTitle('link'); ?> <span class="sep">&#9658;</span> <?php $plxShow->pageBlog('<a class="#page_status" href="#page_url" title="#page_name">#page_name</a>'); ?>					
            </div> <!-- #breadcrumbs Fin -->

Comme vous pouvez le constater, on insère dynamiquement le lien ainsi que le nom du site, ce dernier nous renverra à l'accueil de PluXml. Dans le cas où l'on utiliserait une page statique en accueil, un lien "Blog" est généré.

Nous allons cette fois passer au template tags.php et indiquer notre emplacement actuel de cette façon:

			<div id="breadcrumbs">		
					<?php $plxShow->mainTitle('link'); ?> <span class="sep">&#9658;</span> Tags <span class="sep">&#9658;</span>  <?php echo $plxShow->plxMotor->cible ?>
            </div> <!-- end #breadcrumbs -->

Dans ce code nous avons juste le nom de la page (Tags) en dur.

Les templates archives.php, categorie.php et erreur.php auront la même base dont on modifiera en dur seulement la fin comme suit:

			<div id="breadcrumbs">		
					<?php $plxShow->mainTitle('link'); ?> <span class="sep">&#9658;</span> Archives ou Catégorie ou Erreur 
            </div> <!-- end #breadcrumbs -->

Ajoutons la modification pour static.php en ajoutant dynamiquement le titre de la page comme suit:

			<div id="breadcrumbs">		
					<?php $plxShow->mainTitle('link'); ?> <span class="sep">&#9658;</span> page <span class="sep">&#9658;</span> <?php $plxShow->staticTitle(); ?>					
            </div> <!-- end #breadcrumbs -->

Il nous reste plus que le template article.php dont on insère la catégorie courante et le titre de l'article:

<div id="breadcrumbs">		
<?php $plxShow->mainTitle('link'); ?> <span class="sep">&#9658;</span> Blog <span class="sep">&#9658;</span> <?php $plxShow->artCat(); ?>  <span class="sep">&#9658;</span> 	<?php $plxShow->artTitle(''); ?>				
                        </div> <!-- end #breadcrumbs -->

Et pour parfaire le tout on style tout ça avec du css que vous placerez bien entendu dans votre feuille de style:

#breadcrumbs{border-bottom:1px solid #ebebeb; font-family:Georgia,serif; text-transform:uppercase; font-size:11px; font-style:italic; padding:0px 15px 11px 45px}

#breadcrumbs, #breadcrumbs a{color:#9e9e9e}

#breadcrumbs a:hover{color:#5f5e5e; text-decoration:none}

#breadcrumbs span.sep{display:inline-block; width:4px; height:7px; margin:1px 1px 0 3px}

Conclusion

Cet article touche à sa fin ! N’hésitez pas à me faire des retours. J’ai essayé de trouver un moyen fonctionnel pour arriver à mes fins et afficher un fil d'ariane ou breadcrumb en anglais.

PluXml

Fast and simple site generator