Façons rapides de créer une barre de défilement personnalisée dans WordPress

Il est prudent de dire que, pour une raison quelconque, vous voulez que votre site Web se démarque. Avoir une telle plate-forme garantira que la chose que vous mettez reste plus longtemps dans l'esprit du visiteur, et c'est presque exclusivement une bonne chose. Outre le contenu de votre site Web, une autre façon d'attirer l'attention sur votre produit est l'aspect visuel. Ce n'est en aucun cas une nouvelle connaissance. Il y a une raison pour laquelle McDonald's est rouge et jaune et Facebook bleu. Cependant, nous ne parlerons ici que d'une petite partie de l'expérience offerte par votre site Web. C'est une partie qui peut ne pas sembler trop importante, mais nous pensons qu'elle a toujours sa valeur - la barre de défilement. Dans les quelques lignes suivantes, vous apprendrez quelques moyens rapides de créer une barre de défilement personnalisée dans WordPress.

Des moyens simples pour créer une barre de défilement personnalisée dans WordPress

La création d'une barre de défilement personnalisée est une étape essentielle dans la création d'un thème personnalisé pour votre site Web. Donc, si vous souhaitez que votre site Web se démarque de toutes les manières , laissez-nous vous présenter la première méthode pour rendre cette barre de défilement unique.

Ajouter une barre de défilement personnalisée dans WordPress avec un plugin

Comme pour la plupart des choses que vous voulez faire dans WordPress, utiliser un plugin comme moyen de créer une barre de défilement lisse est une bonne voie à suivre. La raison pour laquelle cette méthode est fortement recommandée pour la plupart des utilisateurs est sa simplicité. En quelques clics simples, vous vous retrouverez devant une barre de défilement qui correspond à votre style. Néanmoins, il convient de mentionner un petit défaut qui accompagne cette méthode. À savoir, ce plugin ne prend pas en charge les navigateurs mobiles. Cependant, si cela ne semble pas être une grande perte, continuez la lecture.

Tout d'abord, vous devrez installer et activer le plugin Advanced Scrollbar . Cette action est assez simple :

1. Visitez les plugins, puis accédez à la page Ajouter un nouveau dans votre zone d'administration WordPress. Tapez le nom dudit plugin dans la barre de recherche et appuyez sur Entrée.
2. Une fois que vous avez localisé le plugin, cliquez sur le bouton "Installer maintenant". WordPress téléchargera et installera ensuite le plugin pour vous. Après cela, vous pourrez remarquer que le bouton "Installer maintenant" est devenu le bouton "Activer".
3. Cliquez sur ce bouton "Activer" et vous êtes prêt à partir.

Maintenant que vous avez installé et activé le plugin nécessaire, vous allez devoir le configurer. Bien que ce mot puisse sembler intimidant, le processus est très simple. Accédez simplement à Paramètres> Paramètres de barre de défilement de couleur personnalisée. Une fois là-bas, vous pourrez changer la couleur de votre barre de défilement, ainsi que les couleurs de fond de ses rails. Vous pouvez ensuite sélectionner le pas de défilement de la souris, qui correspond à la vitesse de défilement de la molette de la souris. Ce qui est également génial avec ce plugin, c'est qu'il vous permet de choisir si vous souhaitez masquer automatiquement la barre de défilement ou toujours l'afficher.

Vous avez également la possibilité de choisir l'option "Curseur uniquement", qui afficherait le rail de la barre de défilement sans le bouton. En dessous, vous pourrez trouver des options pour définir la vitesse de défilement, modifier l'alignement du rail (gauche ou droite) et activer le comportement tactile.

Après avoir parcouru toutes les options, joué avec les couleurs et trouvé la combinaison qui convient le mieux à votre style et à vos préférences, n'oubliez pas de cliquer sur le bouton "Enregistrer les modifications" afin de stocker tout ce travail. Ce faisant, vous pouvez visiter votre site Web pour voir ces magnifiques couleurs de barre de défilement personnalisées en action.

Ajouter des couleurs de barre de défilement personnalisées dans WordPress en utilisant CSS

Comme vous pouvez le déduire du sous-titre, cette méthode utilise CSS pour styliser votre barre de défilement. Cette méthode s'est avérée plus rapide que celle où vous utilisez jQuery. Cependant, il est important de mentionner qu'il ne fonctionne que sur les navigateurs de bureau utilisant des moteurs de rendu WebKit tels que Google Chrome, Safari et Opera. Il n'aura malheureusement aucun effet sur les navigateurs mobiles ou Firefox et Edge sur les ordinateurs de bureau. Cela dit, si c'est l'option que vous souhaitez opter, voici la marche à suivre.

Commencez par vous diriger vers Thèmes > Page personnalisée. Cette action lancera l'interface de personnalisation du thème WordPress. Vous pourrez voir l'aperçu en direct de votre site avec un tas d'options sur le plan gauche de votre écran . Continuez en cliquant sur l'onglet CSS supplémentaire dans le volet de gauche. L'onglet ressemblera à vous montrer une boîte simple où vous pourrez ajouter votre CSS personnalisé. Dès que vous ajoutez une règle CSS valide, vous la verrez appliquée au volet d'aperçu en direct de votre site Web. En ce qui concerne cette règle CSS valide, voici ce que vous devez ajouter pour que votre barre de défilement soit susceptible de changer :

::-webkit-barre de défilement {

-apparence webkit : aucune ;

}

::-webkit-barre de défilement {

largeur : 10px ;

}

::-webkit-scrollbar-piste {

fond : #ffb400 ;

borger : 1px solide #ccc ;

}

::-webkit-barre de défilement-pouce {

arrière-plan : #cc00ff ;

borger : 1px solide #eee ;

hauteur : 100px ;

rayon de bordure : 5 px ;

}

::-webkit-scrollbar-pouce:hover {

fond : bleu ;

N'oubliez pas que tout CSS personnalisé que vous ajoutez à l'aide du personnalisateur de thème n'est disponible qu'avec ce thème particulier. S'il vous arrive de changer de thème mais que vous souhaitez conserver cette barre de défilement personnalisée, vous devrez copier et coller cette règle CSS dans votre nouveau thème en utilisant la même méthode.

Bien que ce soit un excellent moyen de faire ressortir votre site Web, nous devons mentionner un inconvénient de la création d'une barre de défilement personnalisée dans WordPress. À savoir, par défaut, CSS n'est pas fourni avec un ensemble de règles qui vous permettrait de modifier les propriétés de la barre de défilement. Il existe quelques propositions pour ajouter cette option, mais elles ne sont pas prises en charge par la majorité des navigateurs pour le moment. Pour surmonter ce problème, les concepteurs et les développeurs utilisent des pseudo-éléments spécifiques au navigateur ou JavaScrip pour remplacer l'apparence de la barre de défilement par défaut. Ce sont les techniques que nous vous avons décrites. Néanmoins, vous devez garder à l'esprit que vous devez tester votre site avec différents navigateurs et appareils afin de vous assurer qu'il fonctionne comme vous l'avez imaginé sur tous les navigateurs. Une fois que vous avez couvert cela, il est prudent de dire que vous savez comment créer une barre de défilement personnalisée dans WordPress.