Vous souhaitez ajouter des menus de navigation personnalisés dans votre thème WordPress ? Les menus de navigation sont la liste horizontale des liens affichés en haut de la plupart des sites Web.
Par défaut, les thèmes WordPress sont livrés avec des emplacements de menu et des mises en page prédéfinis, mais que se passe-t-il si vous souhaitez ajouter vos propres menus de navigation personnalisés ?
Dans cet article, nous allons vous montrer comment créer et ajouter facilement des menus de navigation personnalisés dans WordPress, afin que vous puissiez les afficher n’importe où sur votre thème.
Quand avez-vous besoin de ce tutoriel sur le menu de navigation WordPress ?
La plupart des thèmes WordPress sont livrés avec au moins un emplacement où vous pouvez afficher les liens de navigation de votre site dans un menu.
Vous pouvez gérer les éléments de menu à partir d’une interface facile à utiliser dans votre zone d’administration WordPress.
Si vous cherchez simplement à ajouter des menus de navigation sur votre site Web, suivez simplement notre guide du débutant sur la façon d’ajouter un menu de navigation dans WordPress.
Le but de ce tutoriel est d’aider les utilisateurs DIY/intermédiaires à ajouter des menus de navigation personnalisés à leurs thèmes WordPress.
Nous aborderons les sujets suivants dans cet article :
- Création d’un menu de navigation personnalisé dans les thèmes WordPress
- Affichage du menu de navigation personnalisé dans le thème WordPress
- Ajout d’un menu de navigation personnalisé dans WordPress à l’aide de SeedProd
- Ajout d’un menu de navigation personnalisé dans WordPress à l’aide de Beaver Builder
- Création de menus réactifs adaptés aux mobiles dans WordPress
- Plus de choses que vous pouvez faire avec les menus de navigation WordPress
Cela dit, voyons comment ajouter des menus de navigation WordPress personnalisés dans votre thème.
Création de menus de navigation personnalisés dans les thèmes WordPress
Les menus de navigation sont une caractéristique des thèmes WordPress. Chaque thème peut définir ses propres emplacements de menu et prise en charge de menu.
Pour ajouter un menu de navigation personnalisé, la première chose que vous devez faire est d’enregistrer votre nouveau menu de navigation en ajoutant ce code au fichier functions.php de votre thème.
function wpb_custom_new_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' )); } add_action( 'init', 'wpb_custom_new_menu' );
Vous pouvez maintenant aller à Apparence » Menus dans votre administrateur WordPress et essayez de créer ou de modifier un nouveau menu. Vous verrez ‘Mon menu personnalisé’ comme option d’emplacement de thème.
Astuce : Si vous souhaitez ajouter plusieurs nouveaux emplacements de menu de navigation, vous devez utiliser un code comme celui-ci :
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' );
Une fois que vous avez ajouté l’emplacement du menu, allez-y et ajoutez quelques éléments de menu dans l’administrateur WordPress en suivant notre didacticiel sur la façon d’ajouter des menus de navigation pour les débutants.
Cela nous permettra de passer à l’étape suivante qui est l’affichage du menu dans votre thème.
Affichage des menus de navigation personnalisés dans les thèmes WordPress
Ensuite, nous devons afficher le nouveau menu de navigation dans votre thème WordPress. L’endroit le plus courant où les menus de navigation sont généralement placés est dans la section d’en-tête d’un site Web juste après le titre ou le logo du site.
Cependant, vous pouvez ajouter votre menu de navigation où vous le souhaitez.
Vous devrez ajouter ce code dans le fichier modèle de votre thème où vous souhaitez afficher votre menu.
<?php wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'custom-menu-class' ) ); ?>
L’emplacement du thème est le nom que nous avons sélectionné à l’étape précédente.
La classe conteneur est la classe CSS qui sera ajoutée à votre menu de navigation. Votre menu apparaîtra sous la forme d’une simple liste à puces sur votre site Web.
Vous pouvez utiliser la classe CSS .custom_menu_class
pour styliser votre menu en ajoutant du code CSS personnalisé. Voici un exemple de CSS pour vous aider à démarrer :
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; }
Pour en savoir plus sur le style d’un menu de navigation, consultez notre tutoriel détaillé sur la façon de styler les menus de navigation WordPress
Ajouter un menu de navigation personnalisé dans WordPress à l’aide de SeedProd
Cette méthode est beaucoup plus simple et est recommandée pour tous les utilisateurs. Au lieu d’écrire du code, vous pouvez ajouter un menu de navigation personnalisé à l’aide d’un générateur glisser-déposer.
Pour ce faire, nous utiliserons SeedProd. C’est le meilleur plugin de création de pages WordPress sur le marché et vous permet de créer facilement des pages personnalisées pour votre site Web.
Il est livré avec de beaux modèles que vous pouvez utiliser comme point de départ. Après cela, vous pouvez simplement faire glisser et déposer des éléments pour modifier le design selon votre propre style.
Tout d’abord, vous devez installer et activer le SeedProd brancher. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Lors de l’activation, vous devez entrer votre clé de licence de plugin. Vous pouvez trouver ces informations sous votre compte sur le site SeedProd.
Ensuite, vous devez vous diriger vers SeedProd » Pages page et cliquez sur le bouton Ajouter une nouvelle page de destination.
Il vous sera ensuite demandé de sélectionner un modèle pour utiliser un point de départ pour votre conception. Cliquez simplement sur un modèle pour le sélectionner.
Il vous sera demandé de fournir un titre pour votre page et de cliquer sur le bouton « Enregistrer et commencer à modifier la page » pour continuer.
Cela lancera l’interface de création de page avec un aperçu en direct de votre page. Vous pouvez simplement pointer et cliquer sur n’importe quel élément pour le modifier et le modifier.
Pour ajouter un menu de navigation personnalisé, faites simplement glisser et déposez le bloc de menu de navigation de la colonne de gauche vers votre page.
Après cela, vous devez choisir le menu que vous souhaitez afficher ici. Vous pouvez également ajuster la taille de la police, l’alignement et activer le menu mobile.
Astuce : Vous pouvez créer de nouveaux menus en allant sur Apparence » Menus page si besoin.
Ensuite, vous devez passer à l’onglet Avancé. À partir de là, vous pouvez personnaliser les couleurs des menus, la typographie et d’autres options avancées.
Une fois que vous êtes satisfait de votre menu de navigation, vous pouvez enregistrer vos modifications ou publier votre page. Vous pouvez ensuite prévisualiser la page pour la voir en action.
Ajout d’un menu de navigation personnalisé dans WordPress à l’aide de Beaver Builder
Cette méthode est également utile pour les utilisateurs qui créent des pages personnalisées pour leur site Web et qui ont besoin d’une solution sans code.
Tout d’abord, vous devez installer et activer le plugin Beaver Builder. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Lors de l’activation, vous devez créer une nouvelle page ou modifier une page existante où vous souhaitez ajouter le menu de navigation. Sur l’écran de l’éditeur de publication, cliquez sur le bouton « Lancer Beaver Builder ».
S’il s’agit d’une nouvelle page, vous pouvez utiliser l’un des modèles prêts à l’emploi fournis avec Beaver Builder. Vous pouvez également modifier votre page existante tout de suite.
Ensuite, vous devez ajouter le module Menus et le glisser-déposer sur votre page à l’endroit où vous souhaitez afficher le menu.
Cela fera apparaître les paramètres du module de menu dans une fenêtre contextuelle. Tout d’abord, vous devez sélectionner le menu de navigation que vous souhaitez utiliser. Vous pouvez toujours créer de nouveaux menus ou modifier un menu existant en visitant Apparence » Menus page dans la zone d’administration de WordPress.
Vous pouvez également consulter d’autres paramètres. Beaver Builder vous permet de choisir des couleurs personnalisées, un arrière-plan et d’autres propriétés de style pour votre menu.
Une fois que vous avez terminé, vous pouvez cliquer sur le bouton Enregistrer et prévisualiser votre menu.
Création de menus réactifs adaptés aux mobiles dans WordPress
Avec l’augmentation de l’utilisation des appareils mobiles, vous souhaiterez peut-être rendre vos menus adaptés aux mobiles en ajoutant l’un des nombreux effets populaires.
Vous pouvez ajouter un effet coulissant (ci-dessus), un effet déroulant et même un effet bascule pour les menus mobiles.
Nous avons un guide détaillé étape par étape sur la façon de créer des menus WordPress réactifs prêts pour les mobiles.
Faites plus avec les menus de navigation WordPress
Les menus de navigation sont un puissant outil de conception de sites Web. Ils vous permettent de diriger les utilisateurs vers les sections les plus importantes de votre site Web.
WordPress vous permet de faire bien plus que simplement afficher des liens dans votre menu. Essayez ces tutoriels utiles pour étendre les fonctionnalités des menus de navigation sur votre site WordPress.
- Comment ajouter des icônes d’image avec des menus de navigation dans WordPress
- Comment ajouter une logique conditionnelle aux menus dans WordPress
- Comment ajouter des descriptions de menu dans votre thème WordPress
- Comment ajouter un menu réactif en plein écran dans WordPress
- Comment ajouter un méga menu à votre site WordPress
C’est tout, nous espérons que ce guide ultime vous a aidé à apprendre comment ajouter un menu de navigation dans WordPress. Vous pouvez également consulter notre liste des 25 widgets WordPress les plus utiles et notre liste des plugins WordPress indispensables.