Vous voulez ajouter des menus de navigation personnalisés dans votre thème WordPress ? Les menus de navigation sont la liste horizontale de 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 passerait-il si vous vouliez 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 les menus de navigation WordPress ?
- Création de menus de navigation personnalisés dans les thèmes WordPress
- Affichage des menus de navigation personnalisés dans les thèmes WordPress
- Ajout d’un menu de navigation personnalisé sur WordPress à l’aide d’un constructeur de pages
- Création de menus réactifs adaptés aux mobiles dans WordPress
- Do More With WordPress Navigation Menus
La plupart des thèmes WordPress sont livrés avec au moins un endroit où vous pouvez afficher les liens de navigation de votre site dans un menu.
Vous pouvez gérer les éléments du menu à partir d’une interface facile à utiliser à l’intérieur de votre zone d’administration WordPress.
Si vous cherchez simplement à ajouter des menus de navigation sur votre site web, alors 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 bricoleurs / utilisateurs intermédiaires à ajouter des menus de navigation personnalisés dans leurs thèmes WordPress.
Nous allons couvrir 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 du constructeur de pages
- 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
Ayant dit cela, jetons un coup d’œil à la façon d’ajouter des menus de navigation WordPress personnalisés dans votre thème.
Les menus de navigation sont une fonctionnalité des thèmes WordPress. Chaque thème peut définir ses propres emplacements de menu et son support 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 sur la page Apparence » Menus dans votre administration WordPress et essayer de créer ou de modifier un nouveau menu. Vous verrez » Mon menu personnalisé » comme option d’emplacement du thème.
Si vous voulez ajouter plus d’un nouvel emplacement de menu de navigation, alors vous auriez besoin d’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’admin de WordPress en suivant notre tutoriel 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.
Puis, nous devons afficher le nouveau menu de navigation dans votre thème WordPress. L’endroit le plus commun 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 du site ou le logo.
Cependant, vous pouvez ajouter votre menu de navigation où vous le souhaitez.
Vous devrez ajouter ce code dans le fichier template de votre thème à l’endroit où vous souhaitez afficher votre menu.
<?phpwp_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 de conteneur est la classe CSS qui sera ajoutée à votre menu de navigation. Votre menu apparaîtra comme une simple liste à puces sur votre site Web.
Vous pouvez utiliser la classe CSS .custom_menu_class pour styliser vos menus. 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;}div.custom-menu-class li { padding: 0px 20px 0px 0px; display: inline;} div.custom-menu-class a { color:#FFFFFF;}
Pour en savoir plus sur le style d’un menu de navigation, consultez notre tutoriel détaillé sur la façon de styliser les menus de navigation WordPress
Si vous créez une page d’atterrissage ou une mise en page d’accueil personnalisée, alors l’utilisation d’un plugin de constructeur de pages WordPress rendrait l’ensemble beaucoup plus facile.
Nous recommandons d’utiliser Beaver Builder, qui est le meilleur constructeur de pages WordPress sur le marché. Il vous permet de créer tout type de mise en page en utilisant de simples outils de glisser-déposer (aucun codage requis).
Cela inclut également l’ajout d’un menu de navigation personnalisé à votre mise en page.
D’abord, vous devrez 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.
Après 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 d’articles, cliquez sur le bouton » Launch Beaver Builder « .
S’il s’agit d’une nouvelle page, alors vous pouvez utiliser l’un des modèles prêts à l’emploi fournis avec Beaver Builder. Vous pouvez également modifier votre page sortante tout de suite.
Puis, vous devez ajouter le module Menus et le glisser-déposer sur votre page à l’endroit où vous voulez afficher le menu.
Cela fera apparaître les paramètres du module Menu dans une popup. Tout d’abord, vous devez sélectionner le menu de navigation que vous voulez utiliser. Vous pouvez toujours créer de nouveaux menus ou modifier un menu existant en visitant la page Apparence » Menus dans la zone d’administration de WordPress.
Vous pouvez également revoir d’autres paramètres. Beaver Builder vous permet de choisir des couleurs personnalisées, un fond 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.
Avec l’augmentation de l’utilisation des appareils mobiles, vous pouvez vouloir rendre vos menus adaptés aux mobiles en ajoutant l’un des nombreux effets populaires.
Vous pouvez ajouter un effet de glissement (ci-dessus), un effet de descente et même un effet de bascule pour les menus mobiles.
Nous avons un guide détaillé étape par étape sur la façon de faire des menus WordPress responsive prêts pour le mobile.
Les menus de navigation sont un outil de conception web puissant. Ils vous permettent de diriger les utilisateurs vers les sections les plus importantes de votre site web.
WordPress vous permet de faire beaucoup 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 responsive 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 incontournables.
Si vous avez aimé cet article, alors abonnez-vous à notre chaîne YouTube pour découvrir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.