Voulez-vous apprendre à changer la couleur du lien dans WordPress ?

Changer la couleur de votre lien vous donne plus de contrôle sur la conception de votre site Web et peut faciliter la navigation de vos visiteurs.

Dans cet article, nous allons vous montrer comment changer la couleur du lien dans WordPress, étape par étape.

Pourquoi changer la couleur du lien dans WordPress ?

Lorsque vous ajoutez un lien dans WordPress, votre thème déterminera automatiquement la couleur du lien.

Parfois, les options de couleur par défaut de votre thème WordPress seront exactement ce que vous voulez, mais d’autres fois, vous voudrez plus de contrôle sur l’apparence des liens.

Par exemple, vous pouvez modifier la couleur de vos liens pour qu’elle corresponde à la marque ou au logo de votre entreprise. Ou, vous pouvez augmenter le contraste des couleurs pour améliorer l’accessibilité du Web pour les lecteurs ayant une vision limitée.

Certains thèmes vous permettent de changer la couleur du lien directement à partir de votre panneau d’options de thème ou du personnalisateur de thème WordPress, alors assurez-vous de vérifier la documentation de votre thème avant de changer la couleur du lien avec CSS.

Cela étant dit, examinons quelques façons de modifier la couleur du lien sur votre site Web WordPress.

Méthode 1. Changer la couleur du lien dans WordPress en éditant le CSS

Une façon de changer la couleur du lien dans WordPress consiste à ajouter du code CSS personnalisé.

La première chose que vous devez faire est d’accéder à votre tableau de bord d’administration WordPress et d’accéder à Apparence » Personnaliser puis cliquez sur l’option de menu « CSS supplémentaire ».

Personnalisateur WordPress pour CSS supplémentaire

Cela vous amènera à un écran où vous pourrez ajouter votre code CSS personnalisé sur le côté gauche de la page.

Vous ajouterez les extraits de code CSS des exemples ci-dessous à cette section de votre éditeur.

Ajouter un écran de code CSS supplémentaire

Tout d’abord, nous allons personnaliser la couleur globale du lien. C’est la couleur que vos visiteurs verront s’ils n’ont jamais cliqué sur le lien auparavant.

Vous pouvez utiliser le code CSS ci-dessous comme exemple.

1
2
3
a {
     color: #FFA500;
}

Cela changera la couleur du lien par défaut en orange. Assurez-vous de changer le #FFA500 couleur à la couleur que vous souhaitez utiliser.

Changer la couleur du survol du lien dans WordPress

La prochaine chose que nous allons changer est la couleur du survol du lien. Ainsi, lorsqu’un utilisateur place son curseur sur un lien, celui-ci change de couleur pour attirer son attention.

Vous pouvez utiliser le code CSS ci-dessous comme exemple.

1
2
3
4
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 le survoleront. Assurez-vous de changer le #FF0000 couleur à celle que vous préférez.

Nous utilisons l’effet de survol de lien souligné ici à WPBeginner sur nos liens.

Changer la couleur du lien après la visite dans WordPress

Une autre chose que vous voudrez peut-être changer est la couleur du lien après qu’un utilisateur a cliqué sur un lien. Cela peut aider les visiteurs à naviguer facilement sur votre blog WordPress et à voir sur quels liens ils ont déjà cliqué.

Vous pouvez utiliser le code CSS ci-dessous pour changer la couleur du lien visité.

1
2
3
a:visited {
     color: #0000FF;
}

Assurez-vous de changer le bleu #0000FF couleur à la couleur de votre choix.

Voici à quoi ressemblera tout le code CSS ci-dessus dans le personnalisateur WordPress.

Code de personnalisation WordPress

Une fois que vous avez effectué vos modifications, cliquez sur le bouton « Publier » pour mettre vos modifications en ligne.

Le code CSS ci-dessus changera la couleur de tous les liens de votre site.

Si vous souhaitez personnaliser uniquement les liens qui se trouvent dans vos publications et vos pages, vous pouvez utiliser l’exemple de code ci-dessous.

1
2
3
4
5
6
sept
8
9
dix
11
12
.entry-content a {
     color: #FFA500;
}
.entry-content a:hover {
     color: #FF0000;
     text-decoration: underline;
}
.entry-content a:visited {
     color: #0000FF;
}

Ce code fait la même chose que les exemples de code ci-dessus, mais .entry-content ne cible que les liens dans votre contenu.

Changer la couleur de vos liens de navigation dans WordPress

Un dernier style de lien que vous pouvez également personnaliser est celui des liens de votre menu de navigation.

Personnaliser les liens du menu de navigation

Pour plus de détails, consultez notre guide sur la façon de styliser les menus de navigation WordPress.

Si vous ne souhaitez pas ajouter de code directement à votre thème WordPress, vous pouvez utiliser un plugin CSS pour ajouter du code à votre site Web.

De cette façon, vos changements CSS seront appliqués même si vous décidez de changer votre thème WordPress.

La première chose que vous devez faire est d’installer et d’activer le plugin Simple Custom CSS and JS. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.

Lors de l’activation, il vous suffit d’aller sur CSS et JS personnalisés » Ajouter un CSS personnalisé dans votre panneau d’administration WordPress.

Ici, vous pouvez ajouter le même code CSS que ci-dessus.

Ajouter du code CSS personnalisé avec le plugin

Une fois que vous avez terminé d’ajouter le code, assurez-vous de cliquer sur le bouton « Publier » ou « Mettre à jour ».

Méthode 2. Changer la couleur du lien sans modifier le CSS

Si vous n’êtes pas à l’aise pour éditer des fichiers CSS, cette méthode est faite pour vous.

Au lieu d’ajouter du code CSS directement à votre site Web, vous pouvez utiliser un plugin de style CSS pour modifier visuellement votre site sans écrire de code.

Nous vous recommandons d’utiliser le plugin CSS Hero. Il est très convivial pour les débutants et vous permet de personnaliser visuellement votre site Web comme un constructeur de page par glisser-déposer.

Une fois le plugin installé, vous devez cliquer sur le bouton « Passer à l’activation du produit » au-dessus de la liste des plugins pour l’activer et connecter votre compte.

Activer CSS Hero

Cela vous amènera à un écran où vous pourrez entrer votre nom d’utilisateur et votre mot de passe.

Tout ce que vous avez à faire est de suivre les instructions à l’écran et vous serez redirigé vers votre site Web une fois votre compte vérifié.

Ensuite, cliquez sur le bouton « Personnaliser avec CSS Hero » en haut de votre barre d’outils d’administration WordPress.

Personnaliser avec CSS Hero

Cela ouvrira votre site Web avec CSS Hero exécuté dessus. CSS Hero utilise ce qu’on appelle un éditeur Ce que vous voyez est ce que vous obtenez (WYSIWYG).

Cliquez simplement sur n’importe quel élément de la page, et cela fera apparaître une barre d’outils qui vous permettra de faire des personnalisations.

Ensuite, cliquez sur l’un des liens de votre site Web. Nous allons commencer par l’un des liens de publication de blog.

Cliquez sur le lien du site

Après cela, sélectionnez l’élément de menu « Typographie » et vous pourrez choisir une nouvelle couleur pour votre lien.

Vous pouvez choisir une nouvelle couleur dans la liste ou ajouter votre propre code couleur.

Sélectionnez l'option de typographie

Changer la couleur de votre menu de navigation WordPress

Ensuite, vous pouvez changer la couleur des liens de votre menu de navigation WordPress.

Survolez simplement votre menu de navigation et cliquez sur l’un des éléments du menu.

Cliquez sur le lien du menu de navigation

Ensuite, sélectionnez l’option « Typographie » et vous pourrez personnaliser la couleur directement en dessous.

Vous remarquerez que lorsque vous modifiez la couleur du lien du menu, les modifications s’affichent immédiatement dans l’aperçu.

Personnaliser la couleur du menu CSS Hero

Une fois que vous avez terminé de modifier les couleurs des liens, vous devez cliquer sur le bouton « Enregistrer et publier » pour appliquer vos modifications.

Nous espérons que cet article vous a aidé à apprendre comment changer la couleur du lien dans WordPress. Vous pouvez également consulter notre guide sur la façon de choisir le meilleur logiciel de conception Web, ou notre liste de plugins WordPress indispensables.

Si vous avez aimé cet article, veuillez vous abonner à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici