{"id":11804,"date":"2020-05-18T04:41:15","date_gmt":"2020-05-18T04:41:15","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/comment-creer-un-menu-wordpress-reactif-pret-pour-les-appareils-mobiles\/"},"modified":"2020-05-18T04:41:15","modified_gmt":"2020-05-18T04:41:15","slug":"comment-creer-un-menu-wordpress-reactif-pret-pour-les-appareils-mobiles","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/comment-creer-un-menu-wordpress-reactif-pret-pour-les-appareils-mobiles\/","title":{"rendered":"Comment cr\u00e9er un menu WordPress r\u00e9actif pr\u00eat pour les appareils mobiles"},"content":{"rendered":"

Voulez-vous cr\u00e9er un menu WordPress r\u00e9actif pour les appareils mobiles? Les utilisateurs mobiles ont d\u00e9j\u00e0 surpass\u00e9 les utilisateurs de bureau sur de nombreux sites Web. L’ajout d’un menu mobile personnalisable facilite la navigation des utilisateurs sur votre site Web. Dans cet article, nous vous montrerons comment cr\u00e9er facilement un menu WordPress r\u00e9actif pr\u00eat pour les appareils mobiles. <\/p>\n

\"Cr\u00e9ez<\/p>\n

Ceci est un tutoriel approfondi. Nous montrerons \u00e0 la fois la m\u00e9thode compl\u00e9mentaire pour les d\u00e9butants (pas de codage) et la m\u00e9thode de codage pour nos utilisateurs plus avanc\u00e9s.<\/p>\n

\u00c0 la fin de ce didacticiel, vous apprendrez \u00e0 cr\u00e9er un menu contextuel coulissant, un menu contextuel d\u00e9roulant et un menu contextuel \u00e0 bascule.<\/p>\n

Pr\u00eat? Commen\u00e7ons.<\/p>\n

<\/span>Didacticiel vid\u00e9o<\/span><\/h4>\n

Abonnez-vous \u00e0 WPBeginner<\/p>\n

Si vous n’aimez pas la vid\u00e9o ou avez besoin de plus d’instructions, lisez la suite.<\/p>\n

<\/span>M\u00e9thode 1: ajouter un menu r\u00e9actif dans WordPress \u00e0 l’aide d’un plugin<\/span><\/h4>\n

Cette m\u00e9thode est plus facile et recommand\u00e9e pour les d\u00e9butants car elle ne n\u00e9cessite pas de codage personnalis\u00e9. <\/p>\n

Dans cette m\u00e9thode, nous allons cr\u00e9er un menu hamburger qui glisse sur l’\u00e9cran mobile.<\/p>\n

\"D\u00e9mo<\/p>\n

La premi\u00e8re chose \u00e0 faire est d’installer et d’activer le plugin Responsive Menu. Pour plus de d\u00e9tails, consultez notre guide \u00e9tape par \u00e9tape sur la fa\u00e7on d’installer un plugin WordPress.<\/p>\n

Lors de l’activation, le plugin ajoutera un nouvel \u00e9l\u00e9ment de menu intitul\u00e9 “Responsive Menu” \u00e0 votre barre d’administration WordPress. En cliquant dessus, vous acc\u00e9dez \u00e0 la page de configuration du plugin. <\/p>\n

\"Param\u00e8tres<\/p>\n

Vous devez d’abord entrer la largeur de l’\u00e9cran, \u00e0 quel point le plugin commencera \u00e0 afficher un menu r\u00e9actif. La valeur par d\u00e9faut est 800 px, ce qui devrait fonctionner pour la plupart des sites Web. <\/p>\n

Apr\u00e8s cela, vous devez s\u00e9lectionner le menu que vous souhaitez utiliser pour votre menu r\u00e9actif. Si vous n’avez pas encore cr\u00e9\u00e9 de menu, vous pouvez en cr\u00e9er un en visitant Apparence \u00bbMenus<\/strong>. Consultez notre guide sur la fa\u00e7on d’ajouter le menu de navigation dans WordPress pour des instructions d\u00e9taill\u00e9es. <\/p>\n

La derni\u00e8re option \u00e0 l’\u00e9cran consiste \u00e0 fournir une classe CSS pour votre menu actuel qui ne r\u00e9pond pas. Cela permettra au plugin de masquer son menu qui ne r\u00e9pond pas sur des \u00e9crans plus petits. <\/p>\n

N’oubliez pas de cliquer sur le bouton pour enregistrer vos param\u00e8tres.<\/p>\n

Vous pouvez maintenant visiter leur site Web et redimensionner l’\u00e9cran de votre navigateur pour voir le menu r\u00e9actif en action. <\/p>\n

\"D\u00e9mo<\/p>\n

Le plugin de menu r\u00e9actif est livr\u00e9 avec de nombreuses autres options qui vous permettent de modifier le comportement et l’apparence de votre menu r\u00e9actif. Vous pouvez explorer ces options sur la page de configuration du plugin et les ajuster si n\u00e9cessaire. <\/p>\n

<\/span>M\u00e9thode 2: ajouter un menu de s\u00e9lection d\u00e9roulant \u00e0 l’aide d’un plugin<\/span><\/h4>\n

Une autre fa\u00e7on d’ajouter un menu r\u00e9actif consiste \u00e0 ajouter un menu de s\u00e9lection d\u00e9roulant. Cette m\u00e9thode ne n\u00e9cessite aucune comp\u00e9tence en codage, elle est donc recommand\u00e9e pour les d\u00e9butants. <\/p>\n

\"Menu<\/p>\n

La premi\u00e8re chose \u00e0 faire est d’installer et d’activer le plugin Responsive Select Menu. Pour plus de d\u00e9tails, consultez notre guide \u00e9tape par \u00e9tape sur la fa\u00e7on d’installer un plugin WordPress.<\/p>\n

Apr\u00e8s l’activation, vous devez visiter Apparence \u00bbResponsive Select<\/strong> pour configurer les param\u00e8tres du plugin. <\/p>\n

\"S\u00e9lectionnez<\/p>\n

Vous devez faire d\u00e9filer la page jusqu’\u00e0 la section “Activer les emplacements de th\u00e8me”. Par d\u00e9faut, le plugin est activ\u00e9 dans tous les emplacements de th\u00e8mes. Vous pouvez changer cela en l’activant de mani\u00e8re s\u00e9lective pour des emplacements de th\u00e8me sp\u00e9cifiques. <\/p>\n

N’oubliez pas de cliquer sur le bouton Enregistrer tous les param\u00e8tres pour enregistrer vos modifications. <\/p>\n

Vous pouvez maintenant visiter leur site Web et redimensionner l’\u00e9cran du navigateur pour voir le menu de s\u00e9lection r\u00e9actif en action. <\/p>\n

<\/span>M\u00e9thode 3: cr\u00e9er un menu r\u00e9actif adapt\u00e9 aux mobiles avec effet de bascule<\/span><\/h4>\n

L’une des m\u00e9thodes les plus utilis\u00e9es pour afficher un menu sur des \u00e9crans mobiles consiste \u00e0 utiliser l’effet de bascule. <\/p>\n

Cette m\u00e9thode n\u00e9cessite que vous ajoutiez du code personnalis\u00e9 \u00e0 vos fichiers WordPress. Si vous ne l’avez pas encore fait, consultez notre guide sur le collage d’extraits du Web dans WordPress. <\/p>\n

Vous devez d’abord ouvrir un \u00e9diteur de texte comme le bloc-notes et coller ce code. <\/p>\n

( function() {\r\n\tvar nav = document.getElementById( 'site-navigation' ), button, menu;\r\n\tif ( ! nav ) {\r\n\t\treturn;\r\n\t}\r\n\r\n\tbutton = nav.getElementsByTagName( 'button' )[0];\r\n\tmenu   = nav.getElementsByTagName( 'ul' )[0];\r\n\tif ( ! button ) {\r\n\t\treturn;\r\n\t}\r\n\r\n\t\/\/ Hide button if menu is missing or empty.\r\n\tif ( ! menu || ! menu.childNodes.length ) {\r\n\t\tbutton.style.display = 'none';\r\n\t\treturn;\r\n\t}\r\n\r\n\tbutton.onclick = function() {\r\n\t\tif ( -1 === menu.className.indexOf( 'nav-menu' ) ) {\r\n\t\t\tmenu.className = 'nav-menu';\r\n\t\t}\r\n\r\n\t\tif ( -1 !== button.className.indexOf( 'toggled-on' ) ) {\r\n\t\t\tbutton.className = button.className.replace( ' toggled-on', '' );\r\n\t\t\tmenu.className = menu.className.replace( ' toggled-on', '' );\r\n\t\t} else {\r\n\t\t\tbutton.className += ' toggled-on';\r\n\t\t\tmenu.className += ' toggled-on';\r\n\t\t}\r\n\t};\r\n} )(jQuery);\r\n\r\n<\/pre>\n
Vous devez maintenant enregistrer ce fichier sous navigation.js sur votre bureau. <\/p>\n
Ensuite, vous devez ouvrir un client FTP pour t\u00e9l\u00e9charger ce fichier dans le dossier \/ wp-content \/ themes \/ your-theme-dir \/ js \/ sur votre site WordPress. <\/p>\n
Remplacez votre r\u00e9pertoire de th\u00e8mes par le r\u00e9pertoire de votre th\u00e8me actuel. Si votre r\u00e9pertoire de th\u00e8me n’a pas de dossier js, vous devez le cr\u00e9er. <\/p>\n
Apr\u00e8s avoir charg\u00e9 le fichier JavaScript, l’\u00e9tape suivante consiste \u00e0 s’assurer que votre site WordPress charge ce JavaScript. Vous devrez ajouter le code suivant au fichier functions.php de votre th\u00e8me. <\/p>\n
 \r\nwp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . '\/js\/navigation.js', array('jquery'), '20160909', true );\r\n<\/pre>\n
Maintenant, nous devons ajouter le menu de navigation \u00e0 notre th\u00e8me WordPress. Habituellement, le menu de navigation est ajout\u00e9 au fichier header.php d’un th\u00e8me. <\/p>\n
\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n