Thème Divi : ajouter un fil d’Ariane (breadcrumbs)

Le thème Divi, objet des articles de cette série , ne permet pas d’ajouter un « fil d’Ariane » (breadcrumbs en anglais) pour permettre à tous les internautes de savoir où ils se situent dans un site web. J’explique ici comment utiliser une fonctionnalité de l’extension Yoast SEO pour afficher un fil d’Ariane sur les pages (toutes ou une partie) d’un site.

Sloopng / Pixabay

Pourquoi mettre un « fil d’Ariane » ?

Imaginez que vous visitez un nouveau site. Au gré des liens que vous suivez, vous pouvez vite être complètement perdu. Dans ce cas, vous pouvez parfois être sauvés par les menus de navigation, s’ils vous paraissent cohérents.

Dans d’autres cas, vous remarquerez le fil d’Ariane (ou breadcrumbs) qui vous permettra de comprendre la position de la page actuelle dans la hiérarchie du site. Evidemment, cela ne vous aidera que si la structuration du site vous paraît également cohérente.

En l’absence d’un fil d’Ariane, il est fort probable que vous quitterez ce site en pensant que son auteur est vraiment très désorganisé !

En plus, le fil d’Ariane peut aussi permettre aux robots des moteurs de recherche de mieux comprendre la structure d’un site, et donc de mieux l’indexer.

Comment intégrer un fil d’Ariane lorsque le thème ne le prévoit pas ?

Ma solution utilise l’extension Yoast SEO, mais vous pouvez aussi utiliser Breadcrumb NavXT, selon cet article (en anglais) qui m’a servi de référence.

Régler l’extension Yoast SEO

Dans le tableau de bord WordPress, menu SEO, menu Avancé, onglet « Fils d’Ariane : activer le fil d’Ariane. De nombreux paramètres peuvent alors être réglés :

Yoast SEO : réglage du fil d'Ariane

Sur cette partie des réglages, la seule chose que j’ai modifié, c’est le texte d’ancrage pour la page d’accueil. A la place de « Accueil », j’ai placé : <span class= »dashicons dashicons-admin-home »> </span>. Maintenant mon fil d’Ariane démarre par une sympathique icone de maison et ça me semble beaucoup plus facile de comprendre à quoi sert cette ligne.

Cocher « Afficher la page de blog » est une astuce de Yoast SEO pour bien montrer la position du blog dans la structure générale du site. Je l’ai laissé comme c’est proposé par défaut.

Dans la deuxième partie des réglages de Yoast SEO, on trouve deux éléments :

  • Taxonomie à afficher dans le fil d’Ariane pour les types de contenu : pour les articles, j’ai indiqué « catégorie ». Mon fil d’Ariane devient très long (ici j’ai tronqué le titre de l’article) :

Fil d'Ariane avec catégorie

  • Type de contenu d’archive à afficher dans le fil d’Ariane pour les taxonomies : je n’ai pas essayé de régler autrement (pas sur « aucun ») car je n’utilise pas les taxonomies indiquées.

Une fois ces réglages effectués le thème Divi n’affiche pas les fils d’Ariane ! Il faut maintenant aller modifier le thème enfant.

Modifier le thème enfant pour intégrer le fil d’Ariane

Mon site WordPress utilise un thème enfant de Divi, thème enfant que j’ai créé (j’explique ici comment). Evidemment, il ne faut en aucun cas faire les modifications qui suivent directement dans un thème parent !

Comme je veux que le fil d’Ariane figure sur l’ensemble des pages du site, j’ai copié le fichier header.php  de  /wp-content/themes/Divi  (thème parent) et je le place dans /wp-content/themes/clea-divi-child  (mon thème enfant).

Tout en bas de header.php  du thème enfant, en dessous de la ligne <div id= »et-main-area »> , j’ai ajouté le code suivant, comme indiqué dans  cet article (en anglais).

<!-- #main-header -->
<?php if(function_exists('yoast_breadcrumb') && !is_front_page()) {
	echo '<div class="container">';
	yoast_breadcrumb('<p id="breadcrumbs">','</p>');
	echo '</div>';
} ?>

Maintenant le fil d’Ariane apparaît sur toutes les pages. Je fais quelques ajustements de style en ajoutant dans le fichier style.css  du thème enfant les éléments suivants :

/* --- Yoast breadcrumbs inserted in header.php --- */
 #breadcrumbs{ 
	width: 100%; 
	margin-top: 1rem ;
	font-size: 0.9rem;
}

Et voilà, j’ai terminé.

A vous maintenant !

2
Poster un Commentaire

avatar
  S’abonner  
plus récent plus ancien Le plus populaire
Notifier de
modestypants
Invité
modestypants

Bonjour
Comment faire si notre thème enfant ne possède pas header.php?

Miliesha
Invité
Miliesha

Bonjour,
J’ai besoin de récupérer le breadcrumb au format JSON via l’API REST de WP, afin de le faire « manger » par un React, quelqu’un peut m’aider ?