[ad_1]
WordPress ontwikkelaars hebben meer controle dan ooit tevoren nu het WordPress ecosysteem blijft evolueren. Volledige sitebewerking, oftewel Full-Site Editing (FSE) maakt het speelveld gelijk voor alle gebruikers om een thema vanaf de grond op te bouwen, vooral wanneer het theme.json bestand wordt gebruikt.
Ontwikkelaars kunnen daarbij ook gebruik maken van het theme.json bestand. Dit configuratiebestand maakt het mogelijk om je WordPress thema tot in de kleinste details aan te passen zonder de verveling en/of complexiteit van complexere programmeertalen.
In deze uitgebreide gids verkennen we wat het theme.json bestand te bieden heeft, inclusief de relatie met volledige sitebewerking. Aan het eind zul je begrijpen hoe je de mogelijkheden kunt benutten om moderne, krachtige websites te maken, ongeacht je ontwikkelingsvaardigheden.
Even voorstellen: het theme.json bestand
In de basis is theme.json een configuratiebestand dat de instellingen en stijlen voor je WordPress thema definieert. Het maakt gebruik van JavaScript Object Notation (JSON), wat gestructureerde gegevens zijn die de key-value koppelingen van de moedertaal inheriten , zodat je je eigen code kunt schrijven.
Het theme.json bestand is belangrijk omdat het je controle geeft over verschillende aspecten van je thema. Denk hierbij aan kleurenpaletten, typografie-instellingen, layoutopties, stijlen per blok, custom CSS properties en nog veel meer. We zullen in de loop van het artikel meer details geven over deze aspecten.
Hoewel dit tot nu toe niet al te revolutionair klinkt, is theme.json belangrijk voor de toekomst van WordPress ontwikkeling. De volgende paragraaf legt uit waarom.
Waarom theme.json relevant is voor de ontwikkeling van WordPress thema’s
De typische benadering van WordPress voor het ontwikkelen van thema’s en het maken van plugins draait vaak om het bewerken van templatebestanden met PHP, het gebruik van het bestand functions.php en andere technische taken.
Het bestand theme.json markeert een belangrijke verschuiving, vooral voor het ontwikkelen van thema’s. Hier zijn een paar redenen voor:
- Het bestand vertegenwoordigt een enkele, georganiseerde locatie om de instellingen en stijlen van je thema te definiëren. Dit vermindert de behoefte aan een wirwar van CSS en PHP bestanden.
- Deze gecentraliseerde aanpak van het declaren van stijlen en instellingen in
theme.jsonbetekent dat WordPress efficiënter CSS kan genereren. Vergeleken met het gebruik van een framework zoals jQuery, is er een potentieel voor prestatieverbetering. - Je hebt meer controle over de styling van je site en individuele blokken dan ooit tevoren. Dit democratiseert het ontwikkelen van thema’s voor gebruikers met minder technische kennis.
- Naarmate FSE zich verder ontwikkelt, zal het bestand
theme.jsoneen cruciale rol spelen in de manier waarop thema’s, Global Styles en de Block Editor samenwerken.
Het combineren van al deze aspecten resulteert in een gestandaardiseerde manier om instellingen en stijlen voor je thema te definiëren. Voor iedereen die verschillende thema’s wil begrijpen en ermee wil werken, zal het gebruiken van theme.json je in staat stellen om robuustere, flexibelere en gebruiksvriendelijkere WordPress thema’s te maken. Sterker nog, deze creaties zullen aansluiten bij de toekomstige richting van het platform.
Waar kun je het theme.json bestand vinden?
Allereerst zul je geen theme.json bestand vinden in ’traditionele’ of ‘klassieke’ thema’s. Om dit bestand te vinden en te gebruiken, heb je een speciaal blokkenthema nodig. Dat gezegd hebbende, je kunt het bestand in elk thema maken zolang je WordPress 5.8 of hoger gebruikt.
De gebruikelijke locatie voor het theme.json bestand is in wp-content/themes/[jouw-thema]. Als het bestand daar niet staat, open dan je favoriete code-editor en maak het bestand zoals nodig. Maak je nu nog geen zorgen over de inhoud – daar komen we zo op.
Als je een nieuw bestand vanaf nul moet maken, maar ook de fijne kneepjes wilt zien van wat het bevat voordat je je eigen bestand aanpast, kijk dan eens naar het standaardthema Twenty Twenty-Four.
Dit is een blokthema en heeft een theme.json bestand dat je kunt bekijken. Het kan handig zijn om dit bestand open te hebben als we de structuur bekijken in de volgende paragrafen.
Wat je nodig hebt om met theme.json te werken
Natuurlijk zal niet iedereen in staat zijn om het configuratiebestand te openen en aan de slag te gaan. Je hebt nog steeds een aantal fundamentele vaardigheden en kennis nodig om een thema te bouwen en aan te passen:
- Basiskennis van JSON. We denken dat het iets is dat je snel kunt oppikken, maar toch is vertrouwdheid met de syntaxis en structuur van JSON cruciaal.
- Begrip van CSS. Je zult zien dat veel
theme.jsonobjecten en properties overeenkomen met de CSS tegenhangers. CSS ervaring zal hier een voordeel zijn. - Kennis van de WordPress Block Editor. Begrijpen hoe blokken werken, samen met hun aanpassingsmogelijkheden, zal je helpen bij het bouwen.
Hoewel het niet strikt noodzakelijk is, moedigen we je aan om op zijn minst de belangrijkste FSE concepten te begrijpen, die je zullen helpen om het theme.json bestand op een effectievere manier te gebruiken. Hierbij is het ook belangrijk om te kijken hoe jouw bewerkingen en aanpassingen het gedrag van de eindgebruiker zullen beïnvloeden. Er zullen dan ook gevallen zijn waarin je nog steeds HTML en JavaScript moet gebruiken om je visie te realiseren.
Tot slot zijn er een paar technische ‘extra’s’ die we aanraden:
- Een code-editor. Als je een kwaliteitseditor kiest die JSON syntax highlighting en validatie biedt, wordt het plezieriger om je workflow te doorlopen.
- Een lokale ontwikkelomgeving. Als je een tool zoals DevKinsta gebruikt om aan je thema te werken, kun je snel experimenteren en je wijzigingen testen zonder dat dit invloed heeft op een live site.
Met deze hulpmiddelen en kennis ben je goed uitgerust om te beginnen met het aanpassen van je WordPress thema met theme.json.
De anatomie, structuur en hiërarchie van theme.json bekijken
Het bestand theme.json heeft duidelijk een structuur die je moet begrijpen. Het heeft ook een hiërarchie, samen met enkele unieke elementen die verdere uitleg nodig hebben.
Dit is waarschijnlijk het meest complexe deel van het gebruik van het configuratiebestand, maar zelfs dan zul je de concepten gemakkelijk begrijpen.
Laten we beginnen met de structuur en dan verder gaan met de andere elementen van theme.json.
Basisstructuur
Aangezien het bestand het JSON formaat volgt, begrijp je misschien al het algemene concept van de structuur. Allereerst wordt het hele bestandsobject ingepakt in accolades, net als enkele van de andere objecten daarbinnen. Elk object bestaat uit sleutel-waarde paren, gebruik enkele of dubbele aanhalingstekens voor sleutels en komma’s om de regel te eindigen.
Het absolute minimum dat een theme.json bestand nodig heeft zijn version, settings, en styles objecten:
{
"version": 2,
"settings": {
// Global settings go here
},
"styles": {
// Global styles go here
}
}De objecten settings en styles zijn eenvoudig, maar version vereist meer uitleg. Deze waarde zal een geheel getal zijn dat overeenkomt met de API versie die je gebruikt om je bestand te lezen. De huidige API versie is 3, hoewel versie 2 ook gebruikelijk is, en je kunt migreren van oudere versies.
De meeste theme.json bestandsstructuren bevatten ook een schema. In een notendop kun je hiermee werken met auto-completion binnen code-editors en het biedt validatie voor het bestand. Je voegt dit toe bovenaan het bestand:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
},
"styles": {
}
}Van hieruit voeg je verschillende properties en objecten toe aan instellingen en stijlen om je bestand verder uit te bouwen.
Hiërarchie
Het bestand theme.json volgt een hiërarchische structuur en is slechts één niveau van de algemene hiërarchie voor instellingen en stijlen op je site. Als je kennis hebt van CSS, is het gemakkelijker om dit te begrijpen, omdat dit bestand qua complexiteit lijkt op CSS.
De aanpassingen die je maakt op theme.json zijn niet altijd zichtbaar op de voorkant van je site. Gebruikersconfiguraties hebben voorrang op alles. Dit betekent dat alle wijzigingen die plaatsvinden in het scherm Appearance > Editor binnen WordPress zichtbaar zullen zijn op de voorkant:
Als je een childthema gebruikt en een theme.json bestand toevoegt, dan overschrijft dit alle andere wijzigingen dan die met de site-editor zijn gemaakt. Op dezelfde manier zal alles wat je definieert in het configuratiebestand van het hoofdthema de standaardinstellingen en -stijlen van WordPress overschrijven. Het is dit bestand waar we ons in deze post op richten, hoewel WordPress ook zijn eigen theme.json bestand heeft.
Hoewel er in dit artikel niet op wordt gefocust, kun je ook waarden overschrijven met behulp van hooks en filters. Met deze dynamische filters kun je plugins en thema’s maken die ook de instellingen en stijlen van het thema en het platform veranderen.
Blok grammatica
Als je naar de WordPress Block Editor of Site Editor gaat, een bericht of pagina opent en de Code Editor aanzet, zul je zien dat er veel HTML-comments in de inhoud staan:
Dit komt omdat blockthema’s, in plaats van PHP bestanden, HTML bestanden samen met comments en block markup gebruiken om je site te maken. De combinatie van deze elementen resulteert in de ‘block grammatica’ die je nodig hebt om je theme.json bestand te schrijven.
Voor blokken die inhoud bevatten, zoals het Paragraph blok, wrap je die inhoud:
<!-- wp:paragraph -->
<p>Content goes here!</p>
<!-- /wp:paragraph -->
In andere gevallen heb je alleen comments van één regel nodig of comments die zichzelf sluiten. Bij sommige Blocks combineer je typen om je lay-outs en ontwerpen te maken. Je kunt deze opmerkingen ook nesten:
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->Hier maken we een Column blok met behulp van wrapper comments. Binnenin kunnen we beginnen met het toevoegen van HTML om die kolommen te ontwerpen en individuele kolom wraps toe te voegen. Dit is triviaal aan de front-end, omdat je blokken vaak binnen elkaar plaatst.
Om de opmaak voor een bepaald blok te vinden, kun je in de Block Editor Handbook zoeken tot je vindt wat je nodig hebt. De eenvoudigste manier is echter om het blok toe te voegen aan WordPress, de Code Editor te openen en de opmaak vanaf daar te kopiëren.
Wat betreft de wijzigingen die je binnen die opmaak zult maken, daarover later meer.
Theme.json en WordPress Full-Site Editing combineren
Uit de discussie over hiërarchie zul je begrijpen dat theme.json een groot onderdeel is van FSE. Beide werken samen om je een uitgebreide thematische oplossing voor WordPress te geven. De Global Styles interface is bijvoorbeeld in wezen de visuele weergave van je theme.json instellingen.
Je kunt de instellingen wijzigen in het paneel Global Styles of in het configuratiebestand, en WordPress zal de corresponderende waarden bijwerken als dat nodig is. Hoewel de instellingen van de Site Editor voorrang hebben, fungeert theme.json als basis voor de eigen stijlen van je thema. Eindgebruikers kunnen met Global Styles de standaardinstellingen vervangen door hun eigen aanpassingen, zonder dat ze code nodig hebben of het bestand theme.json hoeven te bewerken.
Bovendien worden de CSS properties die je definieert in theme.json beschikbaar in de Global Styles interface. Hierdoor kunnen gebruikers deze properties gebruiken voor een consistentere styling op een hele site. Dit strekt zich ook uit tot de mogelijkheid om specifieke Block stijlen en instellingen te definiëren, die je verder kunt aanpassen vanuit het WordPress dashboard.
Kortom:theme.json biedt meer controle over instellingen, stijlen en meer. Het is een hulpmiddel voor developers dat een eenvoudigere en meer gestroomlijnde ervaring biedt dan de klassieke benaderingen. Daarentegen geeft de Global Styles interface iedereen de kans om een thema naar eigen smaak aan te passen. Naarmate je thema’s verder ontwikkelt, zul je zien hoe beide samen werken om siteontwerpen en layouts te maken.
Werken met de properties van het theme.json bestand
Met een goed begrip van de basis, kun je beginnen te werken met de objecten en properties binnen theme.json. We zullen niet alle gebruiksmogelijkheden kunnen behandelen. Aan het einde van deze tutorial zul je echter in staat zijn om thema’s te bouwen die volledige functionaliteit bieden en er geweldig uitzien aan de voorkant.
Settings
Met de property settings kun je bepalen welke functies je aanbiedt in de site-editor en hoe ze zich gedragen. Het is een property op het hoogste niveau, en je zult meestal meerdere niveaus van nesting vinden.
Zodra we kijken naar stijlen en hun variaties, zul je zien dat er kruisbestuiving is tussen deze opties, maar beide typen hebben een rol bij het maken van je thema.
Je hebt een select aantal properties tot je beschikking:
{
"version": 3,
"settings": {
"appearanceTools": false,
"blocks": {},
"border": {},
"color": {},
"custom": {},
"dimensions": {},
"layout": {},
"position": {},
"shadow": {},
"spacing": {},
"typography": {},
"useRootPaddingAwareAlignments": false
}
}De officiële WordPress Theme Developer Handbook bevat een referentie voor al deze instellingen (en stijlen). Hier is echter een snel overzicht van een paar belangrijke die meer uitleg nodig hebben:
appearanceTools. Deze algemene property maakt een aantal andere mogelijk en is bedoeld als tijdsbesparing. Hiermee kun je randopties, regelhoogtes voor typografie, opvulling, marges en nog veel meer instellen.blocks. Het meeste werk zal gaan over globale instellingen en stijlen, maar met de propertyblockskun je dit per blok doen. We gaan hier niet dieper in op dit concept, maar de Theme Developer Handbook heeft uitstekende documentatie over dit facet vantheme.json.custom. Deze unieke property heeft geen functionaliteit in die zin dat jij bepaalt wat het doet. Je zult het gebruiken om custom CSS properties voor je thema te maken, en de mogelijkheden die je hebt zijn groot.useRootPaddingAwareAlignments. Nogmaals, dit is een complexe property die we niet volledig zullen behandelen. Het helpt je in wezen om de horizontale opvulstijlen van je thema te plaatsen en heeft veel kracht. Je kunt het gebruiken als je items over de volledige breedte wilt laten uitrekken tot de randen van het scherm, terwijl je padding gebruikt op het basiselement.
Merk op dat je geen properties hoeft toe te voegen aan theme.json waar je niet mee wilt werken. Als je bijvoorbeeld niet wilt werken met appearanceTools, kun je deze gewoon weglaten in plaats van definiëren met false.
Hoe instellingen te definiëren in theme.json
Als het gaat om het definiëren van instellingen, heeft elke property een aantal sub-properties van sleutelwaardeparen. Zo kun je bijvoorbeeld kleurenpaletten maken:
{
"version": 3,
"settings": {
"color": {
"palette": [
{
"color": "#0073aa",
"name": "Primary",
"slug": "primary"
},
{
"color": "#23282d",
"name": "Secondary",
"slug": "secondary"
}
],
…Andere properties hebben eenvoudige Booleaanse waarden, waarmee die properties worden in- of uitgeschakeld binnen de Site Editor:
{
"version": 3,
"settings": {
"color": {
"background": true,
"defaultPalette": true,
"link": true,
"text": true
}
}
}Zodra je je instellingen hebt gedefinieerd, kun je er styling voor introduceren. Laten we dit nu onderzoeken.
Stijlen en stijlvariaties
Terwijl settings de toegang tot bepaalde stylingopties definieert, kun je met de property styles die globale stijlen voor je thema definiëren. Nogmaals, het is een property op het hoogste niveau die meerdere niveaus van nesting gebruikt. Je kunt je richten op specifieke elementen, blokken of zelfs custom CSS properties gebruiken.
Het is belangrijk om hier themastijlen te definiëren, zodat je ze kunt openen en aanpassen vanuit de Site Editor. Je kunt met een aantal elementen werken:
{
"version": 3,
"styles": {
"border": {},
"color": {},
"dimensions": {},
"filter": {},
"shadow": {},
"spacing": {},
"typography": {},
"css": {}
}
}Veel van deze zul je echter niet vaak gebruiken als properties op secundair niveau. In plaats daarvan werken sommige voornamelijk met blokken of elementen. Bijvoorbeeld:
…
"styles": {
"blocks": {
"core/group": {
"color": {
"text": "#000000",
"background": "#ffffff",
"link": "#777777"
}
…Voor globale stijlen werk je op de root – die correleert met de <body> tag van je pagina. Voor specifieke elementen kun je een vergelijkbare structuur volgen als voor blokken, dit keer met behulp van de property elements:
…
"styles": {
"elements": {
"button": {
"color": {
"text": "#ffffff",
"background": "#aa3f33"
}
…Als je kijkt naar de wijzigingen die je aanbrengt in de Site Editor, zou je moeten zien dat ze op hun plaats staan. De opmaak genereert ook CSS voor de stijlen die je maakt:
Merk op dat je ook pseudo-klassen voor elementen kunt stijlen, zoals hover en focus stijlen:
…
"elements": {
"button": {
"color": {
"text": "#ffffff",
"background": "#aa3f33"
},
":hover": {
"color": {
"background": "#822f27"
}
…Het toepassen van stijlen is nog diepgaander dan dit, en dat is een van de fantastische voordelen van het gebruik van theme.json.
Stijlvariaties
Voordat we verder gaan, wil je meer weten over stijlvariaties. Je kunt deze verschillende kleurenpaletten en typografische stijlen zien in de FSE interface:
Deze zijn echter niet iets dat je codeert in theme.json. In plaats daarvan maak je alternatieve versies van het bestand, geef je ze een unieke naam en sla je ze op in de styles map van een thema:
Merk op dat de titel in de opmaak uniek is voor elk alternatief JSON bestand. Het is echter een optioneel veld – hoewel we je aanraden het te gebruiken voor de duidelijkheid en de beste ervaring.
Custom templates en template parts
Net als bij stijlvariaties kun je met theme.json custom templates en bijbehorende template parts registreren. Het registreren van de opmaak is eenvoudig:
"customTemplates": [
{
"name": "my-template",
"title": "My Template",
"postTypes": [
"page",
"post"
]
}
]Met de property customTemplates moet je drie elementen definiëren:
name. Dit komt overeen met een template dat je maakt in de templates map van je thema, zoals /template/mijn-template.html.title. Dit is de menselijk leesbare versie van de naam van de template.postTypes. Zonder definitie is dit standaard een pagina, maar je kunt een reeks berichttypes specificeren waarvoor de template geschikt is.
Gebruikers kunnen de templates die je registreert selecteren in de Site Editor of Block Editor:
Als het gaat om template parts, hoef je ze niet te registreren, maar we raden het wel aan. De structuur is vergelijkbaar met het registreren van templates:
…
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
…Hier komen de naam en de titel overeen met dezelfde definities als bij volledige templates. Het gebied heeft betrekking op waar het onderdeel thuishoort: de header, footer, of uncategorized zijn de standaard, maar je kunt template parts toewijzen aan elk custom gebied.
We raden je aan om ook te kijken hoe je deze template parts kunt weergeven, omdat ze niet zichtbaar zijn zonder extra codering. Desondanks is het eenvoudig om ze te registreren.
Patterns
Laten we het tot slot hebben over Block Patterns. Je kunt er een willekeurig aantal bundelen in je theme.json bestand met behulp van een array op het hoogste niveau. Elk geschikt patroon uit de WordPress Pattern Library is beschikbaar om in je bestand op te nemen:
Het definiëren van de array is eenvoudig: je gebruikt de property patterns en de slug van de bijbehorende pattern uit de URL van de bibliotheek:
Met deze slug kun je de patterns markup vullen:
{
"version": 3,
"patterns": [
"fullwidth-vertically-aligned-headline-on-right-with-description-on-left"
]
}Je kunt ze selecteren vanuit de Pattern Directory van de Block Editor:
Deze eenvoudige manier om Pattern Library elementen in je thema’s te plaatsen is handig en waardevol. Het is nog een reden waarom het theme.json bestand snel een favoriete manier van bouwen aan het worden is onder WordPress thema-ontwikkelaars.
De workflow voor het aanpassen van je WordPress website met theme.json
Zodra je de belangrijkste onderdelen van theme.json begrijpt, is het ontwikkelen van je workflow om het te gebruiken een belangrijke stap. Het is een nieuwe manier om thema’s te ontwikkelen en moet daarom op een andere manier worden behandeld dan de klassieke methoden.
Onze aanpak zou zijn om de schema URL in te stellen, een API versie te kiezen en eerst je globale instellingen te definiëren. Dit omvat je kleurenpalet, typografieopties en layoutinstellingen. In de meeste gevallen zou het ook nuttig zijn om de appearanceTools te activeren:
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"appearanceTools": true,
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#0073aa"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#23282d"
}
]
},
"typography": {
"fluid": true,
"fontSizes": [
{
"size": "13px",
"slug": "small",
"name": "Small"
},
{
"size": "16px",
"slug": "normal",
"name": "Normal"
…Vervolgens kun je custom CSS properties maken met de slugs die je hebt gedefinieerd. Je kunt bijvoorbeeld aangepaste lettertypegewichten hebben gemaakt:
…
"custom": {
"fontWeight": {
"light": 300,
"regular": 400,
"medium": 500,
"bold": 700
},
…Als je klaar bent met je instellingen, is het tijd om stijlen te specificeren.
…
"styles": {
"color": {
"background": "var(--wp--preset--color--base)",
"text": "var(--wp--preset--color--main)"
},
…Het aanpassen van je blokstijlen komt hierna en dit kan een groot deel van je theme.json bestand in beslag nemen.
…
"styles": {
"block": {
"core/separator": {
"color": {
"text": "var(--wp--preset--color--main)"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--large)"
}
},
"core/site-tagline": {
"spacing": {
"margin": {
"bottom": "20px"
}
},
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
}
},
"core/site-title": {
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)",
"fontWeight": "var(--wp--custom--font-weight--semi-bold)",
"lineHeight": "var(--wp--custom--line-height--none)"
},
…Tot slot wil je alle custom templates en template parts ontwerpen en registreren binnen theme.json. Dit is ook het moment om alle Block patterns die je wilt gebruiken te registreren en indien nodig aan te maken.
Kinsta gebruiken als onderdeel van je thema-ontwikkeling en customization workflow
Voordat je veranderingen live zet, wil je alles eerst testen. Tot nu toe heb je waarschijnlijk gewerkt met een lokaal ontwikkelprogramma zoals DevKinsta:
Het is echter ook belangrijk om je ontwikkeling te controleren op een live site. Met de Kinsta integratie van DevKinsta kun je een site naar een standaard of premium testomgeving pushen:
Vanaf daar kun je je thema uitproberen op onze best-in-class cloudarchitectuur en geniet je van volledige controle over de wijzigingen die je live zet.
Je kunt ook gebruikmaken van onze complete oplossing voor backupbeheer, waarmee je dagelijkse automatische backups kunt terugzetten naar zowel live- als testomgevingen. Bovendien worden al onze testomgevingen geleverd met DevTools om je te helpen de prestaties van je site te controleren voordat je hem live zet.
Of je theme.json of WordPress Full-Site Editing moet gebruiken
Gezien de kruisbestuiving tussen theme.json en volledige sitebewerking, vraag je je misschien af waarom je het ene zou gebruiken boven het andere. In feite zijn beide geschikt voor verschillende scenario’s en moeten ze samen worden gebruikt.
theme.json zal bijvoorbeeld je go-to zijn in de volgende situaties:
- Je ontwikkelt thema’s en maakt een nieuw thema vanaf nul.
- JSON is een taal die je begrijpt en waar je goed mee kunt werken.
- Je wilt een programmatische methode om standaard stijlen en instellingen voor je thema te definiëren.
- De stijlen en instellingen die je wilt implementeren hebben meer controle nodig dan wat je standaard kunt vinden in de Site Editor.
Toegegeven, dit laatste is een niche, omdat FSE bijna exact de functionaliteit van theme.json weerspiegelt. Daarom zal volledige sitebewerking voor de meeste gebruikers zinvoller zijn in de volgende scenario’s:
- Je bent een site-eigenaar die een bestaand thema wil aanpassen.
- JSON is niet iets waar je bekend mee bent.
- Visuele interfaces zijn zinvoller voor je aanpassings- en ontwikkelingsworkflow.
- Je wilt snel aanpassingen kunnen maken zonder uitgebreide codering.
In de praktijk zal het thema een configuratiebestand nodig hebben om zijn fundamenten te definiëren. Vanaf daar neemt de hiërarchie het over en kunnen site-eigenaren FSE gebruiken om verdere aanpassingen te maken.
Samenvatting
Het configuratiebestand theme.json is revolutionair voor de ontwikkeling van WordPress thema’s. Het geeft je een centrale plek voor de instellingen en stijlen van je thema en stelt je in staat om flexibelere, beter te onderhouden en aan te passen thema’s te maken.
Je gebruikt het bestand naast de Site Editor binnen WordPress om tot het uiteindelijke ontwerp van een site te komen. De opties die je instelt binnen theme.json dienen als standaard, die de eindgebruiker verder aanpast. Het goede nieuws is dat het coderen van dit bestand eenvoudiger is dan het tweaken van een reeks PHP en CSS bestanden – en het is de toekomst van het WordPress ontwerp.
Heb je vragen over het gebruik van het theme.json bestand in WordPress? Laat het ons weten in de comments hieronder!
Kinsta
Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.
