Conseils, astuces et meilleurs plugins pour personnaliser les menus WordPress

Publié: 2018-04-04

Les menus sont l'une des parties les plus vitales de chaque site Web. Ils sont omniprésents et ils guident les utilisateurs à travers votre blog. Et bien qu'il soit relativement facile d'ajouter un menu de navigation dans WordPress, vous pouvez faire bien plus pour le personnaliser pour votre site Web.

Qu'il s'agisse d'une petite icône que vous souhaitez avoir dans le menu ou que vous souhaitiez un système complètement différent pour le gérer, ce guide a tout pour plaire. Découvrez des conseils, des astuces et certains des meilleurs plugins de menu que nous avons préparés pour vous dans ce guide :

Ajoutez des icônes à votre menu WordPress
Ajouter un bouton de connexion/déconnexion au menu
Affichez les menus WordPress où vous voulez
Comment ajouter un champ de recherche à votre menu WordPress
Comment faire en sorte que le menu de navigation reste en haut de la page
Créez votre menu de navigation collant avec des plugins
Comment supprimer les éléments de menu de niveau supérieur dans WordPress
Top 4 des plugins de menu pour WordPress
Meilleurs plugins de menu mobile WordPress

Ajoutez des icônes à votre menu WordPress

Créer un menu dans WordPress n'a jamais été aussi simple. Tout ce que vous avez à faire est de générer des pages et de les ajouter à côté de votre page d'accueil. Votre menu de navigation principal se fera en quelques clics, mais il aura probablement l'air très simple.

Il existe de nombreux plugins qui peuvent vous aider à créer un menu de navigation visuellement époustouflant. Vous pouvez, bien sûr, en coder vous-même un si vous savez le faire, mais il existe un moyen plus simple de rendre votre menu habituel plus convivial – en ajoutant des icônes.

Les icônes sont devenues quelque chose dont nous ne pouvons plus nous passer . Lorsque vous recherchez quelque chose dans votre tableau de bord WordPress, sur votre bureau ou sur votre smartphone et votre tablette, vous êtes probablement habitué à utiliser des icônes. Après seulement quelques utilisations d'une nouvelle application, il est plus probable que vous vous souveniez de son icône que de tout le texte de description qui l'accompagne. Alors, pourquoi ne mettriez-vous pas une icône à côté de votre élément de menu et ne permettez-vous pas aux gens de naviguer facilement sur votre site ?

Icônes de menu

PRIX : Gratuit

Si vous ne savez pas comment faire cela, ne vous inquiétez pas, c'est pourquoi vous êtes ici. Dans cette partie du guide, nous n'allons pas vous embêter avec un codage personnalisé, mais nous allons simplement vous montrer un plugin gratuit soigné que vous pouvez configurer dans les prochaines minutes .

Allez dans Plugins-> Ajouter un nouveau
Recherchez « icônes de menu »
Installer et activer le plugin
Accédez à Apparence -> Menus
Ouvrez votre menu de navigation
Sélectionnez une page sous la structure du menu pour laquelle vous souhaitez sélectionner une icône
Choisissez l'icône, modifiez sa position et sa taille
Enregistrer le menu

C'est ça! Maintenant, allez trouver des icônes sympas que vous voulez dans votre menu et profitez de votre nouveau design. Pendant que vous travaillez toujours avec des icônes, n'oubliez pas que vous pouvez également ajouter facilement un favicon à votre blog WordPress.

Ajouter un bouton de connexion/déconnexion au menu

L'une des nombreuses fonctionnalités de WordPress que nous aimons est sa manière simple d'enregistrer de nouveaux utilisateurs. Le contrôle des différents rôles d'utilisateur sur la plate-forme populaire ne pourrait pas être plus facile ; il existe déjà des rôles enregistrés que vous pouvez attribuer et vous pouvez même créer de nombreux rôles d'utilisateur personnalisés pour les besoins de votre site.

Bien que leur enregistrement soit rapide et facile, prendre soin de vos utilisateurs peut être un travail difficile . Mais vous devez faire tout ce qui est en votre pouvoir pour que leur expérience sur le site Web soit aussi bonne que possible.

L'une des nombreuses choses que vous pouvez faire pour eux est de leur permettre de se connecter et de se déconnecter facilement de votre site. Pour que les liens de connexion/déconnexion soient toujours à la portée des utilisateurs, vous pouvez placer ces liens directement dans votre menu principal. Premièrement, avoir ces liens dans le menu est très pratique et deuxièmement, vos utilisateurs se sont probablement habitués à la fonctionnalité de diverses autres applications qui utilisent le même mode de connexion et de déconnexion.

Dans ce cas, il n'est pas nécessaire de saisir un autre plugin. Une simple fonction WordPress que nous allons vous montrer dans cette partie de l'article peut faire un excellent travail pour vous . Il placera automatiquement le bon lien sur votre menu. Cela signifie que lorsqu'un utilisateur est déconnecté, il obtiendra le lien « connexion » et vice versa. Ni vous ni l'utilisateur n'aurez à nouveau à vous soucier des boutons de connexion.

Si vous êtes prêt à ajouter cette fonctionnalité de connexion simple mais soignée au menu, voici ce que vous devrez faire :

Ouvrez fonctions.php
Copiez et collez les éléments suivants :

 function add_login_logout_link($items, $args) {
$loginoutlink = wp_loginout('index.php', false);
$items .= '<li>'. $loginoutlink .'</li>';
renvoyer des éléments $ ;
}
add_filter('wp_nav_menu_items', 
'add_login_logout_link', 10, 2);

Sauvegarder les modifications

Comme pour la plupart de nos extraits de code, vous avez terminé simplement en copiant et en collant la fonction dans le fichier. Une fois que vous avez terminé, vous pouvez continuer et recharger la page d'accueil. Puisque vous êtes toujours connecté, vous obtiendrez le lien « déconnexion » au dernier endroit de votre menu principal. Assurez-vous de vérifier l'intégralité de la fonction, alors essayez de vous déconnecter et de vous reconnecter pour vous assurer que tout va bien.

Maintenant que vous avez terminé avec cette petite fonctionnalité, n'oubliez pas que vous pouvez facilement rediriger les utilisateurs vers une autre page après une connexion réussie ou même afficher le contenu uniquement aux utilisateurs connectés ou déconnectés.

De plus, maintenant que vous avez un menu personnalisé, vous pourriez être intéressé à l'afficher n'importe où sur le site en fournissant un shortcode personnalisé.

Nous adorons personnaliser WordPress avec de petits extraits comme celui-ci, et vous ?

Affichez les menus WordPress où vous voulez

Après que WordPress a atteint la version 3.0, beaucoup de choses sont devenues plus faciles à utiliser. Parmi les différentes nouveautés, la création d'un menu de navigation est devenue accessible à tous et aujourd'hui, tout le monde peut créer ses propres menus en quelques clics de souris.

Tout en créant des menus où vous pouvez facilement lier n'importe quel article, page, catégorie ou tout lien externe est un jeu d'enfant, afficher le menu à différents endroits de votre site peut être un peu plus gros pour ceux qui ne sont pas dans le développement WordPress.

Selon le thème WordPress que vous utilisez, vous pouvez facilement afficher un menu nouvellement créé en haut de votre page où nous sommes tous habitués à trouver la navigation. Vous pouvez avoir la possibilité de placer votre menu dans la barre latérale ou même dans la zone de pied de page, mais que se passe-t-il si vous souhaitez afficher le menu dans vos articles, pages ou même dans le widget ?

Non, vous n'avez pas besoin de créer des listes personnalisées ou de retaper l'intégralité du code HTML pour répliquer les liens ; vous pouvez profiter des shortcodes et placer un menu existant où vous voulez !

Dans les lignes suivantes, nous sommes sur le point de vous montrer comment procéder et nous sommes sûrs que vous aimerez votre nouvelle fonctionnalité « menu dans le shortcode ».

Créez un shortcode et affichez les menus WordPress où vous voulez

Ouvrez le fichier functions.php
Copiez et collez le code qui enregistrera le shortcode :

 function menu_function($atts, $content = null) {
 extrait(
 shortcode_atts(
 array( 'nom' => null, ),
 $atts
 )
 );
 return wp_nav_menu(
 déployer(
 'menu' => $nom,
 'écho' => faux
 )
 );
 }
 add_shortcode('menu', 'menu_function');

Sauvegarder les modifications

Juste après avoir enregistré les modifications, vous pourrez afficher les menus WordPress où vous le souhaitez. Tout ce que vous avez à faire est d'écrire le shortcode où vous devez spécifier le nom du menu que vous allez utiliser :

[nom du menu = "menu principal"]

Dans la plupart des cas, votre menu principal aura le nom de "menu principal" attaché à lui-même. Mais si vous comptez utiliser un autre menu, entrez simplement son nom dans le shortcode. Vous n'avez pas besoin de connaître chaque nom de menu par cœur ; à la place, accédez à Apparence -> Menus et parcourez la liste des menus ou créez-en de nouveaux.

Puisque vous êtes désormais capable d'afficher les menus WordPress pratiquement n'importe où, vous pouvez créer de nombreuses navigations que vous allez utiliser sur votre site Web propulsé par WordPress. Vous pouvez en avoir un dans un article, un autre dans des fichiers modèles, un widget de texte, etc.

Comment ajouter un champ de recherche à votre menu WordPress

À moins que vous n'ayez supprimé la fonctionnalité, WordPress permet à vos visiteurs de rechercher dans l'ensemble de votre site. Nous avons mentionné cette fonctionnalité intéressante à plusieurs reprises et vous avons montré différentes choses que vous pourriez faire avec vos pages de recherche. Par exemple, vous pouvez facilement rediriger les utilisateurs vers la publication s'il n'y a qu'un seul résultat trouvé ou même configurer une recherche Google personnalisée.

Si vous avez parcouru vos widgets WP standard, vous avez probablement vu qu'il existe un widget de recherche prêt à être placé sur une barre latérale . Mais que se passe-t-il si vous souhaitez que votre champ de recherche apparaisse à côté de votre menu à la place ?

Dans les lignes suivantes, nous allons vous montrer une fonction qui prendra votre champ de recherche quotidien et le placera dans le menu de navigation.

Ajoutez un champ de recherche au menu :

Ouvrez fonctions.php
Copiez et collez les éléments suivants :

 add_filter( 'wp_nav_menu_items','add_search_box', 
10, 2 );
function add_search_box( $items, $args ) {
$items .= '<li>' . get_search_form( false ) . 
'</li>';
renvoyer des éléments $ ;
}

Sauvegarder les modifications

Pour être sûr que le code fonctionnera pour vous, assurez-vous que vous avez déjà ajouté un menu de navigation à votre site.

Le code est assez simple et sa seule fonction est d'ajouter le champ de recherche à votre menu de navigation . Très probablement, votre champ de recherche ne sera pas aligné là où vous le vouliez. Cela signifie que vous devrez indiquer à WordPress où placer le champ de recherche :

Ajoutez une classe à la balise <li> trouvée sur la troisième ligne de code :

 $items .= '<li class="searchbox-position">' . 
get_search_form( false ) . '</li>'

Sauvegarder les modifications
Ouvrez style.css
Copiez et collez le code CSS :

 .searchbox-position {
 marge supérieure : 15 px ;
 marge droite : 20 px ;
 }

Modifiez le code à votre guise
Sauvegarder les modifications

J'espère que vous avez parfaitement imbriqué la boîte à côté de votre menu. Il ne faut pas grand-chose pour mettre la boîte là où vous le voulez. N'oubliez pas de styliser le champ de recherche lui-même et de profiter de la fonctionnalité.

Si vous souhaitez plus de contrôle sur votre menu et votre champ de recherche, découvrez comment ajouter des icônes à votre menu et comment ajouter une option de recherche vocale pour les visiteurs qui aiment dicter leurs termes de recherche. Vous pouvez faire beaucoup plus avec votre menu et vos options de recherche, alors testez notre champ de recherche et apprenez quelque chose de nouveau.

Comment faire en sorte que le menu de navigation reste en haut de la page

Vous avez probablement vu des sites Web où les menus de navigation restent en haut de la page et vous suivent à chaque étape de votre aventure de défilement . Cette fonctionnalité peut être quelque chose que vous voulez sur votre site Web WordPress et dans cette partie du guide, nous sommes sur le point de vous montrer comment en créer une.

Non seulement il a un côté fonctionnel où le menu est toujours disponible à portée de main, mais il peut aussi être très beau et fluide.

Si vous avez un peu de connaissances en CSS, vous n'aurez aucun problème à rendre votre menu collant. Il vous suffit d'ajouter un morceau de code à votre fichier Style.css, après quoi vous pourrez profiter de votre nouvelle fonctionnalité de menu.

Ouvrez votre feuille de style (style.php)
Trouvez .nav-menu ou .genesis-nav-menu (ou similaire, selon le thème que vous utilisez)
Utilisez le code suivant pour votre conteneur de menu principal :

 .nav-menu {
 position:fixe;
 arrière-plan : #333 ;
 haut : 0px ;
 à droite : 0px ;
 à gauche : 0px ;
 index z : 99 ;
 }

Comme vous pouvez le deviner d'après le code, la partie importante se situe à la deuxième ligne où vous devez fixer la position de votre menu . Après cela, vous pouvez définir les éléments haut, droit et gauche à 0 pixel ou les déplacer à n'importe quelle distance du haut ou de la marge gauche et droite de la page (par exemple : top : 10px placera votre menu à 10 pixels de la marge supérieure de votre site).

Mettez à jour votre fichier et profitez de votre menu de navigation collant

Si vous n'aimez pas jouer avec le code, vous pouvez utiliser des plugins pour rendre vos menus collants.

Créez votre menu de navigation collant avec des plugins

Nous vous avons appris à créer un menu de navigation collant simplement en modifiant une ligne de code CSS dans votre thème. Mais, aussi facile que cela puisse être, tout le monde n'aime pas parcourir les fichiers WordPress et modifier le code eux-mêmes. Si vous êtes ce type de personne ou si vous avez besoin de plus de contrôle sur le menu, ne vous inquiétez pas. Vous pouvez facilement configurer votre menu et le rendre collant en utilisant des plugins . Dans cette partie de l'article, nous allons vous montrer quelques-uns des meilleurs.

Extension collante UberMenu

PRIX : 8 $

UberMenu Sticky Extension est un module complémentaire pour le plugin UberMenu, ce qui signifie que vous devez d'abord installer ce plugin pour que l'extension fonctionne. L'extension rend tout simple ; après l'installation, vous êtes prêt à rendre votre menu collant. Peu importe où vous placez votre menu, une fois qu'un utilisateur commence à faire défiler, le menu restera en haut de la page et le rendra facilement accessible.

Pour s'assurer que les utilisateurs mobiles peuvent accéder à chaque partie du menu, l'option persistante se désactive une fois qu'un appareil mobile est détecté. Il n'y a pas grand-chose à ajouter ici - consultez la démo sur le site officiel et si vous avez déjà UberMenu, allez-y et rendez votre menu collant.

monStickymenu

TARIF : Gratuit – DEMO

Ce plugin est conçu pour être utilisé sur le thème Twenty Thirteen. Mais si vous le modifiez un peu, vous pouvez l'utiliser sur n'importe quel thème que vous aimez. Par défaut, il utilise la classe CSS de navigation du thème « .navbar ». Donc, si vous voulez l'utiliser sur un autre thème, vous devez trouver la classe que votre thème utilise pour décrire le menu de navigation et changer le nom de cette classe.

Si votre thème est responsive, le plugin sera également responsive. Si vous souhaitez le modifier davantage, vous pouvez entrer vos styles CSS personnalisés et personnaliser encore plus votre menu collant.

Menu collant (ou n'importe quoi !) sur le défilement

PRIX : Gratuit

Ce plugin vous permettra de placer votre menu en haut et de le rendre collant. Mais pas seulement cela, le plugin vous permettra de rendre n'importe quel élément collant simplement en trouvant le bon sélecteur pour l'élément. Cela signifie que vous pouvez faire en sorte que votre logo ou même tout l'en-tête soit collé en haut de la page pendant que les utilisateurs parcourent votre site Web. Pour que tout fonctionne, vous devrez connaître un peu le HTML et le CSS afin de pouvoir trouver le bon sélecteur.

Comment supprimer les éléments de menu de niveau supérieur dans WordPress

Vous savez probablement déjà que WordPress est hautement personnalisable. Si vous savez coder ou au moins trouver les bons plugins, vous pouvez transformer votre backend ainsi que le frontend et présenter un site Web unique à vos visiteurs et à vos auteurs.

Dans cette partie, nous allons vous montrer un code simple qui vous permettra de supprimer les éléments de menu de niveau supérieur de vos pages d'administration WordPress.

Le code que vous pouvez trouver ci-dessous supprimera tous les éléments de menu de niveau supérieur pour tous les utilisateurs au lieu des administrateurs . Avant de continuer, vous devez savoir que cet extrait de code supprime uniquement les éléments de menu, mais que ces éléments seront toujours disponibles pour toute personne connaissant le chemin correct vers une page de paramètres. Si vous souhaitez restreindre complètement l'accès à certaines pages de menu, vous devrez modifier les capacités de l'utilisateur.

Supprimez les éléments de menu de niveau supérieur :

Ouvrez votre fichier functions.php
Copiez et collez le code suivant :

 if (!current_user_can( 'gérer_options' )) {
add_action( 'admin_menu', 'my_remove_menus', 999 );
}
function my_remove_menus() {
remove_menu_page( 'index.php' ); //Tableau de bord
remove_menu_page( 'edit.php' ); //Des postes
remove_menu_page( 'upload.php' ); //Médias
remove_menu_page( 'edit.php?post_type=page' ); //Pages
remove_menu_page( 'edit-comments.php' ); //Commentaires
remove_menu_page( 'themes.php' ); //Apparence
remove_menu_page( 'plugins.php' ); //Plugins
remove_menu_page( 'users.php' ); //Utilisateurs
remove_menu_page( 'tools.php' ); //Outils
remove_menu_page( 'options-general.php' ); //Paramètres
}

Sauvegarder les modifications

Comme ce code supprime tous les menus de niveau supérieur que vous ne voulez probablement pas faire, n'hésitez pas à modifier le code selon vos besoins. Chaque ligne « remove_menu_page » est chargée de supprimer une page (qui est décrite entre parenthèses ainsi que dans le commentaire à côté de la ligne de code). Ajoutez ou supprimez simplement une page que vous souhaitez supprimer de votre menu et enregistrez les modifications une fois de plus.

Maintenant que vous avez appris à supprimer les pages de niveau supérieur du menu, vous souhaiterez peut-être supprimer uniquement certaines des sous-pages situées sous celles de niveau supérieur.

Top 4 des plugins de menu pour WordPress

Une fois que vous aurez commencé à créer votre nouveau site Web, vous aurez tôt ou tard besoin d'un menu. Vous pouvez en créer un à l'aide d'une option de menu standard dans WordPress, mais si vous en voulez un plus professionnel, vous devrez connaître vos codes HTML et CSS. Cela signifie également que vous passerez du temps à tout concevoir pour qu'il fonctionne parfaitement et soit beau en même temps.

Mais si vous avez besoin d'une solution plus rapide ou si vous ne savez tout simplement pas comment coder votre propre menu sophistiqué, WordPress vous permet d'installer d'excellents plugins conçus pour créer de magnifiques menus en quelques clics. Sans ordre particulier, voici quelques-uns des meilleurs plugins de menu pour WordPress.

Menu Uber

PRIX : 20 $ – DÉMO

Avec plus de 43 000 ventes, Uber Menu est l'un des plugins les plus populaires pour WordPress . Une fois que vous aurez ouvert le site de démonstration et vu à quoi ressemble le menu créé avec ce plugin, vous comprendrez pourquoi il est si populaire. Et une fois que vous aurez commencé à lister ses fonctionnalités, vous en voudrez probablement une pour vous-même.

Les menus créés avec le menu Uber seront réactifs et tactiles pour vos visiteurs mobiles. Vous pouvez créer de superbes mises en page et placer des icônes, des images, des vidéos et des cartes dans votre menu. Le formulaire entier peut être placé dans un sous-menu afin que vous puissiez créer un formulaire de contact sans avoir à ajouter une page supplémentaire pour cela. Le plugin est hautement personnalisable et vous pouvez jouer avec plus de 50 paramètres de style avec un aperçu en direct. Vous pouvez créer des sous-menus automatiquement à partir de votre autre contenu, créer des onglets sous votre menu et bien plus encore.

Génération d'éléments dynamiques
Sous-menus à onglets
Interface utilisateur améliorée

Morph: Menu WordPress Fly-Out personnalisable

PRIX : 20 $ – DÉMO

Morph est un menu déroulant conçu pour les appareils mobiles. Mais, comme vous pouvez le voir sur la page de démonstration si vous l'ouvrez sur votre ordinateur personnel, il est également très beau sur le bureau.

En utilisant ce plugin, vous pouvez masquer un menu et l'appeler d'un simple clic . Dans la zone de menu, vous pouvez créer un menu déroulant standard, ajouter des images, des boutons de recherche et toute la zone est widgetisée, ce qui signifie que vous pouvez intégrer tout ce dont vous avez besoin et ce que vous voulez. Le plugin est très personnalisable, vous pouvez donc choisir les couleurs que vous voulez, modifier la hauteur des images et ajouter ou supprimer des éléments en fonction de vos besoins. Si vous envisagez de l'utiliser pour des appareils mobiles, vous pouvez facilement définir les résolutions pour lesquelles le menu apparaîtra.

Fonctionne très bien sur les ordinateurs de bureau et les appareils mobiles
Ajouter/supprimer des éléments personnalisables
Peut être déclenché par n'importe quel élément

Menu Héros

PRIX : 19 $ – DÉMO

Que vous souhaitiez un menu simple ou un "Mega Menu" complexe, vous pouvez en créer un avec le plugin Hero Menu. Chaque menu que vous créez sera réactif et aura fière allure sur n'importe quel appareil ; si vous choisissez de créer un méga menu, les éléments peuvent être affichés ou masqués afin que vous n'ayez pas à vous soucier de la disposition sur des écrans plus petits.

Il existe une prise en charge tactile spéciale pour Android, iOS et Windows Phone. Choisissez une barre de navigation pleine largeur ou largeur fixe où vous pouvez facilement ajouter des éléments supplémentaires simplement en utilisant une technique de glisser-déposer . Il existe plus de 60 palettes de couleurs prédéfinies et vous êtes libre d'utiliser chacune des polices Google gratuites. Rendez le menu collant, choisissez la distance d'activation… ce super plugin peut offrir bien plus, alors assurez-vous de consulter la liste complète des fonctionnalités sur CodeCanyon.

Générateur de structure de menu par glisser-déposer
Créer un menu simple ou un méga menu complexe
Navigation mobile spéciale

Barre Multi-X

PRIX : 16$ – DÉMO

La barre Multi-X est un plugin modulaire et vous permet de placer pratiquement tout ce que vous voulez dans la barre de navigation. Outre les éléments de menu, vous pouvez placer jusqu'à 8 éléments sur la barre - qu'il s'agisse d'un formulaire de contact, d'un formulaire de recherche, d'icônes de partage social, d'une zone de widget, etc.

Vous avez le choix entre deux thèmes différents et un thème personnalisé dans lequel vous pouvez définir vos propres couleurs tandis que le dégradé sera calculé automatiquement. La barre de navigation peut être placée sous forme de menu fixe ou déroulant. Si vous êtes un développeur, vous aimerez savoir qu'il existe un ensemble de crochets prêts pour vous si vous souhaitez créer un nouveau plugin à partir de la barre Multi-X. Ce plugin offre beaucoup, beaucoup plus, alors assurez-vous de jeter un œil à toutes les fonctionnalités de CodeCanyon.

8 modules fonctionnels embarqués
2 thèmes de couleurs + thème personnalisé
Position haut ou bas

Meilleurs plugins de menu mobile WordPress

Nous connaissons tous le chemin parcouru par la technologie. Les smartphones et les tablettes sont devenus incontournables et il y a un nombre croissant de propriétaires d'appareils mobiles. Les réseaux WiFi couvrent toutes les parties de nos villes et s'il n'y en a pas, vous pouvez toujours connecter votre appareil mobile à Internet via votre fournisseur. Tout cela signifie que le nombre d'internautes mobiles est plus élevé que jamais et que vous devez vous en occuper si vous exploitez un site Web.

Si vous créez un site mobile ou souhaitez en améliorer un, vous devez absolument créer un menu mobile spécial qui s'adaptera à n'importe quelle taille d'écran et permettra aux utilisateurs mobiles de naviguer plus facilement .

Avec WordPress, cette tâche n'est pas si difficile que vous pourriez le penser. Vous n'avez pas besoin de savoir comment coder ou comment configurer un menu. Tout ce dont vous avez besoin est un plugin que vous pouvez facilement installer et personnaliser selon vos besoins.

Dans cette partie du guide, nous sommes sur le point de vous montrer quelques-uns des meilleurs plugins premium qui peuvent créer un menu mobile pour votre site WordPress. Alors faisons défiler vers le bas et jetons un coup d'œil.

Tactile

PRIX : 18 $ – DÉMO

Ce plugin premium créera un en-tête mobile propre avec un menu mobile intégré. Les animations sont très simples et elles peuvent être vraiment belles et fluides sur un écran de smartphone. Avec Tactile, vous pouvez créer un menu accordéon à plusieurs niveaux, créer un menu horizontal à un niveau qui peut être glissé ou créer une barre latérale widgetisée qui peut voler dans votre site Web .

Tout est personnalisable, ce qui signifie que vous pouvez peindre vos éléments dans la couleur de votre choix, modifier les arrière-plans et définir leurs couleurs, opacités et bien plus encore. Votre menu peut être fixe ou positionné de manière absolue. Si vous souhaitez encore plus de contrôle sur les appareils mobiles, vous pouvez définir des résolutions pour lesquelles ce menu sera activé.

Plusieurs types de menus
Fonctions de recherche
Positionnement fixe/absolu

TouchezTouchez

PRIX : 10 $ – DÉMO

TapTap vous donnera le pouvoir de créer un menu mobile unique pour votre site WordPress. Comme vous pouvez le voir sur le site de démonstration, vous pouvez créer presque tout ce que vous imaginez et vos menus seront vraiment soignés. Avec ce plugin, vous pouvez créer des menus à plusieurs niveaux, décider quels éléments vous souhaitez afficher, ajouter des descriptions ou activer l'option de recherche intégrée .

Il existe deux modèles de boutons de menu et quelques animations parmi lesquelles choisir. La position de votre menu peut être fixe ou vous pouvez utiliser un positionnement absolu. Choisissez des styles d'arrière-plan et jouez avec de nombreuses options de style afin que vous puissiez parfaitement adapter le menu à votre thème. Enfin et surtout, TapTap vous permettra de choisir les résolutions sur lesquelles il s'affichera. Que demander de plus à un menu de navigation mobile ?

Menus à plusieurs niveaux
2 conceptions et animations de boutons de menu
Positionnement fixe/absolu

Mobi

PRIX : 16$ – DÉMO

Mobi est un autre plugin WordPress simple mais génial prêt à aider avec les sites Web mobiles. Avec cet ajout, votre thème responsive aura une navigation encore meilleure. Une fois que vous avez créé un menu à l'aide d' un générateur de menu glisser-déposer intuitif , vous pouvez le placer en haut ou en bas de votre site.

Tous les éléments de menu sont personnalisables et vous êtes libre d'ajouter des icônes de réseaux sociaux à votre barre de navigation. Il existe plus de 700 polices d'icônes et vous pouvez compléter votre conception en utilisant l'une des polices Google. Si vous en avez besoin, vous pouvez contrôler la visibilité des utilisateurs pour les invités et les utilisateurs connectés.

Personnalisation par glisser-déposer
Positionnement du menu en haut ou en bas
Visibilité de l'utilisateur pour les invités et les utilisateurs connectés

Wah-menu

PRIX : 44 $ – DÉMO

Wah-menu est un menu dockable parfait pour les sites Web mobiles, spécialement conçu pour la navigation tactile sur iPad. Avec ce plugin premium, vous pouvez ajouter jusqu'à 8 liens de menu qui seront bien intégrés sur le côté de votre site WordPress.

Une fois que vous avez cliqué sur une icône spécifique dans le menu, un sous-menu apparaîtra qui permet le HTML, les vidéos intégrées, les cartes et à peu près tout ce que vous voulez. Le plugin est hautement personnalisable, ce qui signifie que vous pouvez choisir parmi 8 couleurs d'accent, jouer avec la largeur du menu, les icônes, les liens, etc. La création de menu est très facile avec l'éditeur WYSIWYG. Que vous choisissiez d'utiliser le thème sombre ou clair, vous pouvez être sûr qu'il sera joli.

Éditeur WYSIWYG
Sous-menus avec prise en charge du HTML, des vidéos intégrées, etc.
Option d'état Out ou Docked

Menu Style de chemin

PRIX : 12 $ – DÉMO

Ce plugin premium est quelque peu différent de votre plugin habituel dédié à la création de menu. Au lieu d'une barre de menus classique ou d'un menu latéral, Path Style Menu crée un bouton . Après avoir activé un bouton, il affichera un menu autour du bouton dans un cercle, l'étendra en ligne dans la direction de votre choix ou même organisera vos icônes en arc de cercle.

S'il existe plusieurs niveaux de menu, le bouton créera un bouton de retour qui permettra aux utilisateurs de revenir au menu principal. Il y a des tonnes d'options de personnalisation et pour créer un menu ; vous pouvez simplement utiliser l'éditeur de menu standard de WordPress. Si vous recherchez un menu mobile unique, donnez une chance à Path Style Menu.

Créer un menu autour du bouton
Hautement personnalisable
Utiliser le menu WP standard pour éditer le menu

Navigateur de défilement

PRIX : 10 $ – DÉMO

Un autre plugin de menu unique qui vous offre d'excellentes fonctions et peut avoir fière allure sur votre site Web. Scrollnav se compose d'un cercle qui contient plusieurs options de menu . Il y a un lien vers la page d'accueil au milieu du bouton, le lien du haut vous amène logiquement en haut de la page, il y a un champ de recherche, un menu personnalisé et un lien personnalisé faisant partie du cercle.

Le menu personnalisé donnera suffisamment d'espace pour créer des menus entiers avec des sous-menus, il aura fière allure et vous donnera l'espace dont vous avez tant besoin sur votre site Web mobile. Vous pouvez choisir parmi plusieurs schémas de couleurs et tout est facile à configurer. Vous devriez certainement consulter le site de démonstration pour voir comment fonctionne ce petit plugin.

Bouton circulaire avec différentes fonctions
Menu personnalisé et partie lien personnalisé
Plusieurs schémas de couleurs

Faites défiler vers le menu

PRIX : 24 $ – DÉMO

Ce simple plugin premium vous donnera un menu latéral sympa conçu pour la navigation tactile iOS et Android. Une fois que vous avez créé un menu, il comportera des icônes qui renvoient à une autre partie de la page et défileront automatiquement.

Il est important de noter que ScrollTo n'est pas un menu de navigation complet , mais il ne fait défiler que vers une autre partie de la même page. Vous pouvez choisir parmi plus de 750 icônes ou vous pouvez utiliser vos propres images comme éléments de menu et il y a un espace supplémentaire pour les publicités. Pour que tout fonctionne, vous devrez avoir des connaissances de base en HTML afin de pouvoir suivre les instructions. Cela peut prendre quelques minutes de plus, mais le résultat final est superbe.

tactile
Plus de 750 icônes + images personnalisées
Espace publicitaire supplémentaire

Conclusion

Nous espérons que vous avez maintenant compris qu'il est difficile de gérer un site Web sans menu. Même si vous utilisez un one-pager, vous aurez toujours besoin d'une navigation entre les sections. Alors, pendant que vous êtes déjà là, prenez le temps de personnaliser votre menu WordPress et d'en faire le meilleur possible.