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

Publié le par - 8 261 vues

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

Articles relatifs

22 réflexions au sujet de « Créer un fil d’Ariane sans plugin avec WordPress »

      • 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+ ;)

        Répondre ↓

          • 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>

  3. 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;
    }

    Répondre ↓

  6. 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 !

    Répondre ↓

  7. 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

    Répondre ↓

  8. 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.

    Répondre ↓

  9. 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.

    Répondre ↓

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Pour insérer du code, utilisez un service en ligne comme Pastebin ou prenez-soin de convertir celui-ci en HTML.

Les champs obligatoires sont indiqués avec *.

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>