Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment modifier la couleur des liens dans WordPress (Guide du débutant)

Note éditoriale : Nous percevons une commission sur les liens des partenaires sur WPBeginner. Les commissions n'affectent pas les opinions ou les évaluations de nos rédacteurs. En savoir plus sur Processus éditorial.

Voulez-vous apprendre à modifier la couleur des liens dans WordPress ?

Modifier la couleur des liens peut permettre aux internautes de trouver plus facilement leur chemin sur votre site. La création d’un jeu de couleurs unique peut également aider votre site à se démarquer.

Dans cet article, nous allons vous afficher comment modifier la couleur des liens dans WordPress, étape par étape.

How to change the link color in WordPress (beginner's guide)

Lorsque vous ajoutez un lien dans WordPress, votre thème détermine automatiquement la couleur de ce lien. Parfois, les couleurs par défaut de votre thème WordPress correspondent exactement à ce que vous souhaitez, mais il se peut que vous ayez besoin de plus de contrôle sur l’apparence des liens.

Par exemple, vous pouvez modifier la couleur du lien pour l’adapter à votre marque ou à votre logo personnalisé. Vous pouvez également augmenter le contraste des couleurs pour rendre votre site plus accessible aux lecteurs malvoyants.

Avec certains thèmes, vous pouvez modifier la couleur du lien dans le panneau d’options du thème ou dans le personnalisateur de thème WordPress, alors assurez-vous de vérifier ces endroits en premier. Il est également utile de consulter la documentation de votre thème.

Cela étant dit, voyons comment modifier la couleur des liens sur votre site WordPress, quel que soit le thème que vous utilisez. Il vous suffit d’utiliser les liens rapides ci-dessous pour passer directement à la méthode que vous souhaitez utiliser :

Tutoriel vidéo

Subscribe to WPBeginner

Si vous préférez les instructions écrites, continuez à lire.

Il peut arriver que vous souhaitiez modifier la couleur de certains liens. Par exemple, vous pouvez vouloir attirer l’attention de l’internaute sur l’appel à l’action d’une page de renvoi.

Pour ce faire, il suffit de mettre en évidence le lien que vous souhaitez personnaliser. Cliquez ensuite sur l’icône en forme de flèche dans la barre d’outils miniature et sélectionnez « Mettre en évidence ».

Customizing the WordPress link color

Vous pouvez maintenant sélectionner « Arrière-plan » ou « Texte » en fonction de la modification que vous souhaitez apporter.

Ceci fait, sélectionnez la couleur que vous souhaitez utiliser.

Changing the WordPress URL color

Pour personnaliser d’autres liens, il suffit de répéter ces étapes.

Lorsque vous êtes satisfait de l’aspect des liens, cliquez sur « Mettre à jour » ou « Publier » pour que vos modifications soient directes.

La manière la plus simple de modifier la couleur des liens est d’ajouter un 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 que même une minuscule erreur dans l’extrait de code personnalisé peut casser votre site WordPress et le rendre inaccessible. Vous perdrez également toutes vos personnalisations lors de la prochaine mise à jour de votre thème WordPress.

C’est là que WPCode entre en jeu.

Cette extension gratuite permet d’ajouter facilement des CSS personnalisés sans mettre votre site en danger.

La première chose à faire est d’installer et d’activer l’extension gratuite WPCode. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, rendez-vous dans la rubrique Extraits de code  » Ajouter un extrait.

Adding custom CSS snippets to WordPress using WPCode

Ici, il vous suffit de survoler avec votre souris la rubrique « Ajouter votre code personnalisé ».

Lorsqu’il apparaît, cliquez sur « Utiliser l’extrait ».

Adding custom code snippets to your website

Pour commencer, saisissez un titre pour l’extrait de code personnalisé. Il peut s’agir de n’importe quoi qui vous aide à identifier l’extrait dans le Tableau de bord WordPress.

Ensuite, ouvrez le menu déroulant « Type de code » et sélectionnez « Sélectionné CSS ».

Customizing the color of URLs using WPCode

Vous pouvez maintenant ajouter un extrait de CSS personnalisé à la boîte de code. Voyons les différents extraits que vous pouvez utiliser.

Modifier la couleur des liens sur votre site WordPress

Pour commencer, vous pouvez personnaliser la couleur générale du lien. Il s’agit de la couleur que les internautes verront avant de cliquer sur un lien.

Pour ce faire, il suffit d’ajouter l’extrait de code suivant dans la boîte de code WPCode :

a {
     color: #FFA500;
}

Dans l’exemple ci-dessus, le code hexagonal # changera la couleur du lien en orange, vous devrez donc modifier#FFA500 pour 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.

En attendant, si vous avez besoin d’aide pour choisir la couleur de votre lien, veuillez consulter notre guide sur le choix d’un jeu de couleurs parfait.

Lorsque vous êtes satisfait de l’aspect de votre code, cliquez sur le permutateur « Inactif » pour afficher « Actif ». Enfin, cliquez sur « Enregistrer l’extrait » pour mettre l’extrait CSS en ligne.

Changing the link color in WordPress using a code snippet plugin

Désormais, si vous visitez votre site WordPress, vous verrez la nouvelle couleur des liens en action.

Modifier la couleur de survol des liens dans WordPress

Une autre option consiste à modifier la couleur de survol du lien. Il s’agit de la couleur qui apparaît lorsqu’un internaute survole un lien avec sa souris. C’est donc un excellent moyen d’attirer son attention et d’améliorer votre taux de clics.

Pour effectuer cette modification, il suffit de coller l’extrait suivant dans l’éditeur/éditrices de WPCode :

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

Le code ci-dessus modifiera la couleur du lien en rouge et soulignera le texte lorsque les internautes survoleront le lien. Comme précédemment, vous pouvez modifier le code hexagonal #FF0000 pour utiliser la couleur de votre choix.

Lorsque vous êtes prêt à passer en direct, vous pouvez publier l’extrait de code en suivant le même processus que celui décrit ci-dessus.

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

Ensuite, vous pouvez vouloir modifier la couleur du lien après qu’un utilisateur ait cliqué sur le lien. Cela peut aider les internautes à trouver leur chemin dans votre blog WordPress en affichant les liens sur lesquels ils ont déjà cliqué.

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

a:visited {
     color: #0000FF;
}

Comme toujours, veillez à modifier le code bleu #0000FFhexen fonction de la couleur que vous souhaitez utiliser dans vos liens.

Modifié, cliquez sur le commutateur « Inactif » pour qu’il se modifie en « Actif ». Il vous suffit ensuite de cliquer sur « Enregistrer l’extrait » pour que le code s’installe directement sur votre site, votre blog ou votre stock en ligne.

Changing the WordPress link color using WPCode

Modifier la couleur de vos liens de navigation dans WordPress

Enfin, vous pouvez également personnaliser les liens de votre menu de navigation.

Customize navigation menu links

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

Au lieu d’ajouter du code CSS directement à votre site, vous pouvez utiliser une extension de style CSS pour modifier visuellement votre site.

Nous vous recommandons d’utiliser l’extension CSS Hero. Il est très convivial pour les débutants et vous permet de personnaliser visuellement votre site, de la même manière qu’un constructeur de page par glisser-déposer.

Après avoir installé l’extension, cliquez sur le bouton  » Procéder à l’activation du produit  » pour l’activer et connecter votre compte.

Activate CSS Hero

Vous accéderez à un écran où vous pourrez saisir votre identifiant et votre mot de passe.

Ensuite, il vous suffit de suivre les instructions à l’écran pour vérifier votre compte. Après cela, la bannière d’accroche vous ramènera automatiquement au Tableau de bord WordPress.

Cliquez ensuite sur le bouton « Personnaliser avec CSS Hero » en haut de la barre d’outils d’administration de WordPress.

Customize with CSS Hero

Votre site s’ouvrira alors avec la bannière d’accroche CSS.

CSS Hero utilise un éditeur WYSIWYG (What You See is What You Get). Cela signifie que vous pouvez cliquer sur n’importe quel contenu pour ouvrir une barre d’outils qui vous permet de personnaliser ce contenu.

Pour Premiers pas, cliquez sur un exemple du lien que vous souhaitez modifier. Dans ce guide, nous allons personnaliser les liens des publications de blog.

Click on website link

Après avoir sélectionné un lien, cliquez sur l’élément de menu « Typographie » et choisissez une nouvelle couleur pour vos liens.

Vous pouvez soit sélectionner une couleur dans la liste, soit ajouter un code hexagonal.

Select typography option

Modifier la couleur du menu de navigation de WordPress

Ensuite, vous pouvez utiliser CSS Hero pour créer un menu de navigation personnalisé en modifiant la couleur de ses liens.

Il suffit de survoler votre menu de navigation et de cliquer sur l’un des éléments du menu.

Click on navigation menu link

Sélectionnez ensuite l’option « Typographie ».

Vous pouvez maintenant choisir la couleur que vous souhaitez utiliser à la place.

Customize menu color CSS Hero

Une fois que vous avez fini de modifier les couleurs des liens, il vous suffit de cliquer sur le bouton « Enregistrer et publier » pour que vos modifications soient prises en compte.

Nous espérons que cet article vous a aidé à apprendre comment modifier la couleur des liens sur WordPress. Vous pouvez également consulter notre guide sur la modification de la couleur du texte sur WordPress ou notre choix d’experts sur les meilleurs exemples de design WordPress que vous devriez consulter.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

10 commentairesLaisser une réponse

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Chris says

    The code was able to change the link colours in the side bar but not the links in the article. How do I change the colour of the link in the article?

  3. Chloe says

    Thank you, this is so helpful! Is there a way you can share how to add bolded links in CSS? I’d like to make all my links bold.

    • WPBeginner Support says

      You should be able to add bold in the post editor for your links the same as you would for other text in your paragraphs without needing to edit your CSS.

      Administrateur

  4. Tom Maglienti says

    Great Article! When using CSS Hero to change link colors for example, if I change the color on one blog post link does it change all links on the site the same way inserting the CSS code directly does?

    Thanks!

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.