Developers van WordPress-thema’s kunnen hettheme.json bestand gebruiken om een proces te stroomlijnen. Dit scheelt, omdat je vroeger grotendeels afhankelijk was van PHP. Je kunt gelukkig echter nog steeds je HTML, JavaScript en PHP vaardigheden gebruiken om je thema’s te bouwen – en CSS is geen uitzondering. In feite gebruik je hier CSS custom properties binnen theme.json. Dit kan de ontwerpfase verbeteren en je meer flexibiliteit geven.
In deze gids gaan we dieper in op CSS custom properties om te onderzoeken hoe ze werken in combinatie met WordPress en theme.json. Maar voordat we dat doen, geven we een overzicht van theme.json, full site editing (FSE) en hoe CSS past in deze nieuwe ontwerpbenadering.
Hoe theme.json werkt met WordPress
Het theme.json bestand verscheen voor het eerst in WordPress 5.8. Het is een revolutionaire manier om WordPress thema’s te ontwerpen, waarbij JSON syntax wordt gebruikt om een configuratiebestand op te bouwen. WordPress leest dit en past de resultaten toe zonder dat er veel PHP, CSS of JavaScript nodig is.
De globale instellingen en stijlen binnen FSE bepalen verschillende visuele aspecten van je thema. Dit kunnen typische kleurenpaletten en typografie zijn, maar ook layout opties en individuele blok- en elementstijlen.
Hoewel FSE intuïtief, krachtig, aanpasbaar en eenvoudig te gebruiken is, kan theme.json helpen de kloof tussen eindgebruiker en ontwikkelaar te overbruggen. Bijna elke optie die theme.json je biedt, is ook zichtbaar in de Site Editor.
Het gebruik van theme.json biedt veel voordelen bij het bouwen van WordPress thema’s. Daar zijn een paar redenen voor:
- Je hebt een centrale locatie voor de ontwerpconfiguratie van je thema, waardoor het gemakkelijker te beheren en bij te werken is.
- Er is minder versluiering tussen de front-end ervaring, Site Editor, en de codebase van een thema.
- Het gebruik van
theme.jsonbiedt compatibiliteit met de toekomst van WordPress ontwikkeling en ontwerp. - De ingebouwde functionaliteit van WordPress betekent dat de gebruiker minder custom CSS hoeft toe te passen.
Laten we eens kijken hoe theme.json zich verhoudt tot de globale instellingen en stijlen van FSE.
Een inleiding tot de globale instellingen en stijlen van FSE
FSE vertegenwoordigt een nieuw tijdperk in de ontwikkeling van WordPress thema’s en globale instellingen en stijlen vormen de voorhoede. Hiermee kunnen gebruikers bijna elk aspect van het uiterlijk van een site aanpassen via de Site Editor functionaliteit.
Hier kun je aspecten van de layout van je thema aanpassen met opties waarvoor vroeger CSS of een externe pagebuilder plugin nodig was. Het aanpassen van marges, opvulling en randen zijn voorbeelden, maar er zijn er nog veel meer.
Je kunt zelfs veel van deze functionaliteit in- of uitschakelen binnen theme.json (of het eigen block.json bestand van een blok). Dit ondersteunt het aanpassen van de UI naast het algehele siteontwerp.
De opties die je tot je beschikking hebt, zijn weliswaar uitgebreid, maar dekken misschien niet elke behoefte. Dit geldt vooral als je een thema vanaf niks opbouwt. Dit is een taak die CSS custom properties kunnen helpen oplossen.
CSS custom properties begrijpen
In PHP, JavaScript en bijna elke programmeertaal bevatten variabelen de waarden van verschillende elementen in je code. Je kunt bijvoorbeeld waarden opslaan als namen, datums en getallen en deze door je hele programma gebruiken.
CSS3 variabelen – of CSS custom properties zoals we ze in dit artikel noemen – worden door de meeste browsers ondersteund. Internet Explorer ondersteunt ze niet en Opera Mini ook niet. Maar de grote spelers ondersteunen ze allemaal.
Met CSS custom properties kun je waarden opslaan die je kunt hergebruiken in je stylesheet. Het is een krachtige manier om dynamischer en flexibeler CSS te maken. Je kunt meerdere stijlregels bijwerken door een enkele waarde te veranderen.
Het concept van CSS variabelen is niet helemaal nieuw. Preprocessors zoals Sass gebruiken vergelijkbare functionaliteit. Neem bijvoorbeeld het volgende Sass:
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-colorDit verwerkt in typisch CSS:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}CSS custom properties brengen dit echter rechtstreeks naar de browser. Dit biedt enkele voordelen:
- Dynamische updates. In tegenstelling tot de meeste preprocessor variabelen, kun je CSS custom properties “on the fly” bijwerken met JavaScript.
- Cascaderend karakter. Custom properties volgen de CSS cascade, waardoor je meer flexibiliteit en meer contextbewuste styling krijgt.
Custom properties zijn ook performanter door het verminderen van overbodige code. Kleinere stylesheets betekenen snellere laadtijden.
De syntaxis voor CSS custom properties
Net als bij typische preprocessor variabelen is de syntaxis voor CSS custom properties eenvoudig. Er worden dubbele koppeltekens gebruikt in plaats van dollartekens om een property te specificeren:
:root {
--primary-color: #007bff;
}Van daaruit gebruik je de functie var() om die properties aan elementen toe te wijzen:
.button {
background-color: var(--primary-color);
}Merk op dat je ook custom properties kunt toewijzen met de @ property. Maar zoals je straks zult begrijpen, vereenvoudigt WordPress dit hele proces.
Waar je CSS custom properties kunt gebruiken
Veelzijdigheid is aan de orde van de dag als het gaat om CSS custom properties. Met WordPress en theme.json heb je een paar manieren om ze te gebruiken:
- Presets: Je kunt presets voor kleuren, lettertypen en spatiëring definiëren.
- Blokstijlen: Individuele blokken kunnen custom properties gebruiken voor consistente styling.
- Globale stijlen: Custom properties zijn van onschatbare waarde voor een site-breed ontwerp.
Je kunt volledig custom properties maken voor welk doel je maar wilt. Laten we eens kijken naar een praktisch voorbeeld van hoe je custom properties zou kunnen gebruiken in je theme.json bestand:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"line-height": {
"body": 1.5,
"heading": 1.2
}
}
},
"styles": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--body)"
},
"blocks": {
"core/heading": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--heading)"
}
}
}
}
}Hier definiëren we een vooraf ingestelde kleur en gebruiken we de property custom om line-height waarden te definiëren voor de koppen en de body van de pagina. WordPress genereert CSS properties voor de elementen die je definieert met custom. Verderop kunnen we deze custom properties toewijzen aan verschillende stijlen, instellingen, blokken en meer.
De voordelen van het gebruik van CSS custom properties
Je hebt misschien al ideeën over hoe CSS custom properties je kunnen helpen bij het ontwikkelen van thema’s. Toch zijn er nog genoeg voordelen om op te merken.
We hebben het al gehad over modulariteit en herbruikbaarheid. Alle gemeenschappelijke waarden die je definieert als custom properties zullen consistentie bevorderen en redundantie verminderen. Die redundantie vertaalt zich in betere potentiële prestaties voor je thema.
Voor de eindgebruiker bieden custom properties verschillende voordelen:
- Vereenvoudigd aanpassen. Gebruikers en site-eigenaren kunnen een thema aanpassen zonder dat ze ingewikkelde CSS-kennis nodig hebben. Zodra je variabelen blootlegt via
theme.json, hebben gebruikers toegang tot de instellingen via de Site Editor. - Betere compatibiliteit met FSE. Aangepaste properties zijn afgestemd op de principes van FSE, waardoor je flexibelere en dynamischere themaontwerpen kunt maken.
- Eenvoudiger onderhoud en updates. Als je gemeenschappelijke waarden in je hele thema moet bijwerken, betekent een custom property dat je ze maar op één plek hoeft te wijzigen. Het stroomlijnt je onderhoud en maakt updates en aanpassingen beter beheersbaar.
Over het algemeen kunnen custom properties de workflow voor het ontwikkelen van je thema’s verbeteren. Het bepalen ervan is ook eenvoudiger dan het gebruik van typische CSS-variabelen.
Hoe je CSS custom properties definieert in theme.json
Laten we eens kijken naar de praktische aspecten van het definiëren en gebruiken van CSS custom properties binnen theme.json. De eerste stap is leren hoe je ze schrijft.
Syntaxis en naamgevingsconventies
WordPress biedt de property custom om te helpen met definities. Deze is iets eenvoudiger te gebruiken dan de @ property of definities binnen pseudoklassen, en gebruikt de standaard sleutel/waarde-indeling:
{
"settings": {
"custom": {
"property-name": "value"
}
}
}Achter de schermen verwerkt WordPress deze definitie en genereert een CSS custom property met dubbele koppeltekens:
--wp--custom--<custom-element>--wp--custom-- zal altijd deel uitmaken van je CSS property en zal geen hoofdletters gebruiken. Als je bijvoorbeeld lineHeight definieert als een custom property, dan zal WordPress er “kebab case:” van maken
--wp--custom--line-heightAls het aankomt op naamgevingsconventies, kun je camel case gebruiken als je dat wilt, hoewel we kebab case adviseren voor de namen van je custom properties. Dit is consistent met de naamgevingsconventies van WordPress, verbetert de leesbaarheid en vermindert verwerkingsfouten.
Opmerking: CSS custom properties gebruiken dubbele koppeltekens omdat de CSS Werkgroep van het W3C je ook wil aanmoedigen om Sass te gebruiken (dat dollartekens gebruikt om properties te definiëren). Op deze manier heb je de optie van beide om je ontwerpen te verbeteren.
WordPress definieert al een aantal custom properties – of tenminste, thema’s hebben die optie om dat te doen. Dit betekent dat je CSS variabelen ziet binnen theme.json zonder een expliciete declaratie:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "var(--wp--preset--color--primary)",
"name": "Primary"
}
]
},
"custom": {
"spacing": {
"small": "1rem",
"medium": "2rem",
"large": "3rem"
}
}
},
"styles": {
"spacing": {
"blockGap": "var(--wp--custom--spacing--medium)"
}
}
}In dit voorbeeld definiëren we een primaire kleur met behulp van een bestaande vooraf ingestelde kleur. Vervolgens definiëren we enkele custom spatiëringsproperties en stellen deze in met var().
Dit betekent dat we geen harde waarden hoeven in te voeren in theme.json. Bovendien kunnen gebruikers deze waarden bijwerken in de Site Editor en ze door het hele thema laten verspreiden.
Presets vs. custom properties
Natuurlijk kun je met theme.json ook presets definiëren voor kleuren, lettergrootten en andere veelgebruikte thema-elementen. Aan de andere kant kun je custom properties gebruiken voor elke waarde die je wilt hergebruiken in je thema.
Het grootste verschil zit hem in de naamgevingsconventies en de toegankelijkheid. Gebruikers hebben geen toegang tot custom properties in de Site Editor zonder dat jij daar iets aan doet. Met presets genereert WordPress CSS die lijkt op hoe het custom properties verwerkt:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"fontFamily": {
"base": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
"headings": "'Helvetica Neue', Helvetica, Arial, sans-serif"
}
}
}
}Zodra WordPress dit verwerkt, kun je de inherente verschillen zien:
--wp--preset--primary: #007bff;
--wp--custom--font-family--base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
--wp--custom--font-family--headings: "'Helvetica Neue', Helvetica, Arial, sans-serif";Merk op dat verdere nests van properties dubbele koppeltekens zullen gebruiken, zelfs na het omzetten van hoofdletters naar kleine letters.
Globale en blokspecifieke CSS versus CSS custom properties
Met klassieke WordPress zou je aanvullende en custom CSS gebruiken aan de voorkant om elementen binnen je thema vorm te geven. Dit is nog steeds het geval met theme.json en FSE, hoewel de aanpak verschilt van CSS custom properties.
Als je naar de Site Editor gaat en naar het Styles scherm gaat, dan zie je de Additional CSS sectie. Dit lijkt veel op een Custom CSS paneel binnen klassieke WordPress installaties:
Dit is een manier om globale CSS aanpassingen toe te voegen aan een thema. Het is echter eigenlijk een manier om gebruikers de mogelijkheid te geven om CSS toe te voegen. Je kunt dit ook gebruiken om kleine wijzigingen aan te brengen die geen hele stylesheet rechtvaardigen.
Binnen theme.json gebruik je de property css om extra CSS te definiëren die je wilt toevoegen:
{
"version": 3,
"styles": {
"css": "margin: 0"
}
}Merk op dat je geen puntkomma’s hoeft te gebruiken aan het einde van CSS statements. Je kunt ook custom CSS voor blokken instellen:
{
"version": 2,
"styles": {
"blocks": {
"core/post-title": {
"css": "letter-spacing: 1px;"
}
}
}
}Elke keer dat je op deze manier CSS instelt binnen theme.json, zie je dat terug in de Additional CSS velden van de Site Editor. Onthoud echter dat niets van wat je aangeeft met css een CSS custom property is.
De ampersand (&) selector gebruiken
Net als Sass ondersteunt WordPress ook de ampersand selector, met een paar verschillen. In dit geval is het een geweldige manier om nested elementen en properties aan te geven. Dit kan relevant zijn als je ervoor kiest om CSS custom properties te declaren voor individuele blokken.
Neem bijvoorbeeld het volgende:
…
"styles": {
"blocks": {
"core/table": {
"css": "color:#333 & th{ background:#f5f5f5; }"
}
…Dit definieert een tekstkleur en een achtergrondkleur voor het table header element. Zodra WordPress het verwerkt, krijg je strakke, duidelijke CSS:
.wp-block-table > table {
color: #333;
}
.wp-block-table > table th {
background: #f5f5f5;
}Ampersand selectors zijn uitstekend als je de CSS waar je je op richt wilt uitbreiden. Een begrijpelijke manier om over de selector te denken is dat het helpt om je CSS elementen te scheiden. Neem bijvoorbeeld het volgende:
{
"version": 3,
"styles": {
"blocks": {
"core/avatar": {
"css": "& img {border-radius: 999px}"
}
}
}
}Dit voegt een randradius toe aan een avatar en voert de CSS uit zoals je zou verwachten:
.wp-block-image img {
border-radius: 999px;
}Echter, zonder de ampersand zou WordPress je declaraties samenvoegen:
…
.wp-block-imageimg
…Het gebruik van de ampersand selector voor je CSS custom properties zal iets zijn dat je regelmatig doet.
De rol van Kinsta in de ondersteuning van moderne WordPress ontwikkeling
De keuze van je hosting is net zo belangrijk als elke codeertaal, preprocessor of ander technisch element. Zonder een hostingprovider van goede kwaliteit kun je niet profiteren van de prestaties en toolset van theme.json of FSE.
Kinsta kan centraal staan in je hele workflow, dankzij onze ontwikkeltools. Je kunt beginnen met DevKinsta – onze lokale ontwikkelomgeving die Docker containers gebruikt om je WordPress installatie te isoleren:
Een handig stukje functionaliteit is DevKinsta’s mogelijkheid om gegevens te pushen en pullen tussen je lokale machine en je Kinsta testomgevingen:
Hiermee kun je je thema’s testen in een productie-achtige omgeving voordat je ze gaat distribueren. Wanneer je werkt met CSS custom properties, kun je ervoor zorgen dat ze werken in verschillende contexten. Kinsta’s API kan je CI/CD pijplijn ondersteunen als je klaar bent om live te gaan.
Andere aspecten van Kinsta’s architectuur helpen je bij je hele ontwikkelomgeving. Kinsta ondersteunt bijvoorbeeld Git, waardoor het eenvoudig is om versiebeheer uit te voeren op je themabestanden, inclusief theme.json. Voor het herhalen van custom properties, of gewoon experimenteren met verschillende configuraties, wil je weten dat je een terugdraaimogelijkheid hebt.
Tot slot, als je ervoor kiest om je thema op een Kinsta-server te gebruiken, verhoogt onze Edge Caching de prestaties van theme.json met wel 80 procent. Een website die snel draait, ongeacht de browser van de gebruiker, zorgt ervoor dat die custom toevoegingen snel worden weergegeven.
Samenvatting
Net zoals theme.json een krachtig configuratiebestand is voor het maken van flexibele en onderhoudbare WordPress thema’s, zijn CSS custom properties cruciaal voor de workflow. Dit is hoe je CSS opbouwt en declareert voor elementen waar de Site Editor niet bij kan. Het is ook belangrijk als je je eigen blokken bouwt of gewoon unieke WordPress thema’s wilt ontwikkelen met de ultieme aanpassingsdiepte. Bovendien heb je ook de optie om die CSS te delen met gebruikers via de Site Editor.
Zullen CSS custom properties deel uitmaken van je thema-ontwikkelworkflow? Zo ja, hoe ga je ze gebruiken? Deel je inzichten hieronder in de commentsectie!
Laat een reactie achter