{"id":30395,"date":"2020-07-14T23:52:06","date_gmt":"2020-07-14T23:52:06","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/comment-ajouter-une-barre-de-defilement-personnalisee-dans-wordpress\/"},"modified":"2020-07-14T23:52:06","modified_gmt":"2020-07-14T23:52:06","slug":"comment-ajouter-une-barre-de-defilement-personnalisee-dans-wordpress","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/comment-ajouter-une-barre-de-defilement-personnalisee-dans-wordpress\/","title":{"rendered":"Comment ajouter une barre de d\u00e9filement personnalis\u00e9e dans WordPress"},"content":{"rendered":"

Voulez-vous ajouter une barre de d\u00e9filement personnalis\u00e9e dans WordPress? La modification de l’apparence de la barre de d\u00e9filement peut la faire ressortir lors de la cr\u00e9ation d’un th\u00e8me personnalis\u00e9 pour votre site Web.<\/p>\n

Dans cet article, nous vous montrerons comment ajouter facilement une barre de d\u00e9filement personnalis\u00e9e dans WordPress. Nous vous montrerons deux solutions et vous pourrez choisir celle qui vous convient le mieux.<\/p>\n

<\/span>Probl\u00e8mes avec les couleurs personnalis\u00e9es sur la barre de d\u00e9filement<\/span><\/h4>\n

Par d\u00e9faut, CSS n’inclut pas un ensemble de r\u00e8gles que vous pouvez utiliser pour modifier les propri\u00e9t\u00e9s de la barre de d\u00e9filement. Il y a quelques suggestions pour l’ajouter, mais la plupart des navigateurs ne sont pas actuellement pris en charge.<\/p>\n

Pour \u00e9viter cela, les concepteurs et les d\u00e9veloppeurs utilisent des \u00e9l\u00e9ments sp\u00e9cifiques au navigateur ou bas\u00e9s sur JavaScript pour remplacer l’apparence de la barre de d\u00e9filement standard.<\/p>\n

Nous vous montrerons les deux techniques. Veuillez noter, cependant, que vous devez tester votre site avec diff\u00e9rents navigateurs et appareils pour vous assurer qu’il fonctionne correctement dans tous les navigateurs.<\/p>\n

Voyons comment ajouter des couleurs de barre de d\u00e9filement personnalis\u00e9es dans WordPress.<\/p>\n

<\/span>M\u00e9thode 1. Ajouter une barre de d\u00e9filement personnalis\u00e9e dans WordPress avec un plugin<\/span><\/h4>\n

Cette m\u00e9thode est plus simple et recommand\u00e9e pour la plupart des utilisateurs. Cependant, les navigateurs mobiles ne sont pas pris en charge.<\/p>\n

Tout d’abord, vous devez installer et activer le plugin Advanced Scroll Bar. Pour plus d’informations, consultez notre guide \u00e9tape par \u00e9tape pour installer un plugin WordPress.<\/p>\n

Apr\u00e8s l’activation, vous devez vous rendre Param\u00e8tres \u00bbParam\u00e8tres d\u00e9finis par l’utilisateur pour la barre de d\u00e9filement des couleurs<\/strong> Configurez la page du plugin.<\/p>\n

\"Param\u00e8tres<\/p>\n

\u00c0 partir de l\u00e0, vous pouvez modifier la couleur de la barre de d\u00e9filement et les couleurs d’arri\u00e8re-plan de la barre de d\u00e9filement. Ensuite, vous pouvez s\u00e9lectionner l’\u00e9tape de d\u00e9filement de la souris, qui est la vitesse de d\u00e9filement de la molette de la souris.<\/p>\n

Vous pouvez \u00e9galement choisir de masquer automatiquement la barre de d\u00e9filement ou de toujours l’afficher.<\/p>\n

Vous pouvez choisir l’option Curseur uniquement, qui affiche la barre de d\u00e9filement, mais pas le bouton.<\/p>\n

\"Options<\/p>\n

En dessous, vous trouverez des options pour d\u00e9finir la vitesse de d\u00e9filement, changer l’orientation de la piste (gauche ou droite) et activer le comportement tactile.<\/p>\n

N’oubliez pas de cliquer sur le bouton \u00abEnregistrer les modifications\u00bb pour enregistrer vos param\u00e8tres.<\/p>\n

Vous pouvez maintenant visiter leur site Web pour voir les couleurs de vos barres de d\u00e9filement personnalis\u00e9es en action.<\/p>\n

\"Afficher<\/p>\n

<\/span>M\u00e9thode 2. Ajouter des couleurs de barre de d\u00e9filement personnalis\u00e9es dans WordPress avec CSS<\/span><\/h4>\n

Cette m\u00e9thode utilise CSS pour formater la barre de d\u00e9filement. C’est plus rapide que d’utiliser jQuery.<\/p>\n

Cependant, il ne fonctionne que sur les navigateurs de bureau qui utilisent un moteur de rendu WebKit comme Google Chrome, Safari, Opera et autres.<\/p>\n

Cela n’a aucun effet sur les navigateurs mobiles ou Firefox et Edge sur les ordinateurs de bureau.<\/p>\n

Vous devez ajouter le CSS personnalis\u00e9 suivant \u00e0 votre th\u00e8me WordPress.<\/p>\n

:: – webkit-scrollbar {
-apparence web: aucun;
}
:: – webkit-scrollbar {
largeur: 10 px;
}<\/p>\n

:: – webkit-scrollbar-track {
fond: # ffb400;
bordure: 1px solid #ccc;
}<\/p>\n

:: – webkit-scrollbar-thumb {
fond: # cc00ff;
bord: 1px solide #eee;
hauteur: 100 px;
rayon de bord: 5px;
}<\/p>\n

:: – webkit-scrollbar-thumb: hover {
fond bleu;
}<\/p>\n

Vous pouvez modifier les couleurs et autres propri\u00e9t\u00e9s CSS \u00e0 tout moment.<\/p>\n

N’oubliez pas d’enregistrer vos modifications lorsque vous \u00eates satisfait. Vous pouvez le visualiser dans un navigateur compatible.<\/p>\n

C’\u00e9tait \u00e0 quoi il ressemblait sur notre site de d\u00e9monstration lors de l’affichage dans Google Chrome sur un ordinateur Mac.<\/p>\n

\"Afficher<\/p>\n

Nous esp\u00e9rons que cet article vous a aid\u00e9 \u00e0 apprendre \u00e0 ajouter une barre de d\u00e9filement personnalis\u00e9e dans WordPress. Vous pouvez \u00e9galement consulter notre guide sur la fa\u00e7on de cr\u00e9er une mise en page WordPress personnalis\u00e9e sans \u00e9crire de code.<\/p>\n

Si vous avez aim\u00e9 cet article, abonnez-vous \u00e0 notre cha\u00eene YouTube pour regarder des vid\u00e9os de didacticiel WordPress. Vous pouvez \u00e9galement nous trouver sur Twitter et Facebook.<\/p>\n

\n
\n

Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n