Comment ajouter des articles personnalisés à des menus WordPress spécifiques

Vous souhaitez ajouter des articles personnalisés à des menus WordPress spécifiques ?

Les menus WordPress sont des menus de navigation qui s’affichent en haut de la plupart des sites web. Il peut arriver que vous souhaitiez afficher des articles personnalisés autres que des liens simples dans les menus de navigation.

Dans cet article, nous allons vous afficher comment ajouter facilement des articles personnalisés à des menus WordPress spécifiques.

Pourquoi ajouter des articles personnalisés aux menus de WordPress ?

Les menus WordPress sont des liens de navigation généralement affichés en haut d’un site. Sur les appareils mobiles, ils s’affichent souvent lorsque vous appuyez sur une icône de menu.

Comme il s’agit d’un emplacement important dans la mise en page d’un site WordPress typique, il est judicieux d’en tirer parti en plaçant des éléments personnalisés autres que des liens simples dans le menu.

Par exemple, certains utilisateurs/utilisatrices peuvent vouloir afficher le formulaire de recherche comme nous le faisons sur WPBeginner. Un site d’adhésion peut vouloir afficher les liens de connexion et de déconnexion, ou vous pouvez vouloir ajouter des icônes ou des images à votre menu.

Par défaut, les menus de navigation sont conçus pour afficher des liens en texte simple. Il est toutefois possible de placer des articles personnalisés dans les menus de WordPress.

Ceci étant dit, voyons comment vous pouvez ajouter des éléments personnalisés à des menus spécifiques dans WordPress tout en gardant le reste de votre menu de navigation intact.

Ajouter des articles personnalisés à des menus de navigation spécifiques dans WordPress

Il existe différentes façons d’ajouter des éléments personnalisés à un menu de navigation dans WordPress. Cela dépend du type d’article personnalisé que vous essayez d’ajouter.

Nous allons vous afficher quelques-uns des exemples les plus courants. Vous devrez utiliser des extensions pour certains d’entre eux, tandis que d’autres nécessiteront l’ajout d’un peu de code.

Si vous souhaitez passer directement à une certaine section, vous pouvez utiliser cette table des matières :

• Ajouter une fenêtre surgissante de recherche à votre menu WordPress
• Ajouter des icônes ou des images à votre menu
• Ajouter des liens de connexion/déconnexion à votre menu
• Ajouter un texte personnalisé à un menu WordPress
• Ajouter la date du jour au menu
• Afficher les identifiants dans votre menu
• Afficher des menus différents sur des pages différentes

Premiers pas.

1. Ajout d’une fenêtre surgissante de recherche dans le menu de WordPress

Normalement, vous pouvez ajouter un formulaire de recherche à votre colonne latérale WordPress en utilisant le widget ou le bloc Recherche par défaut. Cependant, il n’y a aucun moyen d’ajouter la recherche au menu de navigation par défaut.

Certains thèmes WordPress disposent d’une option permettant d’ajouter une boîte de recherche à la zone de votre menu principal. Si ce n’est pas le cas du vôtre, vous pouvez utiliser la méthode ci-dessous.

Pour cela, vous devez installer et activer le plugin SearchWP Modal Search Form. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Ce module est une extension pour SearchWP, qui est le meilleur plugin de recherche WordPress sur le marché.

Le module est gratuit et fonctionne également avec la recherche par défaut de WordPress. Cependant, nous recommandons de l’utiliser avec SearchWP si vous souhaitez améliorer votre recherche WordPress.

Après avoir installé le module, il suffit de se rendre sur la page Apparence  » Menus. Dans la colonne  » Ajouter des éléments de menu « , cliquez sur l’onglet  » Formulaires de recherche modale SearchWP  » pour le déplier.

Sélectionnez votre moteur de recherche, puis cliquez sur le bouton Ajouter au menu.

L’extension ajoutera la recherche à votre menu de navigation. Cliquez sur le ‘Formulaire de recherche modale’ sous vos éléments de menu pour le déplier et modifier le libellé en Recherche ou tout autre élément de votre choix.

N’oubliez pas de cliquer sur le bouton Enregistrer le menu pour stocker vos modifications.

Vous pouvez désormais visiter votre site et voir que la fonction Rechercher a été ajoutée à votre menu de navigation. En cliquant dessus, le formulaire de recherche s’ouvrira dans une fenêtre surgissante de type visionneuse.

Pour plus de détails, consultez notre guide sur l’ajout d’un bouton de recherche dans un menu WordPress.

2. Ajouter des icônes et des images personnalisées à des menus spécifiques

Un autre article personnalisé populaire que les utilisateurs/utilisatrices souhaitent souvent ajouter à un menu spécifique est une image ou une icône.

Pour cela, vous aurez besoin d’installer et d’activer l’extension Menu Image Icône. Pour plus de détails, consultez notre guide pas à pas sur l’installation d’une extension WordPress.

Une fois activé, rendez-vous sur la page Apparence  » Menus et passez votre souris sur l’élément de menu où vous souhaitez afficher une icône ou une image.

Cliquez sur le bouton bleu de l’image du menu pour continuer.

Une fenêtre surgissante apparaît. Vous pouvez alors choisir une image ou une icône à afficher avec cet élément de menu.

Vous pouvez également choisir la position de l’image ou de l’icône par rapport à l’élément de menu. Par exemple, vous pouvez afficher l’Icône juste avant l’élément de menu comme dans notre exemple ci-dessous, ou même masquer le titre du menu pour afficher uniquement l’Icône.

N’oubliez pas de cliquer sur le bouton Enregistrer les modifications pour stocker vos réglages. Répétez le processus si vous avez besoin d’ajouter des icônes ou des images à d’autres éléments de menu.

Ensuite, vous pouvez visiter votre site pour voir l’image ou l’icône personnalisée dans des éléments de menu spécifiques.

Pour des instructions plus détaillées, consultez notre tutoriel sur l ‘ajout d’images dans les menus de WordPress.

3. Ajouter des liens de connexion / déconnexion à un menu spécifique de WordPress

Si vous utilisez un plugin d’adhésion WordPress ou si vous gérez une boutique en ligne, alors vous voudrez peut-être permettre aux utilisateurs/utilisatrices de se connecter facilement à leur compte.

Par défaut, WordPress ne propose pas de moyen simple d’afficher les liens de connexion et de déconnexion dans les menus de navigation.

Nous vous afficherons comment les ajouter à l’aide d’une extension ou d’un extrait de code.

1. Ajouter des liens de connexion / déconnexion aux menus à l’aide d’une extension

Cette méthode est plus simple et recommandée pour toutes les utilisatrices/utilisateurs.

Tout d’abord, vous devez installer et activer le plugin Login or Logout Menu Item. Ensuite, vous devez visiter la page Apparence  » Menu et cliquer sur l’onglet Connexion/Déconnexion pour le déplier.

À partir de là, vous devez sélectionner l’article « Se connecter|se déconnecter » et cliquer sur le bouton « Ajouter au menu ».

N’oubliez pas de cliquer sur le bouton Enregistrer le menu pour stocker vos modifications. Vous pouvez maintenant visiter votre site pour voir votre lien de connexion/déconnexion personnalisé en action.

Le lien se modifiera dynamiquement en login ou en déconnecté en fonction de l’état de connexion de l’utilisateur.

Pour en savoir plus, consultez notre tutoriel sur l’ajout de liens de connexion et de déconnexion dans les menus de WordPress.

2. Ajouter des liens de connexion / déconnexion à l’aide d’un code personnalisé

Cette méthode nécessite d’ajouter du code à votre site WordPress. Si vous n’avez jamais fait cela auparavant, alors jetez un œil à notre guide sur la façon d’ajouter du code personnalisé dans WordPress.

Tout d’abord, vous devez trouver le nom que votre thème WordPress utilise pour l’emplacement spécifique du menu de navigation.

Le moyen le plus simple de le trouver est de visiter la page Apparence  » Menus et de passer votre souris sur la zone d’emplacement des menus.

Faites un clic droit pour sélectionner l’outil Inspecter et vous verrez alors le nom de l’Emplacement dans le code source ci-dessous. Par exemple, notre thème de démonstration utilise primary, footer et top-bar-menu.

Note le nom affiché pour l’Emplacement cible où vous souhaitez afficher le lien de connexion / déconnexion.

Ensuite, vous devez ajouter le code suivant au fichier functions.php de votre thème ou à une extension spécifique à votre site.

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
    }
    return $items;
}

Ensuite, vous pouvez visiter votre site et vous verrez le lien de connexion ou de déconnexion dans votre menu de navigation.

Ce lien dynamique basculera automatiquement vers la connexion ou la déconnexion en fonction de l’état de connexion de l’utilisateur/utilisatrice.

4. Ajouter un texte personnalisé au menu de navigation de WordPress

Et si vous vouliez simplement ajouter du texte et non un lien à votre menu de navigation ?

Il y a deux façons de procéder.

1. Ajouter un texte personnalisé à un menu spécifique (méthode simple)

Il vous suffit de vous rendre sur la page Apparence  » Menus et d’ajouter un lien personnalisé avec le signe # comme URL, et le texte que vous souhaitez afficher comme Texte du lien.

Cliquez sur le bouton Ajouter au menu pour continuer.

WordPress ajoutera votre texte personnalisé en tant qu’élément de menu dans la colonne de gauche. Maintenant, cliquez pour le déplier et supprimez le signe #.

N’oubliez pas de cliquer sur le bouton Enregistrer le menu et de prévisualiser votre site. Vous remarquerez que votre texte personnalisé apparaît dans le menu de navigation.

Il s’agit toujours d’un lien, mais le fait de cliquer dessus ne fait rien pour le compte de l’utilisateur/utilisatrice.

2. Ajouter un texte personnalisé à un menu de navigation à l’aide d’un code

Pour cette méthode, vous ajouterez un extrait de code à votre site. Tout d’abord, vous devrez trouver le nom de l’Emplacement de votre thème, comme décrit ci-dessus dans la section relative au lien de connexion/déconnexion.

Ensuite, vous devez ajouter le code suivant au fichier functions.php du thème ou à une extension spécifique au site.

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
    if ( $args->theme_location == 'primary') {
        $items .= '<li><a title="">Custom Text</a></li>';
    }
    return $items;
}

Remplacez simplement la mention « Texte personnalisé » par votre propre texte.

Vous pouvez maintenant enregistrer vos modifications et visiter votre site pour voir votre texte personnalisé ajouté à la fin de votre menu de navigation.

Cette méthode de code peut s’avérer utile si vous souhaitez ajouter de manière programmatique des éléments dynamiques à un menu WordPress spécifique.

5. Ajouter la date du jour dans le menu de WordPress

Voulez-vous afficher la date du jour à l’intérieur d’un menu de navigation dans WordPress ? Cette astuce est très pratique si vous gérez un blog fréquemment mis à jour ou un site d’actualités.

Il suffit d’ajouter le code suivant au fichier functions.php de votre thème ou à une extension spécifique à votre site.

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'primary')  {
         
        $todaysdate = date('l jS F Y');
        $items .=  '<li><a>' . $todaysdate .  '</a></li>';
 
    }
    return $items;
}

N’oubliez pas de remplacer « primaire » par l’Emplacement de votre menu.

Vous pouvez maintenant visiter votre site pour voir la date actuelle dans votre menu WordPress.

Vous pouvez également modifier le format de la date à votre guise. Consultez notre tutoriel sur la modification du format de la date et de l’heure dans WordPress.

6. Afficher le nom de l’utilisateur dans le menu WordPress

Vous souhaitez personnaliser un peu plus votre menu de navigation ? Vous pouvez accueillir les utilisateurs/utilisatrices connectés par leur nom dans votre menu de navigation.

Tout d’abord, vous devez ajouter le code suivant au fichier functions.php de votre thème ou à une extension spécifique à votre site.

add_filter( 'wp_nav_menu_objects', 'username_in_menu_items' );
function username_in_menu_items( $menu_items ) {
    foreach ( $menu_items as $menu_item ) {
        if ( strpos($menu_item->title, '#profile_name#') !== false) {
			 if ( is_user_logged_in() )     {
				$current_user = wp_get_current_user();
				 $user_public_name = $current_user->display_name;
                $menu_item->title =  str_replace("#profile_name#",  " Hey, ". $user_public_name, $menu_item->title . "!");
			 } else { 
			 $menu_item->title =  str_replace("#profile_name#",  " Welcome!", $menu_item->title . "!");
			 }
        }
    }

    return $menu_items;
} 

Ce code vérifie d’abord si vous avez ajouté un élément de menu avec #profile_name# comme texte de lien. Ensuite, il remplace cet article de menu par le nom de l’utilisateur connecté ou par un message d’accueil générique pour les utilisateurs/utilisatrices non connectés.

Ensuite, vous devez aller sur la page Apparence  » Menus et ajouter un nouveau lien personnalisé avec le #profile_name# comme texte du Link.

N’oubliez pas de cliquer sur le bouton Enregistrer le menu pour stocker vos modifications. Après cela, vous pouvez visiter votre site pour voir le nom de l’utilisateur connecté dans le menu WordPress.

7. Afficher dynamiquement des menus conditionnels dans WordPress

Jusqu’à présent, nous vous avons montré comment ajouter différents types d’articles personnalisés à des menus WordPress spécifiques. Cependant, vous aurez parfois besoin d’afficher dynamiquement différents éléments de menu aux utilisateurs/utilisatrices.

Par exemple, vous pouvez vouloir afficher un menu uniquement pour les utilisateurs/utilisatrices connectés. Vous pouvez également souhaiter que le menu soit modifié en fonction de la page vue par l’utilisateur/utilisatrice.

Cette méthode vous permet de créer plusieurs menus et de les afficher uniquement lorsque certaines conditions sont remplies.

Tout d’abord, vous devez installer et activer l’extension Conditional Menus. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, vous devez visiter la page Apparence  » Menus. À partir de là, vous devez créer un nouveau menu que vous souhaitez afficher. Par exemple, dans cet exemple, nous avons créé un nouveau menu pour les utilisateurs/utilisatrices connectées uniquement.

Après avoir créé le menu, passez à l’onglet Gérer les Emplacements.

À partir de là, vous devez cliquer sur le lien Menus conditionnels situé à côté de l’emplacement du menu.

Ensuite, vous devez sélectionner le menu que vous avez créé précédemment dans le menu déroulant.

Cliquez ensuite sur le bouton « + Conditions » pour continuer.

Une fenêtre surgissante apparaît.

À partir de là, vous pouvez sélectionner les conditions qui doivent être remplies afin de commander ce menu.

L’extension propose un grand nombre de conditions à choisir. Par exemple, vous pouvez afficher le menu en fonction d’une page spécifique, d’une catégorie, d’un type de publication, d’une taxonomie et plus encore.

Vous pouvez également afficher des menus différents en fonction du rôle des utilisateurs/utilisatrices et de leur état connecté. Par exemple, vous pouvez afficher un menu différent pour les membres existants sur un site d’adhésion.

Nous espérons que cet article vous a aidé à apprendre comment ajouter des articles personnalisés à des menus WordPress spécifiques. Vous pouvez également consulter notre guide sur la façon de choisir le meilleur logiciel de conception web, ou notre comparaison d’experts du meilleur logiciel de discussion en direct pour les petites entreprises.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.