Comment ajouter un bouton « Aller à la recette » dans WordPress (2 méthodes faciles)

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.

Pourquoi ajouter un bouton « Aller à la recette » dans les articles de blog culinaire ?

L'une des plaintes les plus courantes que nous avons vues dans le blogging culinaire est que les lecteurs doivent faire défiler de longues histoires et des publicités avant d'atteindre la recette proprement dite.

Bien que ces histoires contribuent au référencement et à la monétisation, et que de nombreux lecteurs fidèles apprécient la touche personnelle, tout le monde n'a pas le temps de tout lire.

Pensez-y : quelqu'un pourrait être à l'épicerie en train de vérifier les ingrédients, ou dans sa cuisine prêt à commencer à cuisiner. Il veut juste un accès rapide aux instructions de la recette.

C'est là qu'un bouton « Aller à la recette » est utile. Il offre aux visiteurs pressés un moyen rapide de passer à la recette tout en vous permettant de conserver le style narratif de votre blog et votre stratégie de monétisation.

De cette façon, vous satisfaites les deux types de lecteurs : ceux qui apprécient votre contenu et ceux qui ont juste besoin de la recette rapidement.

L'ajout de ce bouton peut améliorer l'expérience utilisateur sur votre site et potentiellement maintenir l'engagement des visiteurs plus longtemps, augmentant vos vues de page et réduisant les taux de rebond.

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 pour ajouter un bouton « Sauter à la recette » (Recommandé)

La manière la plus simple d'ajouter un bouton « Sauter à la recette » dans WordPress est d'utiliser WP Tasty.

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 », WP Tasty 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 de WP Tasty et sur la manière dont il peut bénéficier à votre blog, n'hésitez pas à consulter notre critique complète du plugin.

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.

Maintenant, pour utiliser WP Tasty, vous devez d'abord acheter un plan payant. Vous pouvez opter pour le WP Tasty All Access Bundle ou le plugin autonome WP Tasty 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 WP Tasty 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 légèrement plus compliquée, surtout pour les débutants.

Cela dit, si vous souhaitez ajouter un bouton « Sauter à la recette » gratuitement, vous pouvez essayer cette méthode suivante.

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.

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 ‘Aller à la recette’ dans tous les articles de recettes

Le premier extrait de code ajoutera automatiquement le bouton « Sauter à la recette » à tous les articles de blog contenant une section 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, la fonction nommée has_recipe_anchor, vérifie s’il existe une balise de titre (H1 à H6) dans votre article de blog qui possède une ancre définie sur « recipe ». La fonction preg_match recherche ce modèle spécifique dans votre texte.

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 la fonction has_recipe_anchor de l’étape précédente a trouvé un titre avec l’ancre de recette, elle crée le code HTML pour le bouton de saut. Ensuite, elle insère ce code juste avant le contenu de votre article de blog.

La dernière ligne de code, add_filter('the_content', 'add_jump_to_recipe_button');, indique essentiellement à WordPress d’exécuter la fonction add_jump_to_recipe_button chaque fois qu’il récupère le contenu d’un 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 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 background-color (pour la couleur du bouton), color (pour le texte), et background-color sous .jump-to-recipe-button:hover (pour la couleur du bouton lorsque le curseur survole le bouton).

Une fois le code inséré, faites défiler jusqu'à la section Insertion et sélectionnez « Insertion automatique » comme méthode d'insertion. Ensuite, choisissez « Pied de page sur 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.

Cliquez sur le bloc En-tête de votre section recette. Ensuite, dans la barre latérale des paramètres du bloc, ouvrez le menu « Avancé » et tapez « recette » dans le champ Ancre HTML.

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

Outre un bouton « Sauter à la recette », il existe d'autres éléments de conception WordPress que vous pouvez utiliser pour améliorer l'expérience utilisateur sur votre blog culinaire.

Par exemple, mettre du texte en surbrillance dans vos articles peut être un excellent moyen d'attirer l'attention sur des informations importantes ou des conseils de cuisine. Il peut s'agir d'ingrédients spécifiques, de temps de cuisson ou de substitutions alternatives.

Les notes de bas de page sont un autre outil utile. Elles vous permettent d'élaborer sur une étape de recette ou un ingrédient particulier sans interrompre le flux de vos instructions principales.

De nombreux utilisateurs parcourront vos recettes depuis leur téléphone ou leur tablette. Une conception adaptée aux mobiles garantit que votre contenu est correctement formaté et facile à lire sur différentes tailles d'écran.

Enfin, les liens de navigation fil d'Ariane peuvent améliorer la navigation sur le site Web. Ces petits liens en haut de la page indiquent aux utilisateurs leur emplacement actuel dans la hiérarchie de votre site Web. Cela leur permet de retrouver plus facilement les sections précédentes ou de parcourir des recettes similaires.

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.