Vous avez probablement remarqué que presque tous les blocs du dernier éditeur de contenu de WordPress peuvent avoir des couleurs de texte et d’arrière-plan personnalisées. L’éditeur de site WordPress vous permet même de sélectionner des couleurs pour l’ensemble du site.
Vous pouvez facilement modifier ces couleurs dans les paramètres, mais il n’est pas pratique de rechercher des couleurs spécifiques dans la palette de couleurs lorsque vous souhaitez les ajouter à un autre bloc.
Vous construisez un site WordPress personnalisé mais vous ne savez pas comment y ajouter vos propres couleurs ? Heureusement, la plupart des nouveaux thèmes WordPress vous permettent de définir facilement votre propre palette de couleurs. Vous pouvez ensuite réutiliser les mêmes couleurs sur l’ensemble du site sans avoir à vous souvenir des codes de couleurs.
Aujourd’hui, je vais vous montrer comment vous pouvez ajouter vos propres couleurs aux thèmes d’édition de sites complets WordPress en quelques minutes.
Comment ajouter des couleurs personnalisées au thème d’édition de site complet de WordPress ?
Les thèmes d’édition de sites complets ont déjà au moins quelques couleurs définies par défaut. Ainsi, vous pouvez facilement sélectionner n’importe quelle couleur que vous voulez à partir des paramètres de couleur sans avoir à vous souvenir des codes de couleur exacts. Comme cet exemple dans le thème WordPress Twenty Twenty three :
Mais comment définir vos propres couleurs pour qu’elles apparaissent dans la même boîte de couleurs ? C’est en fait plus facile que vous ne le pensez.
Première étape – allez dans Tools >> Theme File Editor dans le menu d’administration de WordPress. Une fois que vous êtes là, ouvrez le fichier theme.json sur le côté droit de la page.
Maintenant, recherchez les paramètres de couleur dans le code. Voici à quoi cela ressemble dans le thème WordPress par défaut :
"color": {
"palette": [
{
"color": "#ffffff",
"name": "Base",
"slug": "base"
},
{
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
},
...Comme vous le voyez, chaque couleur a son code couleur, son nom et son slug. Nous allons ajouter une autre couleur – rouge (code #ff0000), et nommer la couleur ImakeITwork :
{
"color": "#FF0000",
"name": "ImakeITwork",
"slug": "imakeitwork"
}Si vous ne savez pas où trouver les codes de couleur nécessaires, vous pouvez utiliser le sélecteur de couleur intégré à WordPress, ou utiliser un site web comme HTML Color Codes.
Voici à quoi ressemble le code dans le fichier theme.json:
Vous pouvez ajouter autant de couleurs que vous le souhaitez – il suffit de leur donner un nom unique et un slug, et d’utiliser le point-virgule entre les crochets { }, comme vous le voyez dans l’exemple ci-dessus.
Une fois que vous aurez cliqué sur Mettre à jour le fichier, les nouvelles couleurs apparaîtront dans n’importe quel sélecteur de couleurs, dans n’importe quel bloc WordPress.
C’est tout – maintenant vous savez comment définir vos propres couleurs dans n’importe quel thème d’édition de site complet WordPress.
Vous voulez apprendre comment ajouter des polices personnalisées à WordPress ? Cliquez ici (en anglais)
