Comment personnaliser et modifier votre menu WordPress (4 méthodes simples) 

Votre menu vous semble correct. Mais les visiteurs atterrissent sur les mauvaises pages, ou abandonnent et partent.

Peut-être que les liens ne pointent pas là où ils devraient. Peut-être que le style par défaut se fond dans l'arrière-plan et ne correspond pas à votre marque. Ou vous venez de publier une nouvelle page et vous ne savez pas comment l'ajouter au menu sans casser la mise en page.

J'ai passé plus de 15 ans à travailler avec WordPress, et les menus sont l'une de ces choses qui semblent simples jusqu'à ce que vous essayiez d'en modifier un. Dans ce guide, je vais vous montrer comment modifier votre menu WordPress (ajouter, réorganiser et supprimer des éléments) et comment personnaliser son apparence, en utilisant 4 méthodes.

La façon la plus rapide de personnaliser votre menu WordPress est via Apparence → Menus dans votre tableau de bord. Là, vous pouvez ajouter des pages, réorganiser des éléments, créer des menus déroulants et définir un emplacement d'affichage. Pour un contrôle complet de la conception des polices, des couleurs et de la mise en page, utilisez le constructeur par glisser-déposer de SeedProd. Pour les thèmes de blocs, utilisez l'éditeur de site WordPress.

Voici comment les principales options se comparent en un coup d'œil :

Fonctionnalité	Éditeur intégré	SeedProd	Éditeur de site
Modification par glisser-déposer visuelle	Non	Oui	Partiellement
Fonctionne avec votre thème	Thèmes classiques	Aucun (Theme Builder remplace votre thème)	Thèmes de blocs uniquement
Support des menus déroulants (sous-menus)	Oui	Oui (via l'option Menu WordPress)	Oui
Styles de polices et de couleurs sans CSS	Rarement	Oui	Oui
Gratuit à utiliser	Oui (intégré)	Payant (Pro)	Oui (intégré)

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.

Note : Si vous ne voyez pas Apparence → Menus dans votre tableau de bord, votre site utilise un thème de blocs (comme Twenty Twenty-Five). Passez plutôt à la méthode de l'Éditeur de site.

É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.

Si vous avez déjà un menu, sélectionnez-le dans le menu déroulant en haut. Ainsi, vous modifiez le bon menu et n'en créez pas accidentellement un nouveau.

É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. Vous pouvez également inclure des catégories, des étiquettes ou n'importe quelle URL avec un texte de lien personnalisé en développant les panneaux sur la gauche.

Étape 3. Réorganiser les éléments et créer des menus déroulants

Après avoir ajouté des éléments, faites-les glisser et déposez-les dans l'ordre souhaité. Les éléments en haut de la liste apparaissent en premier dans votre menu.

Pour créer un menu déroulant, faites glisser un élément de menu légèrement vers la droite, sous un autre élément. Il sera indenté, c'est ainsi que WordPress le reconnaît comme un sous-menu. L'élément parent devient le lien de premier niveau, et l'élément indenté apparaît dans le menu déroulant lorsque le visiteur le survole.

Étape 4. Supprimer des éléments de menu

Pour supprimer un élément, cliquez sur la flèche à côté de celui-ci pour développer ses paramètres, puis cliquez sur Supprimer. Cela le retire du menu de navigation sans supprimer la page de votre site.

Étape 5. Attribuer un emplacement d'affichage

Faites défiler vers le bas jusqu'à Paramètres du menu et cochez un emplacement d'affichage.

Les options varient selon le thème et peuvent inclure :

• Menu principal
• Menu secondaire
• Menu hors-page
• Menu du compte utilisateur
• Menu du pied de page

Étape 6. 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, mais offre un contrôle limité sur le style. Pour un contrôle complet de la conception 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 donne un contrôle visuel complet sur votre navigation sans toucher au code. Vous voyez chaque modification en direct au fur et à mesure que vous l'effectuez : les polices, les couleurs, les liens du menu, les boutons et la mise en page s'ajustent en temps réel.

Avec SeedProd, vous pouvez créer des pages personnalisées, des menus et des thèmes entiers en un seul endroit. 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.

Ci-dessous, j'utiliserai le Theme Builder pour modifier la barre de navigation globale du site qui apparaît sur chaque page. Si vous n'avez besoin d'un menu que sur une seule page autonome, vous pouvez plutôt créer une page de destination et y glisser le même bloc Nav Menu dans son en-tête.

É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.

Ensuite, allez dans SeedProd » Paramètres, collez votre clé de licence et cliquez sur Vérifier la clé pour débloquer la fonctionnalité Theme Builder.

Étape 2. Ouvrir le Theme Builder et choisir un modèle

Allez dans SeedProd » Theme Builder dans votre tableau de bord WordPress pour commencer à créer votre thème et votre menu de navigation personnalisés.

La façon la plus rapide de configurer votre navigation est de commencer avec un modèle de thème WordPress prédéfini. Chaque modèle comprend toutes les parties d'un site (en-tête, pied de page, page d'accueil et blog), vous n'avez donc qu'à personnaliser le design.

Depuis le tableau de bord du Theme Builder, cliquez sur Thèmes pour ouvrir la galerie de modèles. Vous pouvez prévisualiser les designs dans un nouvel onglet et choisir celui qui convient à votre entreprise.

Pour ce tutoriel, j'utiliserai le thème Car Maintenance, mais vous pouvez choisir n'importe quel modèle. Cliquez sur la coche orange pour l'importer sur votre site.

Une fois importé, SeedProd crée automatiquement la structure de votre site, y compris l'en-tête, le pied de page et les pages de blog. Vous pouvez maintenant ouvrir n'importe quelle partie dans l'éditeur par glisser-déposer pour commencer la personnalisation.

Étape 3. Personnaliser le modèle d'en-tête

Votre barre de navigation se trouve dans le modèle d'en-tête. Les thèmes prédéfinis de SeedProd en ajoutent généralement un automatiquement, il vous suffit donc d'ouvrir l'en-tête et de le personnaliser.

Pour modifier votre en-tête, survolez le modèle d'en-tête dans le Theme Builder et cliquez sur Modifier le design. Cela ouvre l'éditeur glisser-déposer en direct.

Cliquez sur n'importe quel élément dans l'aperçu pour le modifier. Le panneau des paramètres apparaît sur la gauche, où vous pouvez modifier le texte, le style et les fonctionnalités.

Par exemple, cliquez sur le bloc logo pour supprimer le logo de remplacement et téléverser le vôtre depuis la médiathèque WordPress.

Vous pouvez également faire glisser de nouveaux blocs, tels que des icônes de médias sociaux, une barre de recherche ou des boutons personnalisés, dans l'en-tête pour étendre votre barre de navigation.

Une fois les bases de l'en-tête couvertes, vous êtes prêt à modifier le menu de navigation lui-même à l'étape suivante.

Étape 4. Modifier le bloc Nav Menu

SeedProd utilise un bloc Menu de navigation pour afficher la navigation de votre site. Ce bloc vous offre deux façons de gérer les menus : une option simple pour des liens rapides ou une option Menu WordPress pour un contrôle avancé.

Option 1 : Menu simple

Ajoutez des liens directement dans le constructeur vers n'importe quelle page, article, catégorie, étiquette ou URL externe. C'est rapide à configurer mais ne prend pas en charge les menus déroulants ou les menus WordPress existants.

Vous pouvez styliser le menu Simple avec des options d'alignement, de taille de police, d'espacement et de séparateurs. Dans l'onglet Avancé, basculez entre les mises en page horizontales ou verticales et ajustez la typographie, les couleurs, les ombres de texte, les couleurs au survol et les bordures.

Option 2 : Menu WordPress

Sélectionnez un menu que vous avez déjà créé dans l'éditeur de menus de WordPress dans la liste déroulante. Cette option prend en charge les menus déroulants et la navigation mobile, et hérite de la flexibilité des paramètres intégrés d'Apparence » Menus de WordPress.

Vous verrez également un lien rapide vers la page de menu par défaut de WordPress, où vous pouvez ajuster la structure de votre menu. Comme avec le menu Simple, l'onglet Avancé vous permet de personnaliser les polices, les couleurs, les ombres, la visibilité par appareil, et plus encore.

Vous pouvez même afficher votre menu dans une mise en page verticale ou horizontale. La conception verticale fonctionne bien pour les zones de widgets de la barre latérale et les emplacements de menu du pied de page.

Comment ajouter un bouton de menu dans WordPress

Un bouton de menu est un excellent moyen de mettre en évidence des actions telles que « S’inscrire » ou « Commencer ». Dans SeedProd, vous pouvez en ajouter un avec le bloc Bouton.

Depuis la barre latérale gauche, faites glisser le bloc Bouton dans votre en-tête. Ensuite, personnalisez le texte de l’appel à l’action, le lien et le style directement dans le panneau des paramètres.

Astuce Pro : Supprimez tous les éléments dont vous n’avez pas besoin en les survolant et en cliquant sur l’icône de la corbeille.

Lorsque votre menu vous convient, cliquez sur Enregistrer dans le coin supérieur droit et fermez l’éditeur pour revenir au tableau de bord du Theme Builder.

Astuce de conversion : Votre barre de navigation ne doit pas se limiter à des liens. L'ajout d'un bouton « Obtenir un devis » ou « Réserver une démo » qui renvoie vers une page de destination dédiée transforme votre en-tête en un outil de conversion. J'ai vu des sites doubler leurs soumissions de formulaires de prospects simplement en rendant ce CTA visible sur chaque page.

Étape 5. Publier votre thème personnalisé

Après avoir modifié vos modèles de menu et d'en-tête, vous êtes prêt à rendre les modifications publiques. Trouvez le bouton Activer le thème SeedProd sur la page du constructeur de thèmes et mettez-le sur la position « Activé ».

Rendez-vous maintenant sur votre page d'accueil pour voir votre nouveau menu de navigation personnalisé en direct sur votre site.

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

Les deux premières méthodes fonctionnent pour n'importe quel 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-Five, 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 mon 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, j'ajoute 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 à votre modèle de thème. Dans mon exemple, c'est .custom_menu_class.

Dans le code suivant, j'ajoute des marges et du rembourrage, je règle la couleur du texte sur noir et j'organise le menu dans une mise en page 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. La modification d'un menu n'affecte pas vos pages ou vos articles, elle contrôle uniquement les liens qui apparaissent dans votre navigation. Si vous utilisez un thème basé sur des blocs, utilisez l'éditeur de site WordPress sous Apparence → Éditeur pour modifier directement le bloc de navigation.

Pourquoi ne puis-je pas trouver l'option Menus sous Apparence dans WordPress ?

Si vous ne voyez pas Menus sous Apparence, votre site utilise un thème basé sur des blocs (comme Twenty Twenty-Four ou Twenty Twenty-Five). Les thèmes basés sur des blocs gèrent la navigation via l'éditeur de site, et non l'écran classique des Menus. Allez dans Apparence → Éditeur, puis recherchez la section Navigation pour modifier le menu de votre site. Alternativement, SeedProd fonctionne avec n'importe quel thème et vous donne un contrôle visuel complet sur votre navigation sans l'éditeur de site.

Puis-je personnaliser un menu WordPress sans plugin ?

Oui. WordPress inclut un éditeur de menus intégré à l'adresse 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 court extrait de code PHP avec un plugin de code comme WPCode. Le compromis est que la mise en forme est limitée à ce que votre thème prend en charge, donc si vous souhaitez modifier les polices, les couleurs ou la mise en page sans écrire de CSS, un constructeur visuel comme SeedProd est la voie la plus simple.

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.

Comment rendre mon menu WordPress fixe (qui reste visible lors du défilement) ?

Une barre de navigation fixe reste visible lorsque les visiteurs font défiler la page. Dans SeedProd, ouvrez le modèle d'en-tête dans le constructeur de thèmes, cliquez sur la ligne d'en-tête et recherchez l'option En-tête fixe dans le panneau des paramètres à gauche. Activez-la et enregistrez. Pour l'éditeur de menus intégré de WordPress, le comportement fixe dépend de votre thème. De nombreux thèmes incluent une option d'en-tête fixe dans le personnalisateur (Apparence → Personnaliser). Si le vôtre ne le fait pas, vous aurez besoin d'un plugin ou de CSS personnalisé pour l'ajouter.

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
• Comment créer une page de destination 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.