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

« Comment puis-je faire ressortir mes liens ? » C'est une question que nous entendons régulièrement de la part de nos lecteurs 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 ?

Lorsque vous ajoutez un lien dans WordPress, votre thème déterminera automatiquement la couleur de ce lien. Parfois, les couleurs par défaut de votre thème WordPress seront exactement ce que vous voulez, mais vous pourriez avoir besoin de plus de contrôle sur l'apparence des liens.

Par exemple, vous pourriez vouloir changer la couleur du lien pour qu'elle corresponde à votre marque ou à votre logo personnalisé. Ou vous pourriez vouloir améliorer le contraste des couleurs pour rendre votre site plus accessible aux lecteurs ayant une vision limitée.

Cela étant dit, voyons comment changer la couleur des liens sur votre site WordPress, quel que soit le thème que vous utilisez. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :

• Comment changer la couleur des liens dans les thèmes classiques de WordPress
• Comment changer la couleur des liens dans les thèmes de blocs WordPress
• Comment changer les couleurs des liens individuels dans l'éditeur de blocs
• Comment changer la couleur des liens dans WordPress avec du code (tous les thèmes)
• Tutoriel vidéo

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

Certains thèmes classiques ont des options intégrées pour changer les couleurs des liens, mais vous devrez d'abord vérifier les paramètres de votre thème spécifique.

Pour voir si votre thème a cette option, allez dans Apparence » Personnaliser. Recherchez ensuite un paramètre intitulé « Couleurs » ou quelque chose de similaire. Dans le thème Sydney , il est simplement étiqueté « 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 du lien au survol 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, comme Neve, n'ont pas de paramètres directs pour la couleur des liens. Au lieu de cela, la couleur du lien peut être liée aux couleurs primaires ou secondaires de votre thème globalement.

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

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

Si vous utilisez un thème de blocs, vous devrez utiliser l'éditeur complet de 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 au survol. Assurez-vous de faire vos sélections de couleurs pour qu'elles correspondent au design de votre site web.

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 le bouton d'appel à l'action sur une page de destination.

Pour ce faire, sélectionnez simplement le lien que vous souhaitez personnaliser. Ensuite, cliquez sur l'icône de flèche dans la mini-barre d'outils et sélectionnez ‘Surligner’.

Vous pouvez maintenant choisir ‘Arrière-plan’ ou ‘Texte’ en fonction de la modification que vous souhaitez apporter.

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.

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 ce faire, ajoutez simplement l'extrait suivant dans la boîte de code WPCode :

a {
     color: #FFA500;
}

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 HTML Color Codes.

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 survol des liens, 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 indiquant quels liens ils ont déjà cliqués.

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.

Tutoriel vidéo

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

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

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.