Malgré le nom banal, les fils d’Ariane, ou breadcrumb sont des outils très utiles pour améliorer l’expérience utilisateur (UX) et l’optimisation pour les moteurs de recherche (SEO) de votre site. Leur activation est simple avec l’aide d’une extension ou d’un petit code personnalisé.
Dans cet article, nous vous présenterons les fils d’Ariane WordPress et vous expliquerons comment ils fonctionnent. Ensuite, nous vous montrerons comment les ajouter à votre site, les styliser et les retirer. Il y a beaucoup à couvrir, alors commençons !
Que Sont les Fils d’Ariane WordPress ?
Les fils d’Ariane, en ce qui concerne WordPress (ou tout autre site Web), sont des liens de navigation qui apparaissent en haut d’un article ou d’une page. Ils montrent aux utilisateurs les catégories de niveau supérieur qui les ont menés au contenu qu’ils consultent actuellement et permettent également une navigation facile vers les pages qu’ils ont déjà consultées.
Prenons, par exemple, l’exemple suivant :
Sur le côté gauche, juste en dessous de l’en-tête, vous pouvez voir les mots Accueil > Centre de ressources > Blog Kinsta. Chacun est un lien vers sa page correspondante depuis l’article actuel. Cela permet aux lecteurs de notre blog de naviguer vers l’une de ces zones de contenu clés en un seul clic, au lieu d’avoir à utiliser le bouton Précédent, le menu ou la fonction de recherche.
C’est ainsi que les fils d’Ariane ont pris leur nom : ils créent une piste qui ramène les utilisateurs chez eux. Ils sont particulièrement utiles pour les sites tels que les blogs et les boutiques en ligne, où les visiteurs peuvent se déplacer entre les articles individuels, les pages de produits et les archives de catégories où ils peuvent trouver un contenu similaire.
Comment Fonctionnent les Fils d’Ariane WordPress ?
Il existe trois types différents de fils d’Ariane WordPress. Tous intègrent des liens de navigation comme décrit ci-dessus, mais d’une manière légèrement différente :
- Basés sur la hiérarchie : Ces fils d’Ariane montrent aux utilisateurs où ils se trouvent dans la structure de votre site, comme dans l’exemple ci-dessus.
- Basés sur les attributs : Utilisé principalement sur les sites de commerce électronique, ces fils d’Ariane affichent les attributs que l’utilisateur a recherché et qui l’ont mené au produit qu’il est en train de consulter.
- Basés sur l’historique : Au fur et à mesure que les utilisateurs se déplacent d’une page à l’autre de votre site, ces fils d’Ariane les ramèneront à leur point de départ.
Chaque variété de fils d’Ariane est utile à des fins différentes. Cependant, tous peuvent améliorer la navigation et par extension les UX.
Ils sont également bénéfiques pour l’optimisation des moteurs de recherche. Les fils d’Ariane montrent clairement les relations entre les différents éléments de contenu de votre site. De cette façon, ils permettent aux robots des moteurs de recherche de comprendre plus facilement la structure de votre site.
Ceci permet à ces robots d’indexer les pages de votre site avec plus de précision. Les moteurs de recherche peuvent également afficher vos fils d’Ariane dans les listes de résultats, de sorte que les utilisateurs peuvent voir du contenu supplémentaire sur votre site lié à l’information qu’ils recherchent.
Comment Ajouter des Fils d’Ariane WordPress à Votre Site (4 Méthodes)
Que vous soyez un expert en code ou un débutant WordPress, vous pouvez rapidement et facilement ajouter des fils d’Ariane à votre site en quelques étapes seulement. Voici quatre façons différentes d’accomplir cette tâche.
1. Activer les Fils d’Ariane dans Yoast SEO
Yoast SEO est une extension populaire qui aide les utilisateurs de WordPress à améliorer leur classement dans les moteurs de recherche et à optimiser leur contenu en conséquence. Elle inclut également d’autres fonctionnalités pour améliorer la visibilité de votre site, y compris des fils d’Ariane.
Si ce n’est pas déjà fait, installez et activez l’extension dans votre tableau de bord WordPress :
Ensuite, vous devrez ajouter cet extrait de code à votre thème :
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>Plus précisément, c’est un peu à vous de décider là où vous l’ajoutez. Si vous voulez utiliser des fils d’Ariane dans vos articles de blog, vous pouvez l’ajouter dans votre fichier modèle single.php.
Alternativement, le coller à la fin de votre fichier header.php ajoutera des fils d’Ariane dans votre site entier :
Gardez à l’esprit que les mises à jour futures du thème peuvent remplacer ce code personnalisé. Vous devrez contacter votre développeur de thème pour savoir comment éviter ce problème ou simplement utiliser un thème enfant. Une fois que le code est en place, naviguez jusqu’à SEO > Réglages SEO > Fil d’Ariane dans votre tableau de bord :
Basculez les réglages des fils d’Ariane sur Activé. Ensuite, prévisualisez votre site :
Vous devriez maintenant voir des fils d’Ariane sur les parties pertinentes de votre site, en fonction de l’endroit où vous avez ajouté l’extrait de code.
2. Activer les Fils d’Ariane avec une Extension WordPress de Fils d’Ariane
Ajouter des fils d’Ariane avec Yoast est particulièrement pratique si vous utilisez déjà cette extension à des fins de référencement. Cependant, si vous préférez une extension différente pour optimiser votre contenu, l’approche ci-dessus est moins utile. Heureusement, il y a plusieurs autres extensions disponibles qui sont spécifiquement conçues pour ajouter des fils d’Ariane à WordPress.
Breadcrumb NavXT
L’extension la plus populaire pour ajouter des fils d’Ariane à WordPress en dehors de Yoast est Breadcrumb NavXT :
Cette extension fournit un widget de fils d’Ariane que vous pouvez ajouter à n’importe quelle zone de widget de votre thème, telle qu’une barre latérale ou un pied de page. Elle est hautement personnalisable, vous permettant de choisir les pages et les catégories à afficher. Breadcrumbs NavXT inclut également un balisage de schéma pour améliorer le référencement.
Pour ajouter des fils d’Ariane à l’aide de cette extension, allez dans Apparence > Widgets. Vous verrez un nouveau widget Breadcrumb NavXT que vous voudrez faire glisser vers la zone du widget où vous voulez qu’il apparaisse :
Cliquez sur la flèche déroulante pour ouvrir les réglages du widget, puis remplissez les champs nécessaires :
Assurez-vous de cocher les cases nécessaires pour ajouter des liens à vos fils d’Ariane, déterminer leur ordre, les masquer sur la page d’accueil, et ignorer la mise en cache. Lorsque vous avez terminé, cliquez sur le bouton Enregistrer, puis vérifiez l’interface publique de votre site :
Vos fils d’Ariane devraient maintenant être visibles dans la zone de widget que vous avez choisie pour eux.
Flexy Breadcrumb
Comme alternative, Flexy Breadcrumb est l’extension la mieux notée pour ajouter des fils d’Ariane à WordPress :
Lorsque cette extension est installée et activée, vous pouvez ajouter des fils d’Ariane à votre site en utilisant le code court [flexy_breadcrumb]. Cela vous donne un peu plus de flexibilité quant à l’endroit où vos fils d’Ariane apparaîtront. Vous aurez également plus de contrôle sur les composants de style tels que la taille de la police, la couleur et les icônes.
Après avoir installé Flexy Breadcrumbs, vous verrez un nouvel élément dans la barre latérale de votre tableau de bord :
Ensuite, vous aurez quelques réglages à configurer. Dans l’onglet Général, vous pouvez modifier le texte et l’icône de votre page d’accueil, définir la limite de caractères et déterminer la hiérarchie :
Dans l’onglet Typographie, vous pouvez également ajuster la couleur et la taille de la police pour vos fils d’Ariane :
Après avoir personnalisé vos fils d’Ariane, vous devrez ajouter le code court [flexy_breadcrumb] à l’endroit où vous voulez que vos fils d’Ariane apparaissent. Bien qu’il soit possible de le faire dans chaque article individuel que vous publiez sur votre site, il est plus efficace d’ajouter le code court dans un widget WordPress :
Si vous vérifiez l’interface publique de votre site, vous devriez être en mesure de voir vos fils d’Ariane affichés partout où vous avez ajouté le code court.
WooCommerce Breadcrumb
Pour les vendeurs en ligne, WooCommerce Breadcrumbs est un moyen facile d’ajouter des liens de navigation dans vos pages produits :
Si vous gérez votre boutique en ligne avec l’extension populaire WooCommerce, c’est peut-être la meilleure option pour vous. Cela vous permet d’activer des fils d’Ariane pour vos pages produits, afin d’améliorer la navigation des clients sur votre site.
Après l’installation et l’activation, vous pouvez naviguer vers Réglages > WC Breadcrumbs pour personnaliser vos fils d’Ariane :
Le réglage le plus important à prendre en compte est la case à cocher Activer les fils d’Ariane. Vous devez vous assurer qu’il est sélectionné afin d’afficher vos fils d’Ariane. Ensuite, consultez l’une de vos pages produits :
Votre fil d’Ariane devrait être visible en haut de la page.
Breadcrumb
Enfin, Breadcrumb est une extension légère qui vous permet d’ajouter des fils d’Ariane n’importe où sur votre site en utilisant des codes courts :
Cette extension possède les réglages les plus étendus de toutes les extensions listées dans cet article. Vous pouvez y accéder en cliquant sur Fil d’Ariane dans votre tableau de bord WordPress :
Le premier onglet est intitulé Options et comprend certains réglages généraux tels que le texte personnalisé, les séparateurs et les limites de caractères :
Il y a aussi tout un onglet dédié aux options de style. Vous pouvez choisir parmi plusieurs boutons fléchés, ainsi que la taille et la couleur des caractères :
Si vous avez des compétences en codage et que vous voulez plus de contrôle sur votre style, vous pouvez également utiliser l’onglet CSS personnalisé :
Enfin, il est important de visiter l’onglet Codes courts pour ajouter vos fils d’Ariane à votre site :
Vous pouvez utiliser le code court n’importe où sur votre site, tout comme avec les autres extensions dont nous avons parlé. Cependant, Breadcrumb fournit également un extrait de code que vous pouvez ajouter à l’un de vos fichiers modèles pour incorporer vos fils d’Ariane dans votre en-tête, votre pied de page ou ailleurs.
3. Utilisez un Thème qui Inclut les Fils d’Ariane
Bien qu’ils soient généralement considérés dans le contexte du contrôle de l’apparence de votre site, les thèmes WordPress peuvent également influencer la fonctionnalité de votre site Web. Une façon de le faire est d’ajouter des fils d’Ariane à vos pages.
L’inconvénient d’utiliser un thème WordPress pour ajouter des fils d’Ariane à un site WordPress existant est qu’il implique de changer l’apparence de votre site Web. Si vous avez une marque et une identité de site établies, ce n’est pas vraiment une solution pratique, et vous serez probablement mieux avec une extension.
Cependant, si vous démarrez un nouveau site WordPress ou si vous êtes en train d’exécuter une refonte de site Web, le choix d’un thème qui incorpore des fils d’Ariane est une méthode facile à utiliser pour les ajouter à votre site. De plus, plusieurs options sont disponibles gratuitement dans le répertoire des thèmes de WordPress.
OceanWP
OceanWP est l’un des thèmes WordPress les plus populaires :
Il inclut un code court que vous pouvez utiliser pour appliquer facilement des fils d’Ariane dans vos pages. Il existe également plusieurs démos disponibles pour OceanWP qui intègrent des fils d’Ariane. Pour utiliser le code court, ajoutez simplement [oceanwp_breadcrumb] dans un article, une page ou un widget texte :
Vous pouvez personnaliser vos fils d’Ariane en utilisant les paramètres suivants :
- Class : Intègre une classe CSS personnalisée.
- Color : Change la couleur du texte.
- Hover color : Change la couleur du texte lorsque les utilisateurs survolent vos fils d’Ariane.
Il suffit d’ajouter tout ou partie de ces paramètres directement entre les crochets du code court :
Vous devriez maintenant voir vos miettes de pain sur les pages correspondantes.
Astra
De même, Astra facilite l’ajout des fils d’Ariane dans votre site :
La façon la plus simple d’activer les fils d’Ariane avec Astra est d’utiliser l’outil de personnalisation. Une fois le thème installé et activé, naviguez jusqu’à Apparence > Personnaliser :
Ensuite, sélectionnez l’onglet Fil d’Ariane :
Ici, vous verrez un menu déroulant qui vous permet de choisir où vous voulez afficher vos fils d’Ariane sur la page :
Une fois que vous aurez fait votre choix, quelques options de style apparaîtront également :
Assurez-vous de cliquer sur le bouton Publier pour enregistrer vos modifications.
4. Ajouter des Fils d’Ariane Manuellement
Les extensions et les thèmes font partie de ce qui fait de WordPress une plateforme si conviviale et accessible. Cependant, pour certains utilisateurs et développeurs plus avancés, ils peuvent se sentir limités. Le code peut être un médium très créatif, et avoir la possibilité d’écrire librement vos propres fils d’Ariane peut vous plaire.
Pour afficher manuellement les fils d’Ariane, vous devrez faire deux choses. Tout d’abord, vous devez ajouter une fonction à votre fichier functions.php pour les activer. Voici un exemple de code que vous pourriez utiliser :
function get_breadcrumb() {
echo 'Home';
if (is_category() || is_single()){
echo " " ";
the_category (' • ');
if (is_single()) {
echo " " ";
the_title();
}
} elseif (is_page()) {
echo " " ";
echo the_title();
} elseif (is_search()) {
echo " " ";Search Results for…
echo '"';
echo the_search_query();
echo '"';
}
}
Une fois la fonction ajoutée, vous devrez l’appeler dans les fichiers modèles où vous voulez que vos fils d’Ariane apparaissent. Appeler la fonction dans single.php fera apparaître des fils d’Ariane sur vos articles, l’appeler dans header.php les affichera partout où votre en-tête apparaît, et ainsi de suite.
Le code que vous utiliserez devrait ressembler à ceci :
<div class="breadcrumb"><?php get_breadcrumb(); ?></div>
Modifier ces fichiers affichera des fils d’Ariane sur votre site, mais ne vous permet pas de les mettre en forme pour qu’ils correspondent à son design. Pour cela, vous devrez également mettre vos mains dans le CSS.
Comment Styliser Vos Fils d’Ariane WordPress
Il est nécessaire de styliser vos fils d’Ariane si vous les codez vous-même. Cependant, cela peut également être utile si vous utilisez une extension ou un thème pour les ajouter. Le style par défaut de ces outils peut ne pas convenir à votre site, auquel cas vous voudrez peut-être les modifier pour maintenir la cohérence.
Vous pouvez ajouter des CSS personnalisés pour styliser vos fils d’Ariane dans la feuille de style de votre thème (style.css) ou dans la zone CSS supplémentaire de la personnalisation :
Il existe de nombreuses façons d’adapter les fils d’Ariane au design de votre site, par exemple en modifiant sa police, sa taille et sa couleur. Vous pouvez également prendre en compte des éléments tels que les marges, la marge intérieure, les bordures et les icônes.
Voici un exemple de CSS qui peut être utilisée pour styliser vos fils d’Ariane :
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb a {
color: #428bca;
text-decoration: none;
}
Il y a beaucoup de possibilités quand il s’agit de CSS. Il peut donc être nécessaire d’expérimenter pour obtenir des fils d’Ariane exactement comme vous les voulez.
Comment Supprimer les Fils d’Ariane WordPress de Votre Site
Bien qu’il y ait de nombreux avantages à ajouter des fils d’Ariane sur votre site, cela ne signifie pas qu’ils sont pour tout le monde. Certaines personnes peuvent les trouver déroutants ou estimer qu’ils rendent les pages du site trop encombrées.
Si vous voulez supprimer les fils d’Ariane de votre site WordPress, vous pouvez le faire en utilisant n’importe quelle méthode qui a du sens selon la façon dont vous les avez initialement ajoutées. Par exemple, si vous avez personnalisé vos fils d’Ariane, vous pouvez simplement supprimer le code que vous avez ajouté dans les fichiers de votre thème.
Désactiver les fils d’Ariane avec une extension est généralement aussi simple que de désactiver l ‘extension. Dans le cas de Yoast SEO, vous pouvez naviguer jusqu’à l’onglet Fils d’Ariane dans les réglages SEO, et basculer l’interrupteur correspondant sur Désactiver.
Il en va de même pour les thèmes qui permettent l’utilisation de fils d’Ariane via un réglage ou des codes courts. Cependant, il y a quelques thèmes qui ajoutent des fils d’Ariane par défaut. Les supprimer peut être un peu plus délicat, surtout si vous n’avez pas beaucoup d’expérience avec le code.
Si c’est votre situation, vous devrez naviguer vers le fichier header.php de votre site. Lancez alors une commande de recherche pour « breadcrumb ». Ceci devrait mettre en évidence le code appelant la fonction qui ajoute des fils d’Ariane à votre site (si elle existe ici) :
Supprimez cette ligne de code pour supprimer les fils d’Ariane de votre site. Si vous n’avez pas trouvé le bon code, vous pouvez réessayer ce processus dans vos fichiers single.php et page.php, pour voir si la fonction est appelée dans un de ces modèles.
Si tout le reste échoue, contactez le développeur de votre thème pour obtenir de l’aide. Notez que la mise à jour de votre thème WordPress peut remplacer tout changement que vous avez apporté à ses fichiers. C’est pourquoi les meilleures pratiques suggèrent d’utiliser un thème enfant pour cette raison, afin de préserver vos personnalisations indéfiniment.
Résumé
L’UX et le SEO forts sont tous les deux la clé d’un site Web réussi. L’activation des fils d’Ariane WordPress peut faciliter la navigation des visiteurs sur votre site, tout en aidant les moteurs de recherche à comprendre sa structure et à indexer vos pages avec précision.
Dans cet article, nous avons couvert quatre méthodes pour ajouter des fils d’Ariane à votre site WordPress :
- Activer les fils d’Ariane dans Yoast SEO.
- Installer et configurer une extension WordPress de fils d’Ariane.
- Utiliser un thème qui inclut des fils d’Ariane.
- Ajouter manuellement vos fils d’Ariane à l’aide de code.
Vous avez des questions sur les fils d’Ariane de WordPress ou sur la façon de les utiliser ? Faites-le nous savoir dans la section des commentaires ci-dessous !
Rédacteur en chef chez Kinsta et consultant en marketing de contenu pour les développeurs de plugins WordPress. Connectez-vous avec Matteo sur Twitter.
Laisser un commentaire