{"id":61160,"date":"2024-11-18T10:03:41","date_gmt":"2024-11-18T09:03:41","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=61160&#038;preview=true&#038;preview_id=61160"},"modified":"2024-11-22T10:54:07","modified_gmt":"2024-11-22T09:54:07","slug":"theme-json-properties-key-value-pairs","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/","title":{"rendered":"Zo werk je met properties en key value pairs in theme.json"},"content":{"rendered":"<p>Het begrijpen van de structuur en properties van het <code><a href=\"https:\/\/kinsta.com\/nl\/blog\/theme-json-blocks-property\/\">theme.json<\/a><\/code> bestand is fundamenteel bij het <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-thema-kernbegrippen\/\">ontwikkelen van blokkenthema&#8217;s<\/a>. Dit bestand dient immers als de primaire configuratiehub voor alle op blokken gebaseerde thema&#8217;s.<\/p>\n<p>Of je nu een nieuw thema bouwt, een bestaand thema aanpast, een stijlvariant ontwikkelt of aan een childthema werkt, begrijpen hoe je met <code>theme.json<\/code> moet werken is essentieel.<\/p>\n<p>Gelukkig is JSON (JavaScript Object Notation) een menselijk leesbare indeling met een hi\u00ebrarchische structuur die informatie organiseert van algemene naar specifieke properties. In de context van <code>theme.json<\/code> is bekendheid met Cascading Style Sheets (<a href=\"https:\/\/kinsta.com\/nl\/blog\/css-best-practices\/\">CSS<\/a>) relevanter dan diepgaande kennis van <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-javascript\/\">JavaScript<\/a>.<\/p>\n<p>In dit artikel worden de primaire en secundaire (nested) properties in een <code>theme.json<\/code> bestand uitgesplitst, waarbij de nadruk ligt op de belangrijkste instellingen en style properties. Dit zijn namelijk de kernelementen van het bestand en we geven gedetailleerde uitleg en codevoorbeelden voor elke property.<\/p>\n<p>We bouwen voort op de basis die we hebben gelegd in ons vorige artikel, <em><a href=\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/\">Zo profiteer je van de kracht van theme.json: customize je WordPress thema als een pro<\/a><\/em> en dan met name uit het gedeelte <em><a href=\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/#working-with-the-themejson-file-properties\">Werken met properties van het theme.json bestand<\/a><\/em>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Voor het lokaal ontwikkelen van thema&#8217;s kun je gebruik maken van Kinsta&#8217;s ontwikkeltool, <a href=\"https:\/\/kinsta.com\/nl\/devkinsta\/\">DevKinsta<\/a>, waarmee je snel <a href=\"https:\/\/kinsta.com\/nl\/blog\/lokale-wordpress-installatie\/\">een lokale WordPress omgeving kunt opzetten<\/a> en deze eenvoudig kunt deployen naar je <a href=\"https:\/\/kinsta.com\/nl\/mykinsta\/\">Kinsta account<\/a>.<\/p>\n<p>Kinsta biedt ook toegang tot <a href=\"https:\/\/kinsta.com\/nl\/docs\/wordpress-hosting\/testomgeving\/\">testomgevingen<\/a>, zodat je webprojecten naadloos beheerd en gefinetuned kunnen worden. Dit kan vooral handig zijn bij het testen van wijzigingen aan je thema, waaronder updates van het <code>theme.json<\/code> bestand.<\/p>\n<\/aside>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Hoe stijlen worden weergegeven in een blokthema<\/h2>\n<p>WordPress gebruikt een ingebouwd cascadeproces om stijlen voor een site te renderen. Wanneer meerdere bronnen dezelfde instelling of stijl defini\u00ebren, moet WordPress bepalen welke voorrang heeft. Hieronder staat de rangorde die WordPress volgt om te bepalen welke stijlen worden toegepast:<\/p>\n<ol start=\"1\">\n<li><strong>WordPress core<\/strong> &#8211; Het fallback <code>theme.json<\/code> bestand staat in de wp-includes map. Dit bestand wordt bijgewerkt met grote releases van WordPress en moet niet worden bewerkt.<\/li>\n<li><strong>Thema<\/strong> &#8211; Het primaire <code>theme.json<\/code> bestand dat wordt gebruikt door thema-ontwikkelaars om de instellingen, stijlen en andere properties van het thema te defini\u00ebren.<\/li>\n<li><strong>Stijlvariaties<\/strong> &#8211; Als een thema stijlvariaties bevat, heeft elk zijn eigen <code>theme.json<\/code> bestand dat is opgeslagen in de styles subdirectory van het thema.<\/li>\n<li><b>Childthema <\/b>&#8211; Net als bij klassieke thema&#8217;s kan een childthema een parentthema wijzigen zonder de bestanden te wijzigen (optioneel).<\/li>\n<li><strong>Childthema stijlvariaties<\/strong> &#8211; Net als bij gewone stijlvariaties kan een childthema zijn eigen <code>theme.json<\/code> bestand hebben in zijn styles subdirectory (optioneel).<\/li>\n<li><strong>Door de gebruiker gemaakte stijlen<\/strong> &#8211; Dit zijn custom stijlen die zijn toegevoegd door WordPress editors (voor pagina&#8217;s, berichten of de site als geheel) en opgeslagen in de database.<\/li>\n<\/ol>\n<p>De cascadevolgorde zorgt ervoor dat stijlen van bronnen met een hogere prioriteit die van bronnen met een lagere prioriteit overschrijven. Instellingen in het bestand <code>theme.json<\/code> van het thema zullen bijvoorbeeld de core WordPress <code>theme.json<\/code> overschrijven. Op dezelfde manier zal de stijlvariatie van een childthema voorafgaan aan de stijlvariatie van het parentthema.<\/p>\n<p>Door de gebruiker gemaakte stijlen (6) hebben de hoogste prioriteit en hebben voorrang op alle andere stijlen in de cascade.<\/p>\n<p>In dit artikel richten we ons op het bestand <code>theme.json<\/code> in de hoofdmap van elk WordPress blokthema.<\/p>\n<h2>Een referentie voor primaire properties en hun key waarden<\/h2>\n<p>Laten we eens kijken naar de zeven objecten op het hoogste niveau in <code>theme.json<\/code>, die we hebben gegroepeerd in drie secties om de informatie gemakkelijker te begrijpen te maken.<\/p>\n<h3>Een paar definities voordat we beginnen<\/h3>\n<p>Bij het werken met <code>theme.json<\/code> zul je waarschijnlijk verschillende definities vinden voor belangrijke componenten. Voor de duidelijkheid volgt hier hoe we ze in dit artikel defini\u00ebren:<\/p>\n<ol start=\"1\">\n<li><strong>Secties<\/strong> &#8211; Groeperingen van opties op het hoogste niveau (in sommige artikelen ook wel &#8220;objecten op het hoogste niveau&#8221; genoemd).<\/li>\n<li><strong>Objecten <\/strong>&#8211; De primaire elementen in het <code>theme.json<\/code> bestand, zoals <code>settings<\/code> en <code>styles<\/code>.<\/li>\n<li><b>Properties <\/b>&#8211; De componenten binnen objecten. Het <code>settings<\/code> object bevat bijvoorbeeld 12 verschillende properties.<\/li>\n<li><b>Key value pairs <\/b>&#8211; Properties zijn opgebouwd uit key value pairs. Een &#8220;key&#8221; vertegenwoordigt een property en staat tussen aanhalingstekens. Een &#8220;value&#8221; kan een booleaanse, string of array zijn.<\/li>\n<\/ol>\n<p>Wanneer we het hebben over &#8220;standaard&#8221;, verwijzen we naar de standaardconfiguraties in het corebestand <code>theme.json<\/code>, te vinden op <code>wp-includes\/theme.json<\/code>.<\/p>\n<p>&#8220;Gebruikers&#8221; verwijst naar iedereen die de <a href=\"https:\/\/kinsta.com\/blog\/wordpress-admin\/\">WordPress Admin<\/a> gebruikt en instellingen kan wijzigen in de site-, pagina- of posteditors.<\/p>\n<h3>Syntax overzicht<\/h3>\n<ol start=\"1\">\n<li><strong>Booleans<\/strong> staan niet tussen aanhalingstekens.<\/li>\n<li><strong>Strings<\/strong> staan tussen dubbele aanhalingstekens.<\/li>\n<li><strong>Arrays<\/strong> staan tussen vierkante haken <code>[]<\/code>.<\/li>\n<li><strong>Objecten<\/strong> worden omsloten door accolades <code>{}<\/code>, die meerdere properties of nested objecten bevatten.<\/li>\n<li><strong>Komma&#8217;s<\/strong> worden gebruikt om meerdere key value pairs binnen een object te scheiden.<\/li>\n<\/ol>\n<p>Hier is een voorbeeld van een typische syntaxis:<\/p>\n<pre><code class=\"language-json\">{\n    \"house\": {\n        \"rooms\": \"kitchen\"\n    }\n}<\/code><\/pre>\n<h3>De properties groeperen<\/h3>\n<p>We hebben de properties georganiseerd in drie secties om het navigeren te vergemakkelijken:<\/p>\n<ol start=\"1\">\n<li>Basisproperties<\/li>\n<li>Instellingen en stijlen<\/li>\n<li>Properties voor templates en patterns<\/li>\n<\/ol>\n<p>Om de voorbeelden te vereenvoudigen, hebben we soms de buitenste objectwrappers weggelaten. In plaats van de hele structuur te laten zien:<\/p>\n<pre><code class=\"language-json\">{\n    \"settings\": {\n        \"appearanceTools\": false,\n        \"background\": {\n            \"backgroundImage\": true\n        }\n    }\n}<\/code><\/pre>\n<p>We zouden het kunnen inkorten tot:<\/p>\n<pre><code class=\"language-json\">\"appearanceTools\": false,\n\"background\": {\n    \"backgroundImage\": true\n}<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Sommige voorbeelden worden gebruikt om concepten te illustreren en zijn mogelijk niet representatief voor praktisch gebruik bij de ontwikkeling van thema&#8217;s.<\/p>\n<\/aside>\n\n<h3>Basic properties<\/h3>\n<p>Aan het begin van een <code>theme.json<\/code> bestand staan meestal twee belangrijke properties: <code>$schema<\/code> en <code>version<\/code>. Deze properties worden meestal bovenaan het bestand geplaatst. De huidige schemaversie is 3, ge\u00efntroduceerd met <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-6\/\">WordPress 6.6<\/a>.<\/p>\n<pre><code class=\"language-json\">\"$schema\": \"https:\/\/schemas.wp.org\/wp\/6.6\/<code>theme.json<\/code>\", \"version\": 3<\/code><\/pre>\n<h3>Instellingen en stijlproperties<\/h3>\n<p>Als je bekend bent met klassieke thema&#8217;s, beschouw de instellingen-property dan als properties en functies die over het algemeen worden ingesteld in het <code><a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-functions-php\/\">functions.php<\/a><\/code> bestand en worden weergegeven in de <strong>Appearance<\/strong> &gt; <strong>Custom sectie<\/strong> van de WordPress admin.<\/p>\n<p>Stijlen, aan de andere kant, zijn vergelijkbaar met de CSS properties die vroeger in het <code>styles.css<\/code> bestand stonden en die de layout en het ontwerp van het thema regelen.<\/p>\n<h4>Instellingen<\/h4>\n<p>Behalve de properties <code>block<\/code> en <code>elements<\/code> zijn alle andere instellingen globaal. Omdat veel van deze instellingen booleans zijn, fungeren ze als toggles om een UI feature in of uit te schakelen.<\/p>\n<p>Het is belangrijk op te merken dat niet alle keys in elke context van toepassing zijn. Het is bijvoorbeeld niet mogelijk om gebruikers een minimale hoogte voor een alinea in te laten stellen.<\/p>\n<h5>Appearance tools<\/h5>\n<p>Deze instellingen kunnen collectief of individueel worden ingeschakeld met <code>\"appearanceTools\": true<\/code>.<\/p>\n<p>Door deze functie in te schakelen worden verschillende UI opties in de <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-full-site-editing\/\">WordPress editor<\/a> zichtbaar, wat ontwikkelaars tijd bespaart. Standaard zijn deze tools uitgeschakeld (<code>\"appearanceTools\": false<\/code>).<\/p>\n<p>Keys binnen <code>appearanceTools<\/code> zijn onder andere:<\/p>\n<ul>\n<li><code>background<\/code>\n<ul>\n<li><code>backgroundImage<\/code> &#8211; Hiermee kan de gebruiker een achtergrondafbeelding aan blokken toevoegen.<\/li>\n<li><code>backgroundSize<\/code> &#8211; Definieert hoe de achtergrondafbeelding wordt geschaald (bedekken, insluiten, enz.).<\/li>\n<\/ul>\n<\/li>\n<li><code>border<\/code>\n<ul>\n<li><code>color<\/code> &#8211; Maakt kleurselectie voor randen mogelijk.<\/li>\n<li><code>style<\/code> &#8211; Hiermee kan de gebruiker de stijl van de rand kiezen (effen, gestreept, gestippeld, enz.).<\/li>\n<li><code>width<\/code> &#8211; Bepaalt de dikte van de rand.<\/li>\n<li><code>radius<\/code> &#8211; Hiermee kunnen gebruikers afgeronde hoeken instellen door de straal van de rand aan te passen.<\/li>\n<\/ul>\n<\/li>\n<li><code>color<\/code>\n<ul>\n<li><code>link<\/code> &#8211; Maakt het mogelijk om een kleur in te stellen voor links binnen de inhoud.<\/li>\n<li><code>heading<\/code> &#8211; Hiermee kunnen gebruikers kleuren defini\u00ebren voor heading-tags (<code>&lt;h1&gt;<\/code>, <code>&lt;h2&gt;<\/code>, enz.).<\/li>\n<li><code>button<\/code> &#8211; Bepaalt de kleur van knoppen in het thema.<\/li>\n<li><code>caption<\/code> &#8211; Maakt het mogelijk een custom kleur in te stellen voor bijschriften.<\/li>\n<\/ul>\n<\/li>\n<li><code>dimensions<\/code>\n<ul>\n<li><code>aspectRatio<\/code> &#8211; Laat gebruikers de breedte-hoogte verhouding van blokken bepalen.<\/li>\n<li><code>minHeight<\/code> &#8211; Hiermee kan een minimale hoogte voor blokken worden ingesteld.<\/li>\n<\/ul>\n<\/li>\n<li><code>position<\/code>\n<ul>\n<li><code>sticky<\/code> &#8211; Hiermee kan de gebruiker een blok sticky maken, wat betekent dat het op zijn plaats blijft tijdens het scrollen.<\/li>\n<\/ul>\n<\/li>\n<li><code>spacing<\/code>\n<ul>\n<li><code>blockGap<\/code> &#8211; Bepaalt de afstand tussen blokken.<\/li>\n<li><code>margin<\/code> &#8211; Hiermee kunnen gebruikers de marges rond een blok aanpassen.<\/li>\n<li><code>padding<\/code> &#8211; Bepaalt de opvulling binnen een blok, de ruimte tussen de inhoud en de rand.<\/li>\n<\/ul>\n<\/li>\n<li><code>typography<\/code>\n<ul>\n<li><code>lineHeight<\/code> &#8211; Hiermee kunnen gebruikers de regelhoogte (ruimte tussen regels tekst) aanpassen voor een betere leesbaarheid.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>Voorbeeld:<\/strong> Als je wilt dat gebruikers een achtergrondafbeelding toevoegen terwijl andere appearance tools uitgeschakeld blijven, gebruik je:<\/p>\n<pre><code class=\"language-json\">\"appearanceTools\": false,\n\"background\": {\n    \"backgroundImage\": true\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/background-img-block.png\" alt=\"De resulterende UI waarmee gebruikers een achtergrondafbeelding kunnen toevoegen aan een groepsblok.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">De resulterende UI waarmee gebruikers een achtergrondafbeelding kunnen toevoegen aan een groepsblok.<\/figcaption><\/figure>\n<h5>Blocks<\/h5>\n<p>Met de property <code>blocks<\/code> kunnen gebruikers instellingen per blok inschakelen, die globale instellingen kunnen overschrijven.<\/p>\n<p><strong>Voorbeeld:<\/strong> Als <code>appearanceTools<\/code> is ingesteld op <code>false<\/code>, maar je wilt toch randcontrols voor een blok laten zien, gebruik dan:<\/p>\n<pre><code class=\"language-json\">\"border\": {\n    \"color\": true,\n    \"style\": true,\n    \"width\": true,\n    \"radius\": true\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/border-shadow-block.png\" alt=\"De resulterende UI tonen die het toevoegen van randen mogelijk maakt.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">De resulterende UI tonen die het toevoegen van randen mogelijk maakt.<\/figcaption><\/figure>\n<h5>Color<\/h5>\n<p>Met deze property kunnen gebruikers kleuropties instellen zoals achtergrondkleur, tekstkleur of kleurverlopen.<\/p>\n<p>Keys binnen de property <code>color<\/code>:<\/p>\n<ul>\n<li><strong><code>background<\/code><\/strong> &#8211; Regelt de achtergrondkleur van blokken of elementen.<\/li>\n<li><strong><code>custom<\/code><\/strong> &#8211; Schakelt de mogelijkheid voor gebruikers in of uit om customkleuren te selecteren.<\/li>\n<li><strong><code>customDuotone<\/code><\/strong> &#8211; Hiermee kunnen gebruikers custom duotoonfilters toepassen op afbeeldingen.<\/li>\n<li><strong><code>customGradient<\/code><\/strong> &#8211; Schakelt custom verloopopties in.<\/li>\n<li><strong><code>defaultDuotone<\/code><\/strong> &#8211; Geeft standaard duotoon afbeeldingsfilteropties.<\/li>\n<li><strong><code>defaultGradient<\/code><\/strong> &#8211; Definieert de standaard verloopopties die beschikbaar zijn voor gebruikers.<\/li>\n<li><strong><code>defaultPalette<\/code><\/strong> &#8211; Bepaalt het standaard kleurenpalet voor het thema.<\/li>\n<li><strong><code>duotone<\/code><\/strong> &#8211; Maakt duotone filters op afbeeldingen mogelijk.<\/li>\n<li><strong><code>gradient<\/code><\/strong> &#8211; Schakelt verloopopties in voor achtergronden of andere elementen.<\/li>\n<li><strong><code>link<\/code><\/strong> &#8211; Stelt de kleur in voor links in het thema.<\/li>\n<li><strong><code>text<\/code><\/strong> &#8211; Bepaalt de opties voor tekstkleuren.<\/li>\n<li><strong><code>heading<\/code><\/strong> &#8211; Stelt kleuren in voor koppen (bijv. h1, h2, enz.).<\/li>\n<li><strong><code>button<\/code><\/strong> &#8211; Bepaalt de kleuropties voor knoppen.<\/li>\n<li><strong><code>caption<\/code><\/strong> &#8211; Stelt de bijschriftkleur voor media-elementen in.<\/li>\n<\/ul>\n<p>Laten we een paar voorbeelden bekijken:<\/p>\n<p><strong>Voorbeeld 1:<\/strong> Als je de kleurenkiezer voor gebruikers wilt uitschakelen, kun je het volgende gebruiken:<\/p>\n<pre><code class=\"language-json\">\"color\": {\n    \"custom\": false\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/disable-color-picker.png\" alt=\"De kleurkiezer UI uitschakelen.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">De kleurkiezer UI uitschakelen.<\/figcaption><\/figure>\n<p><strong>Voorbeeld 2:<\/strong> Om custom primaire en secundaire themakleuren in te stellen, kun je deze configuratie gebruiken:<\/p>\n<pre><code class=\"language-json\">\"color\": {\n   \"palette\": [\n       { \"slug\": \"primary\", \"color\": \"#0000ff\", \"name\": \"Primary\" },\n       { \"slug\": \"secondary\", \"color\": \"#ff0000\", \"name\": \"Secondary\" }\n   ]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/theme-color-setting.png\" alt=\"De resulterende UI voor het instellen van primaire en secundaire themakleuren.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">De resulterende UI voor het instellen van primaire en secundaire themakleuren.<\/figcaption><\/figure>\n<h5>Dimensions<\/h5>\n<p>Deze property biedt opties om blokafmetingen te regelen, zoals breedte, hoogte en beeldverhouding.<\/p>\n<p>Keys binnen de property <code>dimensions<\/code>:<\/p>\n<ul>\n<li><strong><code>aspectRatio<\/code><\/strong> &#8211; Stelt gebruikers in staat om de beeldverhouding van een blok in te stellen of te tonen (bijv. 16:9, 4:3).<\/li>\n<li><strong><code>defaultAspectRatios<\/code><\/strong> &#8211; Definieert standaard hoogte-breedteverhoudingen voor blokken.<\/li>\n<li><strong><code>minHeight<\/code><\/strong> &#8211; Maakt het mogelijk om een minimale hoogte voor blokken in te stellen.<\/li>\n<\/ul>\n<p>Om gebruikers bijvoorbeeld toe te staan een minimale hoogte in te stellen voor ondersteunde blokken, gebruik je het volgende:<\/p>\n<pre><code class=\"language-json\">\"dimensions\": {\n    \"minHeight\": true\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/min-height-setting.png\" alt=\"Minimale hoogte ingesteld in de UI.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Minimale hoogte ingesteld in de UI.<\/figcaption><\/figure>\n<h5>Layout<\/h5>\n<p>Met de property <code>layout<\/code> kunnen gebruikers lay-outgerelateerde opties instellen, zoals de breedte van de inhoud en of gebruikers de lay-out kunnen aanpassen. Hiermee kunnen gebruikers opmaakopties instellen met deze keys:<\/p>\n<ul>\n<li><strong><code>contentSize<\/code> <\/strong>&#8211; Stelt de standaardbreedte van blokken in .<\/li>\n<li><strong><code>wideSize<\/code> <\/strong>&#8211; Bepaalt de breedte van blokken wanneer de optie brede uitlijning is geselecteerd.<\/li>\n<li><strong><code>allowEditing<\/code> <\/strong>&#8211; Bepaalt of gebruikers opmaakopties kunnen bewerken.<\/li>\n<li><strong><code>allowCustomContentAndWideSize<\/code> <\/strong>&#8211; Maakt het aanpassen van <code>contentSize<\/code> en <code>wideSize<\/code> mogelijk .<\/li>\n<\/ul>\n<p><strong>Voorbeeld<\/strong>: Opmaakinstellingen configureren met standaard en brede blokbreedtes:<\/p>\n<pre><code class=\"language-json\">\"layout\": {\n    \"contentSize\": \"620px\",\n    \"wideSize\": \"1000px\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/width-setting.png\" alt=\"Resultaat standaard en breedte blokinstellingen.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Resultaat standaard en breedte blokinstellingen.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Deze waarden zijn uitgangspunten die gebruikers kunnen veranderen.<\/p>\n<\/aside>\n\n<h5>Lightbox<\/h5>\n<p>Met de property <code>lightbox<\/code> kunnen gebruikers de functie &#8220;Uitvouwen bij klikken&#8221; inschakelen voor afbeeldingen, waardoor ze in een grotere weergave worden geopend wanneer erop wordt geklikt.<\/p>\n<p>Sleutels binnen de property <code>lightbox<\/code>:<\/p>\n<ul>\n<li><strong><code>enabled<\/code><\/strong> &#8211; Schakelt de Lightbox-functie in of uit.<\/li>\n<li><strong><code>allowEditing<\/code><\/strong> &#8211; Hiermee kunnen gebruikers de lightbox-instelling omschakelen.<\/li>\n<\/ul>\n<p><strong>Voorbeeld: <\/strong>Om gebruikers toe te staan de Lightbox-functie voor afbeeldingen aan te zetten, gebruik je deze configuratie:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n    \"core\/image\": {\n        \"lightbox\": {\n            \"allowEditing\": true\n        }\n    }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/lightbox-effect-toggle.png\" alt=\"Schakelen voor lightbox effect belicht.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Schakelen voor lightbox effect belicht.<\/figcaption><\/figure>\n<h5>Position<\/h5>\n<p>Met de property <code>position<\/code> kunnen gebruikers de positie van blokken bepalen, zoals het sticky maken van een blok op de pagina.<\/p>\n<p><strong>Voorbeeld<\/strong>: Maak een blok sticky:<\/p>\n<pre><code class=\"language-json\">\"position\": {\n    \"sticky\": true\n}<\/code><\/pre>\n<h5>Shadow<\/h5>\n<p>Met deze property kunnen gebruikers schaduweffecten toepassen op blokken, door vooraf gedefinieerde voorinstellingen of zelf gedefinieerde schaduwen te gebruiken.<\/p>\n<p>Keys binnen de property <code>shadow<\/code>:<\/p>\n<ul>\n<li><strong><code>defaultPresets<\/code> <\/strong>&#8211; Schakelt standaard presetting voor schaduwen in of uit.<\/li>\n<li><strong><code>presets<\/code> <\/strong>&#8211; Stelt gebruikers in staat om custom voorinstellingen voor schaduwen te defini\u00ebren.<\/li>\n<\/ul>\n<p>Hier is een voorbeeld waarbij standaard schaduwen zijn uitgeschakeld en een custom schaduw met de naam &#8220;Natural&#8221; is gedefinieerd:<\/p>\n<pre><code class=\"language-json\">\"shadow\": {\n    \"defaultPresets\": false,\n    \"presets\": [\n        { \"name\": \"Natural\", \"slug\": \"natural\", \"shadow\": \"6px 6px 9px rgba(0, 0, 0, 0.2)\" }\n    ]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/shadow-setting.png\" alt=\"Schaduwopties instellen in de UI.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Schaduwopties instellen in de UI.<\/figcaption><\/figure>\n<p>De nummers geven de klikstappen in de Site Editor aan om de UI te demonstreren. De laatste stap toont de &#8220;Natural&#8221; schaduw.<\/p>\n<h5>Spacing<\/h5>\n<p>Deze property definieert hoe de spati\u00ebring (opvulling, marge, tussenruimte) wordt geregeld in de editor.<\/p>\n<p>Keys binnen de property <code>spacing<\/code>:<\/p>\n<ul>\n<li><strong><code>blockGap<\/code><\/strong> &#8211; Regelt de ruimte tussen blokken.<\/li>\n<li><strong><code>margin<\/code><\/strong> &#8211; Stelt gebruikers in staat om marges rond blokken in te stellen.<\/li>\n<li><strong><code>padding<\/code> <\/strong>&#8211; Geeft opties om opvulling binnen blokken in te stellen.<\/li>\n<li><strong><code>units<\/code> <\/strong>&#8211; Definieert de beschikbare eenheden voor spati\u00ebring (bijv. px, rem).<\/li>\n<li><code>customSpacingSize<\/code> &#8211; Stelt gebruikers in staat om custom afstanden in te stellen.<\/li>\n<li><strong><code>spacingSizes<\/code> <\/strong>&#8211; Definieert een reeks vooraf ingestelde spati\u00ebringsmaten.<\/li>\n<li><strong><code>spacingScale<\/code> <\/strong>&#8211; Maakt het mogelijk om afstandseenheden te schalen.<\/li>\n<\/ul>\n<p><strong>Voorbeeld:<\/strong> Om gebruikers te beperken tot twee maateenheden (pixels en rem) voor opvulling, marges, breedtes en hoogtes en om de afstandsbesturingselementen zichtbaar te maken in de site-editor, stel je <code>appearanceTools<\/code> in op <code>true<\/code> en configureer je als volgt:<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n    \"units\": [\"px\", \"rem\"]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/measurement-limit.png\" alt=\"Het gebruik van 2 maateenheden beperken.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Het gebruik van 2 maateenheden beperken.<\/figcaption><\/figure>\n<h5>Typography<\/h5>\n<p>Deze property bepaalt de tekstgerelateerde instellingen voor je thema, zoals lettergrootte, lettergewicht en regelhoogte.<\/p>\n<p>Keys binnen de property <code>typography<\/code>:<\/p>\n<ul>\n<li><strong><code>defaultFontSizes<\/code> <\/strong>&#8211; Definieert de standaard lettergroottes die beschikbaar zijn voor gebruikers.<\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-thema-kernbegrippen\/\"><strong><code>customFontSize<\/code><\/strong><\/a> &#8211; Schakelt de mogelijkheid in of uit om custom lettergroottes in te stellen.<\/li>\n<li><strong><code>fontStyle<\/code><\/strong> &#8211; Bepaalt de stijl van het lettertype (bijv. normaal, cursief).<\/li>\n<li><strong><code>fontWeight<\/code><\/strong> &#8211; Hiermee kunnen gebruikers het gewicht van het lettertype instellen (bijvoorbeeld vet, licht).<\/li>\n<li><strong><code>fluid<\/code><\/strong> &#8211; Maakt vloeiende typografie mogelijk , waarbij de lettergrootte dynamisch wordt aangepast aan de schermgrootte.<\/li>\n<li><strong><code>letterSpacing<\/code><\/strong> &#8211; Bepaalt de ruimte tussen letters.<\/li>\n<li><strong><code>lineHeight<\/code><\/strong> &#8211; Bepaalt de hoogte van elke regel tekst.<\/li>\n<li><strong><code>fontStyle<\/code><\/strong> &#8211; Controle over de uitlijning van tekst (bijvoorbeeld links, midden, rechts).<\/li>\n<li><strong><code>textDecoration<\/code><\/strong> &#8211; Geeft opties voor tekstdecoratie (bijvoorbeeld onderstrepen).<\/li>\n<li><strong><code>writingMode<\/code><\/strong> &#8211; Stelt de schrijfmodus voor de tekst in (bijvoorbeeld horizontaal of verticaal).<\/li>\n<\/ul>\n<p><strong>Voorbeeld<\/strong>: Om zowel custom lettergroottes als ropCap opties uit te schakelen, gebruik je het volgende:<\/p>\n<pre><code class=\"language-json\">\"typography\": {\n    \"customFontSize\": false,\n    \"dropCap\": false\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/font-size-drop-cap-options.png\" alt=\"Verwijderen van custom opties voor lettergrootte en DropCap.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Verwijderen van custom opties voor lettergrootte en DropCap.<\/figcaption><\/figure>\n<p>In dit geval verschijnen beide gemarkeerde keys <strong>niet<\/strong> in de editor.<\/p>\n<h5>Root padding aware alignments<\/h5>\n<p>Wanneer deze property is ingesteld op <code>true<\/code>, zorgt deze ervoor dat brede of volledige blokuitlijningen zich bewust zijn van de opvulling die is toegepast op het basiselement van de pagina (bijv. <code>&lt;html&gt;<\/code> of <code>&lt;body&gt;<\/code>), waardoor de juiste uitlijning wordt gegarandeerd, zelfs wanneer opvulling wordt toegepast.<\/p>\n<p><strong>Voorbeeld:<\/strong><\/p>\n<pre><code class=\"language-json\">\"useRootPaddingAwareAlignments\": true<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Standaard is deze property ingesteld op <code>false<\/code>, wat resulteert in een vlak ontwerp.<\/p>\n<\/aside>\n\n<p>Wanneer deze is ingesteld op <code>true<\/code>, moet je ook de waarden voor de opvulling boven, rechts, onder en links van de root defini\u00ebren als stijl. (Meer over stijlproperties hieronder).<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n    \"padding\": {\n        \"top\": \"0\",\n        \"right\": \"100px\",\n        \"bottom\": \"0\",\n        \"left\": \"100px\"\n    }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/use-root-padding-aware-alignments-default.png\" alt=\"De standaard useRotPaddingAwareAignments.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">De standaard useRotPaddingAwareAignments.<\/figcaption><\/figure>\n<p>Het toepassen van de <code>useRootPaddingAwareAlignements<\/code> instelling samen met de rechter en linker padding op de body (zoals in de bovenstaande code) resulteert in het volgende.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/alignment-padding.png\" alt=\"Pas links en rechts padding toe wanneer useRootPaddingAwareAlignments is ingesteld op true.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Pas links en rechts padding toe wanneer useRootPaddingAwareAlignments is ingesteld op true.<\/figcaption><\/figure>\n<h4>Styles<\/h4>\n<p>Met de property <code>styles<\/code> kun je CSS-stijlen toepassen op de root (standaard), specifieke elementen of individuele blokken in je thema.<\/p>\n<h5>Achtergrond stijlen<\/h5>\n<p>Je kunt achtergrond-gerelateerde properties regelen, zoals afbeeldingen, positionering en bijlagen.<\/p>\n<p>Algemene keys voor achtergrond:<\/p>\n<ul>\n<li><strong><code>backgroundImage<\/code>\u00a0<\/strong>&#8211; Definieert de achtergrondafbeelding voor het blok of element.<\/li>\n<li><strong><code>backgroundPosition<\/code><\/strong> &#8211; Stelt de positie van de achtergrondafbeelding (bijv. midden, rechtsboven).<\/li>\n<li><strong><code>backgroundRepeat<\/code><\/strong> &#8211; Geeft aan of de achtergrondafbeelding wordt herhaald (bijv. herhalen, niet herhalen).<\/li>\n<li><strong><code>backgroundSize<\/code><\/strong> &#8211; Bepaalt de grootte van de achtergrondafbeelding (bijv. omslag, bevatten).<\/li>\n<li><strong><code>backgroundAttachment<\/code><\/strong> &#8211; Geeft aan of de achtergrondafbeelding vast staat of met de pagina mee scrolt.<\/li>\n<\/ul>\n<p>Je kunt bijvoorbeeld een achtergrondafbeelding voor je thema instellen:<\/p>\n<pre><code class=\"language-json\">\"background\": {\n   \"backgroundImage\": {\n       \"url\": \"https:\/\/joyofwp.com\/wp-content\/uploads\/2024\/09\/dots.png\"\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/bg-style-page.png\" alt=\"Voegt een achtergrondafbeeldingsstijl toe aan alle pagina's.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Voegt een achtergrondafbeeldingsstijl toe aan alle pagina&#8217;s.<\/figcaption><\/figure>\n<h5>Specifieke stijlen blokkeren<\/h5>\n<p>Je kunt specifieke stijlen, zoals schaduw, typografie en randen, toepassen op afzonderlijke blokken.<\/p>\n<p>Keys voor rand:<\/p>\n<ul>\n<li><strong><code>color<\/code>\u00a0<\/strong>&#8211; Definieert de kleur van de rand.<\/li>\n<li><strong><code>radius<\/code><\/strong> &#8211; Stelt de straal van de rand in voor afgeronde hoeken.<\/li>\n<li><strong><code>style<\/code><\/strong> &#8211; Specificeert de stijl van de rand (bijvoorbeeld effen, gestippeld).<\/li>\n<li><strong><code>width<\/code><\/strong> &#8211; Bepaalt de breedte van de rand.<\/li>\n<li><strong><code>top<\/code>, <code>right<\/code>, <code>bottom<\/code>, <code>left<\/code> <\/strong> &#8211; Hiermee kun je individuele randstijlen voor elke zijde instellen.<\/li>\n<\/ul>\n<p>Het volgende stelt bijvoorbeeld een stevige rode rand van 20px in rond de hele pagina:<\/p>\n<pre><code class=\"language-json\">\"border\": {\n   \"color\": \"#ff0000\",\n   \"width\": \"20px\",\n   \"style\": \"solid\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/add-border-styles.png\" alt=\"Een randstijl toevoegen aan alle pagina's.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Een randstijl toevoegen aan alle pagina&#8217;s.<\/figcaption><\/figure>\n<p>Je kunt ook custom CSS toewijzen aan een specifiek blok, element of de root.<br \/>\nDe code hieronder past bijvoorbeeld een rode tekstkleur toe op een tabelblok:<\/p>\n<pre><code class=\"language-json\">\"border\": {\n   \"color\": \"#ff0000\",\n   \"width\": \"20px\",\n   \"style\": \"solid\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/add-text-color-tables.png\" alt=\"Een tekstkleurstijl toevoegen aan alle tabellen.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Een tekstkleurstijl toevoegen aan alle tabellen.<\/figcaption><\/figure>\n<h5>Kleurstijlen<\/h5>\n<p>Met de color property kun je de achtergrond-, kleurverloop- en tekstkleurinstellingen regelen.<br \/>\nKeys voor <code>color<\/code>:<\/p>\n<ul>\n<li><code>background<\/code> &#8211; Stelt de achtergrondkleur van het blok of element in.<\/li>\n<li><code>gradient<\/code> &#8211; Definieert een achtergrondverloop voor het blok.<\/li>\n<li><code>text<\/code> &#8211; Bepaalt de kleur van de tekst.<\/li>\n<\/ul>\n<p>Het onderstaande voorbeeld stelt een zwarte achtergrond met witte tekst in op elk element voor elke pagina:<\/p>\n<pre><code class=\"language-json\">\"color\": {\n   \"background\": \"#000000\",\n   \"text\": \"#ffffff\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/text-bg-styling.png\" alt=\"Tekst en achtergrondkleur instellen voor alle pagina's.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Tekst en achtergrondkleur instellen voor alle pagina&#8217;s.<\/figcaption><\/figure>\n<h5>CSS<\/h5>\n<p>Met de property <code>css<\/code> kun je custom stijlen koppelen aan specifieke klassen, waardoor je meer controle hebt over de themastijlen.<\/p>\n<p><strong>Voorbeeld<\/strong>: Pas custom stijlen toe op <code>wp-block-template-parts<\/code> en <code>wp-block-button<\/code>, en voeg een hover-effect toe voor de knop:<\/p>\n<pre><code class=\"language-json\">\"css\": \".wp-block-template-part { background-color: #777777; padding: 20px; } .wp-block-button__link:hover { background-color: #ffffff; color: #000000; }\"<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/btn-hover-style.png\" alt=\"Toont alle knoppen in de header met een hover-status voor tekst en achtergrondstijlen.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Toont alle knoppen in de header met een hover-status voor tekst en achtergrondstijlen.<\/figcaption><\/figure>\n<p>Zoals je kunt zien, hebben de template parts voor de header en footer de stijlen <code>background-color<\/code> en <code>padding<\/code> toegewezen gekregen, terwijl de hover-status voor de knop een witte achtergrond met zwarte tekst heeft.<\/p>\n<h5>Dimensions<\/h5>\n<p>Met de property <code>dimensions<\/code> kun je de breedte, hoogte en <a href=\"https:\/\/developer.wordpress.org\/news\/2024\/08\/05\/registering-custom-aspect-ratios-in-wordpress-6-6\/\" target=\"_blank\" rel=\"noopener noreferrer\">beeldverhouding<\/a> van blokken bepalen.<\/p>\n<p>Keys voor afmetingen:<\/p>\n<ul>\n<li><strong><code>aspectRatios<\/code> <\/strong>&#8211; Definieert custom hoogte-breedteverhoudingen voor elementen.<\/li>\n<li><strong><code>minHeight<\/code> <\/strong>&#8211; Stelt de minimale hoogte voor blokken in.<\/li>\n<\/ul>\n<p><strong>Voorbeeld<\/strong>: Maak een custom hoogte-breedteverhouding van 3:7 voor een afbeeldingsblok:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"dimensions\": {\n           \"aspectRatio\": \"custom\"\n       }\n   }\n}<\/code><\/pre>\n<p>Het bovenstaande alleen is echter niet voldoende. Je moet de &#8220;custom&#8221; stijl registreren in de instellingensecties.<\/p>\n<pre><code class=\"language-json\">\"dimensions\": {\n   \"defaultAspectRatios\": true,\n   \"aspectRatios\": [\n       {\n           \"name\": \"Custom Ratio 3:7\",\n           \"slug\": \"custom\",\n           \"ratio\": \"3\/7\"\n       }\n   ]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/image-custom-ratio.png\" alt=\"Een custom ratio stylingoptie toevoegen voor alle afbeeldingen.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Een custom ratio stylingoptie toevoegen voor alle afbeeldingen.<\/figcaption><\/figure>\n<p>Hier kun je zien dat de optie &#8220;Custom Ratio&#8221; is toegevoegd. Als je liever de zeven standaard beeldverhoudingen verwijdert, verwijder dan <code>\"defaultAspectRatios\":true<\/code> uit de instellingensectie.<\/p>\n<h5>Elements specifieke stijlen<\/h5>\n<p>Met de property <code>elements<\/code> kun je stijlen toepassen op specifieke HTML-elementen zoals links, knoppen of koppen.<\/p>\n<p>De onderstaande code schakelt bijvoorbeeld tekstdecoratie (onderstrepen) uit voor alle links:<\/p>\n<pre><code class=\"language-json\">\"elements\": {\n   \"link\": {\n       \"typography\": {\n           \"textDecoration\": \"none\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/disable-text-decoration.png\" alt=\"Tekstdecoratiestijlen voor links uitschakelen.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Tekstdecoratiestijlen voor links uitschakelen.<\/figcaption><\/figure>\n<h5>Filter<\/h5>\n<p>Met de property <code>filter<\/code> kun je CSS-achtige filtereffecten (bijv. vervagen, helderheid) toepassen op bepaalde blokken zoals afbeeldingen.<\/p>\n<p><strong>Voorbeeld:<\/strong> Pas een vervaging- en helderheidsfilter toe op een afbeeldingsblok:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"filter\": {\n           \"duotone\": \"blur(5px) brightness(0.8)\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/blur-image.png\" alt=\"Een vervagingsstijl toevoegen aan alle afbeeldingen.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Een vervagingsstijl toevoegen aan alle afbeeldingen.<\/figcaption><\/figure>\n<p>Hier zijn vervagende en helderheidseffecten toegepast op het afbeeldingsblok. Andere beschikbare filterwaarden zijn:<\/p>\n<ul>\n<li><strong><code>contrast<\/code><\/strong> &#8211; Past het contrast van het element aan .<\/li>\n<li><strong><code>grayscale<\/code><\/strong> &#8211; Converteert het element naar grijswaarden.<\/li>\n<li><strong><code>invert<\/code><\/strong> &#8211; Inverteert de kleuren van het element.<\/li>\n<li><strong><code>opacity<\/code><\/strong> &#8211; Regelt de transparantie van het element.<\/li>\n<li><strong><code>saturate<\/code><\/strong> &#8211; Verhoogt of verlaagt de verzadiging van kleuren.<\/li>\n<li><strong><code>sepia<\/code><\/strong> &#8211; Past een sepiatoon toe op het element.<\/li>\n<\/ul>\n<h5>Outline<\/h5>\n<p>De property <code>outline<\/code> definieert stijlen voor contouren die buiten de rand van het element worden getekend, zonder de opmaakruimte te be\u00efnvloeden.<\/p>\n<p>Keys voor contour:<\/p>\n<ul>\n<li><strong><code>color<\/code><\/strong> &#8211; Stelt de kleur van de contour in .<\/li>\n<li><strong><code>offset<\/code><\/strong> &#8211; Bepaalt de ruimte tussen de rand en de contour.<\/li>\n<li><strong><code>style<\/code><\/strong> &#8211; Bepaalt de stijl van de omtreklijn (bv. gestippeld, effen).<\/li>\n<li><code><strong>width<\/strong><\/code> &#8211; Bepaalt de breedte van de contour.<\/li>\n<\/ul>\n<p><strong>Voorbeeld<\/strong>: Pas een rode gestippelde contour toe op een knop:<\/p>\n<pre><code class=\"language-json\">\"elements\": {\n   \"button\": {\n       \"outline\": {\n           \"color\": \"#ff0000\",\n           \"style\": \"dotted\",\n           \"width\": \"4px\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/button-outline-style.png\" alt=\"Een contourstijl toevoegen aan alle knoppen.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Een contourstijl toevoegen aan alle knoppen.<\/figcaption><\/figure>\n<h5>Shadow stijlen<\/h5>\n<p>Met de property <code>shadow<\/code> kun je boxschaduwen toepassen op blokken, waardoor je diepte en nadruk toevoegt aan elementen.<\/p>\n<p><strong>Voorbeeld<\/strong>: Pas een schaduw toe op alle afbeeldingen:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"shadow\": \"0 10px 20px 0 rgb(0 0 225 \/ 0.50)\"\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/shadow-image.png\" alt=\"Voegt een schaduw toe aan alle afbeeldingen.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Voegt een schaduw toe aan alle afbeeldingen.<\/figcaption><\/figure>\n<h5>Spacing stijlen<\/h5>\n<p>De property <code>spacing<\/code> beheert de opvul-, marge- en blokafstandstijlen voor je thema.<\/p>\n<p>Keys voor spati\u00ebring:<\/p>\n<ul>\n<li><strong><code>blockGap<\/code><\/strong> &#8211; Regelt de ruimte tussen blokken.<\/li>\n<li><code><strong>margin<\/strong><\/code> &#8211; Stelt de marges rond blokken in .<\/li>\n<li><strong><code>padding<\/code><\/strong> &#8211; Regelt de opvulling binnen blokken.<\/li>\n<\/ul>\n<p>Dit voorbeeld hieronder stelt custom opvulling in aan de linker- en rechterkant:<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n   \"padding\": {\n       \"left\": \"min(6.5rem, 8vw)\",\n       \"right\": \"min(6.5rem, 8vw)\"\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/left-right-padding.png\" alt=\"Voegt links en rechts opvulling toe.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Voegt links en rechts opvulling toe.<\/figcaption><\/figure>\n<h5>Typography stijlen<\/h5>\n<p>De property <code>typography<\/code> beheert lettertypestijlen, -groottes en andere tekstgerelateerde instellingen.<\/p>\n<p>Veelgebruikte toetsen voor typografie:<\/p>\n<ul>\n<li><strong><code>fontFamily<\/code><\/strong> &#8211; Stelt de lettertypefamilie voor de tekst in .<\/li>\n<li><strong><code>fontSize<\/code><\/strong> &#8211; Bepaalt de lettergrootte.<\/li>\n<li><strong><code>fontStyle<\/code><\/strong> &#8211; Bepaalt de stijl van het lettertype (bijvoorbeeld cursief, normaal).<\/li>\n<li><strong><code>fontWeight<\/code><\/strong> &#8211; Bepaalt het gewicht (dikte) van het lettertype.<\/li>\n<li><strong><code>letterSpacing<\/code><\/strong> &#8211; Past de ruimte tussen letters aan .<\/li>\n<li><strong><code>lineHeight<\/code><\/strong> &#8211; Bepaalt de regelhoogte (afstand tussen regels tekst).<\/li>\n<li><strong><code>textAlign<\/code><\/strong> &#8211; Stelt de tekstuitlijning in (bijvoorbeeld links, midden, rechts).<\/li>\n<li><strong><code>textColumns<\/code><\/strong> &#8211; Bepaalt het aantal tekstkolommen.<\/li>\n<li><strong><code>textDecoration<\/code><\/strong> &#8211; Stelt de tekstdecoratie in (bijvoorbeeld onderstrepen).<\/li>\n<li><strong><code>writingMode<\/code><\/strong> &#8211; Bepaalt de schrijfmodus (bijvoorbeeld horizontaal, verticaal).<\/li>\n<li><strong><code>textTransform<\/code><\/strong> &#8211; Bepaalt de transformatie van tekst (bijv. hoofdletters, kleine letters).<\/li>\n<\/ul>\n<p>Je kunt bijvoorbeeld instellen dat alle koppen een font-weight van 300 en een italic stijl hebben:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/heading\": {\n       \"typography\": {\n           \"fontWeight\": \"300\",\n           \"fontStyle\": \"italic\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/heading-style.png\" alt=\"Alle headings hebben de stylingproperties cursief en gewicht.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Alle headings hebben de stylingproperties cursief en gewicht.<\/figcaption><\/figure>\n<h3>Properties voor templates en patterns<\/h3>\n<p>Deze drie properties op het hoogste niveau worden gebruikt om custom elementen in je thema te registreren.<\/p>\n<h4>1. Custom templates<\/h4>\n<p>De property <code>templates<\/code> wordt gebruikt om custom templates te registreren voor verschillende posttypes.<\/p>\n<ul>\n<li><strong><code>name<\/code><\/strong> &#8211; De naam van het bestand <code>.html<\/code> of <code>.php<\/code> in de subdirectory <code>templates<\/code>.<\/li>\n<li><strong><code>title<\/code><\/strong> &#8211; De titel die wordt toegewezen aan de template om identificatie te vergemakkelijken.<\/li>\n<li><strong><code>postTypes<\/code><\/strong> &#8211; Specificeert het type inhoud (bijv. berichten, pagina&#8217;s) waarvoor de template wordt gebruikt.<\/li>\n<\/ul>\n<h4>2. Template parts<\/h4>\n<p>De property <code>templateParts<\/code> wordt gebruikt om herbruikbare onderdelen van templates te defini\u00ebren (bijv. kop- en voetteksten).<\/p>\n<ul>\n<li><strong><code>name<\/code> <\/strong>&#8211; De naam van het bestand <code>.html<\/code> of <code>.php<\/code> in de subdirectory <code>parts<\/code>.<\/li>\n<li><strong><code>title<\/code> <\/strong>&#8211; De titel die aan het template part wordt gegeven om identificatie te vergemakkelijken.<\/li>\n<li><strong><code>area<\/code> <\/strong>&#8211; Specificeert op welk deel van de pagina het template part van toepassing is (bijv. <code>header<\/code>, <code>footer<\/code>, <code>sidebar<\/code>).<\/li>\n<\/ul>\n<h4>3. Patterns<\/h4>\n<p>Met de property <code>patterns<\/code> kun je een reeks pattern slugs registreren uit de WordPress Patterns Directory, zodat ze beschikbaar worden in het thema.<\/p>\n<p>Zo registreer je een pattern:<\/p>\n<pre><code class=\"language-json\">\"patterns\": [\n    \"my-custom-pattern-slug\"\n]<\/code><\/pre>\n<h2>Drie praktische voorbeelden van het werken met theme.json<\/h2>\n<p>Hier zijn een paar dingen die je misschien zou willen doen voor een thema dat je aan het ontwikkelen bent.<\/p>\n<h3>1. Een pattern toevoegen<\/h3>\n<p>Hier zie je hoe je twee pattern uit de WordPress Patterns Directory kunt toevoegen. Hier zie je het pattern &#8220;Fullscreen Cover Image Gallery&#8221;:<\/p>\n<pre><code class=\"language-json\">\"patterns\": [\n   \"fullscreen-cover-image-gallery\",\n   \"hero-banner-with-overlap-images\"\n]<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/pattern-wordpress.png\" alt=\"Demonstreert het invoegen van een pattern van wordpress.org.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Demonstreert het invoegen van een pattern van wordpress.org.<\/figcaption><\/figure>\n<p><strong>Opmerkingen:<\/strong><\/p>\n<ul>\n<li>Patronen uit de map <b>Patterns <\/b>worden niet weergegeven in de <b>Pattern <\/b>sectie van de site-editor. Deze patterns zijn alleen beschikbaar via de <strong>Inserter<\/strong>.<\/li>\n<li>In dit voorbeeld nemen we de top-level property <code>patterns<\/code> op (vergeleken met <code>settings<\/code> en <code>styles<\/code>, die we in eerdere voorbeelden kortheidshalve hebben weggelaten).<\/li>\n<\/ul>\n<h3>2. Een eigen lettertype toevoegen<\/h3>\n<p>We hebben twee lettertypebestanden (<code>Roboto-Regular.ttf<\/code> en <code>Roboto-Bold.ttf<\/code>) gedownload uit de <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Fonts<\/a> bibliotheek en ge\u00fcpload naar de <code>assets\/fonts\/<\/code> subdirectory van ons thema.<\/p>\n<p>De volgende code registreert beide lettertypen en maakt ze beschikbaar voor de hele site:<\/p>\n<pre><code class=\"language-json\">\"settings\": {\n   \"typography\": {\n       \"fontFamilies\": [\n           {\n               \"fontFamily\": \"Roboto\",\n               \"name\": \"Roboto\",\n               \"slug\": \"roboto\",\n               \"fontFace\": [\n                   {\n                       \"fontFamily\": \"Roboto Regular\",\n                       \"fontWeight\": \"400\",\n                       \"fontStyle\": \"normal\",\n                       \"src\": [\n                           \"file.\/assets\/fonts\/Roboto-Regular.ttf\"\n                       ]\n                   },\n                   {\n                       \"fontFamily\": \"Roboto Bold\",\n                       \"fontWeight\": \"700\",\n                       \"fontStyle\": \"bold\",\n                       \"src\": [\n                           \"file.\/assets\/fonts\/Roboto-Bold.ttf\"\n                       ]      \n                   }  \n               ]\n           }\n       ]\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/google-font.png\" alt=\"Toont de opname van een Google Font.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Toont de opname van een Google Font.<\/figcaption><\/figure>\n<h3>3. Je kleurenpalet instellen<\/h3>\n<p>Als je je gebruikers wilt beperken tot een specifiek kleurenpalet, kun je dat als volgt instellen. (Kleurverlopen en duotonen kunnen ook worden ingesteld volgens jouw specificaties).<\/p>\n<p><strong>Voorbeeld:<\/strong><\/p>\n<pre><code class=\"language-json\">\"settings\": {\n   \"color\": {\n       \"custom\": false,\n       \"defaultPalette\": false,\n       \"palette\": [\n           {\n               \"slug\": \"primary\",\n               \"color\": \"#1e8cbe\",\n               \"name\": \"Primary\"\n           },\n           {\n               \"slug\": \"secondary\",\n               \"color\": \"#21759b\",\n               \"name\": \"Secondary\"\n           },\n           {\n               \"slug\": \"tertiary\",\n               \"color\": \"#\",\n               \"name\": \"Tertiary\"\n           },\n           {\n               \"slug\": \"accent\",\n               \"color\": \"#464646\",\n               \"name\": \"Accent\"\n           }\n       ]\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/custom-theme-colors.png\" alt=\"Te kiezen custom themakleuren.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Te kiezen custom themakleuren.<\/figcaption><\/figure>\n<p>Herken je deze vier kleuren? Ze maken deel uit van de branding van WordPress.<\/p>\n<h2>Samenvatting<\/h2>\n<p>Dit artikel belicht de centrale rol van <code>theme.json<\/code> in de moderne ontwikkeling van WordPress thema&#8217;s. Door <code>theme.json<\/code> te beheersen, kun je het visuele ontwerp en de gebruikersinterface van je thema volledig aanpassen zonder ingewikkelde <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-php\/\">PHP<\/a> of CSS overschrijvingen.<\/p>\n<p>Als je weet hoe je properties zoals <code>appearanceTools<\/code> effectief kunt gebruiken, krijg je meer controle en effici\u00ebntie bij het bouwen of finetunen van WordPress thema&#8217;s, waardoor dit bestand een essentieel hulpmiddel is voor ontwikkelaars die flexibele, gebruiksvriendelijke thema&#8217;s willen maken.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Het begrijpen van de structuur en properties van het theme.json bestand is fundamenteel bij het ontwikkelen van blokkenthema&#8217;s. Dit bestand dient immers als de primaire configuratiehub &#8230;<\/p>\n","protected":false},"author":313,"featured_media":61161,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[892,902],"class_list":["post-61160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-ontwikkeling","topic-wordpress-themas"],"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>Zo werk je met properties en key value pairs in theme.json<\/title>\n<meta name=\"description\" content=\"Leer werken met properties en key value pairs in theme.json om instellingen en stijlen aan te passen voor WordPress blokthema&#039;s.\" \/>\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-properties-key-value-pairs\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo werk je met properties en key value pairs in theme.json\" \/>\n<meta property=\"og:description\" content=\"Leer werken met properties en key value pairs in theme.json om instellingen en stijlen aan te passen voor WordPress blokthema&#039;s.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/\" \/>\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-11-18T09:03:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-22T09:54:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bud Kraus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Leer werken met properties en key value pairs in theme.json om instellingen en stijlen aan te passen voor WordPress blokthema&#039;s.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json-1024x512.png\" \/>\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=\"Bud Kraus\" \/>\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-properties-key-value-pairs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/\"},\"author\":{\"name\":\"Bud Kraus\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed\"},\"headline\":\"Zo werk je met properties en key value pairs in theme.json\",\"datePublished\":\"2024-11-18T09:03:41+00:00\",\"dateModified\":\"2024-11-22T09:54:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/\"},\"wordCount\":3734,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/\",\"name\":\"Zo werk je met properties en key value pairs in theme.json\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"datePublished\":\"2024-11-18T09:03:41+00:00\",\"dateModified\":\"2024-11-22T09:54:07+00:00\",\"description\":\"Leer werken met properties en key value pairs in theme.json om instellingen en stijlen aan te passen voor WordPress blokthema's.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/#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 werk je met properties en key value pairs in theme.json\"}]},{\"@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\/8cce3d6bbd8a2aa46850235d997793ed\",\"name\":\"Bud Kraus\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"caption\":\"Bud Kraus\"},\"description\":\"Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/budkraus\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zo werk je met properties en key value pairs in theme.json","description":"Leer werken met properties en key value pairs in theme.json om instellingen en stijlen aan te passen voor WordPress blokthema's.","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-properties-key-value-pairs\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo werk je met properties en key value pairs in theme.json","og_description":"Leer werken met properties en key value pairs in theme.json om instellingen en stijlen aan te passen voor WordPress blokthema's.","og_url":"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2024-11-18T09:03:41+00:00","article_modified_time":"2024-11-22T09:54:07+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","type":"image\/png"}],"author":"Bud Kraus","twitter_card":"summary_large_image","twitter_description":"Leer werken met properties en key value pairs in theme.json om instellingen en stijlen aan te passen voor WordPress blokthema's.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json-1024x512.png","twitter_creator":"@Kinsta_NL","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Bud Kraus","Geschatte leestijd":"21 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/"},"author":{"name":"Bud Kraus","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed"},"headline":"Zo werk je met properties en key value pairs in theme.json","datePublished":"2024-11-18T09:03:41+00:00","dateModified":"2024-11-22T09:54:07+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/"},"wordCount":3734,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/","url":"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/","name":"Zo werk je met properties en key value pairs in theme.json","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","datePublished":"2024-11-18T09:03:41+00:00","dateModified":"2024-11-22T09:54:07+00:00","description":"Leer werken met properties en key value pairs in theme.json om instellingen en stijlen aan te passen voor WordPress blokthema's.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/theme-json-properties-key-value-pairs\/#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 werk je met properties en key value pairs in theme.json"}]},{"@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\/8cce3d6bbd8a2aa46850235d997793ed","name":"Bud Kraus","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","caption":"Bud Kraus"},"description":"Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.","url":"https:\/\/kinsta.com\/nl\/blog\/author\/budkraus\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/61160","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\/313"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=61160"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/61160\/revisions"}],"predecessor-version":[{"id":61223,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/61160\/revisions\/61223"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61160\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61160\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61160\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61160\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61160\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61160\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61160\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61160\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/61160\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/61161"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=61160"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=61160"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=61160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}