Comment changer la couleur des liens dans WordPress (Guide pour débutants)

« Comment changer la couleur des liens dans WordPress ? » C'est une question que nous posent régulièrement nos lecteurs de WPBeginner.

Bien que cela puisse sembler un détail mineur, les couleurs des liens jouent un rôle important dans l'utilisabilité et les taux de conversion de votre site Web. C'est pourquoi nous utilisons la couleur orange pour les liens sur WPBeginner.

La bonne nouvelle est que changer les couleurs des liens dans WordPress est devenu beaucoup plus facile qu'auparavant. Vous n'avez pas besoin d'être un expert en CSS ou d'embaucher un développeur – il existe maintenant des solutions simples que tout le monde peut utiliser, quelles que soient ses compétences techniques.

Dans ce guide, nous allons vous expliquer les étapes exactes pour changer les couleurs de vos liens dans WordPress.

Pourquoi changer la couleur des liens dans WordPress ?

Les principales raisons de modifier les couleurs des liens dans WordPress sont de correspondre à l'identité de votre marque et d'améliorer la lisibilité de votre contenu. En personnalisant ces couleurs, vous dirigez l'attention de vos visiteurs vers les parties les plus importantes de votre page.

Voici quelques avantages spécifiques de la personnalisation des couleurs de vos liens :

• Meilleure accessibilité : Utiliser un contraste de couleurs suffisant rend les liens plus faciles à lire et à identifier, en particulier pour les visiteurs malvoyants. En règle générale, les directives WCAG recommandent un rapport de contraste d'au moins 4,5:1 pour le texte de taille normale. Avant de choisir une nouvelle couleur de lien, vous pouvez la tester avec le Vérificateur de contraste WebAIM pour vous assurer qu'elle reste facile à lire.
• Cohérence de la marque : Vous pouvez aligner vos liens avec votre logo et votre palette de couleurs générale pour un look professionnel.
• Taux de clics plus élevés : L'utilisation d'une couleur distincte pour les liens (tels que les boutons ou les appels à l'action) encourage les visiteurs à cliquer, ce qui augmente les conversions.

Cela dit, examinons comment changer la couleur des liens sur votre site Web WordPress. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous préférez :

Comment changer la couleur des liens dans les thèmes classiques de WordPress

Certains thèmes WordPress classiques incluent des paramètres intégrés pour changer la couleur des liens. Pour vérifier, allez dans Apparence » Personnaliser et recherchez une section appelée Couleurs, Typographie ou quelque chose de similaire.

Les thèmes populaires comme Astra, GeneratePress et OceanWP incluent souvent des contrôles de couleur de lien dans ces paramètres.

Si vous ne voyez pas d'option dédiée « Couleur du lien », recherchez « Couleur d'accentuation » ou « Couleur principale », car ces paramètres contrôlent fréquemment les couleurs des liens sur votre site Web.

Par exemple, dans le thème Sydney, ces options se trouvent dans la section « Couleurs ».

Ensuite, trouvez un paramètre qui vous permet de changer les couleurs des liens.

Sydney rend cela simple avec des options « Couleur du lien » pour les états par défaut et au survol.

La couleur de survol du lien est celle qui apparaît lorsqu'un visiteur passe sa souris sur un lien. C'est donc un excellent moyen d'attirer son attention et d'améliorer votre taux de clics.

Vous pouvez ensuite cliquer sur « Publier » pour enregistrer vos modifications.

Gardez à l'esprit que certains thèmes n'ont pas de paramètres directs pour la couleur des liens. Au lieu de cela, la couleur du lien peut être liée globalement aux couleurs primaires ou secondaires de votre thème.

Si votre thème n'offre pas de personnalisation directe de la couleur des liens, ne vous inquiétez pas ! Vous pouvez utiliser la quatrième méthode, où nous vous montrerons comment changer la couleur de vos liens à l'aide de code.

Comment changer la couleur des liens dans les thèmes de blocs WordPress

Si vous utilisez un thème bloc, vous devrez utiliser l'éditeur complet du site pour personnaliser les couleurs de vos liens.

Allez dans Apparence » Éditeur dans votre tableau de bord WordPress.

Vous verrez tous les menus pour personnaliser l'apparence de votre site.

Ici, cliquez sur « Styles ».

Vous verrez les styles par défaut de votre thème affichés.

Recherchez et cliquez sur le bouton « Modifier » (crayon) pour commencer la personnalisation.

L'éditeur complet de site s'ouvrira avec une barre latérale pour modifier les styles de votre thème.

Cliquez sur ‘Couleurs’ dans cette barre latérale pour accéder aux options de personnalisation des couleurs.

Trouvez l'option Lien et cliquez dessus pour révéler les paramètres de couleur pour les états par défaut et de survol. Vous devriez choisir une couleur qui correspond à la conception de votre site Web.

Cependant, il est également important de s'assurer qu'il y a un contraste élevé entre l'arrière-plan et la couleur du lien. Selon les directives WCAG 2.1, les liens textuels doivent avoir un rapport de contraste d'au moins 4,5:1 par rapport à l'arrière-plan.

Vous pouvez tester vos choix de couleurs à l'aide d'outils gratuits comme le Vérificateur de contraste de WebAIM pour vous assurer que vos liens sont lisibles pour les visiteurs malvoyants. 

Une fois que vous êtes satisfait de vos modifications, cliquez simplement sur ‘Enregistrer’ pour les rendre actives sur votre site.

Comment changer les couleurs des liens individuels dans l'éditeur de blocs

Parfois, vous voudrez peut-être changer la couleur des liens individuels. Par exemple, vous pourriez vouloir attirer l'attention du visiteur sur l'appel à l'action sur une page de destination.

Pour ce faire, il suffit de surligner le lien spécifique que vous souhaitez personnaliser.

Ensuite, cliquez sur l'icône de flèche dans la barre d'outils et sélectionnez 'Surligner' dans le menu déroulant.

Ensuite, cliquez sur l'onglet 'Texte'. Vous pouvez maintenant sélectionner la couleur de ce lien spécifique.

Une fois cela fait, sélectionnez la couleur que vous souhaitez utiliser.

Pour personnaliser d'autres liens, répétez simplement ces étapes.

Lorsque vous êtes satisfait de l'apparence des liens, cliquez sur ‘Enregistrer’ pour rendre vos modifications actives.

Comment changer la couleur des liens dans WordPress avec du code (tous les thèmes)

Si votre thème n'offre pas la possibilité de changer la couleur de vos liens, alors le moyen le plus simple est d'ajouter du CSS personnalisé à votre site WordPress.

Souvent, vous trouverez des extraits de code 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 le fragment de code personnalisé peut rendre votre site WordPress inaccessible. Vous perdrez également toutes vos personnalisations lors de la prochaine mise à jour de votre thème WordPress.

C'est là qu'intervient WPCode. Avec plus de 3 millions d'installations, il est spécialement conçu pour les débutants WordPress qui ont besoin d'ajouter du code personnalisé sans toucher aux fichiers du thème.

Cela élimine le risque de casser votre site avec une seule faute de frappe ou de perdre des personnalisations lors des mises à jour du thème.

Après des tests approfondis, nous avons conclu que c'est le moyen le plus sûr et le plus simple d'ajouter du code personnalisé à votre site Web. Pour plus de détails, consultez notre avis sur WPCode.

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 l'activation, rendez-vous sur Extraits de code » Ajouter un extrait.

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

Ensuite, cliquez sur le bouton « + Ajouter un nouveau fragment » lorsqu'il apparaît.

Ensuite, vous devez sélectionner « Fragment CSS » comme type de code dans la liste des options qui s'affichent à l'écran.

Après cela, tapez un titre pour le fragment de code personnalisé. Cela peut être n'importe quoi qui vous aide à identifier le fragment dans le tableau de bord WordPress.

Vous pouvez maintenant ajouter un fragment CSS personnalisé dans la boîte de code. Examinons quelques-uns des différents fragments que vous pouvez utiliser.

Changer la couleur des liens sur votre site WordPress

Pour commencer, vous voudrez peut-être personnaliser la couleur générale des liens. C'est la couleur que les visiteurs verront avant de cliquer sur un lien.

Pour changer la couleur des liens sur l'ensemble du contenu de votre site Web, utilisez ce snippet CSS :

a {
     color: #FFA500;
}

Remarque : Ce code CSS modifie la couleur des liens pour l'ensemble de votre site Web. Cela inclut les menus de navigation, les boutons et les liens du pied de page.

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

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 Web HTML Color Codes. Alternativement, vous pouvez utiliser un outil en ligne gratuit comme le sélecteur de couleurs de Google pour trouver la teinte parfaite.

Lorsque vous êtes satisfait de l'apparence de votre code, cliquez sur le bouton bascule « Inactif » pour qu'il affiche « Actif » à la place. Enfin, cliquez sur « Enregistrer l'extrait » pour activer l'extrait CSS.

Maintenant, si vous visitez votre site Web WordPress, vous verrez la nouvelle couleur de lien en action.

Changer la couleur du survol des liens dans WordPress

Pour modifier la couleur du lien au survol, collez simplement l'extrait suivant dans l'éditeur de WPCode :

a:hover {
     color: #FF0000;
     text-decoration: underline;
}

Le code ci-dessus changera la couleur du lien en rouge et soulignera le texte lorsque les visiteurs passeront la souris dessus. Comme précédemment, vous pouvez changer le code hexadécimal #FF0000 pour la couleur que vous souhaitez utiliser.

Lorsque vous êtes prêt à mettre en ligne, vous pouvez publier l'extrait de code en suivant le même processus décrit ci-dessus.

Changer la couleur des liens après visite dans WordPress

Ensuite, vous voudrez peut-être changer la couleur du lien après qu'un utilisateur a cliqué sur le lien. Cela peut aider les visiteurs à s'orienter sur votre blog WordPress en montrant les liens sur lesquels ils ont déjà cliqué.

Vous pouvez utiliser le code CSS ci-dessous pour changer la couleur des liens visités :

a:visited {
     color: #0000FF;
}

Comme toujours, assurez-vous de changer le code hexadécimal bleu #0000FF pour la couleur que vous souhaitez utiliser dans vos liens.

Une fois cela fait, cliquez sur le bouton bascule « Inactif » pour qu'il devienne « Actif ». Ensuite, cliquez simplement sur « Enregistrer le snippet » pour rendre le code actif sur votre site, blog ou boutique en ligne.

Changer les couleurs des liens pour des pages spécifiques dans WordPress

Si vous souhaitez modifier les couleurs des liens uniquement sur des pages spécifiques (par exemple, une page de destination ou une page de contact), vous pouvez utiliser des sélecteurs CSS spécifiques à la page.

Chaque page WordPress a une classe body unique comme .page-id-123. Vous pouvez cibler les liens sur cette page spécifique en utilisant ce CSS :

.page-id-123 .entry-content a {
     color: #FF6600;
}

Remplacez 123 par l'ID réel de votre page (vous pouvez le trouver dans l'URL de l'éditeur de page).

Alternativement, si vous utilisez WPCode Pro, vous pouvez utiliser la fonctionnalité de logique conditionnelle pour appliquer des extraits CSS uniquement à des pages spécifiques sans avoir besoin de sélecteurs personnalisés.

Quelle est la meilleure couleur pour les liens sur un site Web ?

La meilleure couleur de lien dépend de votre marque et de la conception de votre site Web, mais il existe des meilleures pratiques éprouvées à suivre :

• Le bleu est la norme : La plupart des utilisateurs s'attendent à ce que les liens soient bleus (#0000FF ou des nuances similaires) car c'est la convention Web par défaut. Les liens bleus sont instantanément reconnaissables.
• Un contraste élevé est essentiel : La couleur de votre lien doit avoir un rapport de contraste d'au moins 4,5:1 par rapport à l'arrière-plan pour l'accessibilité (conformité WCAG AA).
• Évitez le rouge et le vert : Ces couleurs peuvent être difficiles à distinguer pour les utilisateurs daltoniens (affectant environ 8 % des hommes et 0,5 % des femmes).
• Utilisez des soulignements : Souligner les liens (surtout au survol) aide les utilisateurs malvoyants et améliore la convivialité générale.
• Adaptez-vous à votre marque : Si votre marque utilise une palette de couleurs spécifique, choisissez une couleur de lien qui convient tout en maintenant un contraste suffisant.

Chez WPBeginner, nous utilisons l'orange (#FFA500) pour les liens car il correspond à notre marque et se détache clairement sur notre fond blanc.

Tutoriel vidéo

Si vous n'aimez pas suivre des instructions écrites, vous pouvez consulter notre tutoriel vidéo à la place :

Foire aux questions sur la modification de la couleur des liens dans WordPress

Voici quelques questions fréquemment posées par nos lecteurs concernant la modification des couleurs des liens sur leur site web :

Puis-je changer la couleur d'un hyperlien ?

Oui, la plupart des thèmes WordPress vous permettent de changer globalement les couleurs des hyperliens via les paramètres d'Apparence ou l'Éditeur de site. Vous pouvez également changer la couleur des liens individuels directement dans l'éditeur de publication en surlignant le lien et en sélectionnant une couleur dans la barre d'outils.

Comment personnaliser un lien dans WordPress ?

Vous pouvez personnaliser un lien en le sélectionnant dans l'éditeur de blocs et en utilisant les options de la barre d'outils. Cela vous permet de changer l'URL de destination, de le faire s'ouvrir dans un nouvel onglet, ou d'ajuster les paramètres de couleur et de style dans la barre latérale droite.

Comment personnaliser mon lien URL ?

Pour changer le texte de l'URL elle-même (le slug), allez dans les paramètres de 'Publication' dans la barre latérale droite et recherchez la section 'URL'. Si vous souhaitez changer l'apparence visuelle du lien, comme la police ou la couleur, utilisez les paramètres 'Style' dans l'éditeur de blocs.

Pour plus de détails, consultez notre tutoriel sur comment changer les URL de votre site WordPress.

Comment changer les liens dans WordPress ?

Cliquez simplement sur le texte du lien existant dans l'éditeur de contenu et sélectionnez le bouton « Modifier » (icône de crayon) dans la barre d'outils flottante. À partir de là, vous pouvez coller une nouvelle URL ou modifier le texte que vous souhaitez afficher à vos visiteurs.

Comment puis-je changer le lien de ma page ?

Vous pouvez modifier le lien d'une page en modifiant le slug de permalien dans la barre latérale des paramètres de la page, sous la section « URL ». Si la page est déjà publiée, nous vous recommandons de configurer une redirection 301 afin que les visiteurs utilisant l'ancien lien soient dirigés vers la nouvelle page correcte.

Quelle est la meilleure couleur pour les liens sur un site Web ?

Le bleu est la couleur de lien la plus reconnaissable, mais le meilleur choix dépend de votre marque et de votre conception. Assurez un rapport de contraste de 4,5:1 pour l'accessibilité, évitez le rouge/vert pour les utilisateurs daltoniens et utilisez des soulignements au survol pour plus de clarté. Adaptez les couleurs de votre marque tout en maintenant la lisibilité.

Comment changer l'icône de lien dans WordPress ?

WordPress n'a pas de paramètre par défaut pour ajouter ou modifier les icônes de liens, vous devrez donc généralement utiliser un plugin. Des plugins tels que External Links peuvent automatiquement ajouter des icônes aux liens sortants, ou vous pouvez ajouter manuellement des icônes à l'aide de FontAwesome et de CSS personnalisé.

Nous espérons que cet article vous a aidé à apprendre comment changer la couleur des liens dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment changer la couleur du texte dans WordPress ou notre guide ultime sur les éléments de conception WordPress les plus efficaces.

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