Créer un fil d’Ariane sans plugin avec WordPress

Sur WordPress Channel, le fil d’Ariane ou breadcrumb en anglais, affiche le chemin de navigation. Utile pour se repérer plus facilement et bénéfique pour les moteurs de recherche, nous évoquions dans un podcast précédent une méthode d’insertion avec plugin. Aujourd’hui, apprenez à faire de même sans plugin avec WordPress !A l’aide d’un Éditeur de texte, éditez le fichier header.php qui se trouve dans le dossier /wp-content/themes/NOM_DU_THEME. Ce fichier peut être téléchargé via un client FTP ou éditer en temps réel avec Notepad++ sous Windows ou Coda sous MacOS X.

Il est probable que vous ne souhaitiez pas insérer le fil d’Ariane dans votre header (en-tête). Notez toutefois que l’avantage de passer par ce fichier est que vous n’aurez à copier qu’une seule fois les lignes de code ci-dessous… ce qui n’est pas le cas pour un fichier single.php ou index.php.

Tout dépend donc de votre thème. Localisez ensuite l’endroit où vous envisagez d’afficher ce fameux fil d’Ariane. Aidez-vous des balises div et de Firebug.

Copiez ensuite les lignes de code suivante :

<div>
<p>Vous êtes ici : <?php // Breadcrumb navigation
 if (is_page() && !is_front_page() || is_single() || is_category()) {
 echo '<ul>';
 echo '<li><a title="Accueil - NOM DU SITE" rel="nofollow" href="http://VOTRE_SITE.com/">Accueil</a></li>';

 if (is_page()) {
 $ancestors = get_post_ancestors($post);

 if ($ancestors) {
 $ancestors = array_reverse($ancestors);

 foreach ($ancestors as $crumb) {
 echo '<li><a href="'.get_permalink($crumb).'">'.get_the_title($crumb).'</a></li>';
 }
 }
 }

 if (is_single()) {
 $category = get_the_category();
 echo '<li><a href="'.get_category_link($category[0]->cat_ID).'">'.$category[0]->cat_name.'</a></li>';
 }

 if (is_category()) {
 $category = get_the_category();
 echo '<li>'.$category[0]->cat_name.'</li>';
 }

 // Current page
 if (is_page() || is_single()) {
 echo '<li>'.get_the_title().'</li>';
 }
 echo '</ul>';
 } elseif (is_front_page()) {
 // Front page
 echo '<ul>';
 echo '<li><a title="Accueil - NOM DU SITE" rel="nofollow" href="http://VOTRE_SITE.com/">Accueil</a></li>';
 echo '</ul>';
 }
?></p></div>

N’oubliez pas de modifier les URLs du code pour les faire correspondre à celles de votre site !

Cette méthode est très efficace et remplacera efficacement un plugin WordPress ! C’est d’ailleurs une méthode que j’applique sur tous mes sites…

Crédit photo : Mister Kha

40 commentaires

      1. imath

        Bonjour Aurélien,

        Merci pour ce tuto, ton code dans le script functions.php pourrait ressembler à :

        function aurelien_breadcrumb(){
          global $post;
          ?>
          <p>Vous êtes ici : <?php // Breadcrumb navigation
        	 if (is_page() && !is_front_page() || is_single() || is_category()) {
        	 echo '<ul>';
        	 echo '<li><a title="Accueil" rel="nofollow" href="'.get_option('siteurl').'">Accueil</a></li>';
        
        	 if (is_page()) {
        	 $ancestors = get_post_ancestors($post);
        
        	 if ($ancestors) {
        	 $ancestors = array_reverse($ancestors);
        
        	 foreach ($ancestors as $crumb) {
        	 echo '<li><a href="'.get_permalink($crumb).'">'.get_the_title($crumb).'</a></li>';
        	 }
        	 }
        	 }
        
        	 if (is_single()) {
        	 $category = get_the_category();
        	 echo '<li><a href="'.get_category_link($category[0]->cat_ID).'">'.$category[0]->cat_name.'</a></li>';
        	 }
        
        	 if (is_category()) {
        	 $category = get_the_category();
        	 echo '<li>'.$category[0]->cat_name.'</li>';
        	 }
        
        	 // Current page
        	 if (is_page() || is_single()) {
        	 echo '<li>'.get_the_title().'</li>';
        	 }
        	 echo '</ul>';
        	 } elseif (is_front_page()) {
        	 // Front page
        	 echo '<ul>';
        	 echo '<li><a title="Accueil" rel="nofollow" href="'.get_option('siteurl').'">Accueil</a></li>';
        	 echo '</ul>';
        	 }
        	?></p></div>
          <?php
        }
        

        Ensuite depuis header.php, il suffit d’appeler la fonction :

        <?php aurelien_breadcrumb(); ?>

        A+

          1. nanard25

            Bonsoir Aurelien,

            Merci encore pour ce code
            Je l’ai modifié si vous le permettez pour avoir un affichage sur une ligne:
            <pre>
            function FilAriane(){
            global $post;
            ?>
            <p>Vous êtes ici : cat_ID).' »>’.$category[0]->cat_name.'</a> > ‘;
            }

            if (is_category()) {
            $category = get_the_category();
            echo $category[0]->cat_name;
            }

            // Current page
            if (is_page() || is_single()) {
            echo get_the_title();
            }

            } elseif (is_front_page()) {
            // Front page

            echo ‘&lta title= »Accueil » rel= »nofollow » href= »‘.get_option(‘siteurl’).' »>Accueil</a>’;

            }

            ?></p></div>
            <?php
            }
            </pre>

  1. Christian

    au plus simple :

    <a title="Accueil Kocoon Bien Être" rel="nofollow" href="/ »>Accueil
    <?php
    // Breadcrumb navigation
    $sep = ' > ‘;
    if (!is_front_page()) {
    if (is_page()) {
    $ancestors = get_post_ancestors($post);
    if ($ancestors) {
    $ancestors = array_reverse($ancestors);
    foreach ($ancestors as $crumb) {
    echo $sep. ».get_the_title($crumb). »;
    }
    }
    }
    if (is_single()) {
    $category = get_the_category();
    echo $sep.’cat_ID).' »>’.$category[0]->cat_name.’‘;
    }
    if (is_category()) {
    $category = get_the_category();
    echo $sep. ».$category[0]->cat_name. »;
    }
    // Current page
    if (is_page() || is_single()) {
    echo $sep. ».get_the_title(). »;
    }
    }
    ?>

    coté css

    ul#breadcrumb {
    list-style-type:none;
    }
    ul#breadcrumb li{
    float:left;
    }

  2. Pezzos

    Je l’ai modifié car des fonctions ne fonctionnaient pas et je l’ai mis à la sauce designer (plutôt que développeur).
    De plus, j’ai mis le texte « Vous êtes ici » dans le ul li pour qu’avec un morceau de css, on mette tout en ligne.
    J’ai aussi adapté pour que le code n’ait plus besoin de contenir des
    <a title= »Accueil – NOM DU SITE » rel= »nofollow » href= »http://VOTRE_SITE.com/ »>
    et qu’il soit directement adaptable.

    <div id= »breadcrumb »>
    <ul>
    <li>Vous êtes ici : </li>
    <?php if (is_page() && !is_front_page() || is_single() || is_category()) {?>

    <li>
    <a title= »Accueil – <?php bloginfo(‘name’); ?> » rel= »nofollow » href= »<?php echo get_option(‘home’); ?> »>Accueil</a>
    </li>

    <?php
    if (is_page())
    {
    $ancestors = get_post_ancestors($post);
    if ($ancestors)
    {
    $ancestors = array_reverse($ancestors);

    foreach ($ancestors as $crumb)
    {?>
    <li>
    <a href= »<?php get_permalink($crumb);?> »><?php get_the_title($crumb);?></a>
    </li>
    <?php }
    }
    }
    if (is_single()) {?>
    <li><?php the_category(‘, ‘); ?></li>
    <?php }

    if (is_category())
    {
    $category = get_the_category();?>
    <li><?php echo $category[0]->cat_name; ?></li>
    <?php }

    if (is_page() || is_single()) {?>
    <li><?php the_title(); ?></li>
    <?php }
    } elseif (is_front_page()) {?>

    <li>
    <a title= »Accueil – <?php bloginfo(‘name’); ?> » rel= »nofollow » href= »<?php echo get_option(‘home’); ?> »>Accueil</a>
    </li>
    <?php } ?>
    </ul>
    </div>

    Pour le css :

    #breadcrumb {
    font-size:10px;
    color:#000;
    margin:40px 100px;
    }

    #breadcrumb ul li{
    display:inline;
    margin-right:10px;
    }

    #breadcrumb ul li a{
    color:#000;
    text-decoration:none;
    }
    #breadcrumb ul li a:hover{
    color:#ccc;
    text-decoration:underline;
    }

    Vous aurez comme ça déjà les bons id.

    Merci en tout cas pour ça !

  3. Sirtin

    Bonjour,

    Merci pour cet article pertinent ainsi que les commentaires ! Je viens d’utiliser le plugin breadcrumb NavXt qui me satisfait. Cependant, je préfère utiliser le code car ça me suffit et ça allège la page.

    Seulement, avec le plugin, je peux afficher les catégories mère et fille dans le fil d’ariane.

    Avec le code fourni ici, seulement les catégories filles, les « parents » sont absents et c’est dommage.

    N’existe-t-il pas une solution ?
    Merci d’avance.

    Sirtin

  4. Blog E-commerce

    Il est aussi possible de créer le fichier breadcrumb.php. Copier et coller ce code dedans, le balancer dans le thème puis l’appeler à l’endroit souhaité. Dans le header ou directement dans page ou single.php si jamais vous ne voulez pas le voir apparaître sur une page par exemple.

    J’ai une question : est-ce qu ce code affiche la catégorie parente ?

    Exemple : Accueil –> Catégorie –> Sous-catégorie

    L’ajouter dans le fichier funtions.php alourdit ce fichier et le rend illisible à terme.

    Cordialement.

  5. Daniel Roch

    J’avoue que lorsque j’ai abandonné le plugin NavXt pour gérer les fils d’Ariane, j’avais essayé ce hack.

    Pour ma part, je l’ai aussi abandonné, et cela pour trois raisons :
    – Iil inclut un lien sur la page courante, ce qui a peu de sens pour le moteur de recherche et le visiteur.
    – Il inclut un lien nofollow qui nuit au référencement.
    – Il oublie les microdonnées du modèle Schema.org qui facilitent la vie aux moteurs de recherche.

    J’ai réalisé un autre hack sur mesure en cherchant à l’optimiser au maximim pour les moteurs de recherche. Il se trouve ici : Le hack Fil d’Ariane sur WordPres pour ceux et celles qui veulent le tester.

  6. Skans

    sympa ce code, jy ai ajouté les parents des catégories pour les singles :

    if (is_single()) {
    $category = get_the_category();
    $category_parent = get_ancestors($category[0]->cat_ID, ‘category’);
    for ($i=count($category_parent); $i>0 ; $i–)
    echo  ».get_cat_name($category_parent[$i-1]). »;
    echo  ».$category[0]->cat_name. »;
    }

    1. aloisioa

      Bonjour j’ai essayer votre code, il y a quelque erreurs dans le code que j’ai corriger (surement à cause du textarea…) Mais il y a quand même un problème j’ai une erreur 500 Internal Server Error… J’aimerai faire ceci pour le single et le category. Je débutes en PHP, et je trouve rien de spéciale sur le web.

  7. photographe hendaye

    Merci pour cette petite astuce très pratique qui évite l’utilisation d’un plug-in et, de ce fait, nous permet d’éviter les soucis de mise à jour.
    Très bon boulot, comme toujours…

  8. carole

    Bonjour à vous tous !

    Ma petite question est un peu différente (tout fonctionne à merveille et j’ai aussi mis sur une ligne unique, c’est parfait!).

    Par contre, j’aurais bien exclu la page d’accueil pour éviter la redondance des liens vers cette page mais suis assez débutante en PHP… Quelqu’un aurait-il une soluce pour cela ?

    merci d’avance

  9. Stella

    Bonsoir et merci pour cette précieuse pour moi qui suis archi débutante en php et wordpress.
    J’ai réussi à bidouiller pour avoir le fil d’ariane sur la même ligne mais question bête : où aller pour mettre un tiret entre les liens de pages type : « accueil – partie 1 – sous partie 1 » car actuellement tout est collé « accueilpartie1souspartie1 » ..

    Si vous pouvez m’aider ce serait sympa Merci

  10. tanger

    bonjour, merci pour le code que je viens de l’intégré, car votre blog est le premier sortie dans les résultats de recherche google.
    j’ai supprimer les balises pour avoir un affichage sur une seule ligne, par contre ça n’affiche pas les catégories parentes :((

  11. Devicake

    Bonjour ! Merci pour ce code, je l’ai utilisé et tout suivi mais j’ai deux petites questions :
    – Certains ont réussi à le mettre sur une ligne, pouvez vous me dire comment faire ? Je suis débutante alors je comprend pas tout J’ai essayé le code donné dans un des commentaires mais il n’a pas fonctionné pour moi
    – Que dois-je enlever pour qu’il n’y ait plus le « Vous êtes ici » ?
    Merci d’avance pour votre réponse

  12. benjaminpiron

    bonjour,
    je souhaite n’afficher le fil d’ariane que sur une page qui comporte des sous-rubriques

    il y a 3 niveau:
    une page « les artistes » qui présente différentes catégories de voix: soprano, mezzo, barytons, ténors + des pianistes
    ces catégories renvoient un article sur lequel on voit apparaître une liste de ‘sopranos’, et autres et si je clique sur l’un de ces sopranos, qui présente un extrait avec une photo, j’arrive sur une page consacrée à la bio complète de l’artiste.

    sur mon site j’ai d’autres pages.

    je ne sais pas configurer le pluggin breadcrumb navxt afin de ne le voir que sur mes pages artistes.

    il apparaît en effet sur chacune de mes pages.

    merci de m’aider

    1. Aurélien Denis auteur de l’article

      Par définition, un fil d’Ariane a vocation à s’afficher sur l’ensemble du site. Cela dit, on peut conditionner selon le type de contenu, la taxonomie ou autre avec un peu de PHP. Il faudra donc éditer le thème. Utilisez-vous un type de contenu personnalisé pour vos artistes ?

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX