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

Avez-vous remarqué l'apparence du texte lorsque les visiteurs le sélectionnent sur votre site Web ? Nous devons parfois mettre à jour la couleur de sélection du texte sur les sites Web sur lesquels nous travaillons pour qu'elle corresponde aux couleurs de la marque, et de nombreux utilisateurs ont demandé comment faire cela.

La bonne nouvelle est qu'il est plus facile que vous ne le pensez de personnaliser cet élément de conception souvent négligé. Que vous souhaitiez faire correspondre les couleurs de votre marque ou améliorer la lisibilité, changer la couleur de sélection du texte peut améliorer l'expérience utilisateur de votre site Web.

Dans ce guide, nous vous montrerons exactement comment changer la couleur de sélection de texte par défaut dans WordPress.

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

La couleur de sélection de texte fait référence à la couleur de la police dans WordPress qui s'affiche lorsque vous sélectionnez un morceau de texte dans un contenu. Comme ceci :

Dans certains cas, vous voudrez peut-être changer cette couleur car elle ne s'harmonise pas bien avec la conception de votre site WordPress. La palette de couleurs joue un rôle important pour que votre site soit beau et pour maintenir une expérience de marque cohérente.

Si vous gérez un blog WordPress, vous voudrez peut-être également changer la couleur de sélection de texte par défaut si vous pensez qu'elle ne ressort pas suffisamment du reste du contenu, ce qui la rend difficile à lire.

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

• Méthode 1 : Utiliser du code pour changer la couleur de sélection du texte (fonctionne avec tous les thèmes)
• Method 2: Using the WordPress Theme Settings (Varies by the Classic Theme)

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

Certains thèmes WordPress offrent une fonctionnalité intégrée pour changer la couleur de sélection du texte, mais ce n'est pas le cas de tous. C'est pourquoi nous recommandons d'utiliser du code CSS personnalisé car cette méthode est beaucoup plus universelle.

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 qu'une seule petite 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 mettez à jour le thème WordPress.

C'est là que WPCode intervient. Ce plugin d'extraits de code facilite l'ajout de code personnalisé dans WordPress sans causer d'erreurs ni rendre votre site inaccessible.

La première chose à faire est d'installer et d'activer le plugin gratuit WPCode. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après activation, rendez-vous dans Extraits de code » Ajouter un extrait dans votre tableau de bord d'administration WordPress.

Ici, survolez simplement votre souris sur « Ajouter votre code personnalisé (Nouvel extrait) ».

Lorsqu'il apparaît, cliquez sur le bouton « + Ajouter un extrait personnalisé ».

Ensuite, vous devez choisir un type de code dans la liste des options qui apparaissent à l'écran.

Pour ce tutoriel, sélectionnez « Extrait CSS ».

Sur la page suivante, saisissez un titre pour l'extrait de code personnalisé.

Il peut s'agir de tout ce qui vous aide à identifier l'extrait plus tard dans le tableau de bord WordPress, par exemple « Modifier la couleur de sélection du texte ».

Vous pouvez ensuite ajouter le CSS suivant dans la zone d'aperçu 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 hexadécimal # changera la couleur du lien en vert, vous devrez donc remplacer background-color: #008000 par la couleur que vous souhaitez utiliser pour le texte mis 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'apparence de votre code, cliquez simplement sur le bouton « Inactif » pour afficher « Actif » à la place.

Ensuite, cliquez sur « Enregistrer le fragment » pour rendre le fragment 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.

Méthode 2 : Utilisation des paramètres du thème WordPress (varie selon le thème classique)

Certains thèmes WordPress vous permettent de modifier les paramètres de votre typographie et de vos polices, y compris la couleur du texte sélectionné. Pour vérifier si c'est le cas pour votre thème, vous devez aller dans Apparence » Personnaliser.

Remarque : Cette méthode n'est pas applicable aux thèmes de blocs.

Ici, recherchez 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 WordPress Astra, 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.

Ensuite, vous devez cliquer sur « Accent ».

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

Vous pouvez maintenant voir la couleur de la police changer car l'aperçu en direct se mettra à jour automatiquement. 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 rendre actives.

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 personnaliseur de thème WordPress, il vaut toujours la peine de consulter la documentation de votre thème pour voir s'il existe un moyen de changer la couleur de sélection du 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 comment demander correctement de l'aide pour WordPress et l'obtenir.

Découvrez plus d'astuces et de conseils sur la typographie WordPress

Vous souhaitez personnaliser les polices de votre site WordPress, mais vous ne savez pas comment faire ? Consultez ces guides pour vous lancer :

• Meilleurs plugins de typographie WordPress pour améliorer votre design
• Comment changer facilement la taille de la police dans WordPress
• Qu'est-ce qu'une police web sûre + les meilleures polices web sûres (Guide pour débutants)
• Comment ajouter facilement des polices d'icônes à votre thème WordPress
• Comment ajouter des majuscules ornées dans les articles WordPress

Nous espérons que ce tutoriel vous a aidé à apprendre comment changer la couleur de sélection du texte par défaut dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur les meilleurs constructeurs de pages par glisser-déposer pour WordPress et comment vendre des polices en ligne avec WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.