Comment ajouter une barre de défilement personnalisée dans WordPress

Améliorer l’attrait visuel de votre site WordPress peut considérablement améliorer l’expérience des utilisateurs/utilisatrices, et un élément souvent négligé est la barre de défilement.

En personnalisant votre barre de défilement, vous pouvez ajouter une touche unique à votre site, le rendre plus attrayant visuellement et l’aligner sur l’esthétique générale de votre design.

Chez WPBeginner, nous avons écrit des centaines d’articles sur le design WordPress et avons également utilisé différentes fonctionnalités de personnalisation pour stimuler l’engagement sur notre site.

Une barre de défilement personnalisée peut améliorer l’aspect de votre site et rendre la navigation plus fluide et plus intuitive pour les internautes.

Dans cet article, nous allons vous afficher comment ajouter facilement une barre de défilement personnalisée dans WordPress.

Pourquoi ajouter une barre de défilement personnalisée dans WordPress ?

En 2018, le WC3 a rédigé une proposition qui autorisait les propriétaires de sites web à personnaliser l’apparence de la barre de défilement à l’aide de CSS.

Aujourd’hui, de nombreux navigateurs modernes supportent les barres de défilement personnalisées.

Dans cette optique, vous pouvez modifier la barre de défilement pour qu’elle corresponde mieux au jeu de couleurs ou à la marque de votre site. De nombreux sites utilisent également une barre de défilement personnalisée pour attirer l’attention de l’internaute, ce qui peut augmenter le nombre de pages vues et réduire le taux de rebond.

Cependant, n’oubliez pas que chaque navigateur gère différemment les barres de défilement personnalisées. De nombreux navigateurs ne supportent que partiellement la personnalisation, tandis que d’autres n’affichent pas du tout votre style personnalisé.

Cela signifie qu’il est important de tester votre site avec différents navigateurs et appareils pour voir comment la barre de défilement se présente sur le plus grand nombre de navigateurs possible.

Cela dit, voyons comment ajouter une barre de défilement personnalisée dans WordPress. Il suffit d’utiliser les liens rapides ci-dessous pour passer à la méthode que vous souhaitez utiliser :

Méthode 1 : Ajouter une barre de défilement personnalisée dans WordPress avec une extension (facile)

La façon la plus simple de personnaliser la barre de défilement est d’utiliser la barre de défilement avancée. Cette extension gratuite vous permet de modifier la largeur, la couleur et la vitesse de défilement de la barre de défilement, entre autres, sans avoir à écrire une seule ligne de code.

La première chose à faire est d’installer et d’activer l’extension Advanced Scrollbar. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, allez dans Réglages  » Paramètres avancés de la barre de défilement.

Ici, vous pouvez modifier le jeu de couleurs de la barre de défilement et la couleur d’arrière-plan du rail.

Dans l’image abrégée, nous avons créé une barre de défilement bleue.

Vous pouvez également modifier l’étape par étape du défilement de la souris en saisissant un nouveau nombre dans le champ « Étape du défilement de la souris ».

Un nombre inférieur fera défiler votre site plus lentement, et un nombre supérieur le fera défiler plus rapidement.

Vous pouvez également sélectionner si vous souhaitez masquer automatiquement la barre de défilement afin qu’elle apparaisse uniquement lorsque l’internaute est en train de défiler.

Cela peut être utile si vous avez créé une barre de défilement plus colorée et que vous craignez qu’elle ne détourne l’attention du reste de votre contenu.

Par défaut, la barre de défilement apparaît sur le côté droit de la fenêtre du navigateur. Si vous le souhaitez, vous pouvez le déplacer vers la gauche en utilisant les Réglages d’alignement du rail.

Lorsque vous êtes satisfait de la configuration de la barre de défilement, n’oubliez pas de cliquer sur « Enregistrer les modifications » pour enregistrer vos réglages.

Vous pouvez maintenant visiter votre site WordPress pour voir la barre de défilement personnalisée en action.

Méthode 2 : Outil de personnalisation des couleurs de la barre de défilement dans WordPress à l’aide de CSS

Si vous souhaitez apporter des modifications plus poussées à votre barre de défilement, une autre option consiste à utiliser le CSS.

Cette méthode vous permet de personnaliser chaque partie de la barre de défilement, mais elle fonctionne uniquement sur les navigateurs de bureau utilisant WebKit. Cela signifie que vos modifications ne s’afficheront pas sur tous les navigateurs, y compris les navigateurs mobiles.

Pour personnaliser votre barre de défilement à l’aide de CSS, allez dans Apparence  » Personnaliser.

Dans le client/cliente WordPress, cliquez sur « Additional CSS ».

Vous pouvez maintenant ajouter votre code dans le petit éditeur qui apparaît.

Voici un exemple de code qui modifie l’aspect de la barre de défilement :

::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 10px;
}
 
::-webkit-scrollbar-track {
background: #ffb400;
border:1px solid #ccc;
}
 
::-webkit-scrollbar-thumb {
background: #cc00ff;
border:1px solid #eee;
height:100px;
border-radius:5px;
}
 
::-webkit-scrollbar-thumb:hover {
background: blue;
}

Vous pouvez ajouter le code que vous souhaitez. En savoir plus sur le CSS, Veuillez consulter notre guide terminé sur la façon d’ajouter un CSS personnalisé à votre thème WordPress.

Lorsque vous êtes satisfait de votre code, il vous suffit de cliquer sur le bouton « Publier ». Vous pouvez maintenant visiter votre blog WordPress dans un navigateur WebKit pour voir vos modifications en action.

Bonus : Ajouter un effet de défilement vers le haut dans WordPress

Outre la création d’une barre de défilement personnalisée, vous pouvez également ajouter un effet de défilement vers le haut sur votre site WordPress. Cela peut être super utile si vous avez des publications de blog plus longues et que vous souhaitez fournir aux utilisateurs/utilisatrices un moyen rapide de revenir au début.

Pour ajouter cette fonctionnalité, vous devez installer et activer le plugin WPFront Scroll Top. Pour des instructions détaillées, consultez notre tutoriel sur l ‘installation d’une extension WordPress.

Lors de l’activation, rendez-vous sur la page Réglages  » Défilement vers le haut depuis le tableau de bord WordPress et cochez la case  » Activé  » pour activer l’effet de défilement vers le haut.

Vous pouvez ensuite modifier le décalage du défilement, la taille du bouton, l’opacité, la durée du fondu, la durée du défilement, etc. à partir d’ici.

Une fois que vous avez terminé, n’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour stocker vos réglages.

Vous avez bien ajouté un effet de défilement vers le haut à votre site. Pour des instructions plus détaillées, consultez notre tutoriel sur l ‘ajout d’un effet de défilement fluide vers le haut dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment ajouter une barre de défilement personnalisée sur WordPress. Vous pouvez également consulter notre guide sur la façon de créer une page d’atterrissage sur WordPress ou voir nos choix d’experts pour les meilleurs constructeurs de pages par glisser-déposer.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.