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 ?

Les principales raisons de changer 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é : Augmenter le contraste des couleurs entre le texte et l'arrière-plan rend votre site plus facile à lire pour les personnes ayant des déficiences visuelles.
• Cohérence de la marque : Vous pouvez aligner vos liens avec votre logo et votre schéma de couleurs général pour un aspect 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
• 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
• How to Change Link Color in WordPress With Code (All Themes)
• Tutoriel vidéo
• Foire aux questions sur la modification de la couleur des liens dans WordPress

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 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 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. 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. Cela garantit que votre site est accessible et facile à lire pour tout le monde.

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, 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.

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;
}

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 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 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 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 :

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 changer le lien d'une page en modifiant le slug du 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.

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

WordPress n'a pas de paramètre par défaut pour ajouter ou changer les icônes de lien, vous devrez donc généralement utiliser un plugin. Des plugins comme External Links peuvent automatiquement ajouter des icônes aux liens sortants, ou vous pouvez ajouter manuellement des icônes en utilisant FontAwesome et du CSS personnalisé.

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.