Ontwikkelen van aangepaste CSS-eigenschappen met theme.json voor verbeterde WordPress-thema’s

Ontwikkelen van aangepaste CSS WordPress-themaontwikkelaars kunnen een theme.jsonbestand gebruiken om een ​​proces te stroomlijnen dat voorheen grotendeels op PHP vertrouwde. U kunt echter nog steeds uw HTML-, JavaScript- en PHP-vaardigheden gebruiken om uw thema’s te bouwen — en CSS is daarop geen uitzondering. U gebruikt zelfs aangepaste CSS-eigenschappen binnen theme.json. Dit kan de ontwerpfase verbeteren en meer flexibiliteit bieden.

In deze gids pakken we CSS-aangepaste eigenschappen rechtstreeks aan om te ontdekken hoe ze samenwerken met WordPress en theme.json. Maar voordat we daar zijn, vatten we theme.json, full site editing (FSE) en hoe CSS past in deze nieuwe ontwerpbenadering samen.

Hoe theme.json werkt met WordPress

Het theme.jsonbestand verscheen voor het eerst in WordPress 5.8 . Het is een revolutionaire manier om WordPress-thema’s te ontwerpen, met behulp van JSON-syntaxis om een ​​configuratiebestand te bouwen . WordPress leest dit en past de resultaten toe zonder dat er veel PHP , CSS of JavaScript nodig is .

Een code-editorvenster met de inhoud 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 zichtbaar.
Een theme.json- bestand in een code-editor.
De globale instellingen en stijlen binnen FSE regelen verschillende visuele aspecten van uw thema. Deze kunnen typische kleurenpaletten en typografie omvatten, maar ook lay-outopties en individuele blok- en elementstijlen.

Hoewel FSE intuïtief, krachtig, aanpasbaar en eenvoudig te gebruiken is, theme.jsonkan het helpen de kloof tussen de eindgebruiker en de ontwikkelaarsrol te overbruggen. Vrijwel elke optie theme.jsondie u krijgt, is ook zichtbaar in de Site Editor.

De interface van de WordPress Site Editor, waarbij de startpagina van een website aan de rechterkant van het scherm wordt weergegeven, terwijl de zwarte zijbalk aan de linkerkant opties biedt voor navigatie, stijlen, pagina’s, sjablonen en patronen.
De hoofdinterface van de Site Editor in WordPress.
Het gebruik theme.jsonbiedt veel voordelen bij het bouwen van WordPress-thema’s . Hiervoor zijn een paar redenen:

U beschikt over een centrale locatie voor de ontwerpconfiguratie van uw thema, waardoor u deze eenvoudiger kunt beheren en bijwerken.
Er is minder onduidelijkheid tussen de front-endervaring, de Site Editor en de codebase van een thema.
Het gebruik ervan theme.jsonbiedt compatibiliteit met de toekomst van WordPress-ontwikkeling en -ontwerp.
Dankzij de ingebouwde functionaliteit van WordPress hoeft de gebruiker minder vaak aangepaste CSS toe te passen.
Laten we eens kijken hoe dit theme.jsonzich verhoudt tot de globale instellingen en stijlen van FSE.

Een inleiding tot de wereldwijde instellingen en stijlen van FSE

FSE vertegenwoordigt een nieuw tijdperk van WordPress-thema-ontwikkeling, en Global Settings en Styles staan ​​voorop. Dit stelt gebruikers in staat om bijna elk aspect van het uiterlijk van een site aan te passen via de functionaliteit van de Site Editor.

De WordPress Site Editor toont de invoervelden van het Styles-paneel in de rechterzijbalk. Hiermee kunt u typografische instellingen aanpassen. De linkerkant toont een gedeeltelijke weergave van een webpagina met een blauw thema.
Het paneel Stijlen in de WordPress Site Editor.
Hier kunt u aspecten van de lay-out van uw thema aanpassen met opties waarvoor voorheen CSS of een externe paginabuilderplugin nodig was . Marges, opvulling en randen aanpassen zijn voorbeelden, maar er zijn er nog veel meer.

De WordPress Site Editor, met het Layout Customization Panel. Hiermee kunt u de afmetingen van de inhoud, de opvulling en de blokafstand 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 binnen de Site Editor.
Je kunt zelfs veel van deze functionaliteit in- of uitschakelen binnen theme.json(of een eigen bestand van een blok block.json). Dit ondersteunt UI-aanpassing naast het algehele siteontwerp.

De opties die u tot uw beschikking hebt, zijn weliswaar uitgebreid, maar dekken mogelijk niet alle behoeften. Dit geldt met name als u een thema vanaf nul bouwt. Dit is een taak die CSS-aangepaste eigenschappen kunnen helpen oplossen.

What is that WordPress Theme?
Curious what WordPress theme a site is using? Use our free tool to gain insights into what theme is being used, and other key info.

Search theme

Inzicht in aangepaste CSS-eigenschappen

In PHP, JavaScript en bijna elke programmeertaal bevatten variabelen de waarden van verschillende elementen in uw code. U kunt bijvoorbeeld waarden zoals namen, datums en getallen opslaan en deze in uw programma gebruiken.

CSS3-variabelen — of aangepaste CSS-eigenschappen zoals we ze in dit bericht noemen — worden door de meeste huidige browsers ondersteund . Internet Explorer ondersteunt ze niet, en Opera Mini ook niet. Toch doen de grote spelers dat allemaal .

Een compatibiliteitsgrafiek voor CSS-variabelen (aangepaste eigenschappen) in verschillende webbrowsers. De grafiek toont een hoog wereldwijd gebruik van 97,05 procent en geeft aan dat er brede ondersteuning is in belangrijke desktop- en mobiele browsers.
Op de website Can I Use vindt u de huidige ondersteuning voor aangepaste CSS-eigenschappen.
Met aangepaste CSS-eigenschappen kunt u waarden opslaan om ze in uw stylesheet te hergebruiken. Het is een krachtige manier om dynamischere en flexibelere CSS te maken. U kunt meerdere stijlregels bijwerken door één waarde te wijzigen.

Het concept van CSS-variabelen is niet helemaal nieuw. Preprocessors zoals Sass gebruiken vergelijkbare functionaliteit. Neem bijvoorbeeld de volgende Sass:

Echter, CSS custom C Level Executive List  properties brengen dit direct naar de browser. Dit biedt een aantal voordelen:

Dynamische updates. In tegenstelling tot de meeste preprocessorvariabelen kunt u aangepaste CSS-eigenschappen ‘on the fly’ bijwerken met behulp van JavaScript.
Cascading nature. Aangepaste eigenschappen volgen de CSS-cascade, wat u meer flexibiliteit en meer contextbewuste styling geeft.
Aangepaste eigenschappen zullen ook beter presteren door het verminderen van coderedundantie. Kleinere stylesheets betekenen snellere laadtijden.

De syntaxis voor aangepaste CSS-eigenschappen

Net als bij typische preprocessorvariabelen is de syntaxis voor aangepaste CSS-eigenschappen eenvoudig. Er worden dubbele streepjes gebruikt in plaats van dollartekens om een ​​eigenschap te specificeren:

Merk op dat u ook aangepaste top professions of the next 10 years  eigenschappen kunt toewijzen met behulp van de igenschap. Echter, zoals u zo meteen zult begrijpen, vereenvoudigt WordPress dit hele proces.

Waar u aangepaste CSS-eigenschappen kunt gebruiken

Veelzijdigheid is de orde van de dag als het gaat om CSS aangepaste eigenschappen. Met WordPress en theme.jsonU hebt een paar manieren om ze te gebruiken:

Voorinstellingen: U kunt voorinstellingen voor kleur, lettertype en spatie definiëren.
Blokstijlen: afzonderlijke blokken kunnen aangepaste eigenschappen gebruiken voor een consistente stijl.
Globale stijlen: Aangepaste eigenschappen zijn van onschatbare waarde voor het ontwerp van de hele site.
U kunt volledig aangepaste eigenschappen maken voor elk doel dat u wenst. Laten we eens kijken naar een praktisch voorbeeld van hoe u aangepaste eigenschappen in uw theme.jsonbestand kunt gebruiken:

Hier definiëren we een kleurvoorinstelling en gebruiken we de customeigenschap om line-heightwaarden te definiëren voor de paginakoppen en body. WordPress genereert CSS-eigenschappen voor de elementen die u definieert met behulp van custom. Verderop kunnen we deze aangepaste eigenschappen toewijzen aan verschillende stijlen, instellingen, blokken en meer.

De voordelen van het gebruik van aangepaste CSS-eigenschappen

U heeft misschien al ideeën over hoe CSS custom properties u kunnen helpen bij het ontwikkelen van thema’s. Toch zijn er genoeg voordelen om op te merken.

We hebben het al gehad over adb directory  modulariteit en herbruikbaarheid. Alle algemene waarden die u definieert als aangepaste eigenschappen, bevorderen consistentie en verminderen redundantie. Die redundantie vertaalt zich in betere potentiële prestaties voor uw thema.

Voor de eindgebruiker bieden aangepaste eigenschappen verschillende voordelen:

Vereenvoudigde aanpassing. Gebruikers en site-eigenaren kunnen een thema aanpassen zonder dat ze complexe CSS-kennis nodig hebben. Zodra u variabelen blootstelt via theme.json, kunnen gebruikers de instellingen openen via de Site Editor.
Betere compatibiliteit met FSE. Aangepaste eigenschappen sluiten aan bij FSE-principes, waardoor u flexibelere en dynamischere thema-ontwerpen kunt maken.
Eenvoudiger onderhoud en updates. Als u algemene waarden in uw thema moet bijwerken, betekent een aangepaste eigenschap dat u deze op slechts één plek kunt wijzigen. Het stroomlijnt uw onderhoud en maakt updates en tweaks beter beheersbaar.
Over het algemeen kunnen aangepaste eigenschappen uw thema-ontwikkelingsworkflow verbeteren. Het bepalen ervan is ook eenvoudiger dan het gebruik van typische CSS-variabelen.

No surprises, just savings
Unlock $300 worth of enterprise-level integrations included in every Managed WordPress plan. High-performance CDN, DDoS protection, malware and hack mitigation, edge caching, Google’s fastest CPU machines, and more.

Show me

Hoe u aangepaste CSS-eigenschappen in theme.json definieert

Laten we eens kijken naar de praktische aspecten van het definiëren en gebruiken van aangepaste CSS-eigenschappen binnen theme.json. De eerste stap is leren hoe je ze schrijft.

Syntaxis en naamgevingsconventies

WordPress biedt de customeigenschap om te helpen met definities. Dit is iets gemakkelijker te gebruiken dan de eigenschap of definities binnen pseudo-klassen, en gebruikt de standaard sleutel/waarde-indeling: