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

Publié: 2018-09-05

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. J'utilise spécifiquement SASS pour les projets plus importants et, avec les variables CSS comme élément central, il offre toutes les 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 n'entrera pas dans les détails des préprocesseurs.

Les variables CSS sont un juste milieu. Heureusement, il existe un support de navigateur solide. Avant de vous engager à les utiliser en production, assurez-vous de vérifier Puis-je utiliser pour vous assurer qu'ils disposent du support dont vous avez besoin. Ils 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é.

les variables css et les personnalisations de thème présentent une femme tapant sur un ordinateur portable avec divers outils de mêlée et de conception sur un bureau blanc

Cette approche est un bon projet adapté à des choses comme le style de thèmes enfants WordPress simples. Dans 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. J'aime le fait que j'ai une liste gérable de remplacements de style et que je ne ressens pas le besoin de configurer un environnement compilant le SASS en CSS.

Obtenez gratuitement les thèmes Genesis Framework et StudioPress !

Lorsque vous hébergez vos sites sur Flywheel, vous aurez accès à plus de 30 thèmes WordPress premium (y compris Genesis !) directement depuis notre superbe tableau de bord. C'est une valeur de plus de 2 000 $ avec laquelle vous pouvez commencer pour seulement 15 $/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 :

:root {
--text-black: #232525;
}

header {
color: var(--text-black);
}

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.

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

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 de 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)

:root {
--light-gray: #eeeeee
--text-black: #434344
}

.sidebar {
--background-color: var(--light-gray);
--color: var(--text-black);
}

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.

variables css thème personnalisation chrome inspecteur css

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 :

:root {
--light-gray: #eeeeee;
--text-black: #434344;
}

.sidebar {
background-color: var(--light-gray);
color: var(--text-black);
}

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 à 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.

:root {
--gutter: 5px;
}

section {
padding: var(--gutter);
}

@media (min-width: 600px) {
:root {
--gutter: 15px;
}
}

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é.

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

texte d'avertissement des personnalisations du thème des variables 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.

Et après : plugins

Téléchargez cet ebook pour obtenir une liste de nos plugins les plus recommandés pour les développeurs ! Nous avons trouvé que tous ces plugins étaient simples à utiliser, pas trop performants sur votre site et tout simplement fiables.

Vous aimez cet article ? Essayez l'un de ceux-ci :

Comment créer une mise en page de carte à l'aide de CSS Grid Layout
Comment combiner les grilles Flexbox et CSS pour des mises en page efficaces
Personnalisations simples pour votre thème enfant Genesis