Auteur : Sea Dev & SunPublié il y a : 4 mois

Comment ajouter un fil d’ariane à son site WordPress

Qu'est-ce qu'un Fil D'Ariane ?

Pour commencer :

Un fil d’Ariane est une série de liens qui montrent la hiérarchie des pages, souvent sous la forme « Accueil > Catégorie > Sous-catégorie > Page » . Ce chemin de navigation offre plusieurs avantages. Il améliore non seulement la convivialité du site, en permettant aux visiteurs de revenir facilement aux pages précédentes, mais il joue également un rôle crucial dans l’optimisation des moteurs de recherche (SEO). En fournissant une structure claire et hiérarchique, les fils d’Ariane aident les moteurs de recherche à mieux comprendre la structure et le contenu de votre site, ce qui peut améliorer votre classement dans les résultats de recherche.

Le shortcode votre meilleur allié pour gérer vos fils d'Ariane

Comment ça fonctionne

Dans le monde numérique en constante évolution, offrir une expérience utilisateur fluide et intuitive est essentiel pour fidéliser vos visiteurs et optimiser votre site pour les moteurs de recherche. L'un des outils les plus efficaces pour atteindre cet objectif est l'utilisation des fils d'Ariane, ou "breadcrumbs" en anglais.
Ces éléments de navigation permettent aux utilisateurs de comprendre rapidement où ils se trouvent sur un site web et de naviguer aisément entre les différentes sections.

Dans cet article, nous allons explorer en profondeur ce que sont les fils d'Ariane, pourquoi ils sont importants, et comment vous pouvez les implémenter efficacement sur votre site WordPress en utilisant le plugin Yoast SEO (pour l'exemple ici) et un shortcode personnalisé. Que vous soyez un développeur expérimenté ou un propriétaire de site web souhaitant améliorer l'expérience utilisateur, cette introduction aux fils d'Ariane vous fournira les connaissances et les outils nécessaires pour optimiser votre site web.

Créer un Shortcode WordPress pour Afficher le fil d'Ariane de Yoast SEO

Utiliser le Plugin Yoast SEO pour les Breadcrumbs

Yoast SEO est l'un des plugins SEO les plus populaires pour WordPress. Parmi ses nombreuses fonctionnalités, il permet la création de breadcrumbs. Cependant, pour les afficher dans votre thème, vous devez ajouter un code spécifique. Créer un shortcode pour cette tâche simplifie l'intégration et la personnalisation des breadcrumbs.

Félicitation à eux pour les 10 millions d'installations depuis sa sortie 🥳🎉

<? php 
  
// Register shortcode function
function my_custom_shortcode() {
    ob_start();
    if ( function_exists('yoast_breadcrumb') ) {
        yoast_breadcrumb('<p id="breadcrumbs">','</p>');
    }
    return ob_get_clean();
}

// Register shortcode
add_shortcode( 'custom_breadcrumbs', 'my_custom_shortcode' );


?>

// dans votre thème enfant, pas besoin des balises <?php ?>, pensez à les supprimer.

Explication du Code du fil D'Ariane de Yoast SEO

  1. Déclaration de la Fonction du Shortcode: La fonction my_custom_shortcode commence par capturer la sortie HTML avec ob_start(). Cela permet de récupérer le code HTML généré par yoast_breadcrumb et de le retourner en tant que chaîne.
  2. Vérification de l’Existence de la Fonction: La condition if ( function_exists('yoast_breadcrumb') ) vérifie si la fonction yoast_breadcrumb est disponible. Cela évite les erreurs si le plugin Yoast SEO n’est pas activé.
  3. Génération des Breadcrumbs: La fonction yoast_breadcrumb est appelée avec deux arguments qui définissent les balises HTML entourant les breadcrumbs.
  4. Retour de la Chaîne HTML: ob_get_clean() renvoie la sortie capturée et nettoie le tampon de sortie.
  5. Enregistrement du Shortcode: La fonction add_shortcode enregistre le shortcode [custom_breadcrumbs], que vous pouvez ensuite utiliser dans vos pages et articles.

Utilisation du Shortcode

  1. Pour utiliser ce shortcode, il vous suffit d’insérer [custom_breadcrumbs] dans le contenu de n’importe quelle page ou article où vous souhaitez afficher les breadcrumbs.

    Cas d’Usage

    1. Articles de Blog: Ajoutez le shortcode en haut de vos articles de blog pour permettre aux lecteurs de facilement retracer leur chemin.

    2. Pages de Catégorie: Utilisez le shortcode dans les descriptions de catégories pour afficher une navigation claire.

    3. Pages de Produits: Sur un site e-commerce, afficher les breadcrumbs sur les pages de produits peut améliorer l’expérience utilisateur et augmenter la visibilité des différentes catégories de produits.

     

Personnalisation Supplémentaire de notre fil d'Ariane

Personnalisation Supplémentaire de notre fil d'Ariane

Vous pouvez personnaliser davantage le style des breadcrumbs en ajoutant du CSS pour cibler l'élément.

Par exemple :

#breadcrumbs {
    font-size: 14px;
    color: #333;
}

#breadcrumbs a {
    color: #0073aa;
    text-decoration: none;
}

#breadcrumbs a:hover {
    text-decoration: underline;
}

Conclusion de notre fil d'Ariane pour Yoast SEO

Les shortcodes sont un moyen efficace de simplifier l'intégration de fonctionnalités complexes dans WordPress. En utilisant le shortcode ci-dessus, vous pouvez facilement afficher les breadcrumbs de Yoast SEO sur n'importe quelle page ou article de votre site. Cela améliore non seulement la navigation pour les utilisateurs, mais peut également contribuer à une meilleure structure de site pour le SEO. N'hésitez pas à expérimenter avec ce shortcode et à l'adapter selon vos besoins spécifiques.

1. Qu’est-ce qu’un fil d’Ariane (breadcrumb) ?

Un fil d’Ariane est un élément de navigation qui montre à l’utilisateur où il se trouve sur un site web en affichant le chemin de navigation. Par exemple : Accueil > Blog > Catégorie > Article. Cela aide les utilisateurs à retracer facilement leur chemin et à naviguer entre les pages du site.

2. Pourquoi les fils d’Ariane sont-ils importants pour le SEO ?

Les fils d’Ariane améliorent la structure et la hiérarchie des pages d’un site web, ce qui aide les moteurs de recherche à mieux comprendre et indexer le contenu. Ils offrent également une meilleure expérience utilisateur en facilitant la navigation, ce qui peut réduire le taux de rebond.

3. Que faire si les breadcrumbs ne s’affichent pas ?

Assurez-vous que le plugin Yoast SEO est installé et activé. Vérifiez également que la fonction yoast_breadcrumb est activée dans les paramètres de Yoast SEO. Si le problème persiste, vérifiez qu’il n’y a pas de conflit avec d’autres plugins ou votre thème.

4. Les breadcrumbs sont-ils adaptés aux sites e-commerce ?

Oui, les breadcrumbs sont particulièrement utiles sur les sites e-commerce. Ils permettent aux clients de naviguer facilement entre les catégories de produits et de revenir aux pages précédentes sans se perdre.

5. Les breadcrumbs ralentissent-ils le site ?

Non, les breadcrumbs ne ralentissent pas le site. Ils sont des éléments de navigation simples qui ne consomment pas beaucoup de ressources. Leur impact sur les performances du site est négligeable.

6. Puis-je utiliser les breadcrumbs sans Yoast SEO ?

Oui, il existe d’autres plugins WordPress et méthodes pour ajouter des breadcrumbs sans utiliser Yoast SEO. Certains thèmes WordPress incluent même des options intégrées pour les breadcrumbs. Recherchez des solutions qui s’adaptent le mieux à vos besoins et à votre configuration.

7. Les breadcrumbs sont-ils nécessaires pour tous les types de sites ?

Les breadcrumbs sont particulièrement utiles pour les sites avec une structure complexe ou une grande quantité de contenu, comme les blogs, les sites e-commerce, et les sites d’actualités. Pour les sites plus simples ou les sites one-page, ils peuvent ne pas être nécessaires.