S’il y a un mot que vous associez à WordPress, ce serait « personnalisabilité ». C’est à cela que servent toutes les fonctionnalités de base, les plugins et les thèmes – pour modeler l’apparence et le comportement de votre site Web et l’adapter à vos désirs et besoins. C’est pourquoi vous pouvez faire des choses géniales comme personnaliser les couleurs du site Web, ajouter différents éléments comme des listes de prix, et généralement utiliser les choses dont vous avez besoin pour donner au site Web l’apparence et jouer le rôle que vous avez dans votre esprit pour cela.
Il y a, bien sûr, certains éléments personnalisables que les gens ont tendance à négliger. La barre de défilement, cette barre de votre navigateur qui se déplace lorsque vous faites défiler une page et vous permet de parcourir plus rapidement de longues pages, en fait partie. Si vous voulez que les personnes visitant votre site Web soient traitées avec une barre de défilement qui correspond au moins au schéma de couleurs de votre site Web, vous pouvez y arriver.
Dans cet article, nous allons vous montrer :
Si vous envisagez d’ajouter une barre de défilement personnalisée à votre site Web WordPress, les deux options principales que vous aurez sont de choisir un plugin ou de personnaliser la barre de défilement en utilisant CSS. Ces deux options ont leurs avantages et leurs inconvénients qui peuvent influencer votre choix.
Si vous utilisez le plugin pour ajouter une barre de défilement personnalisée, vous créerez un changement durable – tant que le plugin est installé. C’est aussi simple que d’installer un plugin et de jouer avec les paramètres jusqu’à ce que vous ayez trouvé ce qui vous convient le mieux.
L’inconvénient de l’utilisation du plugin est qu’il peut ralentir votre site Web. Même s’il ne s’agit que de quelques millisecondes, celles-ci ont tendance à s’additionner lorsque vous utilisez suffisamment de ces petits plugins apparemment sans importance.
Vous n’aurez pas de problèmes de vitesse lors de l’utilisation de CSS, cependant. Vous n’aurez rien à installer – vous pourrez apporter toutes les modifications via l’apparence client à Apparence > Personnaliser > CSS supplémentaire. Le code n’est pas trop difficile à apprendre non plus. Le personnalisateur vous montrera les changements en temps réel, ce qui est un bonus intéressant.
Le problème avec cette méthode est cependant que vous risquez de perdre vos personnalisations avec une mise à jour de thème. C’est pourquoi il est généralement recommandé d’utiliser un thème enfant lors de ce type de modifications.
Il existe quelques plugins gratuits que vous pouvez utiliser pour ajouter une barre de défilement personnalisée à votre site Web WordPress. Nous utiliserons le Styler de défilement plugin, car il vous permet de définir jusqu’à quatre couleurs sur votre barre de défilement. Dirigez-vous vers Plugins > Ajouter un nouveau, recherchez « scroll styler », puis installez-le et activez-le sur votre site Web.
Après avoir installé le plugin, rendez-vous sur Paramètres > Styler de défilement pour accéder aux options du plugin. Les deux premiers sont la largeur de la barre de défilement et le remplissage de la piste de la barre de défilement. Le premier des deux changera la largeur de votre barre de défilement, en pixels. Le second modifiera le rembourrage autour du pouce de la barre de défilement.
Les quatre options suivantes vous permettront de définir les différentes couleurs de la barre de défilement. La couleur d’arrière-plan de la piste de la barre de défilement est la couleur de la piste de la barre de défilement, et elle ne change pas. La couleur du pouce le fait, cependant. « Couleur d’arrière-plan » est la couleur du pouce lorsqu’il n’est pas actif. Lorsque vous survolez le pouce avec le curseur, sa couleur change en « couleur d’arrière-plan survolée ». Lorsque vous appuyez sur le pouce pour faire défiler la page, sa couleur devient « couleur d’arrière-plan active ».
La dernière option vous permet de définir le rayon de la bordure du pouce de la barre de défilement. Effectivement, cela vous permet d’arrondir les coins du pouce.
Une fois que vous avez choisi les options, n’oubliez pas d’enregistrer les paramètres et vous verrez le changement sur votre site Web.
Bien que la gamme d’options offertes par le plugin puisse être un peu modeste, cela peut être plus que suffisant pour créer une barre de défilement qui correspond au schéma de couleurs de votre site Web.
Votre deuxième option serait d’utiliser un CSS personnalisé pour modifier l’apparence de la barre de défilement. Comme nous l’avons mentionné précédemment, vous devrez naviguer vers Apparence > Personnaliser > CSS supplémentaire pour apporter des modifications.
La façon d’utiliser un CSS personnalisé pour modifier la barre de défilement consiste à utiliser des pseudo-éléments pour personnaliser certaines parties de la barre de défilement. Vous pouvez personnaliser :
Ainsi, lorsque vous souhaitez créer une barre de défilement personnalisée, vous pouvez utiliser ces pseudo-éléments comme ceci :
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: #f6f6f4;
}
::-webkit-scrollbar-thumb {
background: #86af49;
}
::-webkit-scrollbar-thumb:hover {
Background: #E5cdbc
}
Cela transformera la barre de défilement grise par défaut en quelque chose qui correspond mieux à ce thème particulier.
N’oubliez pas que vous pouvez ajouter des ombres, modifier le rayon des éléments et faire des choses supplémentaires pour rendre votre barre de défilement personnalisée vraiment spéciale. Vous aurez besoin de connaissances plus avancées en CSS pour profiter pleinement de cette méthode de personnalisation de la barre de défilement. Là encore, si vous avez suffisamment de temps libre et que vous êtes prêt à apprendre par essais et erreurs, vous trouverez forcément des combinaisons intéressantes.
Finissons-en !
La barre de défilement – un élément utile qui est souvent négligé lorsqu’il s’agit de personnaliser l’apparence de votre site Web. S’il s’agit d’un problème que vous souhaitez corriger, vous avez deux manières de le faire – soit avec un plugin, soit en ajoutant du CSS personnalisé. Chacun des deux a ses avantages et ses inconvénients, il peut donc être prudent de vérifier quels navigateurs votre public utilise le plus avant de faire votre choix. Après cela, il suffit de bricoler les options ou le code jusqu’à ce que vous obteniez des résultats satisfaisants.
Soutenez notre effort ❤️
Si vous avez apprécié cet article, pensez à laisser un pourboire pour nous aider à continuer à publier du contenu de qualité.
