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

Voulez-vous modifier la couleur de sélection du texte par défaut dans WordPress ?

Il peut arriver que vous souhaitiez que la couleur par défaut de la section de texte contraste davantage avec la couleur de l’arrière-plan. De cette façon, les utilisateurs/utilisatrices peuvent voir exactement ce qui est mis en évidence dans le contenu.

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

Pourquoi modifier la couleur de sélection du texte par défaut dans WordPress ?

La couleur de sélection du texte fait référence à la couleur qui s’affiche lorsque vous mettez en évidence un morceau de texte dans un contenu. Voici un exemple :

Dans certains cas, vous voudrez peut-être modifier cette couleur parce qu’elle ne s’accorde pas bien avec la conception de votre site WordPress. Le jeu de couleurs joue un rôle important dans l’apparence de votre site et dans le maintien d’une expérience de marque cohérente.

Si vous gérez un blog WordPress, vous pouvez également modifier la couleur de sélection du texte par défaut si vous estimez qu’il ne se détache pas suffisamment du reste du contenu, ce qui le rend difficile à lire.

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

Méthode 1 : Utiliser les Réglages du Thème WordPress (Facile)

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

Note : Si vous utilisez un thème en bloc, vous n’aurez pas cette option de menu. A la place, vous pouvez lire notre guide sur la façon d’utiliser l’édition de site complète dans WordPress.

Recherchez ici les réglages libellés « Couleurs ».

Si vous voyez un onglet « Général », « Global » ou similaire, il contient souvent les réglages de couleurs du thème.

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

Après cela, cliquez sur  » Colors  » pour voir toutes les différentes couleurs qui composent ce thème WordPress responsive.

Ensuite, vous devez cliquer sur « Accent ».

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

Au fur et à mesure que vous effectuez des modifications, la Prévisualisation en direct se met à jour automatiquement. Vous pouvez donc essayer différents réglages pour voir ce qui convient le mieux à votre site WordPress.

Lorsque vous êtes satisfait de vos modifications, il vous suffit de cliquer sur « Publier » pour les rendre directes.

Ensuite, vous verrez la nouvelle couleur de sélection du texte en direct sur votre blog ou site WordPress.

Même si vous ne voyez aucun réglage de couleur dans le personnalisateur de thème WordPress, il est toujours utile de vérifier dans la documentation de votre thème s’il existe un moyen de modifier la couleur de sélection du texte par défaut.

Vous pouvez même vous adresser au développeur/développeuse du thème pour obtenir de l’aide. En savoir plus, veuillez consulter notre guide sur la façon de demander correctement un support WordPress et de l’obtenir.

Méthode 2 : Utilisation d’un code pour modifier la couleur de 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 du thème, une autre option consiste à utiliser le code CSS.

Souvent, vous trouverez des extraits de code CSS dans les tutoriels WordPress avec des instructions pour les ajouter au fichier functions.php de votre thème.

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

C’est là que WPCode entre en jeu. Cette extension d’extraits de code permet d’ajouter facilement du code personnalisé à WordPress sans provoquer d’erreurs ni rendre votre site inaccessible.

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

Une fois activé, rendez-vous dans la rubrique Code Snippets  » Add Snippet dans votre Tableau de bord WordPress.

Ici, il vous suffit de survoler avec votre souris la rubrique « 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 n’importe quoi qui vous aide à identifier l’extrait dans le Tableau de bord WordPress ultérieurement, comme « Modifier la couleur de sélection du texte ».

Ensuite, vous devez ouvrir le menu déroulant « Type de code » et sélectionner « Extrait CSS ».

Vous pouvez ensuite ajouter le CSS suivant dans la boîte de Prévisualisation du code :

/* Customizing text selection for Firefox */
::-moz-selection {
    /* Background color when text is selected in Firefox */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in Firefox */
    color: #fff;
}

/* Customizing text selection for other browsers */
::selection {
    /* Background color when text is selected in other browsers */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in other browsers */
    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 hexagonal # changera la couleur du lien en vert, vous devrez donc modifier la couleur d'arrière-plan : #008000 à la couleur que vous souhaitez utiliser pour le texte en surbrillance.

Si vous n’êtes pas sûr du code hexadécimal à utiliser, vous pouvez explorer différentes couleurs et obtenir leurs codes sur le site HTML Color Codes.

Lorsque vous êtes satisfait de l’aspect de votre code, il vous suffit de cliquer sur le permutateur « Inactif » pour afficher « Actif » à la place.

Cliquez ensuite sur « Enregistrer l’extrait » pour rendre l’extrait CSS direct.

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

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

En savoir plus sur la personnalisation des couleurs dans WordPress, consultez les guides suivants :

• Outil de personnalisation des couleurs sur votre site WordPress
• Comment modifier la couleur du texte dans WordPress
• Comment modifier la couleur d’arrière-plan dans WordPress

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

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.