Comment changer la couleur de sélection de texte par défaut dans WordPress

Cherchez-vous un moyen de changer la couleur de sélection de texte par défaut dans WordPress ?

Vous pouvez faire ressortir votre site WordPress en prêtant attention aux petits détails, comme en utilisant une couleur de sélection de texte qui correspond au design de votre site.

Dans cet article, nous allons vous montrer comment changer la couleur de sélection de texte par défaut dans votre thème WordPress.

Pourquoi changer la couleur de sélection de texte par défaut ?

Les couleurs sont un élément important de votre marque, il est donc important de choisir la palette de couleurs parfaite pour votre site WordPress. Cela peut aider votre site à se démarquer et inciter les visiteurs à rester sur votre site plus longtemps.

De cette façon, la palette de couleurs de votre site peut même augmenter vos pages vues et réduire vos taux de rebond.

En matière de design, il est facile d’oublier la couleur de sélection du texte. Cependant, rien ne garantit que la couleur de sélection de texte par défaut de votre thème s’affichera bien sur votre blog WordPress, qu’elle correspondra à votre marque ou qu’elle plaira à votre public cible.

Cela étant dit, voyons comment modifier la couleur de sélection de texte par défaut dans WordPress. Utilisez simplement les liens ci-dessous pour accéder à la méthode que vous souhaitez utiliser :

Méthode 1 : Utilisation des paramètres du thème WordPress (facile)

Certains thèmes WordPress vous permettent de modifier la couleur de sélection de texte par défaut. Pour vérifier si c'est le cas pour votre thème, vous devez vous rendre dans Apparence » Personnaliser.

Ici, recherchez tous les paramètres intitulés « Couleurs ».

Si vous voyez un onglet « Général », « Global » ou similaire, celui-ci contient souvent les paramètres de couleur du thème.

Par exemple, si vous utilisez le thème populaire Astra WordPress, vous devrez sélectionner l'onglet « Global ».

Après cela, cliquez sur « Couleurs » pour voir toutes les différentes couleurs qui composent ce thème WordPress réactif.

Ensuite, vous devez cliquer sur « Accent ».

Cela ouvre un sélecteur de couleurs dans lequel vous pouvez choisir une nouvelle couleur de sélection de texte.

Au fur et à mesure que vous apportez des modifications, l'aperçu en direct sera automatiquement mis à jour. Ainsi, vous pouvez essayer différents paramètres pour voir ce qui convient le mieux à votre site Web WordPress.

Lorsque vous êtes satisfait de vos modifications, cliquez simplement sur « Publier » pour les mettre en ligne.

Après cela, vous verrez la nouvelle couleur de sélection de texte en direct sur votre blog ou site Web WordPress.

Même si vous ne voyez aucun paramètre de couleur dans le personnalisateur de thème WordPress, cela vaut toujours la peine de consulter la documentation de votre thème pour voir s'il existe un moyen de modifier la couleur de sélection de texte par défaut.

Vous pouvez même contacter le développeur du thème pour obtenir de l’aide. Pour plus d’informations, veuillez consulter notre guide sur la façon de demander correctement l’assistance WordPress et de l’obtenir.

Méthode 2 : Utiliser le code pour modifier la couleur de la sélection du texte (fonctionne avec tous les thèmes)

Si vous ne voyez pas de moyen de modifier la couleur de sélection du texte dans le personnalisateur de thème, une autre option consiste à utiliser le code CSS.

Vous trouverez souvent des extraits de code CSS dans les didacticiels WordPress avec des instructions pour les ajouter dans le fichier functions.php de votre thème.

Le plus gros problème est que même une petite erreur dans l’extrait de code peut complètement détruire votre site WordPress. Sans oublier que vous perdrez tout votre code personnalisé lorsque vous mettrez à jour le thème WordPress.

C'est là qu'intervient WPCode.

Ce plugin d'extraits de code facilite l'ajout de CSS, PHP, HTML et plus personnalisés à WordPress sans casser votre site ni le rendre inaccessible.

La première chose que vous devez faire est d'installer et d'activer le plugin gratuit WPCode. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.

Lors de l'activation, accédez à Extraits de code »Ajouter un extrait dans votre tableau de bord d'administration WordPress.

Ici, passez simplement votre souris sur « Ajouter votre code personnalisé ».

Lorsqu'il apparaît, cliquez sur le bouton « Utiliser l'extrait ».

Pour commencer, saisissez un titre pour l’extrait de code personnalisé. Il peut s'agir de tout ce qui vous aide à identifier l'extrait dans le tableau de bord WordPress.

Après cela, vous devez ouvrir la liste déroulante « Type de code » et sélectionner « Extrait CSS ».

Vous pouvez ensuite ajouter le CSS suivant dans la zone Aperçu du code :

::-moz-selection {
    background-color: #FFA500;
    color: #fff;
}
 
::selection {
    background-color: #FFA500;
    color: #fff;
}

Notez que nous avons ajouté deux styles. Le sélecteur CSS ::moz-selection fonctionne avec le navigateur Firefox et le sélecteur CSS ::selection fonctionne avec d'autres navigateurs populaires comme Google Chrome, Safari, IE9+ et Opera.

Dans l'exemple ci-dessus, le code # hexadécimal changera la couleur du lien en orange, vous devrez donc remplacer background-color: #FFA500 par la couleur que vous souhaitez utiliser pour le texte en surbrillance.

Si vous ne savez pas quel code hexadécimal utiliser, vous pouvez explorer différentes couleurs et obtenir leurs codes sur le site Web HTML Color Codes .

Lorsque vous êtes satisfait de l'apparence de votre code, cliquez simplement sur le bouton « Inactif » pour afficher « Actif » à la place.

Enfin, cliquez sur « Enregistrer l’extrait » pour rendre l’extrait CSS actif.

Vous pouvez maintenant visiter votre site Web pour voir les changements en action.

Voici à quoi cela ressemblait sur notre site Web de démonstration.

Nous espérons que ce tutoriel vous a aidé à apprendre comment modifier la couleur de sélection de texte par défaut dans WordPress. Vous voudrez peut-être également consulter notre guide sur la création d’un formulaire de contact dans WordPress et consulter notre liste des meilleurs plugins de création de pages par glisser-déposer WordPress.

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.