Comment créer un menu WordPress EFFICACE de A à Z - Tutoriel Débutant

avatar de baptiste pagès
Par Baptiste Pagès le 6 août 2021

Publié dans Tutoriel

Mis à jour le 17 août 2021

Pour un débutant, la gestion des menus dans WordPress est souvent une tâche difficile. Que vous souhaitiez créer un nouveau menu dans WordPress ou simplement ajuster sa configuration, je vous montre aujourd'hui comment faire de A à Z.

Nous verrons ainsi ensemble comment créer un menu en partant de rien et comment ajouter des liens dans ce menu. Ensuite, nous verrons comment assigner ce menu à un emplacement de votre thème, de façon à ce que le menu s'affiche dans votre site. Enfin, je vous montrerai comment structurer votre menu et je vous donnerai quelques astuces pour obtenir un menu clair pour vos visiteurs.

Dans ce guide, je m'efforcerai de vous donner des astuces qui fonctionnent avec n'importe quel thème WordPress. Cependant, il peut arriver que des détails diffèrent pour certains thèmes. Si vous rencontrez des difficultés malgré la lecture de ce guide, n'hésitez pas à me contacter 😄

Créer un nouveau menu WordPress à partir de zéro

Pour commencer, connectons-nous à notre administration WordPress. Nous allons ensuite nous rendre dans "Apparence" (1) puis dans "Menu" (2). Nous allons ensuite donner un nom à notre menu (3).

Création d'un menu dans WordPress - étape 1

Pour cet exemple, nommons le "Menu Principal" puis validons en appuyant sur "Créer un menu".

Ajouter des liens dans votre menu WordPress

Notre menu est maintenant créé, mais il est vide. Commençons par lui ajouter des pages 😉

Création d'un menu wordpress étape 2

Pour ça, dans la zone de gauche, cochons les pages qui nous intéressent. Ici, je vais cocher "Cours", "Mon Compte" et "Panier". Notre menu sera composé ce ces trois pages pour commencer, évitons les choses compliquées comme les numéros de téléphones cliquables pour le moment.

Une fois les pages sélectionnées, cliquons simplement sur le bouton "Ajouter au menu".

Les pages s'affichent dans le menu (1), il ne nous reste plus qu'à enregistrer le menu pour confirmer les changements.

Assigner le menu à un emplacement de thème

La structure de notre menu est prête. Mais pour l'instant, notre site ne sait pas où l'afficher, on ne lui a pas dit.

En effet, un menu WordPress doit être assigné à un emplacement afin d'être affiché sur le site. Les emplacements disponibles sont défini par le thème que vous utilisez.

Dans cet exemple nous utilisons Storefront, le thème basique de WooCommerce (très bon choix si vous vous lancez d'ailleur). Ce thème nous propose trois emplacements de menu.

choisir l'emplacement d'affichage du menu WordPress

Comme nous travaillons actuellement sur le menu principal, cochons simplement "menu principal" puis enregistrons le menu.

Nous pouvons maintenant aller sur l'accueil de notre site pour voir si le menu est bien affiché à l'emplacement souhaité. Dans cet exemple, tout va bien, le menu est bien là.

Note : pensez à vérifier votre menu sur mobile également, dans mon cas pour que le menu soit OK sur mobile, il faut aussi que je l'assigne à l'emplacement "menu mobile".

Créer un sous-menu WordPress

Maintenant, imaginons que nous ayons 3 cours disponibles. Ajoutons-les sous la forme d'un sous-menu. Pour ça, nous allons les cocher dans les pages à ajouter au menu.

Ajouter des pages à un menu WordPress

Ensuite, il faut ordonner les éléments du menu de façon à placer les nouvelles pages sous la page "Cours".

Créer un sous-menu dans un menu wordpress

Astuce : placer un bouton dans votre menu WordPress

Vous le savez, les boutons d'appel à l'acte sont très importants pour que votre site apporte des résultats. Heureusement, vous pouvez en ajouter dans vos menus en faisant preuve d'un peu d'ingéniosité.

Pour commencer, ajoutons une page d'action à notre menu. Par exemple "Contact".

Ajouter un bouton dans un menu wordpress, étape 1

En préparation de la prochaine étape, nous allons ajouter une classe CSS à cet élément du menu. Allons dans les options de l'écran, puis cochons "Classe CSS".

Activer les classes CSS dans un menu WordPress

Ensuite, retournons sur notre nouvel élément du menu, affichons les options en cliquant sur la flèche (1), et définissions une classe CSS "boutonmenu" (2). Pensez à enregistrer les changements 😉

Donner une classe CSS à un élément de menu wordpress

Maintenant, nous allons devoir ajouter un peu de CSS personnalisé. Rendez-vous donc dans le panneau de personnalisation, puis CSS personnalisé.

ajouter du css additionnel dans WordPres.

Commençons par faire simple. Un bouton noir, avec du texte blanc. Ajoutons donc le code CSS suivant :

.boutonmenu{
	background-color:black;
}
.boutonmenu a{
	color:white !important;
}

Et voici le résultat, un beau bouton noir dans le menu.

résultat, un bouton noir dans le menu de wordpress

Pour le fun, ajoutons quelques règles CSS afin de rendre ça plus sympa 😊

.boutonmenu{
	background-color:#2271b1;
	border-radius:70px;
}
.boutonmenu a{
	color:white !important;
	font-weight:600;
	font-size:20px;
	text-transform:uppercase;
	letter-spacing:3px;
	padding:10px 30px !important;
}

Et voilà, un beau bouton bleu arrondi !

Questions fréquentes

D'autres questions ? Laissez moi un message et j'ajouterai votre question ci-dessous 🙏

Question - Combien d'éléments devrait avoir mon menu ?

Ma réponse :

Plus un menu a d'éléments, plus il est compliqué à analyser par le visiteur. Les pages importantes sont comme "noyées" dedans. Il est donc très important de limiter le nombre d'éléments de votre menu à 4 - 6 par niveau. Le premier niveau de votre menu, celui visible par défaut, devrait ainsi compter environ 5 liens. Et lorsqu'on passe sur un élément avec un sous-menu, alors le sous-menu devrait aussi avoir jusqu'à 5 - 6 liens, et ainsi de suite.

N'ayez pas peur de placer des liens dans un menu de pieds de page, ou carrément de ne mettre le lien vers une page dans aucun menu. Vous imaginez un blog qui mettrait un lien pour chaque article dans le menu ? Ou un e-commerce qui ferait ça pour chaque produit ? Ce serait un enfer 😄

Question - Devrais-je faire un menu spécial pour les mobiles ?

Ma réponse :

Dans 99% des cas, non. Si vous pensez que votre menu principal est trop complexe pour les mobiles, alors il l'est sûrement aussi pour les ordinateurs, et il est temps de simplifier et organiser tout ça. Faites un nettoyage de printemps et ne gardez que les liens importants dans votre menu.

Souvenez-vous que la structure des informations de votre site sera un gros facteur de son succès.

Question - Devrais-je utiliser un menu mobile sur ordinateur ?

Ma réponse :

Non. Sauf exception, il est important que vous laissiez un menu bien visible sur ordinateur pour que le visiteur puisse le scanner rapidement à son arrivée sur le site.

Question - Est-ce que je peux changer la typographie du texte de mon menu WordPress ?

Ma réponse :

Oui, mais faites attention. Veillez à ne pas choisir une typo juste pour le menu, il faut qu'elle soit reprise à d'autres endroits du site. Souvenez-vous que pour une bonne cohérence visuelle, vous devriez utiliser une à deux polices de caractères sur votre site web. Référez-vous à mon guide sur les polices de caractères pour en savoir plus 👍

Conclusion

Merci d'avoir visité mon site ! Si vous ne me connaissez pas je m'appelle Baptiste. Je suis un webdesigner / consultant SEO indépendant spécialisé dans WordPress. J'aide les petites entreprises à développer leur clientèle grâce au web. Vous pouvez me retrouver sur Youtube, sur Twitter et sur Pinterest.

À bientôt pour un prochain article !

Partagez-moi 😀✌️
Bienvenue sur mon site !

Je m'appelle Baptiste.

Je suis un webdesigner et consultant SEO indépendant spécialisé dans WordPress. Depuis maintenant plus de six ans, j'aide les petites entreprises à se démarquer sur Internet et à développer leur visibilité.

J'écris aussi pas mal d'articles pour aider les débutants. N'hésitez pas à me contacter si vous avez une question !

Cet article vous a plu ?

Voici d'autres articles populaires qui vous intéresseront peut-être :
SEO
Les bases du Référencement Organique
Apprenez les bases du référencement organique afin d'éviter les erreurs de débutant.
Lire cet article
DESIGN
Comment changer la police d'un site WordPress ?
Tout ce qu'il faut savoir pour gérer la typographie de votre site WordPress est ici, suivez le guide !
Lire cet article
CODE
Comment ajouter du CSS additionnel dans WordPress ?
Découvrez comment ajouter facilement du code CSS additionnel dans n'importe quel site WordPress.
Lire cet article
WOOCOMMERCE
Comment importer des produits dans WooCommerce ?
Apprenez à importer des produits à votre boutique WooCommerce très facilement (en vidéo).
Lire cet article
Je m'appelle Baptiste et je suis un webdesigner / consultant SEO spécialisé dans WordPress, basé à Grasse dans le Sud de la France. J'aide les petites entreprises à développer leur présence web dans ce monde de fou 😉