Speak English? Click here to read my English blog!

Une fonction breadcrumb pour WordPress

Posté par jbj le 26 avr 2008 dans Wordpress • 19 commentaires
Protected by Copyscape Duplicate Content Check
 

Par défaut, WordPress ne propose pas de fonction pour afficher un breadcrumb. (appellé aussi fil d'ariane où chemin de fer en Français) Nous allons voir ensemble comment créer cette fonction, afin d'afficher le fil sous la forme Home » Categorie » Article.

Le breadcrumb, toute une histoire...

Wikipedia nous renseigne parfaitement sur le breadcrumb:

En ergonomie — et plus particulièrement de nos jours dans le domaine de la conception d’interfaces informatiques — un fil d’Ariane, aussi appelé chemin de fer (et en anglais, breadcrumbs, par allusion aux miettes de pain utilisées par le Petit Poucet ainsi que Hansel et Gretel) est une aide à la navigation sous forme de signalisation de la localisation du lecteur dans un document (très souvent, une page d’un site web).

Une fonction breadcrumb pour WordPress

Fonctionnement

Une fois de plus, les tags conditionnels de WordPress vont nous être particulièrement utiles. Grâce à eux, nous pouvons déterminer facilement et avec certitude si la page affichée par le visiteur est un article, une page, une archive de catégorie...

Il nous restera ensuite à utiliser les fonctions adéquates pour afficher le chemin. Pas de difficultés là non plus, WordPress étant déja doté de tout ce qu'il faut pour récupérer les liens vers la home, les articles et les pages.

J'ai préféré écrire une fonction propre plutôt que de vous inciter à copier-coller à l'arrache une petite dizaine de lignes dans le code de votre thème.
Copiez la fonction the_breadcrumb() dans le fichier functions.php de votre thème:

function the_breadcrumb() {
	if (!is_home()) {
		echo '<a href="';
		echo get_option('home');
		echo '">';
		bloginfo('name');
		echo "</a> &raquo; ";
		if (is_category() || is_single()) {
			the_category('title_li=');
			if (is_single()) {
				echo " &raquo; ";
				the_title();
			}
		} elseif (is_page()) {
			echo the_title();
		}
	}
}

Désormais, pour afficher le breadcrumb, il ne vous reste plus qu'à éditer les fichiers archive.php, single.php et page.php.
Collez-y l'appel à la fonction là ou vous souhaiter voir le fil apparaitre:

<?php the_breadcrumb(); ?>

Et voilà, vous venez de doter votre blog d'un fil qui permettra à vos visiteurs de s'y retrouver et de revenir facilement sur vos pages de catégories.
A noter, ce code pourrais facilement être amélioré: On pourrait par exemple limiter l'affichage des catégories et n'en faire apparaitre qu'une seule.

Quand à ceux qui préfèreront installer un plugin au lieu d'éditer leur thème, Breadcrumb NavXT devrait largement combler leur attentes.

Tags: ,

Autres articles dans la catégorie Wordpress



19 commentaires

» Flux RSS des commentaires
  1. tapemoi.com le 26 avril 2008 à 15:54:

    Une fonction breadcrumb pour WordPress…

    Par défaut, WordPress ne propose pas de fonction pour afficher un breadcrumb. (appellé aussi fil d’ariane où chemin de fer en Français) Nous allons voir ensemble comment créer cette fonction, afin d’afficher le fil sous la forme Home » Catego…

  2. Une fonction breadcrumb pour Wordpress « André le 26 avril 2008 à 17:08:

    [...] lien vers la nouvelle | vu sur scoopeo [...]

  3. Forge le 28 avril 2008 à 16:26:

    Excellent moyen de navigation simple et facile à mettre en place.

    Néanmoins, lorsque je le met en place, il rend (une fois sur les articles seuls) les menus latéraux ainsi qu’une bannière d’angle… invisibles. Du coup l’internaute ne peu plus sortir de l’article ou il se trouve.

  4. jbj le 28 avril 2008 à 16:37:

    Ouais, je viens de voir ça sur ton blog, c’est assez étrange car je n’ai pas eu ce problème lorsque j’ai testé sur mon thème…
    Il faudrais faire des essais, je remarque en affichant la source de la page qu’il manque une partie du code htm, ce qui explique que ta sidebar ne s’affiche pas.

  5. Forge le 28 avril 2008 à 16:41:

    Je vais jeter un oeil sur le code.
    Peut-être une balise mal fermée.

    Merci de ta réactivité ;)

  6. Gael - Danger-Sante.org le 29 avril 2008 à 23:26:

    Superbe « function » ! Bravo !!

    Gael РR̩dacteur pour http://www.danger-sante.org/

  7. Gael - Danger-Sante.org le 29 avril 2008 à 23:27:

    A la place des « ? » ca n’aurait pas été mieux de mettre des « > » ?

    C’est possible de le faire en modifiant le code, si oui quoi ?

    Merci d’avance!

  8. Gael - Danger-Sante.org le 29 avril 2008 à 23:29:

    Désolé, en effet c’était plus que simple…
    Je trouve la réponse à ma question en 30s :

    function the_breadcrumb() {
    if (!is_home()) {
    echo ‘‘;
    bloginfo(‘name’);
    echo «      > « ;
    if (is_category() || is_single()) {
    the_category(‘title_li=’);
    if (is_single()) {
    echo  » > « ;
    the_title();
    }
    } elseif (is_page()) {
    echo the_title();
    }
    }
    }

  9. jbj le 29 avril 2008 à 23:49:

    En fait, les « ? » dont tu parles sont l’effet d’un copié-collé, à la base (Je dit à la base car le code merdouille un peu à cause de l’éditeur de WordPress) il s’agissait de l’entité html &raquo;, qui te fait ce sign là: »
    Je le trouvais un peu plus classe que le >, dommage qu’il ne soit pas super bien passé dans l’éditeur :(

  10. jbj le 29 avril 2008 à 23:52:

    Et hop, problème réglé ;)
    Merci à toi pour ta vigilance!

  11. Gael - Danger-Sante.org le 3 mai 2008 à 16:52:

    Petit bug, si un article se trouve dans 2 catégories

    Du type : Titreblog > CATEGORY1itle_li= CATEGORY2 > Titrearticle

    Un « title_li=  » vient squatter!

  12. jbj le 3 mai 2008 à 17:10:

    Bien vu, j’avais oublié de tester avec deux catégories…Je corrige ça et vous tient au courant :)

  13. Camille JUNG le 28 octobre 2008 à 14:27:

    Très bon article, je recherchais justement ces infos sur google. Merci !

  14. Le fil d'Ariane, ou comment satisfaire ses visiteurs | BlogMastering le 17 mars 2009 à 22:43:

    [...] Un petit hack manuel, disponible sur lyxia.org [...]

  15. Stephan le 6 avril 2009 à 19:29:

    Excellent bout de code, pratique, utile, et facile à mettre en place

    Une question en revanche : je suis une bille en PHP (mon truc, c’est plutôt la plume… ), quelqu’un peut-il me dire comment avoir le mot « Accueil », en lieu et place du nom du blog ?

    Et pendant qu’on y est, une deuxième question : comment prendre en compte les sous-catégories ? Car avec le code actuel, les sous-catégories sont au même niveau que les catégories. Par exemple, au lieu d’avoir Accueil >Cat 1 > Sous-Cat 1, on a directement Accueil > Sous-Cat 1, sans passer par la case Cat 1. Dommage !

    Si quelqu’un a la solution, je suis preneur. Merci d’avance.

  16. Jérôme le 28 juin 2009 à 18:47:

    Bonjour,
    Merci pour ce code simple et efficace.
    Une petite question néanmoins; dans le site que je réalise la navigation se fait uniquement par mots clés. Quelle(s) ligne(s) modifier pour avoir un fil d’ariane qui prend en compte les tags ?
    Un grand merci d’avance.

  17. bgouban le 1 juillet 2009 à 1:04:

    Pour le bug sur plusieurs catégories, il suffit de remplacer

    the_category(‘ title_li ‘);

    Par

    the_category(‘ et ‘);

    Et le tour est joué. Merci pour le breadcrumb, indispensable pour une bonne ergonomie / accessibilité ;) Bonne continuation

  18. Titifrim le 16 septembre 2009 à 16:49:

    Super fonction merci beaucoup, une très bonne alternative à Breadcrumb NavXT qui ne fonctionne pas sur un environnement antérieur à PHP5 !

  19. henri le 27 octobre 2009 à 23:50:

    @jbj je déterre ce post pour savoir si tu as pu modifier la fonction pour générer les sous catégories et les catégories parents car apparemment cela ne fonctionne plus lorsque tu as ce genre de situation. Merci par avance