Comment ajouter un menu de panneau de diapositives dans les thèmes WordPress

Récemment, un de nos utilisateurs nous a demandé comment remplacer son menu de navigation par un menu du panneau de diapositives jQuery. Le menu du panneau de diapositives peut être utilisé pour améliorer considérablement l'expérience utilisateur sur les sites mobiles. Dans cet article, nous allons vous montrer comment ajouter un menu de panneau de diapositives dans les thèmes WordPress..

Remarque: il s’agit d’un tutoriel de niveau intermédiaire qui nécessite des connaissances suffisantes en HTML et CSS..

Remplacement du menu par défaut par un menu de panneau de diapositives dans WordPress

L'objectif ici est d'afficher un menu de panneau de diapositives pour les utilisateurs sur des écrans plus petits tout en conservant le menu par défaut de notre thème afin que les utilisateurs d'ordinateurs portables et de bureaux puissent voir le menu complet. Avant de commencer, il est important de savoir qu'il existe de nombreux thèmes WordPress différents et qu'il vous faudra traiter un peu de CSS ultérieurement..

La première chose à faire est d’ouvrir un éditeur de texte en clair sur votre ordinateur, tel que le Bloc-notes, et de créer un nouveau fichier. Copiez et collez ce code:

 (function ($) $ ('# toggle'). toggle (fonction () $ ('# popout'). animate (left: 0, 'slow', fonction () $ ('# toggle' ) .html (''); ); , function () $ ('# popout'). animate (left: -250, 'slow', function () $ ('# toggle'). html (''); ); ); ) (jQuery); 

Remplacer exemple.com avec votre propre nom de domaine, et également remplacer votre thème avec votre répertoire de thèmes actuel. Enregistrez ce fichier sous le nom slidepanel.js sur votre bureau. Ce code utilise jQuery pour basculer d'un menu du panneau de diapositives. Il anime également l’effet de bascule.

Ouvrez un client FTP comme Filezilla et connectez-vous à votre site Web. Ensuite, allez dans votre répertoire de thème et s'il a un dossier js, ouvrez-le. Si votre répertoire de thème ne contient pas de dossier js, vous devez en créer un et télécharger le fichier slidepanel.js dans le dossier js..

L'étape suivante consiste à concevoir ou à rechercher une icône de menu. L'icône de menu la plus couramment utilisée est celle comportant trois lignes. Vous pouvez en créer une à l'aide de Photoshop ou trouver l'une des nombreuses images existantes de Google. Pour ce tutoriel, nous utilisons une icône de menu de 27x23 pixels. Une fois que vous avez créé ou trouvé votre icône de menu, renommez-la en menu.png et chargez-la dans le dossier images de votre répertoire de thèmes..

L'étape suivante consiste à mettre en file d'attente le fichier JavaScript pour le panneau de diapositives dans WordPress. Fondamentalement, il suffit de copier et coller ce code dans le thème de votre thème. functions.php fichier.

 wp_enqueue_script ('wpb_slidepanel', get_template_directory_uri (). '/js/slidepanel.js', array ('jquery'), '20131010', true); 

Maintenant que tout est configuré, vous devez modifier le menu par défaut de votre thème. En général, la plupart des thèmes affichent des menus de navigation dans leurs thèmes respectifs. header.php fichier. Ouvrir header.php déposer et trouver la ligne semblable à celle-ci:

  'primary', 'menu_class' => 'nav-menu')); ?> 

Le but ici est d’envelopper le menu de navigation de votre thème avec le code HTML pour afficher le menu de votre panneau de diapositives sur des écrans plus petits. Nous allons l'envelopper dans un et . Comme ça:

    'primary', 'menu_class' => 'nav-menu')); ?>  

Remplacez example.com par votre propre nom de domaine et your-theme par votre répertoire de thèmes. Enregistrez vos modifications.

La dernière étape consiste à utiliser CSS pour masquer l'icône de menu pour les utilisateurs avec des écrans plus grands et l'afficher aux utilisateurs avec des écrans plus petits. Nous devons également ajuster la position de l'icône de menu et l'apparence du panneau de diapositives. Copiez et collez ce CSS dans la feuille de style de votre thème.

 Écran @média et (largeur minimale: 769px) #toggle display: none;  @ Écran multimédia et (largeur maximale: 768px) #popout position: fixed; hauteur: 100%; largeur: 250px; arrière-plan: RGB (25, 25, 25); arrière-plan: rgba (25, 25, 25, .9); Couleur blanche; en haut: 0px; à gauche: -250px; débordement: auto;  #toggle float: right; position: fixe; en haut: 60px; à droite: 45px; largeur: 28px; hauteur: 24px;  .nav-menu li border-bottom: 1px solid #eee; rembourrage: 20px; largeur: 100%;  .nav-menu li: survolez background: #CCC;  .nav-menu li a color: #FFF; texte-décoration: aucun; largeur: 100%;  

N'oubliez pas que le menu de navigation de votre thème peut utiliser différentes classes CSS et qu'elles peuvent entrer en conflit avec ce style CSS. Cependant, vous pouvez résoudre ces problèmes en utilisant l'outil Inspecteur de Chrome pour savoir quelles classes css sont en conflit dans votre feuille de style. Jouez avec le CSS pour correspondre à votre style et vos besoins.

Nous espérons que ce tutoriel vous a aidé à ajouter un menu de panneau de diapositives dans WordPress à l'aide de jQuery. Pour les commentaires et les questions s'il vous plaît laissez un commentaire ci-dessous et n'oubliez pas de nous suivre sur Google+