[MAJ] Comment ajouter un breadcrumb à son blog WordPress sans plugin.

Pour ce tutoriel, nous allons voir comment ajouter très facilement et sans plugin un breadcrumb (ou fil d’Ariane) sur son blog. Par défaut WordPress ne propose pas cette fonction. De nombreux plugin existe afin de générer un fil d’ Ariane, mais comme vous aller le voir, il est possible de créer très facilement son propre 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 ou un page d’un site web.

Voyons comment mettre en place notre fil d’Ariane sous WordPress. Tout bon thème WordPress est articulé sur quelques fichiers qui en font sont ossature. Par exemple quelque que soit le thème vous retrouverez les pages functions.php, sidebar.php, header.php, …

Vous pouvez retrouver tous les fichiers composant votre thème depuis l’administration de WordPress dans Apparence – > Editeur.

 Pour commencer nous allons utiliser (et ensuite personnaliser), un script du site Geekeries.fr (une référence pour les fans de WordPress).

Voici le script :

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

Ce script est à copier dans le fichier Functions.php de votre thème. Généralement vous copier les ajouts de code à la fin du fichier.

Pour ajouter cette fonction aller dans Apparence – > Editeur – > Functions.php.

Puis coller le code en bas de fichier. J’ai rajouté des commentaires afin de rendre le code plus lisible.

Voici mon code modifié :

function GkAriane() {
 if (!is_home()) {
 echo '<a href="'; echo get_option('home'); echo '">';
 echo "Home";
 echo "</a> » ";
 if (is_category() || is_single()) {
 the_category('title_li=');
 } elseif (is_search()) {
 echo "Termes recherchés : ". get_search_query();
 }
 elseif (is_page()) {
 echo get_the_title();
 }
 elseif (is_404()) {
 echo "Erreur 404";
 }
 }
 }

Décryptons ensemble ce code, qui peut-être adapter à n’importe quel blog et besoin particulier, il suffit juste de savoir comment ça fonctionne.

if (is_category() || is_single()) : Ce premier test permet d’afficher le fil d’Ariane dans les posts et lorsqu’on clique sur une catégorie, il affiche uniquement le titre de la catégorie. Si vous voulez en plus afficher le titre du post, rajouter ce code :

if (is_single()) {
 echo " » ";
 the_title();
 }

Voilà un exemple sur mon blog de test :

Affichage d’un post classique :

En cliquant sur une catégorie, pour afficher tous les articles contenus dans celle-ci :

 

elseif (is_search()) : Ce test permet d’afficher un fil d’Ariane personnalisé lorsque les visiteurs utilise le formulaire de recherche.

Voici un exemple :

Dans cet exemple je reprends les termes saisis par l’utilisateur et les affichent dans le breadcrumb.

elseif (is_page()) : Ce test permet d’afficher le titre de la page ou l’on se trouve, je dis bien de la page pas d’un post (=article).

Voici un exemple de page statique:

 

elseif (is_404()) : Ce test permet d’afficher un breadcrumb personnalisé lorsqu’un de vos visiteurs arrive sur une page d’erreur 404.

Voici un exemple :

 

L’avantage avec ce type de script, vous pouvez personnaliser comme vous le voulez l’affichage en fonction du type de page.

Vous pourriez aussi ajouter d’autres conditions comme par exemple un fil d’Ariane particulier pour la page des archives en utilisant les fonctions is_month(), is_day() ou encore pour la page des tags en utilisant les fonctions is_tag() de WordPress.

La deuxième étape est d’insérer l’appel de la fonction GkAriane() dans les fichiers ou vous voulez le voir apparaître. Par exemple pour mon thème j’ai rajouté la fonction dans les fichiers single.php, 404.php, search.php et archives.php, mais cela dépend de votre thème et surtout de vous.

Voyons un exemple avec le fichier single.php :

 

Pour définir l’emplacement exact, il faudra peut-être tâtonné un peux mais après vous serez tranquille.

J’utilise la fonction function_exist (‘GkAriane’) pour tester si la fonction est présente dans le fichier function.php, cette fonction est très importante et peu vous éviter de planter votre blog si la fonction GkAriane est absente du fichier (Mise à jour ou transfert du blog).

Comme vous pouvez le voir j’ai aussi rajouté une classe class= breadcrumb afin de personnaliser le style de mon fil d’Ariane.

Pour cela vous devez éditer le fichier style.css de votre thème et rajouter le code suivant (Attention ce code correspond à mon thème, il vous suffit juste de changer la typographie, la couleur, …)

/*////////////////////////////////////////////////////////////////////
 // 13 - Breadcrumb
 ////////////////////////////////////////////////////////////////////*/
 .breadcrumb {
 color: #a9a9a9;
 font-family: Georgia, Times, "Times New Roman", serif;
 font-style: italic;
 padding-top: 5px;
 }

A rajouter généralement en fin de fichier avec un commentaire pour rendre le code plus lisible.

 

Voilà, plus besoin de plugin pour générer votre fil d’Ariane, vous êtes maintenant libre de vos mouvements et de vos affichages.

That’s All.

11 Potins

  1. vraiment sympa ce tuto, les explications sont top, ça marche bien

  2. Je viens de voir, merci pour la mention :)

  3. Bonjour,
    Très intéressant, je n’ai pu le faire que dans 404.php.
    Je suis en train de développer un site « woocommerce ».
    Les pages que j’affiche sont une liste de produits par catégorie de produit.
    Je suis débutant dans WP.
    Comment puis modifier la fonction GkArianne afin qu’elle apparaisse sur mes pages produits ?
    Cordialement

  4. intéressant mais pourquoi avoir un plugin pour savoir? Puisque le meilleur des plugins SEO pour une grandie partie des utilisateurs de WordPress est WordPress SEO by Yoast et il a cette fonction.

  5. Merci pour ces explications. Bon travail.

  6. merci bcp pour la réponse
    eric

  7. Bonjour,

    Effectivement vous devez appeler la fonction gKAriane() dans les pages de vos thèmes et la placer ou vous voulez voir apparaitre le breadcrumb, comme il est dit dans le tutoriel :

    Par exemple pour mon thème j’ai rajouté la fonction dans les fichiers single.php, 404.php, search.php et archives.php, mais cela dépend de votre thème et surtout de vous.

    Généralement tous les thèmes wordpress ont les mêmes noms de pages single.php, search.php, ….

    En espérant vous avoir aidé.

    A bientôt.

  8. y’a u truc qui m’échappe, le début oky; pour le css oky
    mais faut pas ajouter un code dans page.php ? je suis un noob et je galère comme un malade avec WP, franchement quand les hens vendent des formation créer un site en quelques Click avec joomla ou WP ..
    berf
    si vous pouvez me renseigner car entr ele début et la fin c’est le flou artistique pour moi ;)
    merci pour le tuto en tout cas
    eri

  9. Tout le monde ne jure plus que par des plugins alors que c’est parfois plus rapide de le faire soit-même… Très bon article en tout cas, merci.

  10. C’est très intéressant, je vais essayer d’en faire, merci pour le tuto.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *