Les blogueurs culinaires nous posent souvent des questions sur les fonctionnalités qui font la plus grande différence pour leurs lecteurs.
Après avoir observé de nombreux blogs culinaires au fil des ans, nous avons constaté que l'ajout d'un bouton « Aller à la recette » est l'une des améliorations les plus efficaces que vous puissiez apporter.
C'est un petit changement qui fait une grande différence pour aider les visiteurs à trouver rapidement ce qu'ils cherchent. De plus, il est simple à configurer sur n'importe quel site WordPress.
Nous avons testé différentes solutions et trouvé deux méthodes fiables qui fonctionnent de manière constante. Les deux méthodes sont adaptées aux débutants et vous permettront d'avoir votre bouton « Aller à la recette » fonctionnel en quelques minutes seulement.
💡 Points clés : Ajouter un bouton « Aller à la recette »
Voici les 2 moyens les plus simples d'ajouter un bouton « Aller à la recette » dans WordPress :
1. La méthode du plugin (recommandée) : L'utilisation de Tasty Recipes est la solution la plus simple. Il ajoute automatiquement un bouton « Aller à la recette » avec défilement fluide et gère le schéma de recette pour le SEO. Idéal pour les blogueurs culinaires sérieux.
2. La méthode du code (gratuite) : L'utilisation de WPCode vous permet de créer un bouton personnalisé sans acheter de plugin de recette spécifique. Il est entièrement gratuit mais nécessite une configuration manuelle pour chaque article et manque de fonctionnalités telles que le défilement fluide ou la génération automatique de schéma.
Pourquoi ajouter un bouton « Aller à la recette » dans les articles de blog culinaire ?
Un bouton « Aller à la recette » est un lien de navigation placé en haut d'un article de blog. Techniquement, il fonctionne comme une ancre HTML qui fait défiler instantanément le navigateur vers la carte de recette, en sautant le contenu introductif.
Les lecteurs se plaignent souvent de devoir faire défiler de longues histoires et des publicités pour trouver les ingrédients. Bien que le contenu long aide à la monétisation, de nombreux visiteurs ont besoin d'un accès immédiat aux instructions pendant la cuisine ou les courses.
L'ajout de ce bouton vous permet de servir les deux types de lecteurs. Vous pouvez maintenir votre narration personnelle pour les fans fidèles tout en offrant un raccourci rapide aux utilisateurs qui ont besoin de réponses rapidement.
Ceci améliore l'expérience utilisateur (UX) globale sur votre site. Lorsque les utilisateurs peuvent trouver facilement ce dont ils ont besoin, ils sont moins susceptibles de revenir aux résultats de recherche.
Dans cette optique, nous allons vous montrer 2 méthodes simples pour ajouter un bouton « Sauter à la recette » à votre blog culinaire : en utilisant un plugin de création de recettes WordPress et du code personnalisé. Vous pouvez utiliser les liens rapides ci-dessous pour passer à votre méthode préférée :
Méthode 1 : Utiliser WP Tasty Recipes pour ajouter un bouton « Sauter à la recette » (Recommandé)
La façon la plus simple d'ajouter un bouton « Sauter à la recette » dans WordPress est d'utiliser WP Tasty Recipes.
Ce plugin de carte et de création de recettes a été largement testé par nos soins, et nous avons découvert de nombreuses fonctionnalités qui en font un favori parmi les blogueurs culinaires.
Au-delà du bouton « Sauter à la recette », Tasty Recipes vous permet de rendre vos recettes imprimables et de les convertir sans effort dans l'unité de mesure préférée du lecteur.
De plus, vous pouvez afficher clairement les informations nutritionnelles, le temps de cuisson, la taille des portions et les notes des utilisateurs, le tout de manière soignée et organisée.
Si vous souhaitez en savoir plus sur les capacités du plugin et sur la façon dont il peut bénéficier à votre blog, consultez notre critique complète de WP Tasty.
Un inconvénient de ce plugin de recettes est qu'il n'existe pas de version gratuite, mais c'est un excellent investissement pour les blogueurs culinaires sérieux qui veulent gagner de l'argent en ligne.
Pour utiliser le plugin, vous devez d'abord acheter un plan payant. Vous pouvez opter pour le bundle WP Tasty All Access ou le plugin autonome Tasty Recipes.
Une fois que vous avez effectué un achat, vous pouvez télécharger le plugin et l'installer sur votre site Web WordPress. Vous pouvez lire notre guide sur comment installer un plugin WordPress pour plus d'informations.
Après cela, allez dans WP Tasty » Tableau de bord depuis votre administration WordPress et cliquez sur « Entrer la licence ».
Ensuite, insérez la clé de licence de votre plugin, que WP Tasty devrait vous avoir envoyée par e-mail après votre achat.
Ensuite, sélectionnez « Tous les plugins » ou « Tasty Recipes » dans le menu déroulant Plugins à activer. Cliquez sur « Enregistrer la licence ».
Une fois cela fait, allez à la page WP Tasty » Tasty Recipes depuis votre tableau de bord WordPress et basculez vers l'onglet « Paramètres ».
Par défaut, les options pour les boutons « Sauter à la recette » et « Imprimer la recette » seront cochées, vous pouvez donc les laisser telles quelles.
Une chose que vous pouvez changer concernant les boutons est le style des liens rapides.
WP Tasty peut également afficher l'option « Sauter à la recette » sous forme de lien texte normal au lieu de boutons. Si vous préférez, vous pouvez sélectionner « Liens ».
Mais bien sûr, vous pouvez aussi simplement choisir l'option Boutons si c'est votre préférence.
L'option Boutons est également plus accrocheuse, ce qui permet aux lecteurs de la repérer facilement.
Il y a en fait beaucoup plus de paramètres à explorer ici, comme l'activation des cases à cocher pour la liste des ingrédients et la mise à l'échelle des recettes. Assurez-vous de cocher les options qui conviennent le mieux à votre blog.
Une fois terminé, faites simplement défiler la page et cliquez sur « Enregistrer les modifications ».
Désormais, chaque fois que vous utiliserez la carte de recette de WP Tasty, les boutons « Sauter à la recette » et « Imprimer la recette » en haut s'afficheront.
Pour utiliser la carte de recette, vous pouvez créer un nouvel article de recette ou modifier un article existant à l'aide de l'éditeur de blocs Gutenberg. Ensuite, vous pouvez suivre ce guide étape par étape sur comment ajouter un bloc de carte de recette dans WordPress pour plus d'informations.
Un avantage de l'utilisation de Tasty Recipes pour ajouter le lien de saut est l'effet de défilement fluide. De cette façon, les lecteurs peuvent naviguer directement vers les instructions de la recette sans sauts brusques sur la page.
L'utilisation de code personnalisé pour obtenir cet effet est compliquée car elle nécessite généralement du JavaScript ou la modification des fichiers du thème. C'est pourquoi nous recommandons la méthode du plugin pour la plupart des utilisateurs.
Cela dit, si vous souhaitez ajouter un bouton « Sauter à la recette » gratuitement, vous pouvez essayer cette méthode suivante.
Astuce de pro : Vous souhaitez optimiser vos articles de recettes pour le référencement et obtenir plus de trafic ? Utilisez simplement le plugin All in One SEO pour ajouter un schéma de recette optimisé pour le SEO et rendre vos articles de blog plus visibles dans la recherche Google.
Méthode 2 : Utiliser du code personnalisé pour ajouter un bouton « Sauter à la recette » (Gratuit)
L'ajout manuel d'un bouton « Sauter à la recette » peut sembler intimidant pour les débutants complets, mais ne vous inquiétez pas, nous vous guiderons attentivement à chaque étape.
Si c'est la première fois que vous ajoutez du code personnalisé à WordPress, nous vous suggérons d'utiliser un plugin d'extraits de code comme WPCode.
Nous avons testé le plugin de manière approfondie, et il offre un moyen sûr et simple d'insérer des extraits de code sans modifier les fichiers du thème. Cela minimise le risque de casser accidentellement la mise en page ou la fonctionnalité de votre site Web.
Curieux de savoir ce que WPCode peut faire d'autre ? Consultez notre avis facile à suivre où nous détaillons ses fonctionnalités et expliquons pourquoi c'est un excellent outil pour les utilisateurs de WordPress.
Pour utiliser WPCode, installez le plugin depuis votre tableau de bord d'administration WordPress. Vous pouvez consulter notre guide étape par étape sur comment installer un plugin WordPress pour plus de détails.
Remarque : WPCode dispose également d'une version gratuite, ce qui est idéal si vous avez un budget limité. Cela dit, nous vous recommandons de passer à la version payante si vous souhaitez utiliser des fonctionnalités avancées comme le test de votre code avant sa mise en ligne.
Ensuite, allez dans Snippets de code » + Ajouter un snippet. Ici, sélectionnez ‘Ajouter votre code personnalisé (Nouveau snippet)’ et cliquez sur ‘Utiliser le snippet’.
Il y a deux snippets de code que vous devez ajouter séparément dans WPCode. Passons-les en revue un par un :
Ajouter un code pour insérer automatiquement le bouton « Sauter à la recette »
Le premier extrait de code ajoutera automatiquement le bouton « Sauter à la recette » dans tous les articles de blog contenant une section de recette. Pour cela, vous pouvez nommer votre extrait « Ajouter automatiquement le bouton Sauter à la recette ».
Ensuite, sélectionnez « Extrait PHP » dans le menu déroulant Type de code.
Dans la zone d’aperçu du code, insérez les lignes de code suivantes :
/**
* Check if the post content contains a heading with the #recipe anchor
*/
function has_recipe_anchor($content) {
$pattern = '/<h[1-6].*?id\s*=\s*["\']?recipe["\']?[^>]*>/i';
return preg_match($pattern, $content) === 1;
}
/**
* Add "Jump to Recipe" button to posts
*/
function add_jump_to_recipe_button($content) {
if (has_recipe_anchor($content)) {
$jump_button = '<div class="jump-to-recipe-container"><a href="#recipe" class="jump-to-recipe-button">Jump to Recipe</a></div>';
$content = $jump_button . $content;
}
return $content;
}
add_filter('the_content', 'add_jump_to_recipe_button');
Examinons le fonctionnement de ce code.
La première partie du code vérifie le contenu de votre article de blog. Il recherche spécifiquement une balise de titre (H1 à H6) qui a un ID d'ancre défini sur « recipe ».
La deuxième partie, la fonction nommée add_jump_to_recipe_button, est responsable de l’ajout du bouton réel à votre article.
Si le code trouve l'ID d'ancre « recipe », il crée le code HTML pour le bouton de saut. Ensuite, il insère ce code juste avant le contenu de votre article de blog.
De cette façon, le code peut vérifier automatiquement le titre de la recette et ajouter le bouton si nécessaire.
Cela étant dit, vous devrez ajouter une ancre #recipe à la section recette de votre article de blog. Ne vous inquiétez pas, nous vous montrerons comment faire plus tard.
Maintenant, faites défiler vers le bas jusqu’à la section « Insertion » et assurez-vous que la méthode « Insertion automatique » est sélectionnée. Quant à l’Emplacement, vous pouvez choisir « Frontend uniquement » afin que le code ne s’exécute que sur la partie visible de votre site Web WordPress.
Ensuite, basculez le bouton dans le coin supérieur droit pour rendre le code « Actif » et cliquez sur « Enregistrer l’extrait ».
Ajouter un extrait de code pour styliser le bouton « Sauter à la recette »
Nous allons maintenant ajouter du code CSS personnalisé pour styliser votre bouton d'appel à l'action. Répétez les étapes pour créer un nouveau fragment de code personnalisé dans WPCode et donnez-lui un nom simple, comme « Style Bouton Sauter à la Recette ».
Pour le Type de code, sélectionnez « Fragment CSS ».
Maintenant, nous avons créé un code CSS qui rendra notre bouton vert et le texte qu'il contient blanc. Comme ceci :
.jump-to-recipe-button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
}
.jump-to-recipe-button:hover {
background-color: #45a049;
}
Si vous souhaitez utiliser des couleurs différentes, vous pouvez simplement remplacer les codes hexadécimaux dans le code ci-dessus.
Une fois que vous avez inséré le code, faites défiler vers le bas jusqu'à la section Insertion et sélectionnez « Insertion automatique » comme méthode d'insertion. Ensuite, choisissez « En-tête de tout le site » comme emplacement.
Tout ce que vous avez à faire ensuite est d'activer le fragment de code et de cliquer sur « Enregistrer le fragment ».
Ajoutez l'ancre #recipe à vos articles de blog de recettes
Même si vous avez activé les deux fragments de code, le bouton de saut n'apparaîtra pas tant que vous n'aurez pas ajouté une ancre #recipe à la section recette de vos articles de blog WordPress. C'est donc ce que nous allons faire maintenant.
Tout d'abord, créez un nouvel article de blog de recette ou ouvrez-en un existant dans l'éditeur de blocs.
Maintenant, dans notre exemple, nous utilisons une balise d'en-tête (H2) pour signaler la section recette de notre article de blog. Nous vous suggérons de faire de même afin qu'il soit plus facile pour les utilisateurs de la trouver lorsqu'ils lisent votre article. Les moteurs de recherche apprécient également lorsque le contenu de votre blog a une structure organisée.
Allez-y et cliquez sur le bloc Titre de votre section de recette. Ensuite, dans la barre latérale des paramètres du bloc, ouvrez le menu « Avancé ». Ensuite, tapez « recipe » dans le champ Ancre HTML. Assurez-vous d'utiliser uniquement des lettres minuscules.
Cela servira de lien d'ancrage pour le bouton de saut.
Une fois cela fait, cliquez sur « Publier » ou « Mettre à jour ».
Si vous prévoyez votre site web sur mobile ou sur ordinateur, vous devriez maintenant voir un bouton « Sauter à la recette » en haut du contenu de votre article, après le titre.
Conseils bonus pour améliorer l'expérience utilisateur de votre blog culinaire
Au-delà du bouton « Sauter à la recette », il existe d'autres éléments de conception que vous pouvez utiliser pour rendre votre blog culinaire plus convivial. Voici quelques améliorations à fort impact :
| Élément de conception | Avantage pour l'expérience utilisateur |
|---|---|
| Texte mis en surbrillance | Attire l'attention sur des informations critiques telles que les temps de cuisson, les ingrédients alternatifs ou les avertissements de sécurité. |
| Notes de bas de page | Vous permet d'élaborer sur une étape spécifique sans interrompre le flux des instructions principales. |
| Conception réactive pour mobile | Garantit que les recettes sont correctement formatées pour les utilisateurs qui cuisinent dans leur cuisine avec des téléphones ou des tablettes. |
| Navigation par fil d'Ariane | Aide les utilisateurs à comprendre la structure de votre site et à naviguer facilement pour trouver des catégories de recettes connexes. |
Foire aux questions sur les boutons WordPress
Voici quelques questions que nos lecteurs nous ont fréquemment posées concernant l'ajout de boutons dans WordPress :
Comment ajouter des liens à des boutons dans WordPress ?
Pour ajouter un lien, sélectionnez le bloc Boutons dans l'éditeur WordPress. Cliquez sur l'icône de lien dans la barre d'outils qui apparaît au-dessus du bouton, puis collez l'URL de destination dans le champ.
Comment ajouter un bouton « Remonter en haut » dans WordPress ?
La méthode la plus simple consiste à installer un plugin comme WPFront Scroll Top. Une fois activé, il ajoute automatiquement un bouton qui apparaît lorsqu'un utilisateur fait défiler la page vers le bas, lui permettant de revenir rapidement en haut de la page.
Pour commencer, consultez notre tutoriel sur l'ajout d'un effet de défilement vers le haut dans WordPress.
Comment ajouter un bouton de suivi sur un blog WordPress ?
Vous pouvez ajouter des boutons de suivi à l'aide du bloc Icônes sociales intégré dans l'éditeur de blocs. Recherchez simplement « Icônes sociales », ajoutez le bloc et cliquez sur l'icône « plus » pour sélectionner les plateformes de médias sociaux auxquelles vous souhaitez vous connecter.
Pour plus d'informations, consultez notre guide sur comment ajouter un bouton de suivi Facebook pour les auteurs dans WordPress.
Comment puis-je ajouter une fenêtre pop-up sur WordPress ?
Nous recommandons d'utiliser OptinMonster pour ajouter des pop-ups. Il vous permet de concevoir des pop-ups personnalisés à l'aide d'un constructeur par glisser-déposer et de contrôler exactement quand ils apparaissent, par exemple lorsqu'un utilisateur est sur le point de quitter votre site.
Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter un bouton « Sauter à la recette » dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur les éléments clés de conception pour un site Web WordPress efficace et comment configurer la commande de nourriture en ligne dans WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Kzain
C'est un excellent article, j'apprends à améliorer les blogs de recettes et c'est une aide précieuse, j'utiliserai certainement WP Tasty pour tous mes blogs de recettes. merci pour ce guide formidable.