15 meilleurs tutoriels pour maîtriser les menus de navigation WordPress

Vous recherchez les meilleurs tutoriels pour travailler avec les menus de navigation WordPress? Les menus de navigation WordPress vous permettent de personnaliser et de gérer facilement les menus de votre site Web. Dans cet article, nous allons vous montrer les meilleurs tutoriels pour maîtriser les menus de navigation WordPress..

Comme il s’agit d’un long article, nous avons ajouté une liste de contenu pour faciliter la navigation..

1. Premiers pas avec les menus de navigation de WordPress
2. Ajouter des icônes de médias sociaux aux menus WordPress
3. Afficher différents menus pour les utilisateurs connectés dans WordPress
4. Ajouter une logique conditionnelle aux menus de navigation
5. Style des menus de navigation WordPress
6. Ajouter des icônes d'image avec des menus de navigation dans WordPress
7. Ajouter des menus de navigation personnalisés dans WordPress
8. Ajouter un menu de panneau de diapositives dans les thèmes WordPress
9. Créer un menu WordPress réactif pour Mobile Ready
10. Ajouter un menu plein écran sensible dans WordPress
11. Ajout de description avec les menus de navigation dans WordPress
12. Comment ajouter des sujets dans les menus de navigation de WordPress
13. Comment ajouter des menus de navigation dans la barre latérale de WordPress
14. Ajouter le menu de navigation WordPress dans les publications et les pages
15. Ajouter des liens NoFollow dans les menus de navigation de WordPress

1. Premiers pas avec les menus de navigation de WordPress

Dans la conception Web, le menu de navigation est une liste de liens qui permet aux visiteurs de votre site Web de visiter différentes pages et sections de votre site Web. Il aide les utilisateurs à naviguer sur votre site Web, d'où le menu de navigation du nom.

WordPress est livré avec un outil intégré qui vous permet de créer et d'utiliser des menus sur votre site Web. Cet outil est situé à Apparence »Menus page dans votre espace administrateur WordPress.

Ici, vous pouvez créer des menus en ajoutant des éléments de la colonne de gauche à droite. Vous pouvez ajouter n’importe quel article, page, catégorie et lien personnalisé WordPress à vos menus..

Pour des instructions détaillées, consultez notre guide du débutant sur la façon d’ajouter des menus de navigation dans WordPress..

2. Ajouter des icônes de médias sociaux aux menus WordPress

Les menus WordPress peuvent également être utilisés pour ajouter des boutons de médias sociaux à votre site Web. Cela vous permet de mettre à jour facilement les icônes, de les réorganiser et d'ajouter de nouvelles icônes de réseaux sociaux à tout moment..

Pour ce faire, le moyen le plus simple consiste à utiliser le plug-in Menu Social Icons. Pour plus de détails, consultez notre guide étape par étape pour installer un plugin WordPress..

Lors de l'activation, rendez-vous sur Apparence »Menus page. Créez un nouveau menu social puis sur l'onglet des liens personnalisés dans la colonne de gauche.

Vous verrez les icônes de médias sociaux sous le texte du lien et les champs d'URL. Tout ce que vous avez à faire est de cliquer sur une icône de média social et d'entrer l'URL de votre profil social. Lorsque vous avez terminé, cliquez sur le bouton Ajouter au menu..

Répétez cette procédure pour tous les profils de médias sociaux que vous souhaitez ajouter. Une fois que vous avez terminé, sélectionnez un emplacement de menu, puis cliquez sur le bouton Enregistrer le menu..

Pour des instructions plus détaillées, consultez notre guide sur la façon d’ajouter des icônes de médias sociaux aux menus WordPress..

3. Afficher différents menus pour les utilisateurs connectés dans WordPress

Si vous exploitez un site d'adhésion WordPress, vous souhaiterez peut-être afficher différents menus pour les utilisateurs connectés. Voici comment vous pouvez facilement y parvenir.

Vous devez d’abord créer deux menus différents. Un pour vos utilisateurs connectés et un pour les utilisateurs qui ne sont pas connectés. Vous pouvez nommer ces menus connectés et déconnectés..

Ensuite, vous devez ajouter ce code au fichier functions.php de votre thème ou à un plugin spécifique au site..

 function my_wp_nav_menu_args ($ args = ") if (is_user_logged_in ()) $ args ['menu'] = 'connecté'; else $ args ['menu'] = 'déconnecté args; add_filter ('wp_nav_menu_args', 'mon_wp_nav_menu_args'); 

C'est tout. Vous pouvez maintenant tester vos menus de navigation en action.

Pour des instructions plus détaillées, consultez notre tutoriel sur la manière d'afficher différents menus pour les utilisateurs connectés dans WordPress..

4. Ajouter une logique conditionnelle aux menus de navigation

Vous souhaitez modifier les menus en fonction de certaines conditions? Comme un menu différent sur la page d'accueil ou masquer un élément dans des publications uniques. Voici comment vous pouvez y arriver dans WordPress.

Vous devez d’abord installer et activer le plugin If Menu.

Lors de l'activation, visitez Apparence »Menus écran et cliquez sur un élément de menu que vous souhaitez modifier. Vous remarquerez une nouvelle option pour "Activer la logique conditionnelle".

En cochant cette option, vous verrez deux options déroulantes. Vous pouvez sélectionner afficher ou masquer pour un menu s'il correspond à certaines conditions. Par exemple, masquer un élément de menu si un utilisateur est un administrateur ou afficher un élément de menu uniquement si un utilisateur publie un seul message.

Pour des instructions plus détaillées, consultez notre article sur la façon d’ajouter une logique conditionnelle aux menus WordPress..

5. Style des menus de navigation WordPress

Votre thème WordPress contrôle l'apparence des menus de navigation sur votre site web. En utilisant CSS, vous pouvez personnaliser l'apparence des menus de navigation.

Pour ce faire, le moyen le plus simple consiste à utiliser le plugin CSS Hero. Il s'agit d'un plugin WordPress premium qui vous permet de personnaliser n'importe quel thème WordPress sans écrire une seule ligne de code (aucun code HTML ou CSS requis). Voir notre revue CSS Hero pour en savoir plus.

Vous pouvez également styler vos menus de navigation en écrivant manuellement CSS. Pour des instructions détaillées, consultez notre guide sur la manière de styliser les menus de navigation WordPress..

6. Ajouter des icônes d'image avec des menus de navigation dans WordPress

De nombreux sites Web populaires utilisent des icônes d’image à côté de leurs menus de navigation pour les rendre plus visibles. Voici comment ajouter des icônes d’image avec des menus de navigation dans WordPress.

Tout d’abord, vous devez installer et activer le plugin Menu Image. Lors de l'activation, allez dans les menus "Apparence". Une option vous permet d'ajouter des images avec chaque élément de votre menu existant..

Vous pouvez également utiliser CSS pour ajouter des icônes d'image. Pour des instructions détaillées, consultez notre guide sur la façon d’ajouter des icônes d’image avec des menus de navigation dans WordPress..

7. Ajouter des menus de navigation personnalisés dans WordPress

La plupart des thèmes WordPress gratuits et premium sont livrés avec des emplacements prédéfinis pour afficher vos menus de navigation. Cependant, vous pouvez également ajouter des menus de navigation personnalisés à vos thèmes..

Vous devrez d’abord 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 ('mon-menu-personnalisé', __ ('mon menu personnalisé'));  add_action ('init', 'wpb_custom_new_menu'); 

Ce code créera "Mon menu personnalisé" pour votre thème. Vous pouvez le voir en éditant un menu sur Apparence »Menus page.

Pour afficher votre menu personnalisé, vous devrez ajouter ce code à votre thème pour lequel vous souhaitez afficher le menu..

  'my-custom-menu', 'container_class' => 'custom-menu-class')); ?> 

Pour des instructions plus détaillées, consultez notre article sur la procédure d’ajout de menus de navigation personnalisés dans les thèmes WordPress..

8. Ajouter un menu de panneau de diapositives dans les thèmes WordPress

Voulez-vous montrer que le menu de navigation de votre site est un panneau coulissant? L'utilisation de panneaux coulissants rend vos menus plus interactifs, moins intrusifs et amusants, spécialement sur les appareils mobiles..

Cependant, pour les ajouter, vous aurez besoin d’une compréhension moyenne du JavaScript, des thèmes WordPress et du code CSS..

Pour des instructions pas à pas, consultez notre guide sur la manière d’ajouter un menu de panneau de diapositives dans les thèmes WordPress..

9. Créer un menu WordPress réactif pour Mobile Ready

La plupart des thèmes WordPress sont réactifs et livrés avec des menus de navigation compatibles avec les appareils mobiles. Cependant, si votre thème ne gère pas bien les menus de navigation sur les appareils mobiles, cela affecte l'expérience de l'utilisateur sur les appareils mobiles..

Heureusement, il existe des moyens simples d'ajouter des menus réactifs adaptés aux téléphones mobiles sans écrire de code..

Tout d’abord, vous devez installer et activer le plugin Responsive Menu.

Lors de l'activation, vous devez cliquer sur 'Responsive Menu' dans votre barre d'administration WordPress pour configurer les paramètres du plugin..

Il suffit de sélectionner une largeur après laquelle le menu responsive mobile doit être visible. Après cela, vous devez sélectionner un menu de navigation existant..

N'oubliez pas de cliquer sur le bouton 'Options de mise à jour' pour enregistrer vos paramètres. C'est tout ce que vous pouvez maintenant visiter votre site Web et redimensionner l'écran du navigateur pour voir le menu responsive mobile.

Il existe de nombreuses autres manières d’ajouter un menu réactif pour mobile. Comme un menu qui apparaît avec un effet de bascule, un menu à glissière et un menu de sélection réactif. Pour en savoir plus sur chacun d’entre eux, consultez notre guide sur la création d’un menu WordPress réactif compatible avec les appareils mobiles..

10. Ajouter un menu plein écran sensible dans WordPress

Avez-vous remarqué comment certains sites Web populaires utilisent un menu de navigation plein écran? Cela nécessite généralement une utilisation créative de JavaScript et de CSS. Heureusement, vous pouvez le faire dans WordPress sans écrire de code.

Tout d’abord, vous devez installer et activer le menu DC - Full Screen Responsive. Lors de l'activation, vous devez visiter Apparence "Menu plein écran DC page pour configurer les paramètres du plugin.

Ici, vous pouvez choisir un menu, une couleur d'arrière-plan et du texte, ainsi qu'une police Google pour votre menu plein écran..

Cliquez sur le bouton d'envoi pour enregistrer vos paramètres. Vous pouvez maintenant visiter votre site Web pour voir votre menu réactif plein écran en action.

Pour plus d'informations sur ce sujet, consultez notre guide sur l'ajout d'un menu plein écran responsive dans WordPress..

11. Ajouter une description avec les menus de navigation dans WordPress

Les menus de navigation WordPress ne sont généralement que des liens de texte indiquant l’étiquette ou le texte d’ancrage. Et si vous vouliez ajouter une petite description ou une ligne de balise pour chaque élément de votre menu de navigation?

Heureusement, WordPress est doté d'une fonctionnalité intégrée permettant d'ajouter une description de chaque élément de vos menus de navigation..

Tout d'abord, vous devez activer l'élément de description. Cliquez sur le bouton Options d'écran dans le coin supérieur droit de l'écran..

Cela affichera une liste de cases et d’options que vous pouvez activer. Vous devez cocher la case en regard de Description.

Maintenant, faites défiler et cliquez sur un élément de menu pour le modifier et vous verrez une option pour ajouter une description.

Ajoutez votre description et cliquez sur le bouton de menu de sauvegarde.

Si votre thème prend en charge les descriptions de menu, vous pourrez les voir immédiatement. Sinon, vous devrez éditer vos fichiers de thème pour afficher des descriptions.

Pour des instructions détaillées, consultez notre guide sur la façon d’ajouter des descriptions de menu dans votre thème WordPress..

12. Comment ajouter des sujets dans les menus de navigation de WordPress

On nous demande souvent comment ajouter des sujets de blog aux menus de navigation dans WordPress. Beaucoup de débutants pensent qu'ils doivent créer des pages pour chaque sujet afin de les ajouter aux menus..

Ce dont vous avez réellement besoin, ce sont des catégories. Les taxonomies WordPress intégrées aux catégories et aux balises vous permettent de trier le contenu en fonction de sujets pertinents.

Ajoutez vos articles dans les catégories pertinentes, puis rendez-vous sur Apparence »Menus page. Cliquez sur l'onglet catégories pour le développer, puis sélectionnez les catégories que vous souhaitez afficher dans vos menus de navigation..

Pour plus de détails, voir notre article sur la façon d’ajouter des sujets dans les menus de navigation de WordPress..

13. Comment ajouter des menus de navigation dans la barre latérale de WordPress

Les thèmes WordPress ont généralement des menus de navigation en haut ou en bas. Cependant, vous pouvez également créer et ajouter des menus dans votre barre latérale WordPress..

Il suffit de visiter Apparence »Widgets page et ajoutez le widget "Menu personnalisé" à votre barre latérale. Pour des instructions détaillées, consultez notre guide sur la façon d’ajouter et d’utiliser des widgets dans WordPress..

Après avoir ajouté le widget à une barre latérale, vous pouvez sélectionner un menu dans l’option déroulante. N'oubliez pas de cliquer sur le bouton Enregistrer pour enregistrer vos paramètres..

14. Ajouter le menu de navigation WordPress dans les publications et les pages

Les menus de navigation sont généralement affichés dans l'en-tête ou la barre latérale d'un site Web. Cependant, vous pouvez parfois souhaiter ajouter un menu dans une publication ou une page WordPress. Voici comment vous feriez ça.

Tout d’abord, vous devez installer et activer le plugin Menu Shortcode. Lors de l'activation, modifiez le message ou la page sur laquelle vous souhaitez afficher votre menu et ajoutez ce code court:

[listmenu menu = "Votre nom de menu"]

N'oubliez pas de remplacer "Votre nom de menu" par le nom de votre propre menu de navigation. Enregistrez ou publiez votre message puis cliquez sur le bouton Aperçu.

Pour plus de détails, consultez notre guide sur la façon d’ajouter un menu de navigation WordPress dans des publications ou des pages..

15. Ajouter des liens NoFollow dans les menus de navigation de WordPress

En règle générale, le menu de navigation de votre site contient des liens vers vos propres publications et pages. Cependant, vous devrez parfois ajouter un lien vers un site externe..

De nombreux experts en référencement recommandent d'ajouter l'attribut rel = ”nofollow” aux liens externes. Voici comment vous allez ajouter l'attribut nofollow aux liens dans les menus de navigation de WordPress.

Tout d'abord, vous devez visiter Apparence »Menus page puis cliquez sur le bouton Options d'écran dans le coin supérieur droit de l'écran.

Cela fera apparaître un menu dans lequel vous devez cocher les cases en regard des options Relation de lien (XFN) et Cible du lien..

Maintenant, cliquez sur l'élément de menu que vous souhaitez modifier. Vous remarquerez deux nouvelles options, Lien Relation et Ouvrir le lien dans une nouvelle fenêtre / onglet.

Vous devez entrer pas de suivi dans l'option de relation de lien. Vous pouvez également vérifier le lien ouvert dans une nouvelle fenêtre / option d’onglet si vous le souhaitez..

Cliquez sur le bouton Enregistrer dans le menu pour enregistrer vos modifications. Maintenant, ce lien particulier dans votre menu de navigation WordPress aura l'attribut rel = "nofollow" ajouté.

Pour des instructions plus détaillées, consultez notre tutoriel sur la façon d’ajouter des liens nofollow dans les menus de navigation de WordPress..

Nous espérons que cet article vous aidera à trouver les meilleurs tutoriels pour maîtriser les menus de navigation WordPress. Vous pouvez également consulter notre liste de 24 plugins WordPress indispensables pour les sites Web professionnels..

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.