Comment ajouter des variables CSS pour personnaliser les thèmes enfants WordPress

Les variables CSS, également appelées propriétés personnalisées CSS, permettent une réutilisation facile dans vos feuilles de style CSS.

Si vous avez travaillé avec des thèmes enfants WordPress, vous vous retrouvez probablement à faire beaucoup de style et à remplacer des choses comme la couleur, le rembourrage, etc. Si vous êtes nouveau dans la conception Web, il convient de mentionner qu'il n'y a rien de mal à utiliser plain CSS. Les variables CSS sont facultatives et au fur et à mesure que vous avancez, vous commencerez à voir comment les variables vous seront bénéfiques.

Ceux-ci ne sont pas destinés à remplacer les préprocesseurs CSS, le plus populaire étant SASS. De nombreux constructeurs utilisent spécifiquement SASS pour des projets plus importants et, avec les variables CSS comme élément central, il offre de nombreuses options avancées.

Cependant, si vous avez déjà travaillé avec des préprocesseurs, vous savez qu'ils doivent être compilés pour produire le CSS. Pour cette raison, ce didacticiel se concentrera sur les variables CSS et ne plongera pas dans les détails des préprocesseurs.

Les variables CSS sont un juste milieu et, heureusement, le navigateur est bien pris en charge. Avant de vous engager à utiliser des variables CSS en production, assurez-vous de vérifier Puis-je utiliser pour vous assurer qu'ils disposent du support dont vous avez besoin.

Les variables CSS sont plus efficaces que de travailler avec du CSS simple mais ne nécessitent pas une configuration avancée comme SASS. Le navigateur effectue la "compilation" et vous n'êtes pas dépendant de la configuration et de l'environnement qui génère le CSS compilé.

Cette approche est un bon projet adapté à des choses comme le style de thèmes enfants WordPress simples. Pour des projets comme celui-ci, il est généralement nécessaire de mettre à jour le style pour créer un thème de marque. Les variables CSS peuvent aider, car elles fournissent une liste gérable de remplacements de style et ne nécessitent pas d'environnement spécial pour compiler SASS en CSS.

Obtenez gratuitement les thèmes Genesis Framework et StudioPress !

Les clients de WP Engine ont accès à une suite de thèmes WordPress premium fournis en standard avec chaque plan ! Vous pouvez commencer à créer votre prochain site pour seulement 20 $/mois ! En savoir plus ici.

Comment utiliser les variables CSS

Lorsque vous utilisez des couleurs spécifiques pour rester sur la marque, une exigence commune est d'avoir une palette de couleurs de marque qui peut être utilisée encore et encore. Il devient redondant de taper la même valeur de couleur à chaque fois. De plus, que se passe-t-il si vous souhaitez modifier l'une des valeurs de couleur de l'ensemble ?

Par exemple, peut-être qu'un bleu doit être légèrement plus foncé. Ça arrive tout le temps. Oui, bien sûr, il y a le fidèle trouver et remplacer. Ajuster la valeur à un endroit, cependant, est plus efficace lors de ce changement global et lorsque les variables sont réutilisées.

Voici à quoi ressemble une variable CSS :

 [css] :root { --text-black: #232525; } header { color: var(--text-black); } [/css]

Comme je rationalise le flux de travail pour styliser un thème enfant WordPress, j'ai ajouté les variables à mon fichier styles.css . Il ne s'agit que de la "liste courte" et au fur et à mesure que d'autres sont ajoutées, nommer efficacement chaque variable devient important.

 [css] :root { --white: #ffffff; --black: #232525; --mid-gray: #eeeeee; --brand-red: #e50000; } [/css]

La fonction var()

Comment les variables sont-elles réellement utilisées ? C'est assez simple. Tout d'abord, la variable est déclarée, puis elle est utilisée dans le jeu de règles CSS nécessaire.

La portée est une chose importante à prendre en compte. Les variables doivent être déclarées dans un sélecteur CSS qui se trouve dans sa portée prévue. Dans de nombreux cas, vous aurez besoin que les variables soient disponibles dans la portée globale, de cette façon elles sont accessibles à tout. Vous pouvez utiliser le :root ou le sélecteur body pour la portée globale. Cependant, il peut arriver que vous deviez limiter la portée et que vous souhaitiez travailler avec une variable de portée locale.

Il est facile de repérer les variables ; ils ont deux tirets devant eux. Les deux tirets (–) doivent être inclus.

La syntaxe de var() est assez simple :

 var(variable-name, value) [css] :root { --light-gray: #eeeeee --text-black: #434344 } .sidebar { --background-color: var(--light-gray); --color: var(--text-black); } [/css]

Au lieu d'ajuster la couleur à plusieurs endroits, la valeur de la variable est ajustée à un seul endroit.

L'inspecteur Web (Chrome dans ce cas) vous permet d'inspecter et de voir quelles variables sont utilisées.

L'exemple suivant définit d'abord les propriétés personnalisées globales nommées --light-gray et --text-black . La fonction var() est appelée, ce qui insère la valeur des propriétés personnalisées plus tard dans la feuille de style :

 [css] :root { --light-gray: #eeeeee; --text-black: #434344; } .sidebar { background-color: var(--light-gray); color: var(--text-black); } [/css]

Il convient de mentionner que les variables peuvent être très utiles lorsque vous travaillez avec des points d'arrêt CSS. En utilisant des variables de portée globale dans différents points d'arrêt, des éléments tels que le rembourrage et d'autres styles utiles peuvent être personnalisés pour différentes tailles.

 [css] :root { --gutter: 5px; } section { padding: var(--gutter); } @media (min-width: 600px) { :root { --gutter: 15px; } } [/css]

Voici un exemple de variables pouvant être trouvées dans la portée locale. Nous n'avons abordé que la portée globale jusqu'à présent, vous remarquerez donc que les choses ne sont pas dans la racine. Ce sont des styles pour un message d'avertissement. Il y a une couleur de texte d'avertissement déclarée ici qui n'est utile que pour cette classe. En outre, il convient de noter que calc peut également être utilisé.

 [css] .warning { --warning-text: #ff0000; --gap: 20; color: var(--warning-text); margin-top: calc(var(--gap) * 1px); } [/css]

Les exemples ci-dessus couvrent les bases des variables CSS. Ces concepts peuvent être appliqués à des thèmes WordPress personnalisés ou à tout autre CSS personnalisé que vous écrivez. Les variables présentent des avantages par rapport au simple CSS et vous aideront à travailler plus efficacement lorsque vous apportez des modifications à l'échelle du site. Ils permettent des feuilles de style mieux organisées sans avoir besoin d'un préprocesseur.

Alimentez la liberté de créer avec WP Engine

WP Engine donne la liberté de créer sur WordPress. Les produits de la société, les plus rapides parmi tous les fournisseurs WordPress, alimentent 1,5 million d'expériences numériques. Plus des 200 000 meilleurs sites au monde utilisent WP Engine pour alimenter leurs expériences numériques que quiconque dans WordPress. Trouvez-en plus sur wpengine.com ou parlez à un représentant dès aujourd'hui !