Sommaire
Vous souhaitez créer un menu de navigation flottant dans WordPress qui sera toujours visible, quelle que soit la longueur de la page ? Si oui, alors vous voulez créer un menu de navigation flottant collant. A sticky floating navigation menu suivra les visiteurs à travers une page et sera toujours visible. Il est très utile pour les pages les plus longues de votre site web.
Les menus de navigation sont essentiels pour aider vos visiteurs à naviguer sur votre site web. Plus le nombre de sections ajoutées à votre site est élevé, plus il est difficile pour les nouveaux visiteurs de naviguer sur votre site. Vous voulez toujours que votre site web soit compact et facile à parcourir à tout moment. Aujourd’hui, je vais vous montrer comment créer un menu de navigation collant dans WordPress en utilisant le menu collant (ou n’importe quoi !) du plugin Scroll.
Les menus de navigation sont largement utilisés et pour de bonnes raisons. Il est très simple de mettre en place un menu dans WordPress et cela devrait être l’une des premières choses que vous faites sur votre site web. Ces menus aident vos visiteurs à trouver leur chemin sur votre site web et vous permettent en même temps de promouvoir votre propre contenu, tel qu’il apparaît toujours dans le menu de navigation. Les menus ne servent pas seulement à afficher votre contenu. Ils peuvent comporter d’autres options telles que les coordonnées, les offres d’affiliation, les sites jumeaux, etc.
L’avantage d’un menu collant est qu’il suit vos utilisateurs sur une page. C’est génial car lorsqu’ils ont fini de lire un blog ou un article sur votre site, ils peuvent immédiatement utiliser le menu pour en trouver un nouveau à lire au lieu de devoir remonter jusqu’en haut. Cela leur fait gagner du temps et ils sont plus enclins à consulter votre autre contenu lorsqu’il est juste là.
Aujourd’hui, je vais vous montrer comment créer un menu de navigation collant dans WordPress en utilisant le menu collant (ou n’importe quoi !) du plugin Scroll. Il est très facile de créer un menu à l’aide de ce plugin, mais vous devez déjà avoir un menu en place sur votre site web ou en créer un d’abord et ensuite suivre ce tutoriel. Le plugin fera tout le travail et il vous suffit de connaître l’ID CSS du menu et ce plugin le rendra collant pour vous. Vous pouvez toujours modifier le menu chaque fois que vous ajoutez du contenu ou des sections à votre site web.
Commencez par cliquer sur Plugins et sélectionnez l’option Add New dans le panneau d’administration de gauche.
Recherchez le menu collant dans la zone de recherche disponible. Vous obtiendrez ainsi des plugins supplémentaires qui pourraient vous être utiles.
Faites défiler vers le bas jusqu’à ce que vous trouviez le Sticky Menu (ou Anything !) sur le plugin Scroll et cliquez sur le bouton “Install Now” et activez le plugin pour l’utiliser.
Dans le panneau d’administration de gauche, cliquez sur Paramètres et sélectionnez l’option Menu collant (ou N’importe quoi !). La page principale des paramètres s’affichera.
La première chose dont vous aurez besoin est un identifiant CSS. Pour l’obtenir, il vous suffit de vous rendre sur la page en direct de votre site web. Allez dans le menu de votre site et faites un clic droit. Sélectionnez l’option Inspecter. Vous verrez l’écran de votre navigateur se diviser entre le site web et le code. Faites défiler le code jusqu’à ce que vous trouviez la ligne suivante.
nav id=””CSS” id”=”” class=””main-navigation”” role=””navigation””
p
Sur la page en direct, au lieu de l’ID CSS, vous aurez un numéro d’identification réel. Surlignez-le, copiez-le et collez-le dans la première zone de texte, mais ajoutez un # devant le numéro d’identification.
/nav
La deuxième option de l’écran des paramètres consiste à choisir l’espace que vous souhaitez donner au sticky en haut de l’écran. Il est mesuré en pixels et je recommande de le laisser vide et de jouer avec les paramètres une fois la page mise en ligne. La case suivante est déjà cochée par défaut et ajoutera de l’espace pour la barre d’administration. Si vous ne voulez pas que cela soit présent, alors décochez simplement la case.
La quatrième option vous aidera à garder votre site web mobile. Cela permettra d’éliminer le menu collant lorsqu’un écran est plus petit que la taille souhaitée. C’est important pour un écran mobile, car il n’y a pas beaucoup de place au départ. Je vous recommande de regarder les tailles d’écran de téléphone les plus populaires et de les utiliser comme entrée. Si vous n’avez pas fait d’autres efforts pour rendre votre site web compatible avec les téléphones portables, vous pouvez aussi laisser ce champ vide, mais il y a un très grand pourcentage de trafic qui provient des utilisateurs de téléphones portables.
La dernière case a l’effet inverse de la quatrième. Elle permet d’éliminer le menu collant lorsque l’écran a une certaine taille. Cela n’a pas beaucoup d’utilité, mais vous pouvez choisir une taille d’écran si vous le souhaitez. Une fois que vous avez sélectionné tous les paramètres souhaités, cliquez sur le bouton “SAUVEGARDER LES PARAMÈTRES”.
Félicitations, vous pouvez maintenant vous rendre sur votre site web en direct et constater que le menu collant fonctionne. Gardez à l’esprit que si vous ne pouvez pas faire défiler une page assez loin, elle ne bougera pas. Si cela ne fonctionne pas, vérifiez que l’ID CSS est correct et qu’il y a un # devant. N’oubliez pas que vous pouvez toujours ajouter un espace en haut de l’écran si vous pensez qu’il serait plus esthétique à tout moment.
Aidez toujours vos visiteurs à trouver votre contenu
Un système de navigation peut certainement aider vos visiteurs à localiser les nouvelles sections, les blogs et les autres contenus proposés par votre site. Les menus sont des outils très puissants pour tout site web. Assurez-vous toujours que les éléments de votre menu sont faciles à comprendre et fonctionnent correctement. Par exemple, ne créez pas un article intitulé “Chiens” et ne le faites pas précéder d’un lien vers une page “Chats”.
L’avantage d’un système de navigation collant est qu’il vous suivra les visiteurs au bas de la page. C’est très bien car s’ils ont apprécié le contenu, ils en voudront davantage et pourront utiliser le menu de navigation pour localiser plus de contenu. Vous pouvez également utiliser le menu pour annoncer un contenu moins populaire dans l’espoir que vos visiteurs l’essaieront et l’apprécieront.
Avez-vous ajouté des options de taille d’écran minimale ou maximale pour les écrans mobiles et les écrans d’ordinateur plus grands ? Trouvez-vous que l’ajout d’un espace améliore l’aspect du menu collant lorsque vous faites défiler les pages ?
