Voulez-vous ajouter une barre de défilement personnalisée dans WordPress? La modification de l’apparence de la barre de défilement peut la faire ressortir lors de la création d’un thème personnalisé pour votre site Web.
Dans cet article, nous vous montrerons comment ajouter facilement une barre de défilement personnalisée dans WordPress. Nous vous montrerons deux solutions et vous pourrez choisir celle qui vous convient le mieux.
Problèmes avec les couleurs personnalisées sur la barre de défilement
Par défaut, CSS n’inclut pas un ensemble de règles que vous pouvez utiliser pour modifier les propriétés de la barre de défilement. Il y a quelques suggestions pour l’ajouter, mais la plupart des navigateurs ne sont pas actuellement pris en charge.
Pour éviter cela, les concepteurs et les développeurs utilisent des éléments spécifiques au navigateur ou basés sur JavaScript pour remplacer l’apparence de la barre de défilement standard.
Nous vous montrerons les deux techniques. Veuillez noter, cependant, que vous devez tester votre site avec différents navigateurs et appareils pour vous assurer qu’il fonctionne correctement dans tous les navigateurs.
Voyons comment ajouter des couleurs de barre de défilement personnalisées dans WordPress.
Méthode 1. Ajouter une barre de défilement personnalisée dans WordPress avec un plugin
Cette méthode est plus simple et recommandée pour la plupart des utilisateurs. Cependant, les navigateurs mobiles ne sont pas pris en charge.
Tout d’abord, vous devez installer et activer le plugin Advanced Scroll Bar. Pour plus d’informations, consultez notre guide étape par étape pour installer un plugin WordPress.
Après l’activation, vous devez vous rendre Paramètres »Paramètres définis par l’utilisateur pour la barre de défilement des couleurs Configurez la page du plugin.
À partir de là, vous pouvez modifier la couleur de la barre de défilement et les couleurs d’arrière-plan de la barre de défilement. Ensuite, vous pouvez sélectionner l’étape de défilement de la souris, qui est la vitesse de défilement de la molette de la souris.
Vous pouvez également choisir de masquer automatiquement la barre de défilement ou de toujours l’afficher.
Vous pouvez choisir l’option Curseur uniquement, qui affiche la barre de défilement, mais pas le bouton.
En dessous, vous trouverez des options pour définir la vitesse de défilement, changer l’orientation de la piste (gauche ou droite) et activer le comportement tactile.
N’oubliez pas de cliquer sur le bouton «Enregistrer les modifications» pour enregistrer vos paramètres.
Vous pouvez maintenant visiter leur site Web pour voir les couleurs de vos barres de défilement personnalisées en action.
Méthode 2. Ajouter des couleurs de barre de défilement personnalisées dans WordPress avec CSS
Cette méthode utilise CSS pour formater la barre de défilement. C’est plus rapide que d’utiliser jQuery.
Cependant, il ne fonctionne que sur les navigateurs de bureau qui utilisent un moteur de rendu WebKit comme Google Chrome, Safari, Opera et autres.
Cela n’a aucun effet sur les navigateurs mobiles ou Firefox et Edge sur les ordinateurs de bureau.
Vous devez ajouter le CSS personnalisé suivant à votre thème WordPress.
:: – webkit-scrollbar {
-apparence web: aucun;
}
:: – webkit-scrollbar {
largeur: 10 px;
}
:: – webkit-scrollbar-track {
fond: # ffb400;
bordure: 1px solid #ccc;
}
:: – webkit-scrollbar-thumb {
fond: # cc00ff;
bord: 1px solide #eee;
hauteur: 100 px;
rayon de bord: 5px;
}
:: – webkit-scrollbar-thumb: hover {
fond bleu;
}
Vous pouvez modifier les couleurs et autres propriétés CSS à tout moment.
N’oubliez pas d’enregistrer vos modifications lorsque vous êtes satisfait. Vous pouvez le visualiser dans un navigateur compatible.
C’était à quoi il ressemblait sur notre site de démonstration lors de l’affichage dans Google Chrome sur un ordinateur Mac.
Nous espérons que cet article vous a aidé à apprendre à ajouter une barre de défilement personnalisée dans WordPress. Vous pouvez également consulter notre guide sur la façon de créer une mise en page WordPress personnalisée sans écrire de code.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour regarder des vidéos de didacticiel WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
