Zo verbeter je WordPress thema’s met CSS properties in theme.json

ict

[ad_1]

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.

Een code editor venster met de content van een theme.json bestand voor een WordPress thema. De JSON structuur definieert thema-instellingen, waaronder schemaversies, patronen en kleurinstellingen. Op de achtergrond is een schilderachtig landschap met bergen, bossen en terrasvormige velden te zien.
Een theme.json bestand in een code editor.

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.

De interface van de WordPress Site Editor, met de startpagina van een website aan de rechterkant van het scherm, terwijl de zwarte, linker zijbalk opties geeft voor navigatie, stijlen, pagina's, templates en patronen.
De hoofdinterface van de Site Editor binnen WordPress.

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.json biedt 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.

De WordPress Site Editor toont de invoervelden van het paneel Stylesin de rechter zijbalk. Hiermee kun je de typografie-instellingen aanpassen. Aan de linkerkant zie je een gedeeltelijke weergave van een webpagina met een blauw thema.
Het paneel Styles in de WordPress Site Editor.

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.

De WordPress Site Editor, met het paneel Lay-out aanpassen. Hiermee kun je de afmetingen van de content, de vulling en de afstand tussen blokken aanpassen. De linkerkant van het scherm toont een gedeeltelijke weergave van een webpagina met een blauw thema.
Werken met typische CSS-elementen zoals opvulling en marges in de Site Editor.

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.

[ad_2]

https://kinsta.com/nl/blog/css-custom-properties-theme-json/