Ce tutoriel présente l'utilisation de GeneratePress répondre en chantant Générer des blocsL'élément Block Hook permet d'ajouter facilement un fil d'Ariane à votre site web et d'améliorer la navigation sur les pages. L'exemple utilise l'élément Yoast SEO La méthode s'applique à d'autres plugins SEO (par exemple Rank Math) en rempla?ant simplement le shortcode correspondant.

I. Préparatifs
Assurez-vous que le plugin Yoast SEO est installé et activé (ou un autre plugin permettant de créer des fils d'Ariane). RéFéRENCEMENT ) et la fonction de fil d'Ariane est activée.
![Image [2] - Tutoriel pour ajouter un fil d'Ariane à la navigation avec GeneratePress et GenerateBlocks](http://gqxi.cn/wp-content/uploads/2025/05/20250516111912393-image.png)
Deuxièmement, créez un nouvel élément et ajoutez le code court du fil d'Ariane
- Allez dans le backend "Apparence → éléments" et cliquez sur "Ajouter un nouvel élément".
![Image [3] - Tutoriel pour ajouter un fil d'Ariane à la navigation avec GeneratePress et GenerateBlocks](http://gqxi.cn/wp-content/uploads/2025/05/20250516112412373-image.png)
- Sélection du type d'élément Crochet
- Le nom du crochet est fixé à
titre_avant_entrée
C'est-à-dire afficher les fils d'Ariane avant le titre de l'article
![Image [4] - Tutoriel pour ajouter un fil d'Ariane à la navigation avec GeneratePress et GenerateBlocks](http://gqxi.cn/wp-content/uploads/2025/05/20250516112512468-image.png)
- Ajouter un bloc de codes courts
![Image [5] - Tutoriel pour ajouter un fil d'Ariane à la navigation avec GeneratePress et GenerateBlocks](http://gqxi.cn/wp-content/uploads/2025/05/20250516112633213-image.png)
- Coller Yoast SEO dans le bloc de raccourcis chapelureCode court :
[wpseo_breadcrumb]
(Pour les autres plug-ins, veuillez utiliser le code court correspondant) - Sélectionnez l'emplacement d'affichage de la page Tous les messages et cliquez sur Publier.
![Image [6] - Tutoriel pour ajouter un fil d'Ariane à la navigation avec GeneratePress et GenerateBlocks](http://gqxi.cn/wp-content/uploads/2025/05/20250516112709191-image.png)
III. ajouter des styles aux miettes de pain (facultatif)
Ajoutez un bloc conteneur, faites glisser le bloc de raccourci dans le conteneur et assurez-vous que le conteneur entoure le bloc de raccourci.
![Image [7] - Tutoriel pour ajouter un fil d'Ariane à la navigation avec GeneratePress et GenerateBlocks](http://gqxi.cn/wp-content/uploads/2025/05/20250516112954969-image.png)
Ajustez l'apparence du fil d'Ariane en utilisant le style du bloc contenant :
- Modifier la couleur du texte (par exemple, bleu)
- Modifier la couleur du lien (par exemple, rose)
![Image [8] - Tutoriel pour ajouter un fil d'Ariane à la navigation avec GeneratePress et GenerateBlocks](http://gqxi.cn/wp-content/uploads/2025/05/20250516113055239-image.png)
- Réglage de la couleur d'arrière-plan (par exemple, gris)
![Image [9] - Tutoriel pour ajouter un fil d'Ariane à la navigation avec GeneratePress et GenerateBlocks](http://gqxi.cn/wp-content/uploads/2025/05/20250516113220963-image.png)
- Ajustez la marge intérieure (Padding), il est recommandé qu'elle soit uniformément de 5px.
- Ajouter une marge inférieure (Margin) pour augmenter l'espacement entre les fils d'Ariane et les titres.
![Image [10] - Tutoriel pour ajouter un fil d'Ariane à la navigation avec GeneratePress et GenerateBlocks](http://gqxi.cn/wp-content/uploads/2025/05/20250516113345153-image.png)
Aper?u de l'effet :
![Image [11] - Tutoriel pour ajouter un fil d'Ariane à la navigation avec GeneratePress et GenerateBlocks](http://gqxi.cn/wp-content/uploads/2025/05/20250516113947704-image.png)
Quatrièmement, dans le bandeau de la page (Page Hero) pour ajouter les fils d'Ariane
- Le statut de l'élément du fil d'Ariane précédemment créé est modifié en statut de brouillon.
![Image [12] - Tutoriel simple pour ajouter un fil d'Ariane à la navigation avec GeneratePress et GenerateBlocks](http://gqxi.cn/wp-content/uploads/2025/05/20250516113505746-image.png)
- Ouvrir l'élément de bannière de la page d'un article unique (Single Post Hero)
![Image [13] - Tutoriel simple pour ajouter un fil d'Ariane à la navigation avec GeneratePress et GenerateBlocks](http://gqxi.cn/wp-content/uploads/2025/05/20250516113708818-image.png)
- Ajoutez un bloc de raccourcis dans la bannière et collez le shortcode du fil d'Ariane.
- Déplacer le bloc de raccourcis au-dessus du titre
![Image [14] - Tutoriel pour ajouter un fil d'Ariane à la navigation avec GeneratePress et GenerateBlocks](http://gqxi.cn/wp-content/uploads/2025/05/20250516113809500-image.png)
- Enregistrez la mise à jour et actualisez la page pour voir les fils d'Ariane s'afficher dans le bandeau de la page.
![Image [15] - Tutoriel pour ajouter un fil d'Ariane à la navigation avec GeneratePress et GenerateBlocks](http://gqxi.cn/wp-content/uploads/2025/05/20250516113844862-image.png)
résumés
utiliser GeneratePress répondre en chantant Générer des blocs Fonction Block Hook, ajoutez la fonctionchapelureLa navigation est simple et flexible, et le style peut être librement ajusté. Combiné au shortcode du plugin SEO, il permet d'obtenir un effet de navigation efficace.
Mises à jour récentes
Lien vers cet article :http://gqxi.cn/fr/54756L'article est protégé par le droit d'auteur et doit être reproduit avec mention.
Pas de commentaires