Comment ajouter des miettes de pain à votre site Web WordPress

Le terme « fil d'Ariane » fait référence à un outil de navigation de site Web efficace qui (comme nous l'ont appris Hansel et Gretel) est destiné à aider à retracer les étapes d'un site Web « d'accueil » (ou page d'accueil). Ils permettent aux utilisateurs de voir comment la page actuelle s'intègre dans l'ensemble de la structure du site en fournissant une piste en ligne de liens (ou d'étiquettes) menant jusqu'à la page d'accueil.

Page de produit Home Depot avec chapelure

Les fils d'Ariane sont en fait plus importants pour votre site Web WordPress que vous ne le pensez. Non seulement ils améliorent l'expérience utilisateur, mais ils peuvent également donner à votre site une bosse dans les classements de recherche. Google aime cet élément structurel dans un site Web, et les visiteurs auront une aide de navigation cruciale lorsqu'ils tomberont sur l'une de vos pages de manière organique (en réduisant votre taux de rebond).

On pourrait penser que l'ajout d'un tel système intégré de nativation à votre site Web serait difficile, mais en réalité, c'est assez simple avec l'utilisation d'un plugin. En fait, si vous utilisez le plugin Yoast SEO, vous avez une longueur d'avance car la fonctionnalité de fil d'Ariane est déjà intégrée à Yoast ! Et, ajouter de la chapelure via Yoast est certainement l'une des méthodes préférées. Outre Yoast SEO, le plugin Breadcrumb NavXT est une autre excellente option hautement personnalisable et fonctionne également bien avec notre propre thème Divi.

Abonnez-vous à notre chaîne Youtube

Comment ajouter des miettes de pain à votre site Web WordPress en utilisant Yoast

Pour ajouter du fil d'Ariane à votre site Web WordPress à l'aide de Yoast SEO, vous devrez suivre trois étapes simples :

• Installer et activer le plugin Yoast SEO
• Ajout de l'extrait de code Breadcrumbs à votre thème WordPress
• Activer/configurer Breadcrumbs le Yoast Breadcrumbs dans les paramètres du plugin

Installer et activer le plugin Yoast SEO

Pour installer le plugin Yoast SEO, accédez à votre tableau de bord WordPress et accédez à Plugins > Ajouter un nouveau. Ensuite, recherchez le référentiel WordPress pour « yoast ». Lorsque vous voyez le plugin Yoast SEO, cliquez pour installer et activer le plugin.

Ajoutez l'extrait de code Breadcrumbs à votre thème enfant WordPress

Ensuite, nous devons ajouter un court extrait de code à vos fichiers de thème WordPress. Donc, si vous ne l'avez pas déjà fait, c'est une bonne idée de créer un thème enfant. Pour cet exemple, je vais vous montrer comment ajouter l'extrait de code du fil d'Ariane au thème WordPress par défaut TwentyNineteen. Vous pouvez ajouter le code à n'importe quel fichier/modèle de thème, mais pour la plupart, vous voudrez l'ajouter à votre fichier single.php (pour apparaître sur tous les messages), fichier page.php (pour apparaître sur toutes les pages ), ou dans votre fichier header.php (pour apparaître sur tout le site).

Pour cet exemple, je vais ajouter le code du fil d'Ariane au fichier header.php de mon thème enfant. Une fois que vous avez copié le fichier header.php du thème parent, ouvrez pour modifier le fichier dans un éditeur de code de votre choix.

Ensuite, tout en bas du fichier header.php, ajoutez l'extrait de code php suivant fourni par Yoast pour activer la fonctionnalité Breadcrumbs :

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

Cela affichera le fil d'Ariane directement sous l'en-tête de toutes les pages, un emplacement commun pour le fil d'Ariane.

Activer et configurer le fil d'Ariane Yoast dans les paramètres du plugin

Une fois l'extrait de code ajouté à votre thème WordPress Child, il ne vous reste plus qu'à activer le Breadcrumbs dans les paramètres du plugin Yoast SEO. Pour ce faire, accédez à votre tableau de bord WordPress et accédez à SEO > Apparence de recherche, puis cliquez sur l'onglet Fil d'Ariane. Sous les paramètres de fil d'Ariane, assurez-vous d'activer le fil d'Ariane en basculant l'option sur « activé ». Ensuite, vous pouvez configurer les paramètres du fil d'Ariane en fonction de vos besoins. Vous pouvez également choisir une taxonomie à afficher dans le fil d'Ariane pour votre publication. Pour cet exemple, je vais configurer mes publications pour afficher les catégories dans le fil d'Ariane.

Voyons maintenant à quoi ressemblent les fils d'Ariane sur l'un des articles que j'ai créés dans le thème TwentyNineteen.

Voici à quoi ressemble le message avant d'activer le fil d'Ariane.

Voici à quoi ressemble le message après avoir activé le fil d'Ariane. Cet exemple de publication particulier a une catégorie (« WordPress ») et une catégorie parent (« Web Design ») pour vous montrer la taxonomie de catégorie des fils d'Ariane que j'ai choisis dans les paramètres de fil d'Ariane.

Vous devrez peut-être ajuster le style de votre fil d'Ariane à l'aide de CSS externe. Pour ce faire, vous pouvez utiliser l'ID CSS « fil d'Ariane » qui a été inclus dans le code php. Ouvrez le fichier style.css de votre thème enfant (ou vous pouvez l'ajouter dans le personnalisateur de thème sous CSS supplémentaire) et ajoutez les éléments suivants :

#breadcrumbs {

/*Add breadcrumb styling here*/

}

Pour le thème TwentyNineteen, je souhaiterais peut-être faire correspondre la marge de mon texte d'en-tête en ajoutant le CSS personnalisé suivant :

#breadcrumbs {

margin: 0 calc(10% + 60px);

}

Si vous souhaitez davantage de contrôle sur l'emplacement spécifique de votre fil d'Ariane, vous pouvez également utiliser le shortcode suivant pour des publications ou des pages individuelles.

[wpseo_breadcrumb]

Ajouter des fils d'Ariane à votre site Web WordPress à l'aide de Breadcrumb NavXT

Si vous ne souhaitez pas installer Yoast SEO pour une raison quelconque ou si vous recherchez une autre option simple, le plugin Breadcrumb NavXT est un excellent choix.

Pour installer le plugin, accédez à votre tableau de bord WordPress et accédez à Plugins > Ajouter un nouveau. Recherchez ensuite dans le référentiel WordPress « Breadcrumb navxt ». Une fois que vous voyez le plugin, cliquez pour l'installer et l'activer.

Pour appeler les fils d'Ariane afin qu'ils s'affichent sur votre site Web, vous pouvez utiliser le widget Breadcrumb NavXT intégré fourni dans la page des widgets. Cela vous permettra de faire glisser le widget dans les différentes zones de widgets fournies par votre thème. Pour ce faire, accédez à votre tableau de bord WordPress et accédez à Apparence > Widgets. Faites ensuite glisser le widget vers la zone de widget ou votre choix et mettez à jour les paramètres du widget.

Pour cet exemple, j'utilise le thème Divi pour afficher le fil d'Ariane en haut de ma barre latérale. Voici à quoi cela ressemble sur un post.

Semblable à l'exemple Yoast Breadcrumb, vous pouvez également appeler le fil d'Ariane de votre site en ajoutant le code nécessaire à votre thème enfant. Voici le code qu'ils fournissent et qui est conforme à la liste de navigation schema.org :

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php
    if(function_exists('bcn_display'))
    {
            bcn_display();
    }?>
</div>

Puisque j'utilise le thème Divi pour cet exemple, je vais ajouter le code au fichier Single.php de mon thème Divi Child juste au-dessus de la balise article. Cela affichera le fil d'Ariane en haut de tous mes messages.

Voici à quoi ressemble un post après avoir ajouté le code.

Configuration du fil d'Ariane à l'aide des paramètres du plugin

Le plugin Breadcrumb NavXT propose des options puissantes pour configurer vos fils d'Ariane. Vous pouvez personnaliser l'intégralité du modèle de votre fil d'Ariane pour différentes taxonomies et bien plus encore. Vous pouvez accéder à ces paramètres à partir de votre tableau de bord WordPress en accédant à Paramètres > Breadcrumb NavXT.

Styliser la chapelure

Si vous souhaitez styliser les fils d'Ariane, vous pouvez cibler la classe appelée « fil d'Ariane » qui est incluse dans le code.

Ajoutez simplement le CSS suivant au fichier style.css de votre thème enfant ou au CSS supplémentaire du personnalisateur de thème :

.breadcrumbs {

/*add css to style breadcrumbs here*/

}

Si vous souhaitez utiliser le widget de fil d'Ariane avec le thème Divi, vous pouvez également utiliser le module de barre latérale de Divi pour ajouter du style au fil d'Ariane dans le Divi Builder.

Dernières pensées

Les fils d'Ariane sont une partie importante d'un site Web à la fois pour la convivialité et le référencement. Donc, si vous envisagez d'ajouter des fils d'Ariane à votre site WordPress, je vous suggère de commencer par les méthodes fournies par les plugins mentionnés dans cet article (Yoast SEO et Breadcrumb NavXT). Il est plus logique d'utiliser le fil d'Ariane Yoast si vous profitez déjà de leur plugin SEO puisqu'il est déjà à votre disposition. Cependant, Breadcrumb NavXT est également une option hautement personnalisable. Bien sûr, vous devrez peut-être accéder à vos fichiers de thème, mais dans l'ensemble, le processus est simple. Si quoi que ce soit, j'espère que cela aidera à soulager la douleur d'obtenir des miettes de pain sur votre propre site WordPress.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!