![\"Menu](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/slide-panel-menu.png\" "\\"Menu")
<\/p>\nR\u00e9cemment, un de nos utilisateurs nous a demand\u00e9 comment remplacer leur menu de navigation par un menu du panneau coulissant jQuery. Le menu du panneau coulissant peut \u00eatre utilis\u00e9 pour am\u00e9liorer consid\u00e9rablement l’exp\u00e9rience utilisateur sur les sites mobiles. Dans cet article, nous vous montrerons comment ajouter un menu de panneau de diapositives dans des th\u00e8mes WordPress.<\/p>\n
<\/p>\n
Remarque: il s’agit d’un didacticiel de niveau interm\u00e9diaire qui n\u00e9cessite une connaissance suffisante de HTML et CSS.<\/p>\n
Le but ici est d’afficher un menu de panneau de diapositives aux utilisateurs sur des \u00e9crans plus petits tout en conservant le menu par d\u00e9faut de notre th\u00e8me afin que les utilisateurs d’ordinateurs portables et de bureau puissent voir le menu complet. Avant de commencer, il est important de savoir qu’il existe de nombreux th\u00e8mes WordPress diff\u00e9rents, et vous devrez traiter un peu de CSS plus tard. <\/p>\n
La premi\u00e8re chose \u00e0 faire est d’ouvrir un \u00e9diteur de texte brut sur votre ordinateur, comme le Bloc-notes, et de cr\u00e9er un nouveau fichier. Copiez et collez ce code: <\/p>\n
\r\n\r\n(fonction ($) {\r\n$ ('# bascule'). bascule (\r\nune fonction () {\r\n$ ('# popout'). animate ({left: 0}, 'slow', function () {\r\n$ ('# bascule'). html ('![\"proche\"](\"https:\/\/www.example.com\/wp-content\/themes\/your-theme\/images\/menu.png\")
');\r\n });\r\n }, \r\n function() {\r\n $('#popout').animate({ left: -250 }, 'slow', function() {\r\n $('#toggle').html('');\r\n});\r\n}\r\n);\r\n}) (jQuery);\r\n<\/pre>\nRemplacez example.com par votre propre nom de domaine et remplacez \u00e9galement votre th\u00e8me par votre r\u00e9pertoire de th\u00e8me r\u00e9el. Enregistrez ce fichier sous slidepanel.js sur votre bureau. Ce code utilise jQuery pour basculer un menu de panneau coulissant. Il anime \u00e9galement l’effet de bascule. <\/p>\n
Ouvrez un client FTP comme Filezilla et connectez-vous \u00e0 votre site Web. Ensuite, allez dans votre r\u00e9pertoire de th\u00e8mes et si vous avez un dossier js, ouvrez-le. Si votre r\u00e9pertoire de th\u00e8me n’a pas de dossier js, vous devez en cr\u00e9er un et charger le fichier slidepanel.js dans le dossier js. <\/p>\n
L’\u00e9tape suivante consiste \u00e0 concevoir ou \u00e0 trouver une ic\u00f4ne de menu. L’ic\u00f4ne de menu la plus utilis\u00e9e est celle \u00e0 trois lignes. Vous pouvez en cr\u00e9er un avec Photoshop ou trouver l’une des nombreuses images google existantes. Pour ce didacticiel, nous utilisons une ic\u00f4ne de menu 27x23px. Une fois que vous avez cr\u00e9\u00e9 ou trouv\u00e9 votre ic\u00f4ne de menu, renommez-la en menu.png et chargez-la dans le dossier images de votre r\u00e9pertoire de th\u00e8mes. <\/p>\n
L’\u00e9tape suivante consiste \u00e0 mettre en file d’attente le fichier javascript pour le panneau de diapositives dans WordPress. Fondamentalement, copiez et collez simplement ce code dans le fichier functions.php de votre th\u00e8me. <\/p>\n
\r\nwp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '\/js\/slidepanel.js', array('jquery'), '20131010', true );\r\n<\/pre>\nMaintenant que tout est configur\u00e9, vous devez modifier le menu par d\u00e9faut de votre th\u00e8me. G\u00e9n\u00e9ralement, la plupart des th\u00e8mes affichent des menus de navigation dans le fichier header.php du th\u00e8me. Ouvrez le fichier header.php et recherchez la ligne similaire \u00e0 celle-ci: <\/p>\n
\n