Comment créer un menu déroulant WordPress (5 méthodes)
Table des matières
La fonctionnalité du menu déroulant WordPress guide vos visiteurs autour de votre site. C’est la feuille de route qui les empêche de se perdre et leur permet de trouver ce dont ils ont besoin sans accroc. Une structure de navigation de site Web méticuleusement organisée peut garder vos visiteurs sur votre site plus longtemps et plus engagés.
Mais comment structurer un menu déroulant pour créer une expérience utilisateur agréable et productive ?
Dans cet article, nous allons vous montrer 5 méthodes pour créer un menu déroulant et décrire les meilleures pratiques pour le structurer. Lisez la suite pour devenir un maître dans la création de menus déroulants dans WordPress.
5 méthodes pour créer un menu déroulant dans WordPress
WordPress propose plusieurs méthodes pour créer des menus déroulants. Ils vont des options et plugins intégrés simples aux approches plus avancées utilisant CSS et PHP personnalisés. Continuez à lire pour en savoir plus sur chacune de ces options.
1. Utilisez l’éditeur de menu intégré
WordPress fournit un éditeur de menu intégré qui vous permet de créer des menus déroulants sans plugins supplémentaires ni connaissances en codage.
Suivez ces étapes:
- Commencez par vous connectez au backend de votre site WordPress.
- Accédez à Apparence > Menus dans votre tableau de bord WordPress.
- Cliquez sur le bouton “Créer un menu“.
- Donnez un nom à votre nouveau menu.
- Choisissez son emplacement sur votre site dans la section Paramètres du menu. Vous pouvez sélectionner « Ajouter automatiquement de nouvelles pages de niveau supérieur à ce menu » en cochant la case correspondante. De plus, vous pouvez cocher les cases pour gérer les emplacements sur votre site où vous souhaitez que ce menu soit visible.
- Accédez à la section “Ajouter des éléments de menu” sur le côté gauche de l’écran et sélectionnez les pages que vous souhaitez inclure dans votre menu.
- Incluez des posts spécifiques, Liens personnalisés, ou Catégories, en développant chaque section en cliquant sur la flèche à droite.
- Ajoutez un Lien personnalisé (espace réservé pour une liste déroulante) en saisissant l’URL et le texte du lien (utilisez # s’il n’est pas cliquable), puis en l’ajoutant au Menu.
- Faites simplement glisser et déposez les articles sur le côté droit de l’écran pour organiser leur commande.
- Transformez les éléments de menu en sous-menus en sélectionnant l’option “Sous” sous un élément parent.
- Cliquez sur “Enregistrer le menu” pour enregistrer vos modifications.
Après avoir enregistré votre nouveau menu, consultez votre site Web pour voir à quoi il ressemble. Comme vous pouvez le voir dans l’image ci-dessous, la barre de menu À propos est l’élément de menu parent, avec Projet et Services comme sous-menus.
2. Utilisez le bloc de navigation dans l’éditeur de blocs
L’éditeur de blocs est une fonctionnalité intégrée à WordPress. Cela simplifie la création de menus déroulants. Cet outil vous permet de construire visuellement vos menus et de voir les modifications dans un aperçu en direct.
Voici comment vous pouvez l’utiliser.
- Modifiez la page ou la publication dans laquelle vous souhaitez insérer le menu déroulant.
- Cliquez sur l’icône “+” pour ajouter un nouveau bloc.
- Recherchez et sélectionnez le bloc “Navigation” dans la liste des blocs disponibles.
- Faites glisser et déposez le bloc “Navigation” à l’emplacement souhaité dans votre contenu.
- Organisez les éléments de menu en faisant glisser et en déposant chaque élément de menu dans l’ordre souhaité pour créer votre structure de menu.
- Cliquez sur le bouton « Ajouter un sous-menu » sous un élément de menu principal pour créer un nouveau menu déroulant WordPress dans cet élément de menu.
- Sélectionnez les pages ou les liens que vous souhaitez inclure dans le menu déroulant.
- Ajustez les couleurs, l’espacement et d’autres paramètres dans les options de bloc pour personnaliser votre menu.
- Cliquez sur « Mettre à jour » > “Enregistrer” pour appliquer vos modifications.
3. Manipulation CSS personnalisée
Créer un menu déroulant à l’aide de CSS implique de définir le style et le comportement de vos éléments de menu et de leurs sous-éléments. Cela nécessite une combinaison de structures dans votre HTML et de style avec CSS.
Voici les étapes que vous pouvez suivre :
- Consultez la documentation de votre thème ou utilisez les outils de développement de votre navigateur pour inspecter la structure HTML de votre menu. Cela révèlera les classes ou identifiants spécifiques de votre thème pour les éléments de menu et les sous-menus.
- Ajustez les sélecteurs CSS dans le code pour qu’ils correspondent aux classes ou identifiants CSS spécifiques à votre thème.
- Ajoutez du code CSS personnalisé dans votre style.css pour créer votre menu.
Voici un exemple simple.
/* Style the parent menu items */
nav ul li {
background-color: #333; /* Main item background color */
color: white; /* Main item text color */
}
/* Initially hide the sub-menu */
nav ul li ul {
display: none;
position: absolute; /* Position the dropdown */
background-color: #444; /* Dropdown background color */
z-index: 100; /* Ensure the dropdown is above other content */
}
/* Reveal the sub-menu on hover over the parent item */
nav ul li:hover > ul {
display: block; /* Show dropdown */
}
/* Style individual dropdown items */
nav ul li ul li {
display: block; /* Dropdown items should be block level */
}- Ciblez des classes ou des ID CSS spécifiques pour appliquer des styles particuliers. En les utilisant, vous pouvez personnaliser des propriétés telles que la couleur d’arrière-plan, la couleur, l’affichage, la position, etc. en fonction de vos préférences de conception.
- Testez la réactivité pour vous assurer que la liste déroulante fonctionne correctement sur différentes tailles d’écran.
4. Utilisez les plugins de menu WordPress
Une autre méthode pour créer et concevoir des menus de navigation consiste à utiliser des plugins WordPress. En quelques clics, vous pouvez accéder à des fonctionnalités puissantes qui simplifient la création de menus déroulants.
Voici le processus en un mot :
- Installez un plugin de menu. Depuis le référentiel WordPress, vous pouvez installer un plugin comme « Max Mega Menu » et l’activer.
- Accédez à Apparence > Menus et localisez la section Paramètres du menu Max Mega pour appliquer des effets. Ensuite, utilisez l’interface glisser-déposer pour créer votre menu.
- Enregistrez vos modifications et attribuez le menu à l’emplacement du thème souhaité.
5. Développement PHP personnalisé
Pour créer un menu déroulant WordPress de base à l’aide du code PHP, utilisez la fonction wp_nav_menu() dans le header.php fichier, comme indiqué ci-dessous.
- Enregistrez les emplacements des menus. Dans le fichier functions.php de votre thème, vous devez enregistrer un emplacement de menu en utilisant register_nav_menus(). Cela indique à WordPress où votre menu sera placé dans le thème.
function mytheme_register_nav_menu() {
register_nav_menus(array(
'primary' => __('Primary Menu', 'theme-slug'),
));
}
add_action('after_setup_theme', 'mytheme_register_nav_menu');- Implémentez le bouton Menu. Placez la fonction wp_nav_menu() dans le header.php où le menu doit apparaître.
wp_nav_menu(array('theme_location' => 'primary', 'container_class' => 'main-nav'));- Créez votre menu dans l’administrateur WordPress. Sous Apparence > Menus, créez votre menu déroulant et attribuez-le à l’emplacement « principal » que vous avez enregistré.
- Stylisez le menu avec CSS. Ajoutez votre code personnalisé à la feuille de style de votre thème pour styliser le menu.
- Affichez le menu sur votre site. Visitez votre site pour vérifier comment WordPress affiche le menu principal dans votre emplacement enregistré.
- Assurez la fonctionnalité de liste déroulante. Pour prendre en charge les menus déroulants, votre thème peut nécessiter du code HTML, CSS ou JavaScript supplémentaire.
Structurez vos menus déroulants WordPress
Un menu déroulant bien structuré peut considérablement améliorer la convivialité de votre site. Maîtriser la mise en page et s’assurer qu’elle est accessible et réactive est la clé pour offrir une plus grande satisfaction aux utilisateurs.
Planifiez la disposition de votre menu WordPress
Commencez par créer votre menu pour refléter l’architecture de votre site. Regroupez les éléments associés sous les titres appropriés. De plus, vous devez garder la profondeur de vos menus gérable afin que les utilisateurs puissent facilement naviguer dans votre contenu.
Bonnes pratiques en matière de hiérarchie de menus
Pour une hiérarchie de menu optimale, organisez vos éléments de manière logique et regroupez les contenus similaires. Assurez-vous que les pages les plus importantes soient en premier dans la hiérarchie. Efforcez-vous de simplifier en limitant la profondeur du menu à deux ou trois niveaux pour éviter toute confusion chez les utilisateurs. Utilisez des étiquettes claires et descriptives pour une navigation simple. Plus important encore, maintenez la cohérence sur votre site pour créer une expérience familière et conviviale.
Accessibilité et conception réactive
Assurez-vous que vos menus déroulants sont accessibles à tous les utilisateurs, y compris ceux handicapés. De plus, concevez vos menus pour qu’ils soient réactifs. Cela garantit qu’ils fonctionnent correctement sur les ordinateurs de bureau et les mobiles.
Conclusion
En conclusion, la création d’un menu déroulant WordPress efficace combine fonctionnalités et conception centrée sur l’utilisateur. Que vous optiez pour la simplicité de l’éditeur de menu intégré, les capacités dynamiques des plugins ou la touche personnalisée de CSS et PHP, l’objectif reste d’offrir une expérience de navigation fluide.
En gardant vos menus structurés, accessibles et réactifs, les visiteurs peuvent facilement explorer votre site. C’est une victoire à la fois pour la satisfaction des utilisateurs et les performances SEO. Un menu bien conçu guide les utilisateurs à travers votre contenu et reflète le professionnalisme de votre site WordPress.