{"id":62702,"date":"2025-06-12T09:19:02","date_gmt":"2025-06-12T07:19:02","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=62702&preview=true&preview_id=62702"},"modified":"2025-06-16T17:45:23","modified_gmt":"2025-06-16T15:45:23","slug":"hybrid-themas","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/hybrid-themas\/","title":{"rendered":"Hybride thema’s in WordPress: een kijkje vanuit de gebruiker en developer"},"content":{"rendered":"

WordPress 5.9<\/a> introduceerde een nieuwe manier om websites te bouwen: Full Site Editing<\/a>. Het was een keerpunt voor veel WordPress gebruikers omdat het de manier waarop WordPress thema’s worden gebouwd en werken volledig veranderde.<\/p>\n

Met de introductie van FSE werd ook een onderscheid gemaakt tussen thema’s die de nieuwe functies voor het bouwen van sites volledig ondersteunen, ook wel blokthema’s genoemd, en de traditionele PHP-gebaseerde thema’s, die we nu klassieke thema’s noemen.<\/p>\n

In de loop der tijd zijn veel functies die voor blokthema’s zijn gebouwd, uitgebreid naar klassieke thema’s. Dit heeft geresulteerd in een derde categorie thema’s, hybride thema’s, die nog steeds gebouwd zijn met de logica en structuur van klassieke thema’s, maar met ondersteuning voor verschillende functies die ontworpen zijn voor blokthema’s.<\/p>\n

In dit artikel wordt ingegaan op hybride thema’s, hun belangrijkste functies, hoe ontwikkelaars ze kunnen verbeteren en wanneer ze te verkiezen zijn boven blokthema’s.<\/p>\n

Laten we meteen gaan kijken!<\/p>\n

\"Een
Twenty Twenty-Two is het eerste WordPress thema dat Full Site Editing ondersteunt<\/figcaption><\/figure>\n
<\/div><\/kinsta-auto-toc>\n

Klassieke of hybride thema’s?<\/h2>\n

Voor de introductie van blokthema’s met Twenty Twenty-Two<\/a> en WordPress 5.9 bestonden er geen klassieke thema’s. De term is ontstaan om ze te onderscheiden van blokthema’s. Klassieke thema’s zijn alle WordPress thema’s zonder ondersteuning voor blokfuncties.<\/p>\n

\"Een
Een voorbeeld van het Twenty Twenty-One Hybrid thema<\/figcaption><\/figure>\n

Vandaag de dag is het niet eenvoudig om pure klassieke thema’s te vinden, omdat deze thema’s sinds 5.9 zijn uitgebreid met veel features die zijn gebouwd voor blokthema’s, waardoor de bewerkings- en ontwerpervaringen van de twee categorie\u00ebn thema’s in de loop der tijd steeds dichter bij elkaar zijn komen te liggen.<\/p>\n

Dat gezegd hebbende, is de manier waarop je met hybride thema’s werkt nog steeds anders dan met blokthema’s.<\/p>\n

Basisfeatures van hybride thema’s<\/h2>\n

Met hybride thema’s kan je site profiteren van de bewerkingsmogelijkheden van de WordPress Block Editor terwijl hij toch compatibel blijft met traditionele WordPress plugins en functies zoals widgets, menu’s en pagina templates.<\/p>\n

De WordPress Customizer<\/h3>\n

Hybride thema’s ondersteunen meestal de WordPress Customizer<\/a>, een visuele configuratieomgeving waarmee je het uiterlijk van je WordPress website kunt verfijnen en je wijzigingen in realtime kunt bekijken.<\/p>\n

Het Twenty Twenty-One<\/a> standaardthema is een goed voorbeeld van een hybride thema dat de meest gebruikelijke Customizer instellingen biedt, waaronder Site Identiteit, Kleuren & Donkere Modus, Achtergrondafbeelding, Menu’s, Widgets, Homepage Instellingen en meer.<\/p>\n

\"De
De Customizer met het Twenty Twenty-One thema<\/figcaption><\/figure>\n

Thema’s kunnen specifieke Customizer control elementen registreren, dus de functionaliteit verschilt per thema. De volgende afbeelding toont de Customizer voor Neve<\/a>, een lichtgewicht hybride thema van ThemeIsle.<\/p>\n

\"Een
Een preview van de Customizer voor Neve WordPress thema<\/figcaption><\/figure>\n

Thema’s kunnen ook geavanceerde functies registreren om gebruikers meer controle te geven over specifieke aspecten van het siteontwerp. Neve biedt bijvoorbeeld een krachtige builder voor het maken van site headers en footers.<\/p>\n

\"Neve
Neve heeft een header builder in de Customizer<\/figcaption><\/figure>\n

Widgets blokkeren<\/h3>\n

Met hybride thema’s kun je widgetgebieden aanpassen met behulp van blokken, dankzij de op blokken gebaseerde Widgets Editor<\/a>. Het werd voor het eerst ge\u00efntroduceerd met WordPress 5.8<\/a> en je kunt het proberen met elk klassiek thema dat widgets gebruikt.<\/p>\n

\"Het
Het Widgets scherm in Twenty Twenty-One<\/figcaption><\/figure>\n

De Widget Editor interface is vergelijkbaar met de Post Editor interface. De volgende afbeelding toont een afbeeldingsblok in het widgetgebied Footer van het thema Twenty Twenty-One.<\/p>\n

\"Een
De Widget editor brengt blokfeatures naar klassieke widgets<\/figcaption><\/figure>\n

Klassieke widgets zoals Categorie\u00ebn, Archieven, Recente berichten of Recente reacties worden nog steeds ondersteund in hybride thema’s. De Widget Editor vult de klassieke WordPress widgets aan door gebruikers in staat te stellen hun eigen widgets te maken via de op blokken gebaseerde interface.<\/p>\n

Stijlboek en blokpatterns<\/h3>\n

Met de recente veranderingen die zijn ge\u00efntroduceerd met WordPress 6.8<\/a>, kunnen hybride thema’s die editor stijlen<\/a> ondersteunen gebruik maken van het Stijlboek<\/strong>, een visuele interface<\/a> waarmee gebruikers een voorbeeld kunnen bekijken van elk blok dat gebruikt kan worden op hun websites zonder dat ze deze blokken hoeven te gebruiken in hun content.<\/p>\n

Je hebt toegang tot het Stijlboek in hybride thema’s via Appearance <\/b>> Design <\/b>> Styles<\/strong>.<\/p>\n

De volgende afbeelding toont het Stijlboek voor het hybride thema Kadence.<\/p>\n

\"Het
Het Stijlboek voor het hybride thema Kadence<\/figcaption><\/figure>\n

In dezelfde interface kun je Patterns doorbladeren en beheren.<\/p>\n

\"Blocksy
Blocksy themapatterns<\/figcaption><\/figure>\n

Voor hybride thema’s die deze ondersteunen, zijn patterns beschikbaar voor gebruik in de Post Editor<\/a>, die standaard is ingeschakeld op alle WordPress installaties sinds 5.0<\/a>, tenzij je deze hebt uitgeschakeld met de Classic Editor plugin<\/a>.<\/p>\n

\"The
De Patterns sectie in de Block Inserter van de Post Editor met het Twenty Twenty-One thema<\/figcaption><\/figure>\n

Themastructuur: Een overzicht voor ontwikkelaars<\/h2>\n

Klassieke thema’s en blokthema’s verschillen niet alleen qua functionaliteit voor de eindgebruiker. Ze verschillen ook qua structuur.<\/p>\n

Klassieke thema’s<\/h3>\n

Klassieke thema’s vertrouwen op een paar belangrijke bestanden, waarvan het belangrijkste het bestand style.css<\/code> is. Dit bestand bevat de metagegevens van het thema<\/a> en bepaalt hoe de site er aan de voorkant uitziet.<\/p>\n

Naast het stijlblad van het thema hebben klassieke thema’s meestal een functions.php<\/code> bestand<\/a> dat wordt gebruikt om de functionaliteit en ondersteuning van het thema op te bouwen.<\/p>\n

Klassieke thema’s vertrouwen verder op PHP templates die de structuur van een pagina en de belangrijkste gebieden defini\u00ebren: header, body, sidebars en footer. Wanneer een gebruiker een bericht of pagina bezoekt, bepaalt WordPress welke template gebruikt moet worden om de inhoud op het scherm weer te geven volgens een strikt systeem van regels die bekend staan als de template hi\u00ebrarchie<\/a>. De meest gebruikte templates zijn index.php<\/code>, page.php<\/code>, single.php<\/code>, en vele andere.<\/p>\n

Klassieke thema’s kunnen gebruik maken van specifieke PHP features (actie- en filterhooks<\/a>), die op specifieke momenten in het leven van WordPress worden uitgevoerd, waardoor ontwikkelaars de functionaliteit van een thema kunnen uitbreiden met PHP code in het functions.php<\/code> bestand van een childthema<\/a>.<\/p>\n

Je kunt wel raden dat het aanpassen van een klassiek thema bijzonder moeilijk is voor gebruikers zonder codeervaardigheden.<\/p>\n

Blokthema’s<\/h3>\n

blokthema’s hebben ook een style.css<\/code> nodig om WordPress te voorzien van de metadata van het thema, maar ze vertrouwen sterk op een theme.json<\/code> bestand<\/a>, een configuratiebestand dat globale stijlen en instellingen voor een thema definieert. Het bevat een JSON object<\/a> waarvan de eigenschappen de initi\u00eble instellingen<\/a> defini\u00ebren die nodig zijn om de layout te maken en het uiterlijk<\/a> van de pagina’s van de site te bepalen.<\/p>\n

Blokthema’s gebruiken ook templates en template parts, maar deze verschillen structureel van de klassieke PHP templates voor thema’s. In blokthema’s zijn templates en templates parts HTML bestanden die specifieke markup en JSON objecten bevatten. Neem bijvoorbeeld het template home.html<\/code> van het standaardthema Twenty Twenty-Five<\/a>:<\/p>\n

<!-- wp:template-part {\"slug\":\"header\"} \/-->\n\n<!-- wp:group {\"tagName\":\"main\",\"style\":{\"spacing\":{\"margin\":{\"top\":\"var:preset|spacing|60\"}}},\"layout\":{\"type\":\"constrained\"}} -->\n<main class=\"wp-block-group\" style=\"margin-top:var(--wp--preset--spacing--60)\">\n\t<!-- wp:pattern {\"slug\":\"twentytwentyfive\/hidden-blog-heading\"} \/-->\n\t<!-- wp:pattern {\"slug\":\"twentytwentyfive\/template-query-loop\"} \/-->\n<\/main>\n<!-- \/wp:group -->\n\n<!-- wp:template-part {\"slug\":\"footer\"} \/--><\/code><\/pre>\n
Deze template bestaat uit gestructureerde elementen in de vorm van HTML tags en commentaar. Commentaar kan verwijzen naar andere typische elementen van een blokthema, zoals template parts en patterns, die zijn opgebouwd uit blokken of andere geneste elementen.<\/p>\n
Blokfuncties toevoegen aan hybride thema’s<\/h2>\n
Zoals we hierboven al zeiden, moet je met klassieke thema’s aangepaste code toevoegen om de layout of functionaliteit van een site te wijzigen, vaak met behulp van template parts of functions.php<\/code>. Blokthema’s geven niet-ontwikkelaars daarentegen meer controle over de layout en het uiterlijk van de site.<\/p>\n
Hybride thema’s bieden minder blokfuncties dan blokthema’s, maar kunnen nog steeds meer controle bieden over de layout en stijl door middel van patterns en globale stijlen.<\/p>\n
Laten we eens kijken naar een aantal krachtige blokfuncties die je kunt integreren in je klassieke thema en leren hoe je ze effectief kunt implementeren.<\/p>\n
<\/div><\/kinsta-auto-toc>\n
Global styles<\/h3>\n
WordPress 5.8<\/a> introduceerde Global Styles, een visuele interface waarmee gebruikers de look en feel van hun website kunnen bepalen vanuit een gecentraliseerde interface, en ontwikkelaars de stijlen van hun WordPress websites kunnen beheren via een theme.json<\/code> bestand.<\/p>\n
Om deze functie in je hybride thema in te schakelen, voeg je gewoon een theme.json<\/code> bestand toe aan de hoofdmap van het thema. Laten we eens kijken naar enkele van de belangrijkste functies die je met theme.json<\/code> aan je hybride thema kunt toevoegen.<\/p>\n
Typografie<\/h4>\n
Laten we zeggen dat je ondersteuning voor drie lettertypefamilies wilt toevoegen aan je klassieke thema. In dit voorbeeld gebruiken we Twenty Twenty-One<\/a>.<\/p>\n
Maak eerst een map fonts<\/code> aan onder assets<\/code> en upload een aantal lettertypen naar keuze. We voegen drie lettertypen toe: Manrope<\/code>, Fira Code<\/code>, en Beiruti<\/code>. Je kunt deze lettertypen uit het Twenty Twenty-Five<\/a> thema halen.<\/p>\n
\"We
We hebben drie lettertypen en een theme.json bestand toegevoegd aan het Twenty Twenty-One thema<\/figcaption><\/figure>\n
Open je teksteditor en maak de volgende theme.json<\/code>:<\/p>\n
{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n\t\"version\": 3,\n\t\"settings\": {\n\t\t\"layout\": {\n\t\t\t\"contentSize\": \"768px\",\n\t\t\t\"wideSize\": \"1024px\"\n\t\t},\n\t\t\"typography\": {\n\t\t\t\"fontFamilies\": [\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Manrope\",\n\t\t\t\t\t\"slug\": \"manrope\",\n\t\t\t\t\t\"fontFamily\": \"Manrope, sans-serif\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/manrope\/Manrope-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"200 800\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"Manrope\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Fira Code\",\n\t\t\t\t\t\"slug\": \"fira-code\",\n\t\t\t\t\t\"fontFamily\": \"\\\"Fira Code\\\", monospace\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/fira-code\/FiraCode-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"300 700\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"\\\"Fira Code\\\"\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Beiruti\",\n\t\t\t\t\t\"slug\": \"beiruti\",\n\t\t\t\t\t\"fontFamily\": \"Beiruti, sans-serif\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/beiruti\/Beiruti-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"300 700\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"Beiruti\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n
Met de property settings.typography.fontFamilies<\/code> kun je een willekeurig aantal custom lettertypefamilies<\/a> registreren. Voor elk lettertype moet je de volgende properties declareren:<\/p>\n