Comment créer un Menu de WordPress Responsive Mobile-Ready

vous voulez créer un menu de WordPress réactif mobile prêt ? Les utilisateurs mobiles ont déjà dépassé des utilisateurs de bureau pour beaucoup de sites Web. Ajout d’un menu sensible mobile rend plus facile pour les utilisateurs de naviguer dans votre site Web. Dans cet article, nous vous montrerons comment créer facilement un menu de WordPress réactif mobile prêt.

Create mobile-responsive WordPress menu

il s’agit d’un tutoriel approfondi. Nous allons montrer la méthode de plugin pour les débutants (pas de codage) et la méthode de codage pour nos utilisateurs plus avancés.

à la fin de ce tutoriel, vous apprendrez comment créer un diapositive dans le menu mobile, menu déroulant, un mobile et activer/désactiver le menu mobile.

prêt ? Let’s get started.

méthode 1 : ajouter un Menu sensible dans WordPress en utilisant un Plugin

cette méthode est plus facile et recommandée pour les débutants car il ne nécessite aucun codage personnalisé.

dans cette méthode, nous allons créer un menu hamburger qui se glisse dehors sur l’écran du mobile.

Responsive menu plugin demo

la première chose que vous devez faire est installer et activer le plugin Menu sensible. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

lors de l’activation, le plugin ajoutera un nouveau menu point marqué « Menu adaptés » à votre barre d’admin de WordPress. En cliquant dessus vous emmènera sur la page de configuration du plugin.

Responsive menu settings

vous devez d’abord entrer la largeur de l’écran qui qui pointent le plugin va commencer à montrer menu sensible. La valeur par défaut est 800px qui devrait fonctionner pour la plupart des sites Web.

après cela, vous devez sélectionner le menu que vous souhaitez utiliser pour votre menu sensible. Si vous n’avez pas encore créé un menu, alors vous pouvez en créer un en visitant apparence « Menus . Consultez notre guide sur comment ajouter le menu de navigation dans WordPress pour obtenir des instructions détaillées.

option de téléchargement sur l’écran est de fournir une classe CSS pour votre menu actuel ne répond pas. Cela permettra le plugin cacher votre menu ne répond pas sur des écrans plus petits.

n’oubliez pas de cliquer sur le bouton « Update Options » pour enregistrer vos paramètres.

vous pouvez maintenant visiter votre site Web et redimensionner l’écran de votre navigateur pour voir le menu sensible à l’action.

Responsive menu plugin demo

le plugin menu sensible est livré avec beaucoup d’autres options qui vous permettre de modifier le comportement et l’apparence de votre menu sensible. Vous pouvez explorer ces options sur la page Paramètres du plugin et ajustez-les si nécessaire.

méthode 2 : ajouter un Drop Down sélectionnez Menu en utilisant un Plugin

une autre façon d’ajouter un menu réactif est en ajoutant un menu déroulant le menu « select ». Cette méthode ne nécessite pas des compétences de codage, il est donc recommandé pour les débutants.

Responsive select menu

la première chose que vous devez faire est installer et activer le plugin Menu de sélection réactive. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

lors de l’activation, vous devez visiter l’apparence « Responsive Select pour configurer les paramètres du plugin.

Select menu settings

vous avez besoin pour faire défiler jusqu’à la section « Activer les localités de thème ». Par défaut, le plugin est activé sur tous les emplacements de thème. Vous pouvez modifier cela en sélectivement allumer pour les emplacements de thème spécifique.

n’oubliez pas de cliquer sur enregistrer tous les paramètres pour enregistrer vos modifications.

vous pouvez maintenant visiter votre site Web et de redimensionner la fenêtre du navigateur pour afficher le menu sélection réactif en action.

méthode 3 : création de Mobile convivial sensible Menu avec effet de bouton

un de la méthode la plus couramment utilisée pour afficher le menu d’écrans mobiles est en utilisant l’effet de bascule.

cette méthode vous oblige à ajouter un code personnalisé à vos fichiers de WordPress. Si vous n’avez pas fait ça avant, alors jetez un oeil à notre guide sur collage extraits du Web dans WordPress.

tout d’abord vous avez besoin ouvrir un éditeur de texte tel que le bloc-notes et collez ce code.

 (function () {var nav = document.getElementById (« site-navigation »), bouton, menu ; Si ( ! nav) {return ; } bouton = NAV. getElementsByTagName (« bouton ») [0] ; menu = NAV. getElementsByTagName (« ul ») [0] ; Si ( ! bouton) {return ; } //Hide bouton si le menu est manquant ou vide. Si ( ! menu | | ! menu. childNodes. longueur) {bouton. style. display = « none » ; retour ; } bouton. onclick = function () {si (-1 == = menu. className. indexOf (« nav-menu »)) {menu. className = « nav-menu » ; } Si (-1 ! == bouton. className. indexOf (« activé/désactivé-on »)) {bouton. className = bouton. className. remplacer (« activé/désactivé-on », ' ') ; menu. className = menu. className. remplacer (« activé/désactivé-on », ' ') ; } else {className = bouton. + « activé/désactivé-on » ; menu className += « activé/désactivé-le » ; } }; }) (jQuery) ; 

maintenant, vous devez enregistrer ce fichier comme URnavigation.js sur votre bureau.

ensuite, vous devrez ouvrir un client FTP pour télécharger ce fichier à la / wp-content/themes/votre-thème-dir/js / dossier sur votre site WordPress.

remplacer votre-thème-répertoire par le répertoire de votre thème actuel. Si votre répertoire de thème n’a pas un dossier js, puis vous devrez le créer.

après avoir téléchargé le fichier JavaScript, l’étape suivante consiste à s’assurer que votre site WordPress charge ce JavaScript. Vous devrez ajouter le code suivant au fichier URfunctions.php de votre thème.

 wp_enqueue_script (« wpb_togglemenu », get_template_directory_uri (). « /js/navigation.js », array (« jquery »), « 20160909 », true) ; 

maintenant, nous devons ajouter le menu de navigation dans notre thème de WordPress. Habituellement le menu de navigation est ajouté dans le fichier de URheader.php un thème.

  

, nous partons du principe que l’emplacement de thème défini par votre thème est appelée primaire. Si ce n’est pas le cas, utilisez l’emplacement de thème défini par votre thème WordPress.

la dernière étape consiste à ajouter le CSS afin que notre menu utilise les classes CSS juste pour la bascule de travailler quand lus sur des appareils mobiles.

 / * Menu de navigation * /.-navigation principale {marge-haut : 24 PX ; haut de la marge : rem 1.714285714 ; text-align : center ; }. navigation principale li {marge-haut : 24 PX ; haut de la marge : rem 1.714285714 ; font-size : 12px ; la taille de police : rem 0.857142857 ; line-height : 1.42857143 ; }. navigation principale un {couleur : #5e5e5e ;}. navigation principale une : hover,.-un : concentrer la navigation principale {couleur : #21759b ;}. nav menu navigation principale ul.. menu nav navigation principale div. > ul {afficher : none ;} .-navigation principale ul. nav menu. activé/désactivé-sur,. menu-toggle {afficher : inline-block ;} CSS à utiliser sur des appareils mobiles @media écran et (min-width : 600px) {. nav menu principal-navigation ul.. menu de navigation principal div. nav > ul {border-bottom : 1px solid #ededed ; border-top : 1px solid #ededed ; afficher : inline-block ! important ; text-align : left ; Largeur : 100 % ; }. navigation principale ul {marge : 0 ; text-indent : 0 ; }. navigation principale li a,.-navigation principale li {afficher : inline-block ; text-decoration : none ; }. li navigation principale un {border-bottom : 0 ; couleur : #6a6a6a ; line-height : 3.692307692 ; text-transform : uppercase ; white-space : nowrap ; }. navigation principale li, une : navigation principale li de vol stationnaire. un : focus {color : # 000 ; }. navigation principale li {marge : 0 00 00 40px ; marge : 0 00 00 2.857142857 courroie ; position : relative ; }. navigation principale li ul {marge : 0 ; padding : 0 ; position : absolute ; dessus : 100 % ; z-index : 1 ; height : 1px ; Width : 1px ; overflow : hidden ; Clip : rect (1px 1px 1px, 1px) ; }. navigation principale li ul ul {top : 0 ; gauche : 100 % ; }. navigation principale ul li : hover ul, >. navigation principale ul li : focus > ul,. accent principal navigation. > ul {border-left : 0 ; Clip : hériter ; débordement : hériter ; hauteur : hériter ; Largeur : hériter ; }. navigation principale li ul li a {background : #efefef ; border-bottom : 1px solid #ededed ; afficher : bloquer ; font-size : 11px ; la taille de police : rem 0.785714286 ; line-height : 2.181818182 ; padding : 8px 10px ; Rembourrage : 0.571428571 rem rem 0.714285714 ; Largeur : 180px ; Largeur : rem 12.85714286 ; white-space : normal ; }. navigation principale li ul li un : hover,.-navigation principale li ul li un : focus {fond : #e3e3e3 ; couleur : # 444 ; }. courant principal navigation.-menu-point a, >. courant principal navigation.-menu-ancêtre > a,. current_page_item navigation principale. > a,. current_page_ancestor navigation principale. > un {color : # 636363 ; font-weight : bold ; }. menu-toggle {affichage : aucun ; }} 

vous pouvez maintenant visiter votre site Web et redimensionner l’écran de votre navigateur pour voir votre menu toggle réactive en action.

Toggle menu preview

dépannage : selon votre thème de WordPress, vous devrez peut-être modifier le CSS. Utilisation inspecter outil d’élément pour comprendre les conflits CSS de votre thème.

méthode 4 : ajouter un Menu de Mobile Slide-In dans WordPress

une autre technique courante pour ajouter un menu mobile consiste à utiliser un panneau encastrée (tel qu’illustré dans la méthode 1).

4 méthode nécessite que vous ajoutez du code à vos fichiers de thème WordPress, et c’est simplement une façon différente d’atteindre les mêmes résultats que la méthode 1.

tout d’abord, vous devez ouvrir un éditeur de texte tel que Notepad et ajoutez le code suivant dans un fichier texte vide.

 (function ($) {$ (« #toggle »). activer/désactiver (function () {$ (« #popout »). animer ({gauche : 0}, « slow », function () {$ (« #toggle ») .html (« close ») ; }); }, function () {$ (« #popout »). animer ({gauche : -250}, « slow », function () {$ (« #toggle ») .html (« close ») ; }); } ); }) (jQuery) ; 

n’oubliez pas de remplacer exemple.com par votre propre nom de domaine et votre-thème avec votre répertoire de thème actuel. Enregistrez ce fichier sous URslidepanel.js sur votre bureau.

maintenant, vous aurez besoin d’une image qui sera utilisée comme une icône de menu. Une icône de hamburger est plus couramment utilisée comme l’icône du menu. Vous y trouverez des tonnes de telles images de différents sites Web. Nous allons utiliser l’icône de menu de bibliothèque Google matériel icônes.

lorsque vous avez trouvé une image que vous souhaitez utiliser, enregistrez-le sous URmenu.png .

ensuite, vous devrez ouvrir un client de client FTP et télécharger le fichier URslidepanel.js / wp-content/votre-thème/js / dossier.

Si votre répertoire de thème n’a pas le dossier JS, alors vous devrez créer Titus et puis télécharger votre fichier.

après cela, vous devez télécharger le fichier à URmenu.png / wp-content/themes/votre-thème/images / dossier.

une fois que les fichiers sont téléchargés, nous devons faire en sorte que votre thème charge le fichier JavaScript, que vous venez d’ajouter. Nous y parviendrons par la file d’attente le fichier JavaScript.

ajoutez ce code dans le fichier URfunctions.php de votre thème.

 wp_enqueue_script (« wpb_slidepanel », get_template_directory_uri (). « /js/slidepanel.js », array (« jquery »), « 20160909 », true) ; 

maintenant, il faut ajouter le code dans le fichier URheader.php de votre thème pour afficher le menu de navigation. Vous devriez regarder pour le code semblable à celui-ci :

  « primaire », « menu_class » = > « nav-menu »)) ; ? > 

vous voulez encapsuler le menu de navigation existant avec le code HTML pour afficher votre menu de panneau glissière sur les petits écrans.

 
Show
« primaire », « menu_class » = > « nav-menu »)) ; ? >

Notez que le menu de navigation de votre thème est toujours là. Nous avons juste il entoure HTML dont nous avons besoin pour déclencher le menu slidepanel.

la dernière étape consiste à ajouter le CSS pour masquer l’icône du menu image sur des écrans plus larges. Vous aurez également besoin d’ajuster la position de l’icône de menu.

Voici un exemple CSS que vous pouvez utiliser comme point de départ :

 @media screen et (min-largeur : 769px) {#toggle {afficher : none ;}
} @media screen et (max-width : 768px) {#popout {position : fixe ; hauteur : 100 % ; width : 250px ; fond : rgb (25, 25, 25) ; fond : rgba (25, 25, 25, 9) ; couleur : blanc ; top : 0px ; gauche :-250px ; overflow : auto ;}
#toggle {float : droit ; position : fixe ; top : 60px ; droite : 45px ; largeur : 24 PX ; hauteur : 28px ;
}. nav-menu li {border-bottom : 1px solid #eee ; 
padding : 20px ;
Largeur : 100 % ;
}. nav-menu li : hover {background : #CCC ;}
.-menu nav li a {color : #FFF ; text-decoration : none ; largeur : 100 %;}} 

selon votre thème de WordPress, vous devrez peut-être modifier le CSS pour éviter les conflits.

Voici à quoi elle ressemblait, sur notre site de démo :

Responsive slide-in menu in WordPress

, nous espérons que cet article vous a aidé à apprendre comment créer un menu de WordPress réactif mobile prêt. Vous pouvez aussi veulent voir notre guide sur comment ajouter un menu sensible plein écran dans WordPress

Si vous avez aimé cet article, puis s’il vous plaît vous abonner à notre chaîne YouTube pour WordPress Tutoriels vidéo. Vous pouvez également nous trouver sur Twitter et Facebook.

laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *