{"id":60723,"date":"2024-10-03T16:26:58","date_gmt":"2024-10-03T14:26:58","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=60723&#038;preview=true&#038;preview_id=60723"},"modified":"2024-10-04T09:50:16","modified_gmt":"2024-10-04T07:50:16","slug":"css-custom-properties-theme-json","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/","title":{"rendered":"Zo verbeter je WordPress thema&#8217;s met CSS properties in theme.json"},"content":{"rendered":"<p>Developers van WordPress-thema&#8217;s kunnen het<code>theme.json<\/code> bestand gebruiken om een proces te stroomlijnen. Dit scheelt, omdat je vroeger grotendeels afhankelijk was van PHP. Je kunt gelukkig echter nog steeds je HTML, JavaScript en PHP vaardigheden gebruiken om je thema&#8217;s te bouwen &#8211; en CSS is geen uitzondering. In feite gebruik je hier CSS custom properties binnen <code>theme.json<\/code>. Dit kan de ontwerpfase verbeteren en je meer flexibiliteit geven.<\/p>\n<p>In deze gids gaan we dieper in op CSS custom properties om te onderzoeken hoe ze werken in combinatie met WordPress en <code>theme.json<\/code>. Maar voordat we dat doen, geven we een overzicht van theme.json, full site editing (FSE) en hoe CSS past in deze nieuwe ontwerpbenadering.<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>Hoe theme.json werkt met WordPress<\/h2>\n<p>Het <code>theme.json<\/code> bestand verscheen voor het eerst in <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-8\/\">WordPress 5.8<\/a>. Het is een revolutionaire manier om WordPress thema&#8217;s te ontwerpen, waarbij JSON syntax wordt gebruikt om <a href=\"https:\/\/kinsta.com\/nl\/blog\/theme-json\/\">een configuratiebestand op te bouwen<\/a>. WordPress leest dit en past de resultaten toe zonder dat er veel <a href=\"https:\/\/kinsta.com\/nl\/blog\/php-tutorials\/\">PHP<\/a>, <a href=\"https:\/\/kinsta.com\/nl\/blog\/css-best-practices\/\">CSS<\/a> of <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-javascript\/\">JavaScript<\/a> nodig is.<\/p>\n<figure id=\"attachment_184933\" aria-describedby=\"caption-attachment-184933\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184933 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/theme-json.png\" alt=\"Een code editor venster met de content van een theme.json bestand voor een WordPress thema. De JSON structuur definieert thema-instellingen, waaronder schemaversies, patronen en kleurinstellingen. Op de achtergrond is een schilderachtig landschap met bergen, bossen en terrasvormige velden te zien.\" width=\"1200\" height=\"705\"><figcaption id=\"caption-attachment-184933\" class=\"wp-caption-text\">Een <strong>theme.json<\/strong> bestand in een code editor.<\/figcaption><\/figure>\n<p>De <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-full-site-editing\/\">globale instellingen en stijlen<\/a> binnen FSE bepalen verschillende visuele aspecten van je thema. Dit kunnen typische kleurenpaletten en typografie zijn, maar ook layout opties en individuele blok- en elementstijlen.<\/p>\n<p>Hoewel FSE intu\u00eftief, krachtig, aanpasbaar en eenvoudig te gebruiken is, kan <code>theme.json<\/code> helpen de kloof tussen eindgebruiker en ontwikkelaar te overbruggen. Bijna elke optie die <code>theme.json<\/code> je biedt, is ook zichtbaar in de Site Editor.<\/p>\n<figure id=\"attachment_184932\" aria-describedby=\"caption-attachment-184932\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184932 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/site-editor-interface.png\" alt=\"De interface van de WordPress Site Editor, met de startpagina van een website aan de rechterkant van het scherm, terwijl de zwarte, linker zijbalk opties geeft voor navigatie, stijlen, pagina's, templates en patronen.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184932\" class=\"wp-caption-text\">De hoofdinterface van de Site Editor binnen WordPress.<\/figcaption><\/figure>\n<p>Het gebruik van <code>theme.json<\/code> biedt veel voordelen bij het <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/\">bouwen van WordPress thema&#8217;s<\/a>. Daar zijn een paar redenen voor:<\/p>\n<ul>\n<li>Je hebt een centrale locatie voor de ontwerpconfiguratie van je thema, waardoor het gemakkelijker te beheren en bij te werken is.<\/li>\n<li>Er is minder versluiering tussen de front-end ervaring, Site Editor, en de codebase van een thema.<\/li>\n<li>Het gebruik van <code>theme.json<\/code> biedt compatibiliteit met de toekomst van WordPress ontwikkeling en ontwerp.<\/li>\n<li>De ingebouwde functionaliteit van WordPress betekent dat de gebruiker minder custom CSS hoeft toe te passen.<\/li>\n<\/ul>\n<p>Laten we eens kijken hoe <code>theme.json<\/code> zich verhoudt tot de globale instellingen en stijlen van FSE.<\/p>\n<h3>Een inleiding tot de globale instellingen en stijlen van FSE<\/h3>\n<p>FSE vertegenwoordigt een nieuw tijdperk in de ontwikkeling van WordPress thema&#8217;s en globale instellingen en stijlen vormen de voorhoede. Hiermee kunnen gebruikers bijna elk aspect van het uiterlijk van een site aanpassen via de Site Editor functionaliteit.<\/p>\n<figure id=\"attachment_184929\" aria-describedby=\"caption-attachment-184929\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184929 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/global-settings-styles.png\" alt=\"De WordPress Site Editor toont de invoervelden van het paneel Stylesin de rechter zijbalk. Hiermee kun je de typografie-instellingen aanpassen. Aan de linkerkant zie je een gedeeltelijke weergave van een webpagina met een blauw thema.\" width=\"1200\" height=\"863\"><figcaption id=\"caption-attachment-184929\" class=\"wp-caption-text\">Het paneel Styles in de WordPress Site Editor.<\/figcaption><\/figure>\n<p>Hier kun je aspecten van de layout van je thema aanpassen met opties waarvoor vroeger CSS of een externe <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-page-builders\/\">pagebuilder plugin<\/a> nodig was. Het aanpassen van marges, opvulling en randen zijn voorbeelden, maar er zijn er nog veel meer.<\/p>\n<figure id=\"attachment_184930\" aria-describedby=\"caption-attachment-184930\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184930 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/paddings-margins.png\" alt=\"De WordPress Site Editor, met het paneel Lay-out aanpassen. Hiermee kun je de afmetingen van de content, de vulling en de afstand tussen blokken aanpassen. De linkerkant van het scherm toont een gedeeltelijke weergave van een webpagina met een blauw thema.\" width=\"1200\" height=\"842\"><figcaption id=\"caption-attachment-184930\" class=\"wp-caption-text\">Werken met typische CSS-elementen zoals opvulling en marges in de Site Editor.<\/figcaption><\/figure>\n<p>Je kunt zelfs veel van deze functionaliteit in- of uitschakelen binnen <code>theme.json<\/code> (of het eigen <code>block.json<\/code> bestand van een blok). Dit ondersteunt het aanpassen van de UI naast het algehele siteontwerp.<\/p>\n<p>De opties die je tot je beschikking hebt, zijn weliswaar uitgebreid, maar dekken misschien niet elke behoefte. Dit geldt vooral als je een thema vanaf niks opbouwt. Dit is een taak die CSS custom properties kunnen helpen oplossen.<\/p>\n<h2>CSS custom properties begrijpen<\/h2>\n<p>In PHP, JavaScript en bijna elke programmeertaal bevatten variabelen de waarden van verschillende elementen in je code. Je kunt bijvoorbeeld waarden opslaan als namen, datums en getallen en deze door je hele programma gebruiken.<\/p>\n<p>CSS3 variabelen &#8211; of CSS custom properties zoals we ze in dit artikel noemen &#8211; worden <a href=\"https:\/\/caniuse.com\/?search=css%20variables\" target=\"_blank\" rel=\"noopener noreferrer\">door de meeste browsers ondersteund<\/a>. Internet Explorer ondersteunt ze niet en Opera Mini ook niet. Maar de <a href=\"https:\/\/kinsta.com\/nl\/blog\/microsoft-edge-versus-chrome\/\">grote spelers ondersteunen ze allemaal<\/a>.<\/p>\n<figure id=\"attachment_184927\" aria-describedby=\"caption-attachment-184927\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184927 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/can-i-use.png\" alt=\"Een compatibiliteitstabel voor CSS-variabelen (aangepaste eigenschappen) in verschillende webbrowsers. De grafiek laat een hoog wereldwijd gebruik zien van 97,05 procent en geeft aan dat er wijdverspreide ondersteuning is voor de belangrijkste desktop- en mobiele browsers.\" width=\"1200\" height=\"604\"><figcaption id=\"caption-attachment-184927\" class=\"wp-caption-text\">De Can I Use website toont de huidige ondersteuning voor CSS custom properties.<\/figcaption><\/figure>\n<p>Met CSS custom properties kun je waarden opslaan die je kunt hergebruiken in je stylesheet. Het is een krachtige manier om dynamischer en flexibeler CSS te maken. Je kunt meerdere stijlregels bijwerken door een enkele waarde te veranderen.<\/p>\n<p>Het concept van CSS variabelen is niet helemaal nieuw. Preprocessors zoals <a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sass<\/a> gebruiken vergelijkbare functionaliteit. Neem bijvoorbeeld het volgende Sass:<\/p>\n<pre><code class=\"language-css\">$font-stack: Helvetica, sans-serif\n$primary-color: #333\n\nbody\n  font: 100% $font-stack\n  color: $primary-color<\/code><\/pre>\n<p>Dit verwerkt in typisch CSS:<\/p>\n<pre><code class=\"language-css\">body {\n  font: 100% Helvetica, sans-serif;\n  color: #333;\n}<\/code><\/pre>\n<p>CSS custom properties brengen dit echter rechtstreeks naar de browser. Dit biedt enkele voordelen:<\/p>\n<ul>\n<li><strong>Dynamische updates.<\/strong> In tegenstelling tot de meeste preprocessor variabelen, kun je CSS custom properties &#8220;on the fly&#8221; bijwerken met JavaScript.<\/li>\n<li><strong>Cascaderend karakter.<\/strong> Custom properties volgen de CSS cascade, waardoor je meer flexibiliteit en meer contextbewuste styling krijgt.<\/li>\n<\/ul>\n<p>Custom properties zijn ook performanter door het verminderen van overbodige code. Kleinere stylesheets betekenen snellere laadtijden.<\/p>\n<h3>De syntaxis voor CSS custom properties<\/h3>\n<p>Net als bij typische preprocessor variabelen is de syntaxis voor CSS custom properties eenvoudig. Er worden dubbele koppeltekens gebruikt in plaats van dollartekens om een property te specificeren:<\/p>\n<pre><code class=\"language-css\">:root {\n  --primary-color: #007bff;\n}<\/code><\/pre>\n<p>Van daaruit gebruik je de functie <code>var()<\/code> om die properties aan elementen toe te wijzen:<\/p>\n<pre><code class=\"language-css\">.button {\n  background-color: var(--primary-color);\n}<\/code><\/pre>\n<p>Merk op dat je ook custom properties kunt toewijzen met de <code>@<\/code> property. Maar zoals je straks zult begrijpen, vereenvoudigt WordPress dit hele proces.<\/p>\n<h3>Waar je CSS custom properties kunt gebruiken<\/h3>\n<p>Veelzijdigheid is aan de orde van de dag als het gaat om CSS custom properties. Met WordPress en <code>theme.json<\/code> heb je een paar manieren om ze te gebruiken:<\/p>\n<ul>\n<li><strong>Presets:<\/strong> Je kunt presets voor kleuren, lettertypen en spati\u00ebring defini\u00ebren.<\/li>\n<li><strong>Blokstijlen:<\/strong> <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/\">Individuele blokken<\/a> kunnen custom properties gebruiken voor consistente styling.<\/li>\n<li><strong>Globale stijlen:<\/strong> Custom properties zijn van onschatbare waarde voor een site-breed ontwerp.<\/li>\n<\/ul>\n<p>Je kunt volledig custom properties maken voor welk doel je maar wilt. Laten we eens kijken naar een praktisch voorbeeld van hoe je custom properties zou kunnen gebruiken in je <code>theme.json<\/code> bestand:<\/p>\n<pre><code class=\"language-json\">{\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"slug\": \"primary\",\n          \"color\": \"#007bff\",\n          \"name\": \"Primary\"\n        }\n      ]\n    },\n    \"custom\": {\n      \"line-height\": {\n        \"body\": 1.5,\n        \"heading\": 1.2\n      }\n    }\n  },\n  \"styles\": {\n    \"typography\": {\n      \"lineHeight\": \"var(--wp--custom--line-height--body)\"\n    },\n    \"blocks\": {\n      \"core\/heading\": {\n        \"typography\": {\n          \"lineHeight\": \"var(--wp--custom--line-height--heading)\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Hier defini\u00ebren we een vooraf ingestelde kleur en gebruiken we de property <code>custom<\/code> om <code>line-height<\/code> waarden te defini\u00ebren voor de koppen en de body van de pagina. WordPress genereert CSS properties voor de elementen die je definieert met <code>custom<\/code>. Verderop kunnen we deze custom properties toewijzen aan verschillende stijlen, instellingen, blokken en meer.<\/p>\n<h2>De voordelen van het gebruik van CSS custom properties<\/h2>\n<p>Je hebt misschien al idee\u00ebn over hoe CSS custom properties je kunnen helpen bij het ontwikkelen van thema&#8217;s. Toch zijn er nog genoeg voordelen om op te merken.<\/p>\n<p>We hebben het al gehad over modulariteit en herbruikbaarheid. Alle gemeenschappelijke waarden die je definieert als custom properties zullen consistentie bevorderen en redundantie verminderen. Die redundantie vertaalt zich in betere <a href=\"https:\/\/kinsta.com\/nl\/blog\/optimaliseer-css\/\">potenti\u00eble prestaties<\/a> voor je thema.<\/p>\n<p>Voor de eindgebruiker bieden custom properties verschillende voordelen:<\/p>\n<ul>\n<li><strong>Vereenvoudigd aanpassen.<\/strong> Gebruikers en site-eigenaren kunnen <a href=\"https:\/\/kinsta.com\/nl\/blog\/hoe-je-je-wordpress-thema-kan-customizen\/\">een thema aanpassen<\/a> zonder dat ze ingewikkelde CSS-kennis nodig hebben. Zodra je variabelen blootlegt via <code>theme.json<\/code>, hebben gebruikers toegang tot de instellingen via de Site Editor.<\/li>\n<li><strong>Betere compatibiliteit met FSE.<\/strong> Aangepaste properties zijn afgestemd op de principes van FSE, waardoor je flexibelere en dynamischere themaontwerpen kunt maken.<\/li>\n<li><strong>Eenvoudiger onderhoud en updates.<\/strong> Als je gemeenschappelijke waarden in je hele thema moet bijwerken, betekent een custom property dat je ze maar op \u00e9\u00e9n plek hoeft te wijzigen. Het stroomlijnt je onderhoud en maakt updates en aanpassingen beter beheersbaar.<\/li>\n<\/ul>\n<p>Over het algemeen kunnen custom properties de workflow voor het ontwikkelen van je thema&#8217;s verbeteren. Het bepalen ervan is ook eenvoudiger dan het gebruik van typische CSS-variabelen.<\/p>\n<h2>Hoe je CSS custom properties definieert in theme.json<\/h2>\n<p>Laten we eens kijken naar de praktische aspecten van het defini\u00ebren en gebruiken van CSS custom properties binnen <code>theme.json<\/code>. De eerste stap is leren hoe je ze schrijft.<\/p>\n<h3>Syntaxis en naamgevingsconventies<\/h3>\n<p>WordPress biedt de property <code>custom<\/code> om te helpen met definities. Deze is iets eenvoudiger te gebruiken dan de <code>@<\/code> property of definities binnen pseudoklassen, en gebruikt de standaard sleutel\/waarde-indeling:<\/p>\n<pre><code class=\"language-css\">{\n  \"settings\": {\n    \"custom\": {\n      \"property-name\": \"value\"\n    }\n  }\n}<\/code><\/pre>\n<p>Achter de schermen verwerkt WordPress deze definitie en genereert een CSS custom property met dubbele koppeltekens:<\/p>\n<pre><code class=\"language-css\">--wp--custom--&lt;custom-element&gt;<\/code><\/pre>\n<p><code>--wp--custom--<\/code> zal altijd deel uitmaken van je CSS property en zal geen hoofdletters gebruiken. Als je bijvoorbeeld <code>lineHeight<\/code> definieert als een custom property, dan zal WordPress er &#8220;kebab case:&#8221; van maken<\/p>\n<pre><code class=\"language-css\">--wp--custom--line-height<\/code><\/pre>\n<p>Als het aankomt op naamgevingsconventies, kun je camel case gebruiken als je dat wilt, hoewel we kebab case adviseren voor de namen van je custom properties. Dit is consistent met de naamgevingsconventies van WordPress, verbetert de leesbaarheid en vermindert verwerkingsfouten.<\/p>\n<p><strong>Opmerking<\/strong>: CSS custom properties gebruiken dubbele koppeltekens omdat <a href=\"https:\/\/www.w3.org\/Style\/CSS\/\" target=\"_blank\" rel=\"noopener noreferrer\">de CSS Werkgroep van het W3C<\/a> je ook wil aanmoedigen om Sass te gebruiken (dat dollartekens gebruikt om properties te defini\u00ebren). Op deze manier heb je de optie van beide om je ontwerpen te verbeteren.<\/p>\n<p>WordPress definieert al een aantal custom properties &#8211; of tenminste, thema&#8217;s hebben die optie om dat te doen. Dit betekent dat je CSS variabelen ziet binnen <code>theme.json<\/code> zonder een expliciete declaratie:<\/p>\n<pre><code class=\"language-json\">{\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"slug\": \"primary\",\n          \"color\": \"var(--wp--preset--color--primary)\",\n          \"name\": \"Primary\"\n        }\n      ]\n    },\n    \"custom\": {\n      \"spacing\": {\n        \"small\": \"1rem\",\n        \"medium\": \"2rem\",\n        \"large\": \"3rem\"\n      }\n    }\n  },\n  \"styles\": {\n    \"spacing\": {\n      \"blockGap\": \"var(--wp--custom--spacing--medium)\"\n    }\n  }\n}<\/code><\/pre>\n<p>In dit voorbeeld defini\u00ebren we een primaire kleur met behulp van een bestaande vooraf ingestelde kleur. Vervolgens defini\u00ebren we enkele custom spati\u00ebringsproperties en stellen deze in met <code>var()<\/code>.<\/p>\n<p>Dit betekent dat we geen harde waarden hoeven in te voeren in <code>theme.json<\/code>. Bovendien kunnen gebruikers deze waarden bijwerken in de Site Editor en ze door het hele thema laten verspreiden.<\/p>\n<h3>Presets vs. custom properties<\/h3>\n<p>Natuurlijk kun je met <code>theme.json<\/code> ook presets defini\u00ebren voor kleuren, lettergrootten en andere veelgebruikte thema-elementen. Aan de andere kant kun je custom properties gebruiken voor elke waarde die je wilt hergebruiken in je thema.<\/p>\n<p>Het grootste verschil zit hem in de naamgevingsconventies en de toegankelijkheid. Gebruikers hebben geen toegang tot custom properties in de Site Editor zonder dat jij daar iets aan doet. Met presets genereert WordPress CSS die lijkt op hoe het custom properties verwerkt:<\/p>\n<pre><code class=\"language-css\">{\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"slug\": \"primary\",\n          \"color\": \"#007bff\",\n          \"name\": \"Primary\"\n        }\n      ]\n    },\n    \"custom\": {\n      \"fontFamily\": {\n        \"base\": \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\",\n        \"headings\": \"'Helvetica Neue', Helvetica, Arial, sans-serif\"\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Zodra WordPress dit verwerkt, kun je de inherente verschillen zien:<\/p>\n<pre><code class=\"language-css\">--wp--preset--primary: #007bff;\n--wp--custom--font-family--base: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\";\n--wp--custom--font-family--headings: \"'Helvetica Neue', Helvetica, Arial, sans-serif\";<\/code><\/pre>\n<p>Merk op dat verdere nests <span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\">van properties dubbele koppeltekens zullen gebruiken, zelfs na het omzetten van hoofdletters naar kleine letters.<\/span><\/p>\n<h3>Globale en blokspecifieke CSS versus CSS custom properties<\/h3>\n<p>Met klassieke WordPress zou je <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-css\/\">aanvullende en custom CSS<\/a> gebruiken aan de voorkant om elementen binnen je thema vorm te geven. Dit is nog steeds het geval met <code>theme.json<\/code> en FSE, hoewel de aanpak verschilt van CSS custom properties.<\/p>\n<p>Als je naar de Site Editor gaat en naar het <strong>Styles<\/strong> scherm gaat, dan zie je de <strong>Additional CSS<\/strong> sectie. Dit lijkt veel op een Custom CSS paneel binnen klassieke WordPress installaties:<\/p>\n<figure id=\"attachment_184926\" aria-describedby=\"caption-attachment-184926\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184926 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/additional-css.png\" alt=\"Een gedeeltelijke weergave van de WordPress Site Editor met links naar de Blocks en Additional CSS instellingen. De linkerkant van het scherm toont een gedeeltelijke weergave van een gebouw tegen een blauwe lucht.\" width=\"1200\" height=\"587\"><figcaption id=\"caption-attachment-184926\" class=\"wp-caption-text\">De sectie Extra CSS in de WordPress Site Editor.<\/figcaption><\/figure>\n<p>Dit is een manier om globale CSS aanpassingen toe te voegen aan een thema. Het is echter eigenlijk een manier om gebruikers de mogelijkheid te geven om CSS toe te voegen. Je kunt dit ook gebruiken om kleine wijzigingen aan te brengen die geen hele stylesheet rechtvaardigen.<\/p>\n<p>Binnen <code>theme.json<\/code> gebruik je de property <code>css<\/code> om extra CSS te defini\u00ebren die je wilt toevoegen:<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 3,\n    \"styles\": {\n      \"css\": \"margin: 0\"\n    }\n}<\/code><\/pre>\n<p>Merk op dat je geen puntkomma&#8217;s hoeft te gebruiken aan het einde van CSS statements. Je kunt ook custom CSS voor blokken instellen:<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 2,\n  \"styles\": {\n    \"blocks\": {\n      \"core\/post-title\": {\n        \"css\": \"letter-spacing: 1px;\"\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Elke keer dat je op deze manier CSS instelt binnen <code>theme.json<\/code>, zie je dat terug in de <strong>Additional<\/strong><strong>\u00a0CSS<\/strong> velden van de Site Editor. Onthoud echter dat niets van wat je aangeeft met <code>css<\/code> een CSS custom property is.<\/p>\n<h3>De ampersand (&#038;) selector gebruiken<\/h3>\n<p>Net als Sass ondersteunt WordPress ook de ampersand selector, met een paar verschillen. In dit geval is het een geweldige manier om nested elementen en properties aan te geven. Dit kan relevant zijn als je ervoor kiest om CSS custom properties te declaren voor individuele blokken.<\/p>\n<p>Neem bijvoorbeeld het volgende:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n  \"blocks\": {\n    \"core\/table\": {\n      \"css\": \"color:#333 & th{ background:#f5f5f5; }\"\n    }\n\u2026<\/code><\/pre>\n<p>Dit definieert een tekstkleur en een achtergrondkleur voor het table header element. Zodra WordPress het verwerkt, krijg je strakke, duidelijke CSS:<\/p>\n<pre><code class=\"language-css\">.wp-block-table &gt; table {\n  color: #333;\n}\n\n.wp-block-table &gt; table th {\n  background: #f5f5f5;\n}<\/code><\/pre>\n<p>Ampersand selectors zijn uitstekend als je de CSS waar je je op richt wilt uitbreiden. Een begrijpelijke manier om over de selector te denken is dat het helpt om je CSS elementen te scheiden. Neem bijvoorbeeld het volgende:<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 3,\n  \"styles\": {\n    \"blocks\": {\n      \"core\/avatar\": {\n        \"css\": \"& img {border-radius: 999px}\"\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Dit voegt een randradius toe aan een avatar en voert de CSS uit zoals je zou verwachten:<\/p>\n<pre><code class=\"language-css\">.wp-block-image img {\n  border-radius: 999px;\n}<\/code><\/pre>\n<p>Echter, zonder de ampersand zou WordPress je declaraties samenvoegen:<\/p>\n<pre><code class=\"language-css\">\u2026\n\u200b\u200b.wp-block-imageimg\n\u2026<\/code><\/pre>\n<p>Het gebruik van de ampersand selector voor je CSS custom properties zal iets zijn dat je regelmatig doet.<\/p>\n<h2>De rol van Kinsta in de ondersteuning van moderne WordPress ontwikkeling<\/h2>\n<p>De keuze van je hosting is net zo belangrijk als elke codeertaal, preprocessor of ander technisch element. Zonder een hostingprovider van goede kwaliteit kun je niet profiteren van de prestaties en toolset van <code>theme.json<\/code> of FSE.<\/p>\n<p>Kinsta kan centraal staan in je hele workflow, dankzij onze ontwikkeltools. Je kunt beginnen met <a href=\"https:\/\/kinsta.com\/nl\/devkinsta\/\">DevKinsta<\/a> &#8211; onze lokale ontwikkelomgeving die <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-docker\/\">Docker containers<\/a> gebruikt om je WordPress installatie te isoleren:<\/p>\n<figure id=\"attachment_184928\" aria-describedby=\"caption-attachment-184928\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184928 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/devkinsta-interface-1.png\" alt=\"De DevKinsta interface toont de database en WordPress configuratie-instellingen. Het toont verbindingsdetails, waaronder host, poort, databasenaam en WordPress versie. De interface toont ook opties om debugging en auto-updates voor WordPress in te schakelen.\" width=\"1200\" height=\"596\"><figcaption id=\"caption-attachment-184928\" class=\"wp-caption-text\">De hoofdinterface van DevKinsta.<\/figcaption><\/figure>\n<p>Een handig stukje functionaliteit is DevKinsta&#8217;s mogelijkheid om gegevens te pushen en pullen tussen je lokale machine en je <a href=\"https:\/\/kinsta.com\/nl\/blog\/kinsta-testomgevingen\/\">Kinsta testomgevingen<\/a>:<\/p>\n<figure id=\"attachment_184931\" aria-describedby=\"caption-attachment-184931\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184931 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/push-pull.png\" alt=\"Een gedeeltelijke weergave van de DevKinsta interface met site-informatie en besturingsopties. De interface toont knoppen voor het openen van de site, synchroniseren, toegang tot de databasebeheerder en WordPress admin. Een drop-down menu toont opties om te pushen naar of te halen uit Kinsta. Het sitetype wordt weergegeven als WordPress, met zichtbare maar gedeeltelijke informatie over de host.\" width=\"1200\" height=\"354\"><figcaption id=\"caption-attachment-184931\" class=\"wp-caption-text\">De opties om te pushen naar of te pullen van Kinsta binnen DevKinsta.<\/figcaption><\/figure>\n<p>Hiermee kun je je thema&#8217;s testen in een productie-achtige omgeving voordat je ze gaat distribueren. Wanneer je werkt met CSS custom properties, kun je ervoor zorgen dat ze werken in verschillende contexten. <span style=\"margin: 0px;padding: 0px\"><a href=\"https:\/\/api-docs.kinsta.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kinsta&#8217;s API<\/a> kan je <a href=\"https:\/\/kinsta.com\/nl\/blog\/ci-cd-pipeline-maken\/\">CI\/CD pijplijn<\/a> ondersteunen als je klaar bent om live te gaan<\/span>.<\/p>\n<p>Andere aspecten van Kinsta&#8217;s architectuur helpen je bij je hele ontwikkelomgeving. Kinsta ondersteunt bijvoorbeeld Git, waardoor het eenvoudig is om versiebeheer uit te voeren op je themabestanden, inclusief <code>theme.json<\/code>. Voor het herhalen van custom properties, of gewoon experimenteren met verschillende configuraties, wil je weten dat je een terugdraaimogelijkheid hebt.<\/p>\n<p>Tot slot, als je ervoor kiest om je thema op een Kinsta-server te gebruiken, verhoogt onze <a href=\"https:\/\/kinsta.com\/nl\/blog\/edge-caching\/\">Edge Caching<\/a> de prestaties van <code>theme.json<\/code> met wel <a href=\"https:\/\/kinsta.com\/nl\/edge-caching\/\">80 procent<\/a>. Een website die snel draait, ongeacht de browser van de gebruiker, zorgt ervoor dat die custom toevoegingen snel worden weergegeven.<\/p>\n<h2>Samenvatting<\/h2>\n<p>Net zoals <code>theme.json<\/code> een krachtig configuratiebestand is voor het maken van flexibele en onderhoudbare WordPress thema&#8217;s, zijn CSS custom properties cruciaal voor de workflow. Dit is hoe je CSS opbouwt en declareert voor elementen waar de Site Editor niet bij kan. Het is ook belangrijk als je je eigen blokken bouwt of gewoon unieke WordPress thema&#8217;s wilt ontwikkelen met de ultieme aanpassingsdiepte. Bovendien heb je ook de optie om die CSS te delen met gebruikers via de Site Editor.<\/p>\n<p>Zullen CSS custom properties deel uitmaken van je thema-ontwikkelworkflow? Zo ja, hoe ga je ze gebruiken? Deel je inzichten hieronder in de commentsectie!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Developers van WordPress-thema&#8217;s kunnen hettheme.json bestand gebruiken om een proces te stroomlijnen. Dit scheelt, omdat je vroeger grotendeels afhankelijk was van PHP. Je kunt gelukkig echter &#8230;<\/p>\n","protected":false},"author":199,"featured_media":60724,"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-60723","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>Zo verbeter je WordPress thema&#039;s met CSS properties in theme.json<\/title>\n<meta name=\"description\" content=\"Hier lees je hoe je CSS custom properties kunt ontwikkelen binnen theme.json om geavanceerde functionaliteit toe te voegen aan WordPress thema&#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\/css-custom-properties-theme-json\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo verbeter je WordPress thema&#039;s met CSS properties in theme.json\" \/>\n<meta property=\"og:description\" content=\"Hier lees je hoe je CSS custom properties kunt ontwikkelen binnen theme.json om geavanceerde functionaliteit toe te voegen aan WordPress thema&#039;s.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-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-10-03T14:26:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-04T07:50:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/10\/css-custom-properties-in-theme-json.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Hier lees je hoe je CSS custom properties kunt ontwikkelen binnen theme.json om geavanceerde functionaliteit toe te voegen aan WordPress thema&#039;s.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/10\/css-custom-properties-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=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Zo verbeter je WordPress thema&#8217;s met CSS properties in theme.json\",\"datePublished\":\"2024-10-03T14:26:58+00:00\",\"dateModified\":\"2024-10-04T07:50:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/\"},\"wordCount\":2364,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/10\/css-custom-properties-in-theme-json.png\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/\",\"name\":\"Zo verbeter je WordPress thema's met CSS properties in theme.json\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/10\/css-custom-properties-in-theme-json.png\",\"datePublished\":\"2024-10-03T14:26:58+00:00\",\"dateModified\":\"2024-10-04T07:50:16+00:00\",\"description\":\"Hier lees je hoe je CSS custom properties kunt ontwikkelen binnen theme.json om geavanceerde functionaliteit toe te voegen aan WordPress thema's.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/10\/css-custom-properties-in-theme-json.png\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/10\/css-custom-properties-in-theme-json.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-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 verbeter je WordPress thema&#8217;s met CSS properties 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\/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":"Zo verbeter je WordPress thema's met CSS properties in theme.json","description":"Hier lees je hoe je CSS custom properties kunt ontwikkelen binnen theme.json om geavanceerde functionaliteit toe te voegen aan WordPress thema'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\/css-custom-properties-theme-json\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo verbeter je WordPress thema's met CSS properties in theme.json","og_description":"Hier lees je hoe je CSS custom properties kunt ontwikkelen binnen theme.json om geavanceerde functionaliteit toe te voegen aan WordPress thema's.","og_url":"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2024-10-03T14:26:58+00:00","article_modified_time":"2024-10-04T07:50:16+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/10\/css-custom-properties-in-theme-json.png","type":"image\/png"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Hier lees je hoe je CSS custom properties kunt ontwikkelen binnen theme.json om geavanceerde functionaliteit toe te voegen aan WordPress thema's.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/10\/css-custom-properties-in-theme-json-1024x512.png","twitter_creator":"@Kinsta_NL","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Jeremy Holcombe","Geschatte leestijd":"13 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Zo verbeter je WordPress thema&#8217;s met CSS properties in theme.json","datePublished":"2024-10-03T14:26:58+00:00","dateModified":"2024-10-04T07:50:16+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/"},"wordCount":2364,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/10\/css-custom-properties-in-theme-json.png","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/","url":"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/","name":"Zo verbeter je WordPress thema's met CSS properties in theme.json","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/10\/css-custom-properties-in-theme-json.png","datePublished":"2024-10-03T14:26:58+00:00","dateModified":"2024-10-04T07:50:16+00:00","description":"Hier lees je hoe je CSS custom properties kunt ontwikkelen binnen theme.json om geavanceerde functionaliteit toe te voegen aan WordPress thema's.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-theme-json\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/10\/css-custom-properties-in-theme-json.png","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/10\/css-custom-properties-in-theme-json.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/css-custom-properties-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 verbeter je WordPress thema&#8217;s met CSS properties 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\/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\/60723","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=60723"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/60723\/revisions"}],"predecessor-version":[{"id":60743,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/60723\/revisions\/60743"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60723\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60723\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60723\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60723\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60723\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60723\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60723\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60723\/translations\/nl"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/60723\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/60724"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=60723"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=60723"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=60723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}