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

Recherchez-vous 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 présenter les meilleurs tutoriels pour maîtriser les menus de navigation WordPress.

Puisqu'il s'agit d'un article long, nous avons ajouté une liste de contenus pour faciliter la navigation.

  1. Premiers pas avec les menus de navigation WordPress

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

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

  4. Ajouter une logique conditionnelle aux menus de navigation

  5. Styliser les menus de navigation WordPress

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

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

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

  9. Création d'un menu WordPress réactif et prêt pour les mobiles

  10. Ajouter un menu réactif plein écran dans WordPress

  11. Ajout d'une description avec les menus de navigation dans WordPress

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

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

  14. Ajouter un menu de navigation WordPress dans les articles et les pages

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

1. Premiers pas avec les menus de navigation WordPress

Dans la conception Web, le menu de navigation est une liste de liens qui permettent 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 nom du menu de navigation.

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 se trouve sur la page Apparence » Menus de votre zone d'administration WordPress.

Ici, vous pouvez créer des menus en ajoutant des éléments de la colonne de gauche vers la droite. Vous pouvez ajouter n’importe quelle publication, 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. Ajoutez des icônes de médias sociaux aux menus WordPress

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

Le moyen le plus simple de le faire est d’utiliser le plugin Menu Social Icons. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.

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

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

Répétez ce processus pour tous les profils de réseaux 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 réseaux sociaux aux menus WordPress.

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

Si vous gérez un site d'adhésion WordPress, vous souhaiterez peut-être afficher différents menus à vos 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 function.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'] = 'logged-in';
} else { 
	$args['menu'] = 'logged-out';
} 
	return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

C'est tout. Vous pouvez désormais tester vos menus de navigation en action.

Pour des instructions plus détaillées, consultez notre tutoriel sur la façon d'afficher différents menus aux 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 le masquage d'un élément sur des publications uniques. Voici comment y parvenir dans WordPress.

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

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

Cocher cette option vous montrera deux options déroulantes. Vous pouvez sélectionner afficher ou masquer un menu s'il répond à certaines conditions. Par exemple, masquez l'élément de menu si un utilisateur est un administrateur ou affichez un élément de menu uniquement si un utilisateur consulte une seule publication.

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

5. Styliser les 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.

Le moyen le plus simple de procéder 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 HTML ou CSS requis). Consultez notre revue CSS Hero pour en savoir plus.

Vous pouvez également styliser vos menus de navigation en écrivant manuellement du CSS. Pour des instructions détaillées, consultez notre guide sur la façon de styliser les menus de navigation WordPress.

6. Ajoutez des icônes d'image avec les 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 les menus de navigation dans WordPress.

Tout d’abord, vous devez installer et activer le plugin Menu Image. Lors de l'activation, accédez à Apparence »Menus. Là, vous verrez une option pour 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 les 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 function.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' );

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

Pour afficher votre menu personnalisé, vous devrez ajouter ce code à votre thème là où vous souhaitez afficher le menu.

<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

Pour des instructions plus détaillées, consultez notre article sur la façon d'ajouter des menus de navigation personnalisés dans les thèmes WordPress.

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

Vous souhaitez afficher le menu de navigation de votre site sous forme de panneau coulissant ? L'utilisation de panneaux coulissants rend vos menus plus interactifs, moins intrusifs et amusants, en particulier sur les appareils mobiles.

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

Pour des instructions étape par étape, consultez notre guide sur la façon d’ajouter un menu de panneau coulissant dans les thèmes WordPress.

9. Création d'un menu WordPress réactif pour mobile

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

Heureusement, il existe des moyens simples d'ajouter des menus réactifs prêts pour les 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 « Menu réactif » dans votre barre d'administration WordPress pour configurer les paramètres du plugin.

Sélectionnez simplement une largeur après laquelle le menu réactif 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 stocker vos paramètres. C'est tout ce que vous pouvez désormais visiter votre site Web et redimensionner l'écran du navigateur pour voir le menu réactif mobile.

Il existe de nombreuses autres façons d’ajouter un menu réactif pour mobile. Comme un menu qui apparaît avec un effet bascule, un menu coulissant et un menu de sélection réactif. Apprenez-en plus sur chacun d’eux dans notre guide sur la façon de créer un menu WordPress réactif prêt pour les mobiles.

10. Ajouter un menu réactif plein écran dans WordPress

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

Tout d’abord, vous devez installer et activer le menu réactif DC - Plein écran. Lors de l'activation, vous devez visiter la page Apparence » Menu plein écran DC pour configurer les paramètres du plugin.

Ici, vous pouvez choisir un menu, la couleur de l'arrière-plan et du texte, ainsi que la police Google pour votre menu plein écran.

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

Pour en savoir plus sur ce sujet, consultez notre guide sur la façon d'ajouter un menu réactif plein écran dans WordPress.

11. Ajout d'une description avec les menus de navigation dans WordPress

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

Heureusement, WordPress est livré avec une fonctionnalité intégrée pour ajouter une description à chaque élément de vos menus de navigation.

Tout d’abord, vous devrez activer l’élément de descriptions. 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 à côté de Description.

Maintenant, faites défiler vers le bas 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 du menu Enregistrer.

Si votre thème prend en charge les descriptions de menu, vous pourrez les voir immédiatement. Sinon, vous devrez modifier vos fichiers de thème pour afficher les 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 WordPress

On nous demande souvent comment ajouter des sujets de blog aux menus de navigation de WordPress. De nombreux débutants supposent 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 catégories et les balises sont intégrées aux taxonomies WordPress qui vous permettent de trier le contenu par sujets pertinents.

Ajoutez vos articles dans les catégories pertinentes, puis rendez-vous sur la page Apparence » Menus. 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, consultez notre article sur la façon d'ajouter des sujets dans les menus de navigation WordPress.

13. Comment ajouter des menus de navigation dans la barre latérale 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.

Visitez simplement la page Apparence » Widgets 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 stocker vos paramètres.

14. Ajouter un menu de navigation WordPress dans les articles et les pages

Habituellement, les menus de navigation sont affichés dans l’en-tête ou dans la barre latérale d’un site Web. Cependant, vous souhaiterez parfois ajouter un menu dans une publication ou une page WordPress. Voici comment procéder.

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

[listmenu menu="Votre nom de menu"]

N'oubliez pas de remplacer « Nom de votre menu » par le nom de votre propre menu de navigation. Enregistrez ou publiez votre article, 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 articles ou des pages.

15. Ajoutez des liens NoFollow dans les menus de navigation 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 SEO recommandent d’ajouter l’attribut rel="nofollow" aux liens externes. Voici comment ajouter l’attribut nofollow aux liens dans les menus de navigation WordPress.

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

Cela fera apparaître un menu dans lequel vous devrez cocher les cases à côté des options Link Relation (XFN) et Link Target.

Cliquez maintenant 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 saisir nofollow dans l'option de relation de lien. Vous pouvez également vérifier l’option Ouvrir le lien dans une nouvelle fenêtre/onglet si vous le souhaitez.

Cliquez sur le bouton du menu Enregistrer pour enregistrer vos modifications. Désormais, 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 WordPress.

Nous espérons que cet article vous a aidé à trouver les meilleurs tutoriels pour maîtriser les menus de navigation WordPress. Vous voudrez peut-être également consulter notre liste de 24 plugins WordPress indispensables pour les sites Web d’entreprise.

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.