Comment ajouter des menus de navigation personnalisés dans les thèmes WordPress

Chez WPBeginner, nous avons aidé d'innombrables lecteurs à personnaliser leurs sites WordPress pour améliorer l'expérience utilisateur, renforcer leur image de marque et générer des conversions. Et nous avons constaté que, lorsqu'elle est bien faite, un menu de navigation unique peut aider à augmenter l'engagement et à maintenir les visiteurs plus longtemps sur votre site.

Le problème est que tous les thèmes WordPress ont des emplacements prédéfinis où vous pouvez afficher un menu de navigation, donc le modifier peut être délicat. C'est particulièrement vrai si vous êtes débutant car la modification des fichiers de thème est un processus délicat.

Lorsque vous utilisez un thème basé sur des blocs, vous pouvez le faire avec l'éditeur complet du site. Mais, d'après notre expérience, il existe de meilleures options qui fonctionneront pour tous les types de thèmes.

Par exemple, si vous souhaitez des personnalisations avancées, vous pouvez utiliser un puissant constructeur de pages comme SeedProd. Ou, si vous recherchez un moyen simple d'utiliser du code personnalisé, WPCode est de loin le meilleur choix.

Dans cet article, nous vous montrerons comment ajouter un menu de navigation personnalisé à n'importe quelle zone de votre thème WordPress. Nous vous présenterons 3 options différentes afin que vous puissiez choisir le tutoriel qui convient à vos besoins.

Pourquoi ajouter des menus de navigation personnalisés dans les thèmes WordPress ?

Un menu de navigation est une liste de liens pointant vers des zones importantes de votre site Web. Ils permettent aux visiteurs de trouver facilement du contenu intéressant, ce qui peut augmenter les vues de page et réduire le taux de rebond dans WordPress.

L'emplacement exact de votre menu variera en fonction de votre thème WordPress. La plupart des thèmes ont plusieurs options, vous pouvez donc créer différents menus et les afficher à différents endroits.

Pour voir où vous pouvez afficher les menus dans votre thème WordPress actuel, rendez-vous simplement dans Apparence » Menus, puis regardez la section « Emplacement d'affichage ».

L'image suivante montre les emplacements pris en charge par le thème WordPress Astra.

Parfois, vous voudrez peut-être afficher un menu dans une zone qui n'est pas répertoriée comme « Emplacement d'affichage » dans votre thème.

Dans cette optique, examinons comment ajouter un menu de navigation personnalisé à n'importe quelle zone de votre thème WordPress. Utilisez simplement les liens rapides ci-dessous pour accéder à la méthode de votre choix :

• Méthode 1 : Utilisation de l'éditeur de site complet (thèmes basés sur des blocs uniquement)
• Méthode 2 : Utilisation d'un plugin de constructeur de pages (fonctionne avec tous les thèmes)
• Method 3: Create a Custom Navigation Menu in WordPress Using Code (Advanced)

Méthode 1 : Utilisation de l'éditeur de site complet (thèmes basés sur des blocs uniquement)

Si vous utilisez un thème de blocs tel que ThemeIsle Hestia Pro, vous pouvez alors ajouter un menu de navigation personnalisé en utilisant l'édition complète de site (FSE) et l'éditeur de blocs.

Pour plus de détails, vous pouvez consulter notre article sur les meilleurs thèmes WordPress d'édition complète de site.

Cette méthode ne fonctionne pas avec tous les thèmes et ne permet pas de personnaliser toutes les parties du menu. Si vous souhaitez ajouter un menu entièrement personnalisé à n’importe quel thème WordPress, nous vous recommandons plutôt d’utiliser un plugin de constructeur de page.

Si vous utilisez un thème basé sur des blocs, rendez-vous dans Apparence » Éditeur.

Par défaut, l'éditeur de site complet affiche le modèle de page d'accueil de votre thème, mais vous pouvez ajouter un menu de navigation à n'importe quelle zone.

Pour voir toutes les options disponibles, sélectionnez simplement « Modèles », « Motifs » ou « Pages ».

Vous pouvez maintenant cliquer sur le modèle, la partie de modèle ou la page où vous souhaitez ajouter un menu de navigation personnalisé.

WordPress affichera maintenant un aperçu du design. Pour modifier ce modèle, cliquez sur la petite icône en forme de crayon.

L'étape suivante consiste à ajouter un bloc Navigation à la zone où vous souhaitez afficher votre menu.

Dans le coin supérieur gauche, cliquez sur le bouton bleu « + ».

Maintenant, tapez « Navigation » dans la barre de recherche.

Lorsque le bloc « Navigation » apparaît, faites-le simplement glisser et déposez-le sur votre mise en page.

Ensuite, cliquez pour sélectionner le bloc Navigation.

Si vous avez déjà créé le menu que vous souhaitez afficher, cliquez pour sélectionner le bloc Navigation. Dans le menu de droite, cliquez sur l'icône à trois points à côté de « Menu ».

Vous pouvez ensuite choisir un menu dans la liste déroulante.

Une autre option consiste à créer un menu dans l'éditeur complet du site en ajoutant des pages, des articles, des liens personnalisés, etc. Pour ajouter des éléments au nouveau menu, cliquez simplement sur l'icône « + ».

Cela ouvre une fenêtre contextuelle où vous ajoutez n'importe quel article ou page et décidez si ces liens doivent s'ouvrir dans un nouvel onglet.

Vous pouvez également ajouter une barre de recherche au menu WordPress, ajouter des icônes de médias sociaux, et plus encore. Dans la fenêtre contextuelle, tapez simplement le bloc que vous souhaitez ajouter au menu et sélectionnez la bonne option lorsqu'elle apparaît.

Vous pouvez ensuite configurer ce bloc à l'aide des paramètres de la mini-barre d'outils et du menu de droite. Répétez simplement ces étapes pour ajouter d'autres éléments au menu.

Lorsque vous êtes satisfait de l'apparence du menu, cliquez simplement sur le bouton « Enregistrer ».

Votre site utilisera désormais le nouveau modèle, et les visiteurs pourront interagir avec votre menu de navigation personnalisé.

Méthode 2 : Utilisation d'un plugin de constructeur de pages (fonctionne avec tous les thèmes)

L'éditeur complet du site vous permet d'ajouter des menus aux thèmes basés sur des blocs. Cependant, si vous souhaitez ajouter un menu avancé et entièrement personnalisable à n'importe quel thème WordPress, vous aurez besoin d'un plugin de création de pages.

SeedProd est le meilleur plugin de constructeur de pages WordPress du marché qui vous permet de personnaliser chaque partie de votre menu de navigation.

Nous avons une expérience approfondie dans l'utilisation de cet outil pour créer des menus de navigation personnalisés, des pages de destination et bien plus encore. Pour plus de détails, consultez notre avis complet sur SeedProd.

En ce qui concerne les pages, SeedProd est livré avec plus de 350 modèles conçus par des professionnels que vous pouvez utiliser comme point de départ. Après avoir choisi un modèle, vous pouvez ajouter un menu de navigation personnalisé à votre site en utilisant le bloc Menu de navigation prêt à l'emploi de SeedProd.

Tout d'abord, vous devez installer et activer le plugin SeedProd. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après avoir activé le plugin, SeedProd vous demandera votre clé de licence.

Vous pouvez trouver ces informations dans votre compte sur le site Web de SeedProd. Après avoir saisi la clé, cliquez sur le bouton « Vérifier la clé ».

Une fois que vous avez fait cela, allez dans SeedProd » Pages de destination et cliquez sur le bouton « Ajouter une nouvelle page de destination ».

Vous pouvez maintenant choisir un modèle pour votre page personnalisée.

Pour vous aider à trouver le bon design, tous les modèles de SeedProd sont organisés en différents types de campagnes, tels que les campagnes « Bientôt disponible » et les campagnes de capture de prospects. Vous pouvez même utiliser les modèles de SeedProd pour améliorer votre page 404.

Pour examiner de plus près n'importe quel design, survolez simplement votre souris sur ce modèle, puis cliquez sur l'icône de la loupe.

Lorsque vous trouvez un design que vous souhaitez utiliser, cliquez sur ‘Choisir ce modèle’.

Nous utilisons le modèle « Page de ventes du Black Friday » dans toutes nos images, mais vous pouvez utiliser le modèle de votre choix.

Après avoir choisi un modèle, tapez un nom pour cette page personnalisée. SeedProd créera automatiquement une URL basée sur le titre de la page, mais vous pouvez modifier cette URL comme vous le souhaitez.

Par exemple, vous pourriez ajouter des mots-clés pertinents pour aider les moteurs de recherche à comprendre de quoi parle la page. Cela peut améliorer votre SEO WordPress et aider le moteur de recherche à montrer la page aux personnes qui recherchent du contenu similaire au vôtre.

Après avoir saisi ces informations, cliquez sur le bouton « Enregistrer et commencer à modifier la page ».

La plupart des modèles contiennent déjà des blocs, qui sont les éléments principaux de toutes les mises en page SeedProd.

Pour personnaliser un bloc, cliquez simplement dessus pour le sélectionner dans l'éditeur de page.

La barre d'outils de gauche affichera désormais tous les paramètres de ce bloc. Par exemple, dans l'image ci-dessous, nous modifions le texte d'un bloc « Titre ».

Vous pouvez formater le texte, changer son alignement, ajouter des liens, et plus encore en utilisant les paramètres du menu de gauche.

Si vous sélectionnez l'onglet « Avancé », vous aurez accès à encore plus de paramètres. Par exemple, vous pouvez faire ressortir le bloc en ajoutant des ombres portées et des animations CSS.

Pour ajouter de nouveaux blocs à votre design, trouvez simplement un bloc dans le menu de gauche, puis faites-le glisser sur la page. Si vous souhaitez supprimer un bloc, cliquez dessus pour le sélectionner, puis utilisez l'icône de la corbeille.

Comme nous voulons créer un menu de navigation personnalisé, faites glisser un bloc « Menu de navigation » sur la page.

Cela crée un menu de navigation avec un seul élément par défaut « À propos ».

Vous pouvez maintenant créer un nouveau menu dans l'éditeur SeedProd ou choisir un menu que vous avez déjà créé dans le tableau de bord WordPress.

Pour afficher un menu que vous avez créé précédemment, cliquez sur le bouton « Menu WordPress ». Vous pouvez maintenant ouvrir le menu déroulant « Menus » et choisir n'importe quelle option dans la liste.

Après cela, vous pouvez modifier la taille de la police, l'alignement du texte, et plus encore en utilisant les paramètres du menu de gauche.

Si vous souhaitez plutôt créer un nouveau menu dans SeedProd, sélectionnez le bouton « Simple ».

Ensuite, cliquez pour développer l'élément « À propos » que SeedProd crée par défaut.

Cela ouvre des contrôles où vous pouvez modifier le texte et ajouter l'URL vers laquelle le lien de l'élément de menu pointera.

Par défaut, le lien sera « dofollow » et s'ouvrira dans la même fenêtre de navigateur. Vous pouvez modifier ces paramètres à l'aide des cases à cocher dans la section « Lien URL ».

Dans l'image suivante, nous créons un lien « nofollow » qui s'ouvrira dans une nouvelle fenêtre. Pour en savoir plus sur ce sujet, veuillez consulter notre guide pour débutants sur les liens nofollow.

Pour ajouter d'autres éléments au menu, cliquez simplement sur le bouton « Ajouter un nouvel élément ».

Vous pouvez ensuite personnaliser chacun de ces éléments en suivant le même processus décrit ci-dessus.

Le menu de gauche contient également des paramètres qui modifient la taille de la police et l'alignement du texte.

Vous pouvez même créer un séparateur, qui apparaîtra entre chaque élément du menu.

Après cela, passez à l'onglet « Avancé ». Ici, vous pouvez modifier les couleurs, l'espacement, la typographie et d'autres options avancées du menu.

Au fur et à mesure que vous apportez des modifications, l'aperçu en direct se mettra à jour automatiquement, vous permettant d'essayer différents paramètres pour voir ce qui convient à votre conception.

Par défaut, SeedProd affiche le même menu sur les appareils mobiles et de bureau. Cependant, les écrans des appareils mobiles sont généralement beaucoup plus petits que ceux des ordinateurs de bureau.

Dans cette optique, vous pourriez vouloir créer un menu distinct à afficher sur les appareils mobiles. Par exemple, vous pourriez utiliser une disposition verticale afin que les utilisateurs mobiles n'aient pas besoin de faire défiler horizontalement. Vous pourriez également vouloir afficher moins de liens sur les smartphones et les tablettes.

Pour créer un menu adapté aux mobiles, concevez simplement le menu en suivant le même processus décrit ci-dessus. Ensuite, sélectionnez l'onglet « Avancé » et cliquez pour développer la section « Visibilité de l'appareil ».

Vous pouvez maintenant activer le curseur « Masquer sur ordinateur ».

Désormais, SeedProd n'affichera ce menu qu'aux utilisateurs mobiles.

Lorsque vous êtes satisfait de l'apparence de votre menu personnalisé, il est temps de le publier.

Cliquez simplement sur la flèche déroulante à côté de « Enregistrer » puis sélectionnez « Publier ».

Maintenant, si vous visitez votre blog WordPress, vous verrez le menu de navigation personnalisé en action.

Méthode 3 : Créer un menu de navigation personnalisé dans WordPress à l’aide de code (avancé)

Si vous ne souhaitez pas installer de plugin de création de pages, vous pouvez ajouter un menu de navigation personnalisé à l’aide de code. Vous trouverez souvent des guides expliquant comment ajouter des extraits de code personnalisés au fichier functions.php de votre thème.

Cependant, nous ne recommandons pas cette méthode, car une petite erreur dans votre code pourrait causer un certain nombre d'erreurs WordPress courantes, voire casser complètement votre site. Vous perdrez également le code personnalisé lors de la mise à jour de votre thème WordPress.

C’est pourquoi nous recommandons d’utiliser WPCode. C’est le moyen le plus simple et le plus sûr d’ajouter du code personnalisé dans WordPress sans avoir à modifier les fichiers principaux de WordPress.

La première chose à faire est d'installer et d'activer le plugin gratuit WPCode. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, allez dans Snippets de code » Ajouter un snippet dans votre tableau de bord WordPress.

Ici, vous verrez tous les extraits 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éverser des types de fichiers que WordPress ne prend généralement pas en charge, désactiver les pages de pièces jointes, et bien plus encore.

Pour créer votre propre extrait, survolez « Ajouter votre code personnalisé (Nouvel extrait) » avec votre souris, puis cliquez sur le bouton « + Ajouter un extrait personnalisé ».

Ensuite, vous devez choisir un type de code dans la liste des options qui apparaissent à l'écran. Pour ce tutoriel, sélectionnez « Extrait PHP » comme type de code.

Vous serez ensuite dirigé vers la page Créer un extrait personnalisé.

Pour commencer, entrez un titre pour l'extrait de code personnalisé. Il peut s'agir de tout ce qui vous aide à identifier l'extrait dans votre tableau de bord WordPress.

Une fois que vous avez fait cela, collez simplement 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' );

Cela ajoutera un nouvel emplacement de menu à votre thème appelé « Mon menu personnalisé ». Pour utiliser un nom différent, modifiez simplement l'extrait de code.

Si vous souhaitez ajouter plus d'un menu de navigation personnalisé à votre thème, ajoutez simplement une ligne supplémentaire à l'extrait de code.

Par exemple, ici, nous ajoutons deux nouveaux emplacements de menu à notre thème, appelés « Mon menu personnalisé » et « Menu supplémentaire » :

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

Après cela, faites défiler jusqu'aux options « Insertion ». Si ce n'est pas déjà sélectionné, choisissez la méthode « Insertion automatique » afin que WPCode insère l'extrait sur l'ensemble de votre site.

Ensuite, ouvrez le menu déroulant « Emplacement » et cliquez sur « Exécuter partout ».

Maintenant, vous êtes prêt à faire défiler jusqu'en haut de l'écran et à cliquer sur le bouton « Inactif » pour qu'il devienne « Actif ».

Enfin, cliquez sur « Enregistrer » pour rendre cet extrait actif.

Ensuite, allez dans Apparence » Menus et regardez la zone « Emplacement d’affichage ».

Vous devriez maintenant voir une nouvelle option « Mon menu personnalisé ».

Vous pouvez maintenant ajouter des éléments de menu au nouvel emplacement. Pour plus d’informations, veuillez consulter notre guide étape par étape sur comment ajouter des menus de navigation pour les débutants.

Lorsque votre menu vous convient, la prochaine étape consiste à l’ajouter à votre thème WordPress.

Ajout du menu de navigation personnalisé à votre thème WordPress

La plupart des sites web affichent le menu de navigation directement sous la section d’en-tête. Cela signifie que le menu est l’une des premières choses que les visiteurs voient, avec le logo du site ou le titre.

Vous pouvez ajouter le menu de navigation personnalisé à n’importe quel emplacement en ajoutant du code au fichier modèle de votre thème.

Dans votre tableau de bord WordPress, allez dans Apparence » Éditeur de fichiers du thème.

Dans le menu de droite, choisissez le modèle dans lequel vous souhaitez ajouter le menu. Par exemple, si vous souhaitez afficher le menu de navigation personnalisé dans l'en-tête de votre site web, vous sélectionnerez généralement le fichier header.php.

Pour obtenir de l'aide afin de trouver le bon fichier modèle, veuillez consulter notre guide sur comment trouver les fichiers à modifier dans votre thème WordPress.

Après avoir sélectionné le fichier, vous devrez 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.

Par défaut, votre menu apparaîtra sous forme de simple liste à puces.

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

Pour ce faire, allez dans Apparence » Personnaliser.

Dans le personnaliseur de thème WordPress, cliquez sur « CSS additionnel ».

Cela ouvre un petit éditeur de code où vous pouvez taper du CSS.

Vous pouvez maintenant styliser votre menu en utilisant la classe CSS que vous avez ajoutée à votre modèle de thème. Dans notre exemple, il s'agit de .custom_menu_class.

Dans le code suivant, nous ajoutons des marges et du rembourrage, définissons la couleur du texte sur noir et organisons les éléments du 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 mettra à jour automatiquement.

Il montrera maintenant à quoi ressemblera le menu avec le nouveau style.

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

Pour plus d'informations, consultez notre guide sur comment styliser les menus de navigation WordPress.

Guides d'experts : Faites-en plus avec les menus de navigation WordPress

Avec WordPress, vous pouvez créer toutes sortes de menus utiles et attrayants. Dans cet esprit, voici quelques guides d'experts pour vous aider à tirer encore plus parti de vos menus de navigation :

• Comment ajouter des icônes d'image aux menus de navigation dans WordPress
• Comment ajouter une logique conditionnelle aux menus dans WordPress (étape par étape)
• Comment ajouter des descriptions de menu dans vos thèmes WordPress
• Comment ajouter un menu réactif plein écran dans WordPress
• Comment créer un méga menu sur votre site WordPress (étape par étape)

Nous espérons que ce guide ultime vous a aidé à apprendre comment ajouter un menu de navigation personnalisé dans WordPress. Vous voudrez peut-être aussi consulter nos guides sur comment ajouter un bouton dans votre menu d'en-tête WordPress ou comment mettre en surbrillance un élément de menu 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.