Comment changerCouleurs des liens WordPress
WordPress fournit un formatage prêt à l'emploi pour les liens hypertextes. Le schéma de couleurs des liens, qu'il s'agisse de liens individuels ou de l'ensemble du site, peut être modifié à l'aide de plusieurs options : le personnalisateur de thème, l'éditeur de blocs par défaut de WordPress ou l'implémentation d'une feuille de style CSS personnalisée.
Méthode 1 : Utiliser le personnalisateur de thème de WordPress
Veuillez noter que l'interface du personnalisateur peut varier légèrement en fonction du thème utilisé. Toutefois, voici un aperçu des étapes à suivre :
- Connectez-vous à votre tableau de bord d'administration WordPress et accédez à la sectionétat extérieur > personnalisationou visiterApparence>Thèmessur le thème choisipersonnalisation.
- Une fois dans le Customiseur de thème, faites défiler la barre de navigation de gauche et cliquez sur "couleur".
- Accédez aux couleurs du thème WordPress à partir du personnalisateur.
- Faites défiler vers le bas jusqu'à ce que vous trouviez l'option de couleur du lien et modifiez-la pour obtenir la nuance souhaitée.
- Modifier les couleurs des liens à partir du personnalisateur de thème.
Les résultats sont présentés ci-dessous :
Utilisez le Customizer du thème pour modifier la couleur des liens avant et après.
Veuillez noter que cette méthode convient mieux pour modifier les couleurs des liens sur l'ensemble du site web. Il n'est pas possible d'ajouter des personnalisations aux liens hypertextes.
Méthode 2 : Utiliser l'éditeur de blocs par défaut de WordPress
Gutenberg est l'éditeur par défaut basé sur des blocs pour WordPress. Il utilise des blocs de contenu individuels pour créer des mises en page et d'autres paramètres personnalisés pour votre site. Cela facilite l'ajout, le déplacement et la suppression de contenu sans avoir à se soucier du HTML ou du CSS.
Il est également possible de modifier la couleur des liens individuels d'un site web - la méthode est la suivante :
- Depuis votre tableau de bord d'administration WordPress, naviguez vers "écrits">"Tous les articles"Cliquez ensuite sous le message dont vous souhaitez personnaliser la couleur du lien "compilateur".
- Recherchez le bloc que vous souhaitez modifier et cliquez dessus pour afficher les options de modification sur la droite.
- Dans la section Couleurs, cliquez sur le texte et sélectionnez la couleur souhaitée ou entrez son code.
- Une fois que vous avez terminé vos modifications, cliquez sur le coin supérieur droit de la fenêtre "mise à jour"Bouton.
Méthode 3 : Utilisation d'un CSS personnalisé
Si votre thème WordPress ne propose pas d'options intégrées de personnalisation de la couleur des liens, vous pouvez ajouter des feuilles de style CSS personnalisées pour définir le style des liens. Pour ce faire, procédez comme suit :
- Depuis votre panneau d'administration WordPress, allez dansétat extérieur > personnalisationFaites défiler vers le bas jusqu'à l'option Additional CSS et cliquez dessus pour ouvrir l'éditeur CSS et ajouter votre code personnalisé.
- Ajouter des feuilles de style CSS supplémentaires au personnalisateur de thème.
Pour modifier la couleur des liens sur l'ensemble du site, vous devez utiliser des balises plutôt que des classes ou des identifiants spécifiques :
a {
couleur : #5246F1 ;
Décoration du texte : souligné ;
}
a:hover {
color : #B4AFFF ; text-decoration : none ; } a:hover { color : #B4AFFF ; }
text-decoration : none ; }
}
Ce code CSS spécifie que, par défaut, tous les liens du site seront soulignés et colorés en #5246F1, c'est-à-dire en bleu. Lorsque la souris survole le lien, celui-ci passe à une couleur plus claire (#B4AFFF) et le soulignement est supprimé.
Tu es devenu comme il se doit :
Si vous souhaitez modifier la couleur d'un lien particulier, utilisez l'outil Inspecter de votre navigateur pour vérifier la catégorie ou l'ID du lien que vous souhaitez modifier. Cliquez avec le bouton droit de la souris sur le lien et sélectionnez Inspecter.
Ajoutez un code CSS personnalisé en utilisant le nom d'identification unique du lien, comme indiqué ci-dessous :
a.customise-unpreviewable {
couleur : #5246F1 ;
text-decoration : underline ;
}
a.customize-unpreviewable:hover {
colour : #B4AFFF ; text-decoration : none ; }
text-decoration : none ; }
}
Bien que l'ajout d'un code CSS personnalisé soit efficace, il nécessite un effort considérable et une série d'étapes. Ne choisissez pas cette option si vous n'avez pas l'expertise nécessaire pour ruiner accidentellement l'esthétique ou la fonctionnalité de votre site web.
Résumé :
Grâce à ces méthodes, il est possible d'ajuster les couleurs des liens de votre site web WordPress en fonction de votre image de marque et de vos besoins en matière d'expérience utilisateur. Que ce soit par le biais d'un personnalisateur de thème, d'un éditeur de blocs ou d'un CSS personnalisé, s'assurer que les couleurs des liens sont cohérentes avec le design général et l'image de marque de votre site web est une étape importante dans l'amélioration de l'expérience de l'utilisateur.