Comment personnaliser les styles de menu WordPress de 3 manières faciles 

J'ai personnalisé de nombreux menus WordPress au fil des ans, et une chose que je remarque toujours, c'est à quel point le style par défaut se fond dans l'arrière-plan. Cela fonctionne, mais cela ne correspond pas vraiment à votre marque ou n'aide pas votre site à se démarquer.

Quelques petits changements apportés à votre menu peuvent rendre l'ensemble de votre site plus soigné et plus facile à naviguer.

Dans ce guide, je vais vous montrer 4 façons de personnaliser votre menu WordPress étape par étape, sans codage.

La façon la plus rapide de personnaliser votre menu WordPress est via Apparence → Menus dans votre tableau de bord. Ajoutez des éléments, définissez un emplacement d'affichage et enregistrez. Pour un contrôle de conception complet sur les polices, les couleurs et la mise en page, utilisez le constructeur glisser-déposer de SeedProd. Pour les thèmes de blocs, utilisez l'éditeur de site WordPress.

Comment personnaliser un menu WordPress avec l'éditeur par défaut ?

Le moyen le plus simple de commencer est d'utiliser l'éditeur de menu intégré dans Apparence → Menus. Il fonctionne avec les thèmes classiques et la plupart des thèmes non-blocs, et vous n'avez besoin d'aucun plugin supplémentaire.

J'utilise cet éditeur depuis des années, et c'est toujours le moyen le plus rapide de construire une structure de navigation de base.

Étape 1. Créer un nouveau menu

Accédez à Apparence → Menus depuis votre tableau de bord WordPress. Entrez un nom de menu en haut, comme « Menu principal », et cliquez sur Créer un menu.

Étape 2. Ajouter des pages, des articles ou des liens personnalisés

Sur la gauche, cochez les pages ou les articles que vous souhaitez ajouter et cliquez sur Ajouter au menu. Utilisez le panneau Liens personnalisés pour ajouter n'importe quelle URL avec un texte de lien personnalisé.

Étape 3. Assigner un emplacement d'affichage

Faites défiler jusqu'à Paramètres du menu et cochez un emplacement d'affichage, comme Menu principal. Les emplacements disponibles dépendent de votre thème.

Vous pouvez également faire glisser et déposer des éléments pour les réorganiser, ou les imbriquer pour créer des sous-menus déroulants.

Étape 4. Enregistrer le menu

Cliquez sur Enregistrer le menu et votre menu apparaît à l'emplacement que vous avez sélectionné.

Cette méthode gère la structure et l'ordre de base, mais offre un contrôle de style limité. Pour un contrôle de conception complet sur les polices, les couleurs et la mise en page, essayez la méthode SeedProd ci-dessous.

Comment personnaliser mon menu WordPress avec un constructeur de pages ?

Pour plus de contrôle sur l'apparence de votre menu, un constructeur de pages est la solution. J'utiliserai SeedProd dans cet exemple, mais des principes similaires s'appliquent à tout autre constructeur de pages.

SeedProd est un constructeur de sites Web par glisser-déposer pour WordPress qui vous permet de créer des pages personnalisées, des menus et des thèmes entiers sans écrire de code. Les fonctionnalités incluent :

• Constructeur de page par glisser-déposer
• Constructeur de thèmes WordPress
• Modèles prédéfinis
• Menus personnalisables
• Intégration des médias sociaux
• Et plus encore.

Vous pouvez même l'utiliser pour ajouter des menus personnalisés au pied de page, à l'en-tête, à la barre latérale et au contenu de votre site Web.

Cette méthode vous permet de personnaliser les menus, quel que soit votre thème WordPress. Pour commencer, suivez les étapes simples ci-dessous.

Étape 1. Installer SeedProd

Tout d'abord, téléchargez le plugin SeedProd et installez-le et activez-le sur votre site WordPress.

Pour obtenir de l'aide à cette étape, vous pouvez suivre notre guide sur comment installer SeedProd.

Étape 2. Choisir un modèle de page de destination

Une fois le plugin activé, accédez à SeedProd » Pages de destination depuis votre tableau de bord WordPress, et cliquez sur le bouton Ajouter une nouvelle page de destination.

Cela ouvrira une bibliothèque de modèles de pages de destination que vous pouvez utiliser pour créer rapidement une page personnalisée. 

Chaque modèle est entièrement personnalisable pour s'adapter à différents créneaux de sites Web. Par exemple, cliquer sur l'onglet « Lead Squeeze » en haut affiche les modèles les mieux adaptés à la création de pages de renvoi.

Lorsque vous trouvez un design qui correspond à vos besoins, survolez-le et cliquez sur l'icône de coche orange.

Une fenêtre apparaîtra alors, vous permettant de saisir un nom et une URL de page. Après avoir saisi ces détails, cliquez sur le bouton Enregistrer et commencer à modifier la page.

Étape 3. Personnaliser le contenu de votre page

L'écran suivant affichera votre page de destination dans le constructeur de pages visuel de SeedProd. Il y aura des blocs, des sections et des paramètres à gauche et un aperçu de votre page à droite.

Toutes les modifications que vous apportez à votre page apparaîtront automatiquement en temps réel. De cette façon, vous pouvez vous assurer qu'elle est belle avant de publier les modifications.

La personnalisation du contenu du modèle est aussi simple que de pointer et cliquer. Par exemple, pour modifier un contenu textuel, cliquez dessus, supprimez le texte existant et remplacez-le par le vôtre.

Pour ajouter de nouvelles fonctionnalités à votre page, telles qu'une image ou un bouton d'appel à l'action, trouvez le bloc dans le panneau de gauche et faites-le glisser sur la page.

Continuez à remplacer le contenu du modèle par le vôtre jusqu'à obtenir un design qui vous satisfait. Pour plus d'aide à la personnalisation, consultez notre guide sur comment créer une page de destination dans WordPress.

Étape 4. Personnaliser le menu WordPress

Après avoir personnalisé votre page, vous pouvez créer et personnaliser facilement des menus. Mon modèle n'inclut pas de zone d'en-tête, je vais donc devoir en créer une d'abord.

Pour ce faire, trouvez le bloc Colonne et faites-le glisser en haut de votre page.

Ensuite, choisissez une disposition. Dans ce cas, nous utilisons une disposition à 3 colonnes.

Maintenant, mettons en place la zone d'en-tête avec un bloc d'image pour afficher le logo de votre site Web.

Pour télécharger votre image de logo, cliquez sur le bouton « Utiliser votre propre image » dans le panneau des paramètres du bloc. Cela vous permet de choisir une image dans votre bibliothèque de médias WordPress ou d'en télécharger une depuis votre ordinateur.

Ensuite, trouvez le bloc Menu de navigation et faites-le glisser dans une autre colonne de votre en-tête. C'est ici que vous pouvez ajouter des éléments de menu pour que les utilisateurs cliquent et visitent d'autres pages de votre site.

Dans les paramètres du bloc, il y a 2 façons d'afficher votre menu.

Le type de menu Simple vous permet d'ajouter des liens de menu individuels sans quitter le constructeur de pages. Ajoutez simplement un nom de menu et collez votre lien personnalisé.

Vous pouvez également rendre le lien « no follow » et l'ouvrir dans un nouvel onglet.

Le type Menu WordPress vous permet d'afficher les menus que vous avez déjà créés dans WordPress. Cliquer sur le menu déroulant affichera tous les menus disponibles sur votre site, tels que le Menu principal ou le Menu de navigation.

Tout ce que vous avez à faire est de sélectionner les menus pour les afficher dans votre en-tête.

SeedProd offre des options de personnalisation avancées pour les deux types de menus. Dans l'onglet Avancé, vous pouvez modifier les couleurs du menu, les polices, les ombres de texte, les couleurs au survol, et plus encore.

Vous pouvez même afficher vos menus dans une disposition verticale ou horizontale. La conception verticale est excellente pour les zones de widgets de la barre latérale et les emplacements de menu du pied de page.

Pour gérer vos menus, cliquez sur le lien Écran des menus ou accédez à Apparence » Menus depuis votre administration WordPress.

Ici, vous pouvez modifier la structure de votre menu, ajouter de nouveaux éléments de menu et sous-menus en cliquant sur les cases à cocher, et gérer les emplacements. Vous pouvez même créer un nouveau menu sur cette page.

N'oubliez pas de cliquer sur le bouton Enregistrer le menu pour sauvegarder les fonctions de votre menu.

De nombreux sites Web utilisent des boutons dans la navigation du site pour promouvoir un appel à l'action spécifique. Avec le bloc de boutons de SeedProd, vous pouvez créer un bouton de menu en quelques clics.

Trouvez simplement le bloc de boutons et ajoutez-le à votre zone d'en-tête.

Ensuite, dans les paramètres du bloc, vous pouvez ajouter votre lien de menu et personnaliser le style du bouton.

Étape 5. Publier votre page personnalisée

Une fois que vous êtes satisfait de l'apparence de votre page, cliquez sur Enregistrer et Publier dans le coin supérieur droit de l'écran.

À partir de là, vous pouvez visiter la page pour voir votre menu WordPress personnalisé en action.

Comment personnaliser un menu à l'aide de l'éditeur de site WordPress ?

La première méthode est une excellente solution pour tout site Web, quel que soit le thème que vous utilisez. Cependant, si vous utilisez un thème WordPress basé sur des blocs, comme Twenty Twenty Three, vous préférerez peut-être utiliser l'éditeur de site WordPress pour personnaliser votre menu.

Veuillez noter : cette méthode ne fonctionne pas avec tous les thèmes et ne vous permet pas de personnaliser toutes les parties du menu.

Pour ouvrir l'éditeur de site, accédez à Apparence » Éditeur depuis votre tableau de bord WordPress.

Sur l'écran suivant, cliquez sur l'onglet Motifs. Dans WordPress 6.5 et versions ultérieures, recherchez sous Motifs → Parties de modèle si vous ne voyez pas immédiatement l'option En-tête.

À partir de là, cliquez sur l'option En-tête et choisissez votre modèle d'en-tête.

Ici, vous pouvez faire glisser et déposer pour réorganiser la position du menu ou supprimer des éléments du menu.

Vous pouvez également cliquer sur l'icône du crayon pour modifier le style du menu.

Par exemple, vous pouvez ajuster la couleur d'arrière-plan du menu, les polices, le remplissage, les marges, les bordures, et plus encore.

Si vous faites défiler vers l'onglet Avancé, vous pouvez entrer des classes CSS personnalisées.

Pour ajouter une autre option de menu, comme un bouton d'en-tête, cliquez sur l'icône Ajouter un bloc.

Vous pouvez maintenant rechercher un bloc et cliquer dessus pour l'ajouter à votre menu et le personnaliser comme n'importe quel autre bloc WordPress.

Lorsque vous êtes satisfait des paramètres et des personnalisations du menu, cliquez sur le bouton Enregistrer.

Vous pouvez maintenant visiter votre site pour voir votre menu personnalisé.

Comment ajouter un menu personnalisé dans WordPress sans plugin ?

Si vous ne souhaitez pas configurer de plugin de création de pages et que vous n'avez pas de thème WordPress basé sur des blocs, vous pouvez toujours utiliser du code pour ajouter un menu de navigation personnalisé.

Pour cela, je recommande d'utiliser un plugin d'extraits de code WordPress comme WPCode. C'est le moyen le plus sûr et le plus simple d'ajouter du code personnalisé à WordPress sans modifier les fichiers principaux de WordPress, comme votre fichier functions.php.

Pour ce faire, installez le plugin gratuit WPCode, puis accédez à Extraits de code » Ajouter un extrait depuis votre tableau de bord WordPress.

Sur cette page, vous verrez des extraits prêts à l'emploi que vous pouvez ajouter à votre site en quelques clics.

Pour ce tutoriel, je veux créer notre propre extrait, alors survolez « Ajouter votre code personnalisé » avec votre souris et cliquez sur le bouton Utiliser l'extrait.

Entrez maintenant un titre pour votre extrait, ouvrez le menu déroulant « Type de code » et cliquez sur Extrait PHP.

Ensuite, collez l'extrait suivant dans l'éditeur de code :

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Cet extrait ajoute un nouvel emplacement de menu à votre thème, « Mon Menu Personnalisé ».

Une fois que vous avez fait cela, faites défiler jusqu'aux options d'insertion et choisissez la méthode « Insertion automatique » pour ajouter l'extrait sur l'ensemble de votre site.

À partir de là, ouvrez le menu déroulant « Emplacement » et cliquez sur Exécuter partout.

Vous pouvez maintenant faire défiler jusqu'en haut de l'écran et cliquer sur le bouton « Inactif » pour le changer en « Actif ».

Enfin, cliquez sur Enregistrer pour rendre l'extrait actif.

Maintenant, allez dans Apparence » Menus et regardez la zone « Emplacement d'affichage ».

Vous devriez voir une nouvelle option « Mon Menu Personnalisé » dans cette zone où vous pouvez ajouter des éléments de menu.

L'étape suivante consiste à ajouter votre menu personnalisé à votre thème WordPress.

Vous pouvez afficher un menu de navigation personnalisé n'importe où sur votre site en ajoutant du code au fichier de modèle de votre thème.

Allez simplement dans Apparence » Éditeur de fichiers du thème.

Ensuite, dans le menu de droite, trouvez le modèle où vous souhaitez ajouter le menu, comme l'en-tête de votre site web.

Vous devrez maintenant ajouter une fonction wp_nav_menu et spécifier le nom de votre menu personnalisé. Par exemple, dans l'extrait de code suivant, nous ajoutons Mon Menu Personnalisé à l'en-tête du thème :

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

Après avoir ajouté le code, cliquez sur le bouton Mettre à jour le fichier pour enregistrer vos modifications.

Maintenant, si vous visitez votre site, vous verrez le menu personnalisé en action, cependant, vous remarquerez qu'il apparaît sous forme de simple liste à puces.

Vous pouvez styliser le menu pour qu'il corresponde mieux à votre thème WordPress ou à votre image de marque en ajoutant du code CSS personnalisé à votre site.

Pour ce faire, allez dans Apparence » Personnaliser et cliquez sur CSS additionnel dans le personnaliseur WordPress.

Cela ouvre un éditeur où vous pouvez taper votre CSS personnalisé.

Vous pouvez maintenant styliser votre menu en utilisant la classe CSS que vous avez ajoutée au modèle de votre thème. Dans notre exemple, c’est .custom_menu_class.

Dans le code suivant, nous ajoutons des marges et du rembourrage, définissons la couleur du texte sur noir et organisons le menu dans une disposition horizontale :

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
    display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 
 
div.custom-menu-class a {
    color:#000;
}

Le personnaliseur WordPress se met à jour automatiquement pour que vous puissiez voir à quoi ressemble le menu avec le nouveau style. Si vous êtes satisfait des modifications, cliquez sur Publier pour les rendre effectives.

Questions fréquemment posées

Comment puis-je personnaliser mon menu de navigation WordPress ?

Le moyen le plus rapide est d’aller dans Apparence → Menus dans votre tableau de bord WordPress. Ajoutez les pages ou les articles que vous souhaitez, attribuez le menu à un emplacement d’affichage comme Menu principal, et cliquez sur Enregistrer le menu. Pour plus de contrôle sur les polices, les couleurs et la mise en page, utilisez le constructeur glisser-déposer de SeedProd ou l’éditeur de site WordPress pour les thèmes de blocs.

Comment puis-je modifier le menu de navigation d’un site WordPress ?

Allez dans Apparence → Menus dans votre tableau de bord WordPress et sélectionnez le menu que vous souhaitez modifier. Ajoutez ou supprimez des éléments, réorganisez-les en les faisant glisser, et cliquez sur Enregistrer le menu. Si vous utilisez un thème de blocs, utilisez l’éditeur de site WordPress à Apparence → Éditeur pour modifier directement le bloc de navigation.

Puis-je personnaliser un menu WordPress sans plugin ?

Oui. WordPress inclut un éditeur de menu intégré à Apparence → Menus qui fonctionne sans aucun plugin. Pour les thèmes de blocs, utilisez l’éditeur de site WordPress. Pour ajouter un emplacement de menu personnalisé, utilisez un extrait de code PHP avec un plugin de code comme WPCode. Aucune édition de fichier manuelle n’est nécessaire.

Comment ajouter un menu déroulant dans WordPress ?

Dans Apparence → Menus, faites glisser un élément de menu légèrement vers la droite sous un élément parent. WordPress l’indente et le traite comme un menu déroulant. Vous pouvez imbriquer jusqu’à trois niveaux de profondeur. Pour contrôler le style visuel du menu déroulant, le bloc Menu de navigation de SeedProd inclut des effets de survol, des couleurs et des options de mise en page intégrés.

Plus d'astuces de navigation WordPress

Si vous souhaitez un contrôle total sur la conception de votre navigation WordPress, SeedProd vous permet de créer facilement des menus, des en-têtes et des mises en page personnalisés sans toucher au code. Obtenez SeedProd maintenant

• Comment modifier les menus mobiles dans WordPress (Guide pour débutants)
• Comment ajouter une icône de panier WooCommerce dans les menus
• La navigation des pages de destination est morte : voici pourquoi
• Comment modifier la barre de navigation dans WordPress étape par étape
• Comment créer une page de renvoi sans navigation (méthode facile)

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.