{"id":60064,"date":"2024-08-05T09:23:57","date_gmt":"2024-08-05T07:23:57","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=60064&#038;preview=true&#038;preview_id=60064"},"modified":"2024-08-08T15:30:54","modified_gmt":"2024-08-08T13:30:54","slug":"theme-json","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/theme-json\/","title":{"rendered":"Zo profiteer je van de kracht van theme.json: customize je WordPress thema als een pro"},"content":{"rendered":"<p>WordPress ontwikkelaars hebben meer controle dan ooit tevoren nu het WordPress ecosysteem blijft evolueren. Volledige sitebewerking, oftewel <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-full-site-editing\/\">Full-Site Editing (FSE)<\/a> maakt het speelveld gelijk voor alle gebruikers om een thema vanaf de grond op te bouwen, vooral wanneer het <code>theme.json<\/code> bestand wordt gebruikt.<\/p>\n<p>Ontwikkelaars kunnen daarbij ook gebruik maken van het <code>theme.json<\/code> 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.<\/p>\n<p>In deze uitgebreide gids verkennen we wat het <code>theme.json<\/code> 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.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Even voorstellen: het theme.json bestand<\/h2>\n<p>In de basis is <code>theme.json<\/code> 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.<\/p>\n<figure id=\"attachment_183346\" aria-describedby=\"caption-attachment-183346\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183346 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/json-code.png\" alt=\"Een JSON codefragment dat een woordenlijststructuur definieert. Het bevat een item voor SGML (Standard Generalized Markup Language) met details zoals het acroniem, de afkorting, de definitie en verwante termen.\" width=\"1200\" height=\"482\"><figcaption id=\"caption-attachment-183346\" class=\"wp-caption-text\">Voorbeeld JSON code.<\/figcaption><\/figure>\n<p>Het <code>theme.json<\/code> 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\u00a0 CSS properties en nog veel meer. We zullen in de loop van het artikel meer details geven over deze aspecten.<\/p>\n<p>Hoewel dit tot nu toe niet al te revolutionair klinkt, is <code>theme.json<\/code> belangrijk voor de toekomst van WordPress ontwikkeling. De volgende paragraaf legt uit waarom.<\/p>\n<h2>Waarom theme.json relevant is voor de ontwikkeling van WordPress thema&#8217;s<\/h2>\n<p>De typische benadering van WordPress voor het <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/\">ontwikkelen van thema&#8217;s<\/a> en <a href=\"https:\/\/kinsta.com\/blog\/publish-plugin-wordpress-plugin-directory\/\">het maken van plugins<\/a> draait vaak om <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-berichttemplates\/\">het bewerken van templatebestanden<\/a> met PHP, het gebruik van het bestand <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-functions-php\/\">functions.php<\/a> en andere technische taken.<\/p>\n<p>Het bestand <code>theme.json<\/code> markeert een belangrijke verschuiving, vooral voor het ontwikkelen van thema&#8217;s. Hier zijn een paar redenen voor:<\/p>\n<ul>\n<li>Het bestand vertegenwoordigt een enkele, georganiseerde locatie om de instellingen en stijlen van je thema te defini\u00ebren. Dit vermindert de behoefte aan een wirwar van CSS en PHP bestanden.<\/li>\n<li>Deze gecentraliseerde aanpak van het declaren van stijlen en instellingen in <code>theme.json<\/code> betekent dat WordPress effici\u00ebnter CSS kan genereren. Vergeleken met het gebruik van een <a href=\"https:\/\/make.wordpress.org\/themes\/2021\/10\/04\/the-performance-impact-of-using-jquery-in-wordpress-themes\/\" target=\"_blank\" rel=\"noopener noreferrer\">framework zoals jQuery<\/a>, is er een potentieel voor prestatieverbetering.<\/li>\n<li>Je hebt meer controle over de styling van je site en individuele blokken dan ooit tevoren. Dit democratiseert het ontwikkelen van thema&#8217;s voor gebruikers met minder technische kennis.<\/li>\n<li>Naarmate FSE zich verder ontwikkelt, zal het bestand <code>theme.json<\/code> een cruciale rol spelen in de manier waarop thema&#8217;s, Global Styles en de Block Editor samenwerken.<\/li>\n<\/ul>\n<p>Het combineren van al deze aspecten resulteert in een gestandaardiseerde manier om instellingen en stijlen voor je thema te defini\u00ebren. Voor iedereen die verschillende thema&#8217;s wil begrijpen en ermee wil werken, zal het gebruiken van <code>theme.json<\/code> je in staat stellen om robuustere, flexibelere en gebruiksvriendelijkere WordPress thema&#8217;s te maken. Sterker nog, deze creaties zullen aansluiten bij de toekomstige richting van het platform.<\/p>\n<h2>Waar kun je het theme.json bestand vinden?<\/h2>\n<p>Allereerst zul je geen <code>theme.json<\/code> bestand vinden in &#8217;traditionele&#8217; of &#8216;klassieke&#8217; thema&#8217;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.<\/p>\n<p>De gebruikelijke locatie voor het <code>theme.json<\/code> bestand is in <strong>wp-content\/themes\/[jouw-thema]<\/strong>. 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 &#8211; daar komen we zo op.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-183342 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/code-editor.png\" alt=\"Het theme.json bestand in de themes map\" width=\"1200\" height=\"829\"><\/p>\n<p>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 <a href=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-four-thema\/\">standaardthema Twenty Twenty-Four<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-183354 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/twenty-twenty-four-json.png\" alt=\"Het theme.json bestand van het Twenty-Twenty Four thema\" width=\"1200\" height=\"773\"><\/p>\n<p>Dit is een blokthema en heeft een <code>theme.json<\/code> bestand dat je kunt bekijken. Het kan handig zijn om dit bestand open te hebben als we de structuur bekijken in de volgende paragrafen.<\/p>\n<h2>Wat je nodig hebt om met theme.json te werken<\/h2>\n<p>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:<\/p>\n<ul>\n<li><strong>Basiskennis van JSON.<\/strong> We denken dat het iets is dat je snel kunt oppikken, maar toch is vertrouwdheid met de syntaxis en structuur van JSON cruciaal.<\/li>\n<li><strong>Begrip van CSS.<\/strong> Je zult zien dat veel <code>theme.json<\/code> objecten en properties overeenkomen met de CSS tegenhangers. CSS ervaring zal hier een voordeel zijn.<\/li>\n<li><strong>Kennis van de WordPress Block Editor.<\/strong> Begrijpen hoe blokken werken, samen met hun aanpassingsmogelijkheden, zal je helpen bij het bouwen.<\/li>\n<\/ul>\n<p>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 <code>theme.json<\/code> bestand op een effectievere manier te gebruiken. Hierbij is het ook belangrijk om te kijken hoe jouw bewerkingen en aanpassingen\u00a0 het gedrag van de eindgebruiker zullen be\u00efnvloeden. Er zullen dan ook gevallen zijn waarin je nog steeds <a href=\"https:\/\/kinsta.com\/blog\/what-is-html\/\">HTML<\/a> en <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> moet gebruiken om je visie te realiseren.<\/p>\n<p>Tot slot zijn er een paar technische &#8216;extra&#8217;s&#8217; die we aanraden:<\/p>\n<ul>\n<li><strong>Een code-editor.<\/strong> Als je een <a href=\"https:\/\/kinsta.com\/nl\/blog\/php-editor\/\">kwaliteitseditor<\/a> kiest die JSON syntax highlighting en validatie biedt, wordt het plezieriger om je workflow te doorlopen.<\/li>\n<li><strong>Een lokale ontwikkelomgeving.<\/strong> Als je een tool <a href=\"https:\/\/kinsta.com\/nl\/devkinsta\/\">zoals DevKinsta<\/a> gebruikt om aan je thema te werken, kun je snel experimenteren en je wijzigingen testen zonder dat dit invloed heeft op een live site.<\/li>\n<\/ul>\n<p>Met deze hulpmiddelen en kennis ben je goed uitgerust om te beginnen met het aanpassen van je WordPress thema met <code>theme.json<\/code>.<\/p>\n<h2>De anatomie, structuur en hi\u00ebrarchie van theme.json bekijken<\/h2>\n<p>Het bestand <code>theme.json<\/code> heeft duidelijk een structuur die je moet begrijpen. Het heeft ook een hi\u00ebrarchie, samen met enkele unieke elementen die verdere uitleg nodig hebben.<\/p>\n<p>Dit is waarschijnlijk het meest complexe deel van het gebruik van het configuratiebestand, maar zelfs dan zul je de concepten gemakkelijk begrijpen.<\/p>\n<p>Laten we beginnen met de structuur en dan verder gaan met de andere elementen van <code>theme.json<\/code>.<\/p>\n<h3>Basisstructuur<\/h3>\n<p>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&#8217;s om de regel te eindigen.<\/p>\n<p>Het absolute minimum dat een <code>theme.json<\/code> bestand nodig heeft zijn <code>version<\/code>, <code>settings<\/code>, en <code>styles<\/code> objecten:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 2,\n    \"settings\": {\n      \/\/ Global settings go here\n    },\n    \"styles\": {\n      \/\/ Global styles go here\n    }\n}<\/code><\/pre>\n<p>De objecten <code>settings<\/code> en <code>styles<\/code> zijn eenvoudig, maar <code>version<\/code> 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 <code>3<\/code>, hoewel versie <code>2<\/code> ook gebruikelijk is, en je kunt <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/theme-json-reference\/theme-json-migrations\/\" target=\"_blank\" rel=\"noopener noreferrer\">migreren van oudere versies<\/a>.<\/p>\n<p>De meeste <code>theme.json<\/code> bestandsstructuren bevatten ook <a href=\"https:\/\/schemas.wp.org\/trunk\/theme.json\" target=\"_blank\" rel=\"noopener noreferrer\">een schema<\/a>. 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:<\/p>\n<pre><code class=\"language-json\">{\n    \"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n    \"version\": 2,\n    \"settings\": {\n    },\n    \"styles\": {\n    }\n}<\/code><\/pre>\n<p>Van hieruit voeg je verschillende properties en objecten toe aan <strong>instellingen<\/strong> en <strong>stijlen<\/strong> om je bestand verder uit te bouwen.<\/p>\n<h3>Hi\u00ebrarchie<\/h3>\n<p>Het bestand <code>theme.json<\/code> volgt een hi\u00ebrarchische structuur en is slechts \u00e9\u00e9n niveau van de algemene hi\u00ebrarchie voor <strong>instellingen<\/strong> en <strong>stijlen<\/strong> op je site. Als je <a href=\"https:\/\/kinsta.com\/nl\/blog\/geavanceerde-css-technieken\/\">kennis hebt van CSS<\/a>, is het gemakkelijker om dit te begrijpen, omdat dit bestand <a href=\"https:\/\/kinsta.com\/nl\/blog\/css-best-practices\/\">qua complexiteit lijkt op CSS<\/a>.<\/p>\n<p>De aanpassingen die je maakt op <code>theme.json<\/code> 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 <strong>Appearance &gt; Editor<\/strong> binnen WordPress zichtbaar zullen zijn op de voorkant:<\/p>\n<figure id=\"attachment_183351\" aria-describedby=\"caption-attachment-183351\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183351 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/site-editor-screen.png\" alt=\"De interface van de WordPress Site Editor. De linker zijbalk toont opties voor het aanpassen van het ontwerp, terwijl het hoofdgebied een website homepage ontwerp toont met een kop over innovatie en duurzaamheid, samen met een afbeelding van een moderne architectonische structuur.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183351\" class=\"wp-caption-text\">De hoofdinterface van de Site Editor binnen WordPress.<\/figcaption><\/figure>\n<p>Als je een <a href=\"https:\/\/kinsta.com\/nl\/blog\/child-thema-wordpress\/\">childthema<\/a> gebruikt en een <code>theme.json<\/code> 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 <code>theme.json<\/code> bestand heeft.<\/p>\n<p>Hoewel er in dit artikel niet op wordt gefocust, kun je ook waarden overschrijven met behulp van <a href=\"https:\/\/developer.wordpress.org\/news\/2023\/07\/how-to-modify-theme-json-data-using-server-side-filters\/\" target=\"_blank\" rel=\"noopener noreferrer\">hooks en filters<\/a>. Met deze dynamische filters kun je plugins en thema&#8217;s maken die ook de instellingen en stijlen van het thema en het platform veranderen.<\/p>\n<h3>Blok grammatica<\/h3>\n<p>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:<\/p>\n<figure id=\"attachment_183341\" aria-describedby=\"caption-attachment-183341\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183341 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/code-block-editor.png\" alt=\"De WordPress code editor interface binnen de Block Editor. Het toont HTML-code voor het privacybeleid van een website. De code bevat koppen en paragrafen met details over het adres van de website, het commentaarbeleid en het gebruik van Gravatar.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183341\" class=\"wp-caption-text\">Het Code bewerkingsscherm binnen de WordPress Block Editor.<\/figcaption><\/figure>\n<p>Dit komt omdat blockthema&#8217;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 &#8216;block grammatica&#8217; die je nodig hebt om je <code>theme.json<\/code> bestand te schrijven.<\/p>\n<p>Voor blokken die inhoud bevatten, zoals het Paragraph blok, wrap je die inhoud:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:paragraph --&gt;\n    &lt;p&gt;Content goes here!&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n<\/code><\/pre>\n<p>In andere gevallen heb je alleen comments van \u00e9\u00e9n 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:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:columns --&gt;\n&lt;div class=\"wp-block-columns\"&gt;\n    &lt;!-- wp:column --&gt;\n        &lt;div class=\"wp-block-column\"&gt;&lt;\/div&gt;\n    &lt;!-- \/wp:column --&gt;\n    \n\n    &lt;!-- wp:column --&gt;\n        &lt;div class=\"wp-block-column\"&gt;&lt;\/div&gt;\n    &lt;!-- \/wp:column --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:columns --&gt;<\/code><\/pre>\n<p>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.<\/p>\n<p>Om de opmaak voor een bepaald blok te vinden, kun je in de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Block Editor Handbook<\/a>\u00a0zoeken 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\u00ebren.<\/p>\n<p>Wat betreft de wijzigingen die je binnen die opmaak zult maken, daarover later meer.<\/p>\n<h2>Theme.json en WordPress Full-Site Editing combineren<\/h2>\n<p>Uit de discussie over hi\u00ebrarchie zul je begrijpen dat <code>theme.json<\/code> 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 <code>theme.json<\/code> instellingen.<\/p>\n<figure id=\"attachment_183345\" aria-describedby=\"caption-attachment-183345\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183345 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/global-styles.png\" alt=\"De WordPress Site Editor, met aan de linkerkant een deel van de content van een website met tekst in een donkerrode kleur. Aan de rechterkant richt het paneel Styles zich op de instellingen voor Kleuren. Het bevat een kleurenpalet selector en opties om kleuren aan te passen voor verschillende site elementen zoals tekst, achtergrond, links en knoppen. Er is ook een contrastchecker zichtbaar die de hexcode #A62B0C toont voor het geselecteerde kleurthema.\" width=\"1200\" height=\"695\"><figcaption id=\"caption-attachment-183345\" class=\"wp-caption-text\">De zijbalk van de Site Editor toont de opties voor globale stijlen van een thema.<\/figcaption><\/figure>\n<p>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 <code>theme.json<\/code> 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 <code>theme.json<\/code> hoeven te bewerken.<\/p>\n<p>Bovendien worden de CSS properties die je definieert in <code>theme.json<\/code> 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\u00ebren, die je verder kunt aanpassen vanuit het <a href=\"https:\/\/kinsta.com\/blog\/wordpress-admin\/\">WordPress dashboard<\/a>.<\/p>\n<p>Kortom:<code>theme.json<\/code> 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&#8217;s verder ontwikkelt, zul je zien hoe beide samen werken om siteontwerpen en layouts te maken.<\/p>\n<h2>Werken met de properties van het theme.json bestand<\/h2>\n<p>Met een goed begrip van de basis, kun je beginnen te werken met de objecten en properties binnen <code>theme.json<\/code>. We zullen niet alle gebruiksmogelijkheden kunnen behandelen. Aan het einde van deze tutorial zul je echter in staat zijn om thema&#8217;s te bouwen die volledige functionaliteit bieden en er geweldig uitzien aan de voorkant.<\/p>\n<h3>Settings<\/h3>\n<p>Met de property <code>settings<\/code> 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.<\/p>\n<p>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.<\/p>\n<p>Je hebt een select aantal properties tot je beschikking:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"settings\": {\n        \"appearanceTools\": false,\n        \"blocks\": {},\n        \"border\": {},\n        \"color\": {},\n        \"custom\": {},\n        \"dimensions\": {},\n        \"layout\": {},\n        \"position\": {},\n        \"shadow\": {},\n        \"spacing\": {},\n        \"typography\": {},\n        \"useRootPaddingAwareAlignments\": false\n    }\n}<\/code><\/pre>\n<p>De offici\u00eble <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/#settings-documentation\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Theme Developer Handbook<\/a>\u00a0bevat een referentie voor al deze instellingen (en stijlen). Hier is echter een snel overzicht van een paar belangrijke die meer uitleg nodig hebben:<\/p>\n<ul>\n<li><code>appearanceTools<\/code><strong>.<\/strong> Deze <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/appearance-tools\/\" target=\"_blank\" rel=\"noopener noreferrer\">algemene property<\/a> maakt een aantal andere mogelijk en is bedoeld als tijdsbesparing. Hiermee kun je randopties, regelhoogtes voor typografie, opvulling, marges en nog veel meer instellen.<\/li>\n<li><code>blocks<\/code><strong>.<\/strong> Het meeste werk zal gaan over globale instellingen en stijlen, maar met de property <code>blocks<\/code> kun je dit per blok doen. We gaan hier niet dieper in op dit concept, maar de <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/blocks\/\">Theme Developer Handbook<\/a> heeft uitstekende documentatie over dit facet van <code>theme.json<\/code>.<\/li>\n<li><code>custom<\/code><strong>.<\/strong> Deze unieke property heeft geen functionaliteit in die zin dat jij bepaalt wat het doet. Je zult het gebruiken om <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/custom\/\" target=\"_blank\" rel=\"noopener noreferrer\">custom CSS properties<\/a> voor je thema te maken, en de mogelijkheden die je hebt zijn groot.<\/li>\n<li><code>useRootPaddingAwareAlignments<\/code><strong>.<\/strong> Nogmaals, dit is een complexe property die we niet volledig zullen behandelen. Het helpt je in wezen om de <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/use-root-padding-aware-alignments\/\" target=\"_blank\" rel=\"noopener noreferrer\">horizontale opvulstijlen<\/a> 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.<\/li>\n<\/ul>\n<p>Merk op dat je geen properties hoeft toe te voegen aan <code>theme.json<\/code> waar je niet mee wilt werken. Als je bijvoorbeeld niet wilt werken met <code>appearanceTools<\/code>, kun je deze gewoon weglaten in plaats van defini\u00ebren met <code>false<\/code>.<\/p>\n<h4>Hoe instellingen te defini\u00ebren in theme.json<\/h4>\n<p>Als het gaat om het defini\u00ebren van instellingen, heeft elke property een aantal sub-properties van sleutelwaardeparen. Zo kun je bijvoorbeeld <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/color\/\" target=\"_blank\" rel=\"noopener noreferrer\">kleurenpaletten<\/a> maken:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"settings\": {\n        \"color\": {\n          \"palette\": [\n            {\n              \"color\": \"#0073aa\",\n              \"name\": \"Primary\",\n              \"slug\": \"primary\"\n            },\n            {\n              \"color\": \"#23282d\",\n              \"name\": \"Secondary\",\n              \"slug\": \"secondary\"\n            }\n          ],\n\u2026<\/code><\/pre>\n<p>Andere properties hebben eenvoudige Booleaanse waarden, waarmee die properties worden in- of uitgeschakeld binnen de Site Editor:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"settings\": {\n        \"color\": {\n            \"background\": true,\n            \"defaultPalette\": true,\n            \"link\": true,\n            \"text\": true\n        }\n    }\n}<\/code><\/pre>\n<p>Zodra je je instellingen hebt gedefinieerd, kun je er styling voor introduceren. Laten we dit nu onderzoeken.<\/p>\n<h3>Stijlen en stijlvariaties<\/h3>\n<p>Terwijl <code>settings<\/code> de toegang tot bepaalde stylingopties definieert, kun je met de property <code>styles<\/code> die globale stijlen voor je thema defini\u00ebren. 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.<\/p>\n<p>Het is belangrijk om hier themastijlen te defini\u00ebren, zodat je ze kunt openen en aanpassen vanuit de Site Editor. Je kunt met een <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/styles\/styles-reference\/\" target=\"_blank\" rel=\"noopener noreferrer\">aantal elementen<\/a> werken:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"styles\": {\n        \"border\": {},\n        \"color\": {},\n        \"dimensions\": {},\n        \"filter\": {},\n        \"shadow\": {},\n        \"spacing\": {},\n        \"typography\": {},\n        \"css\": {}\n    }\n}<\/code><\/pre>\n<p>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:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"blocks\": {\n        \"core\/group\": {\n            \"color\": {\n                \"text\": \"#000000\",\n                \"background\": \"#ffffff\",\n                \"link\": \"#777777\"\n            }\n\u2026<\/code><\/pre>\n<p>Voor globale stijlen werk je op de root &#8211; die correleert met de <code>&lt;body&gt;<\/code> tag van je pagina. Voor specifieke elementen kun je een vergelijkbare structuur volgen als voor blokken, dit keer met behulp van de property <code>elements<\/code>:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"elements\": {\n        \"button\": {\n            \"color\": {\n                \"text\": \"#ffffff\",\n                \"background\": \"#aa3f33\"\n            }\n\u2026<\/code><\/pre>\n<p>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:<\/p>\n<figure id=\"attachment_183344\" aria-describedby=\"caption-attachment-183344\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183344 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/generate-css.png\" alt=\"Een homepage van een website met de titel \"Toewijding aan innovatie en duurzaamheid\" en een knop Over ons. De onderste helft toont de HTML-structuur van de website in het DevTools-paneel van de Brave-browser.\" width=\"1200\" height=\"720\"><figcaption id=\"caption-attachment-183344\" class=\"wp-caption-text\">De voorkant van een site die de browser DevTools laat zien, met de gegenereerde CSS voor een element.<\/figcaption><\/figure>\n<p>Merk op dat je ook pseudo-klassen voor elementen kunt stijlen, zoals hover en focus stijlen:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"elements\": {\n    \"button\": {\n        \"color\": {\n            \"text\": \"#ffffff\",\n            \"background\": \"#aa3f33\"\n        },\n        \":hover\": {\n            \"color\": {\n                \"background\": \"#822f27\"\n            }\n\u2026<\/code><\/pre>\n<p><a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/styles\/applying-styles\/\" target=\"_blank\" rel=\"noopener noreferrer\">Het toepassen van stijlen<\/a> is nog diepgaander dan dit, en dat is een van de fantastische voordelen van het gebruik van <code>theme.json<\/code>.<\/p>\n<h4>Stijlvariaties<\/h4>\n<p>Voordat we verder gaan, wil je meer weten over stijlvariaties. Je kunt deze verschillende kleurenpaletten en typografische stijlen zien in de FSE interface:<\/p>\n<figure id=\"attachment_183352\" aria-describedby=\"caption-attachment-183352\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183352 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/style-variations-fse.png\" alt=\"De interface van de WordPress Site Editor toont de stijlvariaties van een thema aan de linkerkant, compleet met verschillende lettertype- en kleuropties. Het hoofdgedeelte van de content toont een kop \"Toewijding aan innovatie en duurzaamheid\" met een subkop, een knop Over ons en een hoofdafbeelding van een modern gebouw.\" width=\"1200\" height=\"571\"><figcaption id=\"caption-attachment-183352\" class=\"wp-caption-text\">De zijbalk Styles binnen de Site Editor, met verschillende variaties.<\/figcaption><\/figure>\n<p>Deze zijn echter niet iets dat je codeert in <code>theme.json<\/code>. In plaats daarvan maak je alternatieve versies van het bestand, geef je ze een unieke naam en sla je ze op in de <b>styles <\/b>map van een thema:<\/p>\n<figure id=\"attachment_183355\" aria-describedby=\"caption-attachment-183355\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183355 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/variations-code.png\" alt=\"De macOS-interface toont twee vensters. Het achtergrondvenster toont een bestandsverkenner met meerdere JSON-bestanden voor verschillende kleurenschema's. Het voorgrondvenster toont een code-editor die open staat voor green.json, dat themakleurinstellingen bevat voor een groen kleurenschema.\" width=\"1200\" height=\"822\"><figcaption id=\"caption-attachment-183355\" class=\"wp-caption-text\">Een code editor die stijlvariatie JSON bestanden toont.<\/figcaption><\/figure>\n<p>Merk op dat de titel in de opmaak uniek is voor elk alternatief JSON bestand. Het is echter een optioneel veld &#8211; hoewel we je aanraden het te gebruiken voor de duidelijkheid en de beste ervaring.<\/p>\n<h3>Custom templates en template parts<\/h3>\n<p>Net als bij stijlvariaties kun je met <code>theme.json<\/code> custom templates en bijbehorende template parts registreren. Het registreren van de opmaak is eenvoudig:<\/p>\n<pre><code class=\"language-json\">\"customTemplates\": [\n    {\n        \"name\": \"my-template\",\n        \"title\": \"My Template\",\n        \"postTypes\": [\n            \"page\",\n            \"post\"\n        ]\n    }\n]<\/code><\/pre>\n<p>Met de property <code>customTemplates<\/code> moet je drie elementen defini\u00ebren:<\/p>\n<ul>\n<li><code>name<\/code><strong>.<\/strong> Dit komt overeen met een template dat je maakt in de <b>templates <\/b>map van je thema, zoals <strong>\/template\/mijn-template.html<\/strong>.<\/li>\n<li><code>title<\/code><strong>.<\/strong> Dit is de menselijk leesbare versie van de naam van de template.<\/li>\n<li><code>postTypes<\/code><strong>.<\/strong> Zonder definitie is dit standaard een pagina, maar je kunt een reeks berichttypes specificeren waarvoor de template geschikt is.<\/li>\n<\/ul>\n<p>Gebruikers kunnen de templates die je registreert selecteren in de Site Editor of Block Editor:<\/p>\n<figure id=\"attachment_183353\" aria-describedby=\"caption-attachment-183353\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183353 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/template-site-editor.png\" alt=\"De WordPress Blok-editor toont details voor een gepubliceerde pagina inclusief status, publicatiedatum, link, auteur en template. Er is een vervolgkeuzemenu geopend met opties om te bewerken, verwisselen, tonen of een nieuwe template te maken.\" width=\"1200\" height=\"576\"><figcaption id=\"caption-attachment-183353\" class=\"wp-caption-text\">Kiezen om een template te bewerken, verwisselen, maken of tonen binnen de WordPress Site Editor.<\/figcaption><\/figure>\n<p>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:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"templateParts\": [\n    {\n        \"area\": \"header\",\n        \"name\": \"header\",\n        \"title\": \"Header\"\n    },\n\u2026<\/code><\/pre>\n<p>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 <code>header<\/code>, <code>footer<\/code>, of <code>uncategorized<\/code> zijn de standaard, maar je kunt template parts toewijzen aan elk custom gebied.<\/p>\n<p>We raden je aan om ook te kijken hoe je <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/template-parts\/#including-a-template-part\" target=\"_blank\" rel=\"noopener noreferrer\">deze template parts kunt weergeven<\/a>, omdat ze niet zichtbaar zijn zonder extra codering. Desondanks is het eenvoudig om ze te registreren.<\/p>\n<h3>Patterns<\/h3>\n<p>Laten we het tot slot hebben over Block Patterns. Je kunt er een willekeurig aantal bundelen in je <code>theme.json<\/code> bestand met behulp van een array op het hoogste niveau. Elk geschikt patroon uit de <a href=\"https:\/\/wordpress.org\/patterns\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Pattern Library<\/a> is beschikbaar om in je bestand op te nemen:<\/p>\n<figure id=\"attachment_183348\" aria-describedby=\"caption-attachment-183348\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183348 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/pattern-library-wordpress.png\" alt=\"Het zoekscherm van de WordPress Pattern Library toont een raster van websiteontwerpsjablonen. De templates bevatten verschillende banner- en headerontwerpen met afbeeldingen, tekst en knoppen.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183348\" class=\"wp-caption-text\">De WordPress Pattern Library.<\/figcaption><\/figure>\n<p>Het defini\u00ebren van de array is eenvoudig: je gebruikt de property <code>patterns<\/code> en de slug van de bijbehorende pattern uit de URL van de bibliotheek:<\/p>\n<figure id=\"attachment_183349\" aria-describedby=\"caption-attachment-183349\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183349 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/pattern-slug.png\" alt=\"Een close-up van de adresbalk van een browser met de slug van de URL in de werkbalk. De rest van het scherm laat een oranje heldenafbeelding zien, compleet met een grote kop, een kleine beschrijving en een Shop Now knop.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183349\" class=\"wp-caption-text\">De slug van een pattern selecteren uit de URL in een webbrowser.<\/figcaption><\/figure>\n<p>Met deze slug kun je de <code>patterns<\/code> markup vullen:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"patterns\": [\n        \"fullwidth-vertically-aligned-headline-on-right-with-description-on-left\"\n    ]\n}<\/code><\/pre>\n<p>Je kunt ze selecteren vanuit de Pattern Directory van de Block Editor:<\/p>\n<figure id=\"attachment_183347\" aria-describedby=\"caption-attachment-183347\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183347 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/pattern-directory.png\" alt=\"De interface van de WordPress Block Editor toont links een zijbalkmenu met blokelementen en patronen, met rechts een voorbeeld van verschillende bannerontwerpen. De weergegeven hoofdbanner featuret de vetgedrukte tekst LET 'EM ROLL BIG JOHN PATTON op een oranje achtergrond.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183347\" class=\"wp-caption-text\">De WordPress Pattern Directory binnen de Block Editor.<\/figcaption><\/figure>\n<p>Deze eenvoudige manier om Pattern Library elementen in je thema&#8217;s te plaatsen is handig en waardevol. Het is nog een reden waarom het <code>theme.json<\/code> bestand snel een favoriete manier van bouwen aan het worden is onder WordPress thema-ontwikkelaars.<\/p>\n<h2>De workflow voor het aanpassen van je WordPress website met theme.json<\/h2>\n<p>Zodra je de belangrijkste onderdelen van <code>theme.json<\/code> begrijpt, is het ontwikkelen van je workflow om het te gebruiken een belangrijke stap. Het is een nieuwe manier om thema&#8217;s te ontwikkelen en moet daarom op een andere manier worden behandeld dan de klassieke methoden.<\/p>\n<p>Onze aanpak zou zijn om de schema URL in te stellen, een API versie te kiezen en eerst je globale instellingen te defini\u00ebren. Dit omvat je kleurenpalet, typografieopties en layoutinstellingen. In de meeste gevallen zou het ook nuttig zijn om de <code>appearanceTools<\/code> te activeren:<\/p>\n<pre><code class=\"language-json\">\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n\"version\": 3,\n   \"settings\": {\n\"appearanceTools\": true,\n     \"color\": {\n       \"palette\": [\n         {\n           \"name\": \"Primary\",\n\"slug\": \"primary\",\n           \"color\": \"#0073aa\"\n         },\n         {\n      \"name\": \"Secondary\",\n        \"slug\": \"secondary\",\n           \"color\": \"#23282d\"\n         }\n       ]\n     },\n     \"typography\": {\n\"fluid\": true,\n       \"fontSizes\": [\n         {\n           \"size\": \"13px\",\n           \"slug\": \"small\",\n           \"name\": \"Small\"\n         },\n         {\n\"size\": \"16px\",\n           \"slug\": \"normal\",\n           \"name\": \"Normal\"\n\u2026<\/code><\/pre>\n<p>Vervolgens kun je custom CSS properties maken met de slugs die je hebt gedefinieerd. Je kunt bijvoorbeeld aangepaste lettertypegewichten hebben gemaakt:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"custom\": {\n    \"fontWeight\": {\n        \"light\": 300,\n        \"regular\": 400,\n        \"medium\": 500,\n        \"bold\": 700\n    },\n\u2026<\/code><\/pre>\n<p>Als je klaar bent met je instellingen, is het tijd om stijlen te specificeren.<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"color\": {\n        \"background\": \"var(--wp--preset--color--base)\",\n        \"text\": \"var(--wp--preset--color--main)\"\n    },\n\u2026<\/code><\/pre>\n<p>Het aanpassen van je blokstijlen komt hierna en dit kan een groot deel van je <code>theme.json<\/code> bestand in beslag nemen.<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"block\": {\n        \"core\/separator\": {\n            \"color\": {\n            \"text\": \"var(--wp--preset--color--main)\"\n            },\n        \"typography\": {\n            \"fontSize\": \"var(--wp--preset--font-size--large)\"\n            }\n        },\n        \"core\/site-tagline\": {\n            \"spacing\": {\n                \"margin\": {\n                    \"bottom\": \"20px\"\n                }\n            },\n            \"typography\": {\n                \"fontSize\": \"var(--wp--preset--font-size--small)\"\n            }\n        },\n        \"core\/site-title\": {\n            \"typography\": {\n                \"fontSize\": \"var(--wp--preset--font-size--medium)\",\n                \"fontWeight\": \"var(--wp--custom--font-weight--semi-bold)\",\n                \"lineHeight\": \"var(--wp--custom--line-height--none)\"\n        },\n\u2026<\/code><\/pre>\n<p>Tot slot wil je alle custom templates en template parts ontwerpen en registreren binnen <code>theme.json<\/code>. Dit is ook het moment om alle Block patterns die je wilt gebruiken te registreren en indien nodig aan te maken.<\/p>\n<h3>Kinsta gebruiken als onderdeel van je thema-ontwikkeling en customization workflow<\/h3>\n<p>Voordat je veranderingen live zet, wil je alles eerst testen. Tot nu toe heb je waarschijnlijk gewerkt met een lokaal ontwikkelprogramma zoals <a href=\"https:\/\/kinsta.com\/nl\/devkinsta\/\">DevKinsta<\/a>:<\/p>\n<figure id=\"attachment_183343\" aria-describedby=\"caption-attachment-183343\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183343 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/devkinsta.png\" alt=\"De DevKinsta interface voor een enkele site. Het toont details zoals de WordPress versie, webserver, PHP versie en database type, samen met een voorbeeld van de homepage van de website.\" width=\"1200\" height=\"592\"><figcaption id=\"caption-attachment-183343\" class=\"wp-caption-text\">De interface van DevKinsta.<\/figcaption><\/figure>\n<p>Het is echter ook belangrijk om je ontwikkeling te controleren op een live site. Met de <a href=\"https:\/\/kinsta.com\/nl\/docs\/devkinsta\/devkinsta-integratie\/#push-changes-to-staging\">Kinsta integratie<\/a> van DevKinsta kun je een site naar een standaard of premium <a href=\"https:\/\/kinsta.com\/nl\/wordpress-hosting\/testomgevingen\/\">testomgeving<\/a> pushen:<\/p>\n<figure id=\"attachment_183350\" aria-describedby=\"caption-attachment-183350\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183350 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/push-to-kinsta.png\" alt=\"De DevKinsta interface toont site-informatie en besturingselementen. Het vervolgkeuzemenu van de knop Synchroniseren is geopend en toont opties voor Push naar Kinsta en Pull van Kinsta.\" width=\"1200\" height=\"417\"><figcaption id=\"caption-attachment-183350\" class=\"wp-caption-text\">De synchronisatieopties binnen DevKinsta.<\/figcaption><\/figure>\n<p>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.<\/p>\n<p>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.<\/p>\n<h2>Of je theme.json of WordPress Full-Site Editing moet gebruiken<\/h2>\n<p>Gezien de kruisbestuiving tussen <code>theme.json<\/code> 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&#8217;s en moeten ze samen worden gebruikt.<\/p>\n<p><code>theme.json<\/code> zal bijvoorbeeld je go-to zijn in de volgende situaties:<\/p>\n<ul>\n<li>Je ontwikkelt thema&#8217;s en maakt een nieuw thema vanaf nul.<\/li>\n<li>JSON is een taal die je begrijpt en waar je goed mee kunt werken.<\/li>\n<li>Je wilt een programmatische methode om standaard stijlen en instellingen voor je thema te defini\u00ebren.<\/li>\n<li>De stijlen en instellingen die je wilt implementeren hebben meer controle nodig dan wat je standaard kunt vinden in de Site Editor.<\/li>\n<\/ul>\n<p>Toegegeven, dit laatste is een niche, omdat FSE bijna exact de functionaliteit van <code>theme.json<\/code> weerspiegelt. Daarom zal volledige sitebewerking voor de meeste gebruikers zinvoller zijn in de volgende scenario&#8217;s:<\/p>\n<ul>\n<li>Je bent een site-eigenaar die <a href=\"https:\/\/kinsta.com\/nl\/blog\/hoe-je-je-wordpress-thema-kan-customizen\/\">een bestaand thema wil aanpassen<\/a>.<\/li>\n<li>JSON is niet iets waar je bekend mee bent.<\/li>\n<li>Visuele interfaces zijn zinvoller voor je aanpassings- en ontwikkelingsworkflow.<\/li>\n<li>Je wilt snel aanpassingen kunnen maken zonder uitgebreide codering.<\/li>\n<\/ul>\n<p>In de praktijk zal het thema een configuratiebestand nodig hebben om zijn fundamenten te defini\u00ebren. Vanaf daar neemt de hi\u00ebrarchie het over en kunnen site-eigenaren FSE gebruiken om verdere aanpassingen te maken.<\/p>\n<h2>Samenvatting<\/h2>\n<p>Het configuratiebestand <code>theme.json<\/code> is revolutionair voor de ontwikkeling van WordPress thema&#8217;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&#8217;s te maken.<\/p>\n<p>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 <code>theme.json<\/code> 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 &#8211; en het is de toekomst van het WordPress ontwerp.<\/p>\n<p>Heb je vragen over het gebruik van het <code>theme.json<\/code> bestand in WordPress? Laat het ons weten in de comments hieronder!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8230;<\/p>\n","protected":false},"author":199,"featured_media":60065,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[892,906],"class_list":["post-60064","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-ontwikkeling","topic-wordpress-websitedesign"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ultieme handleiding voor het aanpassen van WordPress theme.json - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Het ontwikkelen van thema&#039;s met WordPress maakt nu gebruik van het theme.json bestand. Dit artikel gaat in op alles over dit belangrijke configuratiebestand!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo profiteer je van de kracht van theme.json: customize je WordPress thema als een pro\" \/>\n<meta property=\"og:description\" content=\"Het ontwikkelen van thema&#039;s met WordPress maakt nu gebruik van het theme.json bestand. Dit artikel gaat in op alles over dit belangrijke configuratiebestand!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-05T07:23:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-08T13:30:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/unleashing-the-power-of-themejson.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1461\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Het ontwikkelen van thema&#039;s met WordPress maakt nu gebruik van het theme.json bestand. Dit artikel gaat in op alles over dit belangrijke configuratiebestand!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/unleashing-the-power-of-themejson-1024x512.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Zo profiteer je van de kracht van theme.json: customize je WordPress thema als een pro\",\"datePublished\":\"2024-08-05T07:23:57+00:00\",\"dateModified\":\"2024-08-08T13:30:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/\"},\"wordCount\":3783,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/\",\"name\":\"Ultieme handleiding voor het aanpassen van WordPress theme.json - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"datePublished\":\"2024-08-05T07:23:57+00:00\",\"dateModified\":\"2024-08-08T13:30:54+00:00\",\"description\":\"Het ontwikkelen van thema's met WordPress maakt nu gebruik van het theme.json bestand. Dit artikel gaat in op alles over dit belangrijke configuratiebestand!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"width\":1461,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress ontwikkeling\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-ontwikkeling\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo profiteer je van de kracht van theme.json: customize je WordPress thema als een pro\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"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.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ultieme handleiding voor het aanpassen van WordPress theme.json - Kinsta\u00ae","description":"Het ontwikkelen van thema's met WordPress maakt nu gebruik van het theme.json bestand. Dit artikel gaat in op alles over dit belangrijke configuratiebestand!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/theme-json\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo profiteer je van de kracht van theme.json: customize je WordPress thema als een pro","og_description":"Het ontwikkelen van thema's met WordPress maakt nu gebruik van het theme.json bestand. Dit artikel gaat in op alles over dit belangrijke configuratiebestand!","og_url":"https:\/\/kinsta.com\/nl\/blog\/theme-json\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2024-08-05T07:23:57+00:00","article_modified_time":"2024-08-08T13:30:54+00:00","og_image":[{"width":1461,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/unleashing-the-power-of-themejson.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Het ontwikkelen van thema's met WordPress maakt nu gebruik van het theme.json bestand. Dit artikel gaat in op alles over dit belangrijke configuratiebestand!","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/unleashing-the-power-of-themejson-1024x512.jpg","twitter_creator":"@Kinsta_NL","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Jeremy Holcombe","Geschatte leestijd":"21 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Zo profiteer je van de kracht van theme.json: customize je WordPress thema als een pro","datePublished":"2024-08-05T07:23:57+00:00","dateModified":"2024-08-08T13:30:54+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json\/"},"wordCount":3783,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/unleashing-the-power-of-themejson.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/theme-json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json\/","url":"https:\/\/kinsta.com\/nl\/blog\/theme-json\/","name":"Ultieme handleiding voor het aanpassen van WordPress theme.json - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/unleashing-the-power-of-themejson.jpg","datePublished":"2024-08-05T07:23:57+00:00","dateModified":"2024-08-08T13:30:54+00:00","description":"Het ontwikkelen van thema's met WordPress maakt nu gebruik van het theme.json bestand. Dit artikel gaat in op alles over dit belangrijke configuratiebestand!","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/theme-json\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/unleashing-the-power-of-themejson.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/08\/unleashing-the-power-of-themejson.jpg","width":1461,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"WordPress ontwikkeling","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-ontwikkeling\/"},{"@type":"ListItem","position":3,"name":"Zo profiteer je van de kracht van theme.json: customize je WordPress thema als een pro"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"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.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/nl\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/60064","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=60064"}],"version-history":[{"count":11,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/60064\/revisions"}],"predecessor-version":[{"id":60105,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/60064\/revisions\/60105"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60064\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60064\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60064\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60064\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60064\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60064\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60064\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60064\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60064\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/60065"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=60064"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=60064"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=60064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}