Comment ajouter un bouton dans le menu d'en-tête de votre WordPress

L'ajout d'un bouton au menu de navigation principal vous permet de faire ressortir l'appel à l'action de votre site, dirigeant ainsi plus de trafic vers vos pages les plus importantes. C'est aussi un moyen facile d'ajouter le même bouton à chaque page et article.

Nous avons vu comment WPForms, l'une de nos marques partenaires, a ajouté un bouton « Obtenir WPForms » directement dans l'en-tête de WordPress. Cet ajout simple a contribué à augmenter les conversions et les ventes.

En plaçant le bouton dans un endroit très visible, WPForms a facilité la prise de décision des visiteurs, ce qui a entraîné un meilleur engagement et plus de prospects.

Dans cet article, nous allons vous montrer comment ajouter facilement un bouton à votre menu d'en-tête WordPress.

Pourquoi ajouter un bouton dans le menu d'en-tête WordPress ?

Les menus de navigation WordPress sont généralement des liens textuels simples, où tout se ressemble et rien ne ressort vraiment.

Cependant, certains liens sont plus importants que d'autres. Par exemple, vous pourriez vouloir ajouter un lien vers un formulaire de commande en ligne ou la page d'inscription de votre site d'adhésion WordPress.

Par défaut, ces liens importants ressemblent exactement au reste du menu d'en-tête.

Vous pouvez rendre ces liens plus accrocheurs en les transformant en boutons. Cela peut vous permettre d'obtenir plus de clics et de conversions.

Par défaut, vous pouvez ajouter des boutons dans les articles et pages WordPress en utilisant le bloc Boutons, mais vous ne pouvez pas les ajouter aux menus de navigation.

Cela dit, voyons comment vous pouvez ajouter un bouton à votre menu d'en-tête WordPress.

Ajouter un bouton dans votre menu d'en-tête WordPress

Pour commencer, vous devez ajouter le lien que vous souhaitez transformer en bouton.

Allez simplement sur la page Apparence » Menus dans votre tableau de bord WordPress et ajoutez le lien à votre menu de navigation. Pour des instructions détaillées, veuillez consulter notre guide sur comment ajouter un menu de navigation dans WordPress.

Après cela, vous devez cliquer sur le bouton Options d'écran en haut de l'écran.

Cela révélera un panneau avec de nombreuses nouvelles options. Cochez simplement la case à côté de 'Classes CSS'.

Maintenant, cliquez pour développer l'élément de menu que vous souhaitez transformer en bouton.

Vous remarquerez une nouvelle option de classe CSS où vous pouvez taper un nom de classe. Vous pouvez nommer la classe CSS comme vous le souhaitez, mais dans ce guide, nous utiliserons menu-button.

Après avoir tapé un nom, cliquez sur le bouton 'Enregistrer le menu' pour enregistrer vos modifications.

Vous avez maintenant ajouté une classe CSS personnalisée à l'élément de menu. Vous pouvez modifier son apparence en utilisant du code CSS personnalisé. Vous pouvez ajouter ce code via le personnalisateur WordPress intégré ou en utilisant un plugin d'extraits de code.

Ajouter un bouton dans votre menu d'en-tête WordPress à l'aide de WPCode (recommandé)

La meilleure façon d'ajouter du code personnalisé à WordPress est d'utiliser WPCode. C'est le meilleur plugin d'extraits de code qui vous permet d'ajouter du CSS, du PHP, du HTML personnalisé, et plus encore.

Comme vous n'éditez pas directement les fichiers du thème, vous pouvez éviter de nombreuses erreurs WordPress courantes. Vous pouvez également mettre à jour votre thème ou passer à un thème complètement différent sans perdre votre code personnalisé.

Si vous souhaitez supprimer le bouton à tout moment, vous pouvez le désactiver en un seul clic.

Tout d'abord, vous devrez installer et activer le plugin gratuit WPCode. Pour plus d'informations, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Une fois le plugin activé, visitez la page Extraits de code » + Ajouter un extrait depuis le tableau de bord WordPress.

Ici, vous verrez tous les extraits WPCode prêts à l'emploi que vous pouvez ajouter à votre site. Ceux-ci incluent un extrait qui vous permet de désactiver complètement les commentaires, de télécharger des types de fichiers que WordPress ne prend pas normalement en charge, de désactiver les pages de pièces jointes, et bien plus encore.

Maintenant, survolez simplement votre souris sur l'option « Ajouter votre code personnalisé (Nouvel extrait) » et cliquez sur le bouton « + Ajouter un extrait personnalisé » lorsqu'il apparaît.

Ensuite, vous devez sélectionner « Extrait CSS » comme type de code dans la liste des options qui s'affichent à l'écran.

Sur l'écran suivant, vous devez saisir un titre pour l'extrait de code.

Le nom est juste pour votre référence, vous pouvez donc utiliser ce que vous voulez.

Une fois cela fait, vous êtes prêt à coller un extrait de code CSS dans la boîte « Aperçu du code » :

.menu-button {
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a,  .menu-button a:hover, .menu-button a:active {
color:#fff !important;
}

Lorsque vous ajoutez l'extrait de code ci-dessus, assurez-vous de remplacer menu-button par le nom de votre classe CSS.

L'extrait de code ci-dessus crée un bouton orange avec un effet d'ombre, comme vous pouvez le voir dans l'image suivante.

N'hésitez pas à jouer avec l'extrait CSS pour voir quels effets différents vous pouvez créer. Par exemple, vous pouvez changer la couleur de fond, la couleur du texte des liens, ajouter une bordure, et plus encore.

Si vous souhaitez utiliser une couleur différente, vous devrez connaître son code hexadécimal. Si vous n'êtes pas sûr des codes à utiliser, vous pouvez utiliser une ressource telle que Color Hex.

Lorsque vous êtes satisfait du code, cliquez sur le bouton bascule « Inactif » pour qu'il devienne « Actif », puis cliquez sur le bouton « Enregistrer l'extrait ».

Maintenant, si vous visitez votre site WordPress, vous verrez le nouveau bouton du menu d'en-tête en action.

Ajouter un bouton dans votre menu d'en-tête WordPress à l'aide du personnaliseur

Si vous ne souhaitez pas utiliser de plugin, vous pouvez ajouter du code à l'aide du personnaliseur intégré.

Allez simplement dans Apparence » Personnaliser, et vous verrez un aperçu de votre site sur la droite, ainsi qu'une série de paramètres de thème dans la colonne de gauche.

Pour commencer, cliquez sur l'option « CSS additionnel ».

Vous verrez maintenant une boîte où vous pouvez ajouter du code CSS personnalisé.

Encore une fois, vous pouvez utiliser l'extrait de code ci-dessus comme point de départ.

Lorsque vous êtes satisfait de l'apparence du bouton, cliquez sur « Publier » pour rendre vos modifications publiques.

Tutoriel vidéo

Si vous êtes plutôt un apprenant visuel, veuillez consulter notre tutoriel vidéo sur la façon d'ajouter un bouton dans votre menu d'en-tête WordPress :

Bonus : Ajouter un bouton « Cliquez pour appeler » dans l'en-tête WordPress

Si vous avez un site pour petite entreprise, vous voudrez peut-être également ajouter un bouton d'appel en un clic à votre menu de navigation. Cela permettra aux visiteurs de vous contacter plus facilement et pourra même améliorer votre classement dans les moteurs de recherche en rendant votre site plus optimisé pour le SEO.

Pour ajouter ce bouton, visitez la page Apparence » Menus depuis le tableau de bord WordPress et développez l'onglet « Liens personnalisés » sur la droite.

Ici, ajoutez votre numéro de téléphone VoIP dans l'URL et ajoutez une étiquette pour celui-ci. Ensuite, cliquez sur le bouton « Ajouter au menu ».

Une fois que le bouton d'appel en un clic a été ajouté à votre liste de liens de navigation, n'oubliez pas de cliquer sur le bouton « Enregistrer le menu » pour sauvegarder vos paramètres.

Pour des instructions détaillées, vous pourriez aimer consulter notre tutoriel sur comment ajouter un bouton d'appel en un clic dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment ajouter un bouton à votre menu d'en-tête WordPress. Vous pouvez également consulter notre guide sur comment créer un menu de navigation flottant et fixe dans WordPress et notre tutoriel sur comment ajouter une logique conditionnelle aux menus 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.