WordPress 5.9 introduceerde een nieuwe manier om websites te bouwen: Full Site Editing. Het was een keerpunt voor veel WordPress gebruikers omdat het de manier waarop WordPress thema’s worden gebouwd en werken volledig veranderde.
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.
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.
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.
Laten we meteen gaan kijken!
Klassieke of hybride thema’s?
Voor de introductie van blokthema’s met Twenty Twenty-Two 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.
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ën thema’s in de loop der tijd steeds dichter bij elkaar zijn komen te liggen.
Dat gezegd hebbende, is de manier waarop je met hybride thema’s werkt nog steeds anders dan met blokthema’s.
Basisfeatures van hybride thema’s
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.
De WordPress Customizer
Hybride thema’s ondersteunen meestal de WordPress Customizer, een visuele configuratieomgeving waarmee je het uiterlijk van je WordPress website kunt verfijnen en je wijzigingen in realtime kunt bekijken.
Het Twenty Twenty-One 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.
Thema’s kunnen specifieke Customizer control elementen registreren, dus de functionaliteit verschilt per thema. De volgende afbeelding toont de Customizer voor Neve, een lichtgewicht hybride thema van ThemeIsle.
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.
Widgets blokkeren
Met hybride thema’s kun je widgetgebieden aanpassen met behulp van blokken, dankzij de op blokken gebaseerde Widgets Editor. Het werd voor het eerst geïntroduceerd met WordPress 5.8 en je kunt het proberen met elk klassiek thema dat widgets gebruikt.
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.
Klassieke widgets zoals Categorieën, 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.
Stijlboek en blokpatterns
Met de recente veranderingen die zijn geïntroduceerd met WordPress 6.8, kunnen hybride thema’s die editor stijlen ondersteunen gebruik maken van het Stijlboek, een visuele interface 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.
Je hebt toegang tot het Stijlboek in hybride thema’s via Appearance > Design > Styles.
De volgende afbeelding toont het Stijlboek voor het hybride thema Kadence.
In dezelfde interface kun je Patterns doorbladeren en beheren.
Voor hybride thema’s die deze ondersteunen, zijn patterns beschikbaar voor gebruik in de Post Editor, die standaard is ingeschakeld op alle WordPress installaties sinds 5.0, tenzij je deze hebt uitgeschakeld met de Classic Editor plugin.
Themastructuur: Een overzicht voor ontwikkelaars
Klassieke thema’s en blokthema’s verschillen niet alleen qua functionaliteit voor de eindgebruiker. Ze verschillen ook qua structuur.
Klassieke thema’s
Klassieke thema’s vertrouwen op een paar belangrijke bestanden, waarvan het belangrijkste het bestand style.css is. Dit bestand bevat de metagegevens van het thema en bepaalt hoe de site er aan de voorkant uitziet.
Naast het stijlblad van het thema hebben klassieke thema’s meestal een functions.php bestand dat wordt gebruikt om de functionaliteit en ondersteuning van het thema op te bouwen.
Klassieke thema’s vertrouwen verder op PHP templates die de structuur van een pagina en de belangrijkste gebieden definiëren: 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ërarchie. De meest gebruikte templates zijn index.php, page.php, single.php, en vele andere.
Klassieke thema’s kunnen gebruik maken van specifieke PHP features (actie- en filterhooks), 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 bestand van een childthema.
Je kunt wel raden dat het aanpassen van een klassiek thema bijzonder moeilijk is voor gebruikers zonder codeervaardigheden.
Blokthema’s
blokthema’s hebben ook een style.css nodig om WordPress te voorzien van de metadata van het thema, maar ze vertrouwen sterk op een theme.json bestand, een configuratiebestand dat globale stijlen en instellingen voor een thema definieert. Het bevat een JSON object waarvan de eigenschappen de initiële instellingen definiëren die nodig zijn om de layout te maken en het uiterlijk van de pagina’s van de site te bepalen.
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 van het standaardthema Twenty Twenty-Five:
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:pattern {"slug":"twentytwentyfive/hidden-blog-heading"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/template-query-loop"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->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.
Blokfuncties toevoegen aan hybride thema’s
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. Blokthema’s geven niet-ontwikkelaars daarentegen meer controle over de layout en het uiterlijk van de site.
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.
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.
Global styles
WordPress 5.8 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 bestand.
Om deze functie in je hybride thema in te schakelen, voeg je gewoon een theme.json bestand toe aan de hoofdmap van het thema. Laten we eens kijken naar enkele van de belangrijkste functies die je met theme.json aan je hybride thema kunt toevoegen.
Typografie
Laten we zeggen dat je ondersteuning voor drie lettertypefamilies wilt toevoegen aan je klassieke thema. In dit voorbeeld gebruiken we Twenty Twenty-One.
Maak eerst een map fonts aan onder assets en upload een aantal lettertypen naar keuze. We voegen drie lettertypen toe: Manrope, Fira Code, en Beiruti. Je kunt deze lettertypen uit het Twenty Twenty-Five thema halen.
Open je teksteditor en maak de volgende theme.json:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "768px",
"wideSize": "1024px"
},
"typography": {
"fontFamilies": [
{
"name": "Manrope",
"slug": "manrope",
"fontFamily": "Manrope, sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/manrope/Manrope-VariableFont_wght.woff2"
],
"fontWeight": "200 800",
"fontStyle": "normal",
"fontFamily": "Manrope"
}
]
},
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": "\"Fira Code\", monospace",
"fontFace": [
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"
],
"fontWeight": "300 700",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
}
]
},
{
"name": "Beiruti",
"slug": "beiruti",
"fontFamily": "Beiruti, sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/beiruti/Beiruti-VariableFont_wght.woff2"
],
"fontWeight": "300 700",
"fontStyle": "normal",
"fontFamily": "Beiruti"
}
]
}
]
}
}
}Met de property settings.typography.fontFamilies kun je een willekeurig aantal custom lettertypefamilies registreren. Voor elk lettertype moet je de volgende properties declareren:
name: Een verplichte voor mensen leesbare titel voor de lettertypefamilie.slug: Een verplichte slug voor de lettertypefamilie. Deze wordt toegevoegd aan een gegenereerde CSS property:--wp--preset--font-family--{slug}.fontFamily: Een verplichte waarde die wordt toegewezen aan de CSS font-family waarde.fontFace: Een optionele array van lettertypes die worden toegewezen aan de CSS at-regel@font-face. Je hebt dit alleen nodig met aangepaste webfonts.
Sla je theme.json op en navigeer naar je WordPress dashboard. Maak een nieuwe post of pagina aan, voeg een paragraaf met een voorbeeldtekst toe en open de blokzijbalk. Klik op de knop Typography options en selecteer Font. Je zou opties moeten vinden voor de lettertypefamilies die je zojuist hebt toegevoegd aan je thema.
De volgende afbeeldingen laten zien hoe de zijbalk van het Paragraph blok eruit ziet voor en na het toevoegen van de theme.json die je hierboven ziet.
Global Style eigenschappen verschillen per thema. Afgezien van typography, kun je met algemeen ondersteunde propertieshet kleurenpalet, de layout en aangepaste stijlen regelen. De volgende voorbeelden zijn getest op Twenty Twenty-One.
Kleurenpalet, kleurverlopen en duotone filters
Je kunt ondersteuning voor custom kleuren toevoegen met de settings.color property op thema- of blokniveau. De volgende code voegt bijvoorbeeld twee kleuren toe aan het standaard kleurenpalet:
settings: {
"color": {
"palette": [
{
"name": "Dark blue",
"slug": "dark-blue",
"color": "#1e73be"
},
{
"name": "Bright green",
"slug": "bright-green",
"color": "#81d742"
}
]
},
}Je kunt de property settings.color.palette gebruiken om zoveel kleuren te registreren als je wilt.
Je kunt ook ondersteuning voor kleurverlopen en duotone filters toevoegen:
settings: {
"color": {
"gradients": [
{
"gradient": "linear-gradient(135deg, #0073e6, #8fceff)",
"name": "Clear Sky",
"slug": "clear-sky"
},
{
"gradient": "linear-gradient(to right top, #ff8c00, #ff0080)",
"name": "Vivid Sunset",
"slug": "vivid-sunset"
}
]
}
}
settings: {
"color": {
"duotone": [
{
"colors": [ "#0A2F51", "#F5D04E" ],
"name": "Deep Sea Gold",
"slug": "deep-sea-gold"
},
{
"colors": [ "#3A0CA3", "#FFB703" ],
"name": "Purple Amber",
"slug": "purple-amber"
},
{
"colors": [ "#1B4332", "#BAE6C4" ],
"name": "Forest Mist",
"slug": "forest-mist"
},
{
"colors": [ "#000000", "#FFFFFF" ],
"name": "Black and White",
"slug": "black-and-white"
}
]
}
}
Layout
Je kunt ook de standaard layoutinstellingen aanpassen. Met de property settings.layout kun je de standaard inhoudsbreedte en breedte van de uitlijning instellen. Hier is een voorbeeld:
"settings": {
"layout": {
"contentSize": "768px",
"wideSize": "1024px"
}
}Voor een meer diepgaand overzicht van theme.json, bekijk onze uitgebreide tutorial over theme.json en de officiële WordPress documentatie.
Blokstijlvariaties
Met blokstijlvariaties, voor het eerst geïntroduceerd in WordPress 5.3, kunnen ontwikkelaars alternatieve stijlen maken voor specifieke blokken.
Kort gezegd zijn blokstijlen CSS klassen die worden toegevoegd aan het wrapper element van een blok in de vorm .is-style-{name}.
Blokstijlvariaties verschijnen in het Styles paneel van de blokzijbalk en stellen je in staat om met één klik een stijl voor het blok te selecteren.
Je kunt je blokstijlvariaties op verschillende manieren registreren.
Ten eerste kun je blokstijlen registreren met de PHP register_block_style() functie. Je kunt bijvoorbeeld de volgende stijlvariatie registreren in het function bestand van je thema:
if ( function_exists( 'register_custom_block_style' ) ) {
register_block_style(
'core/image',
array(
'name' => 'custom',
'label' => __( 'Custom', 'text-domain' ),
'inline_style' => '.wp-block-image.is-style-custom img { border-radius: 12px; }',
)
);
}
add_action( 'init', 'register_custom_block_style' ); register_block_style() accepteert twee argumenten:
$block_name: De naam van een bloktype of een array van bloktypes$style_properties: Een array met de stijlproperties. In dit voorbeeld hebben wename,labeleninline_stylegebruikt.
De bovenstaande code genereert een blokstijlvariatie met een enkele CSS property. Zodra deze code is toegevoegd aan het functions.php bestand van je thema of childthema, verschijnt er een knop in het paneel met blokstijlen waarmee de gebruiker de stijl met één klik kan instellen.
De volgende afbeelding toont de blokstijlvariatie in de frontend. Het thema is nog steeds Twenty Twenty-One.
Je kunt je inline stijlen toevoegen in je PHP code, zoals in het bovenstaande voorbeeld, maar je code kan al snel moeilijk te onderhouden worden naarmate stijlen complexer en uitgebreider worden. In deze gevallen kun je de stijlvariatie registreren zoals we eerder zagen, maar de stijlen definiëren in je theme.json bestand.
In het volgende voorbeeld maken we een donkerblauwe stijlvariatie voor het Heading blok.
Registreer eerst de stijlvariatie in het Functions bestand van het thema:
add_action('init', 'register_block_style_labels');
function register_block_style_labels() {
$block_types = ['core/heading'];
if (function_exists('register_block_style')) {
foreach ($block_types as $block_type) {
register_block_style(
$block_type,
array(
'name' => 'dark-blue-bg',
'label' => __('Dark Blue', 'twentytwentyone')
)
);
}
}
}Definieer vervolgens de variatiestijlen in je theme.json bestand:
"settings": {
"styles": {
"blocks": {
"core/heading": {
"variations": {
"dark-blue-bg": {
"color": {
"background": "#2860a6",
"text": "#ffffff"
},
"spacing": {
"padding": {
"top": "0.3em",
"right": "0.4em",
"bottom": "0.3em",
"left": "0.4em"
}
}
}
}
}
}
}
}Nu kunnen de gebruikers van je thema kiezen uit twee stijlvariaties voor het Heading blok, zoals in de volgende afbeelding.
Blokvariaties
Blokvariaties zijn alternatieve versies van een geregistreerd blok. Terwijl blokstijlvariaties (of blokstijlen) aangepaste versies zijn van een blokstijl die gebruikers met één klik kunnen toevoegen aan inhoud, zijn blokvariaties alternatieve versies van de instellingen van een blok. Hiermee kunnen gebruikers snel een blok invoegen met vooraf geconfigureerde instellingen zonder dat ze voor elk blok dezelfde instellingen hoeven in te stellen.
Met de Block Variations API kunnen hybride thema’s blokvariaties registreren via JavaScript. In de eenvoudigste gevallen is het maken van een script en het enqueuen ervan voldoende, maar als je veel met JavaScript en Gutenberg blokken werkt, wil je misschien bouwgereedschappen in je workflow opnemen. (Leessuggestie.)
Stel dat je een blokvariatie wilt maken met een set vooraf geconfigureerde opties, zodat je variatie snel in je berichten of pagina’s kan worden ingevoegd met minimale extra configuratie.
De eerste stap is het maken van een leeg JavaScript bestand en dit in de editor laden. Je moet het enqueue-en in het functions.php bestand van je thema met wp_enqueue_script() en de enqueue_block_editor_assets action hook.
add_action( 'enqueue_block_editor_assets', function () {
wp_enqueue_script(
'my-block-variations',
get_theme_file_uri( 'assets/js/block-variations.js' ) . '?cache_bust=' . time(),
array(
'wp-blocks',
'wp-dom-ready',
'wp-i18n',
'wp-edit-post'
),
wp_get_theme()->get( 'Version' ),
true
);
} );In de bovenstaande code hebben we ?cache_bust=' . time() gebruikt om een unieke tijdstempel toe te voegen aan de URL van block-variations.js (bijvoorbeeld block-variations.js?cache_bust=1698765432). Dit is vooral handig tijdens de ontwikkeling, omdat het ervoor zorgt dat de browser, server of CDN altijd de nieuwste versie van het script laadt, zodat een verouderde versie in de cache de weergave van wijzigingen niet blokkeert.
Vervolgens moet je je blokvariatie in je script registreren met de functie registerBlockVariation van de Block Variations API.
Hier is de functie signature:
const registerBlockVariation = ( blockName, variation )blockName: De naam van het blok (duscore/query.)variation: Een object dat een variatie beschrijft voor het type blok.
Het variation object kan elk van de volgende parameters bevatten:
name: (string) Een unieke identifier van de variatie.title: (string) Een menselijk leesbare variatietitel.description: (string) Een gedetailleerde beschrijving.category: (string) Een categorie gebruikt in zoekinterfaces.keywords: (Array) Een array van termen die gebruikers helpen de variatie te ontdekken.icon: (WPIcon) Een pictogram dat wordt weergegeven in de blokinvoegtoepassing.isDefault: (Booleaans) Of de huidige variant de standaardvariant is. Wordt standaard op false gezet.isActive: (Functie/Array) Een functie of een array van blokattributen die wordt gebruikt om te bepalen of de variatie actief is wanneer het blok wordt geselecteerd. ZonderisActivezou WordPress niet weten hoe jouw variatie te onderscheiden is van een standaard blok of andere variaties, waardoor inconsistent gedrag in de editor ontstaat.attributes: (Object) Attribuutwaarden die de standaardwaarden van blokken overschrijven.innerBlocks: (Array[]) Beginconfiguratie van genest blok.example: (Object) Gestructureerde gegevens voor de blokvoorvertoning. Stel in op undefined om de preview uit te schakelen.scope: (WPBlockVariationScope[]) De lijst met scopes waarop de variatie van toepassing is. Als deze niet wordt opgegeven, worden alle beschikbare scopes aangenomen. Beschikbare opties zijnblock,inserter, entransform. Standaard wordt uitgegaan vanblockeninserter.
Nu kun je het JavaScript toevoegen aan het bestand block-variations.js:
wp.blocks.registerBlockVariation( 'core/heading', {
name: 'custom-centered-text',
title: 'Custom Centered Text',
description: 'This is a block variation with custom attributes.',
attributes: {
level: 2,
textAlign: 'center',
placeholder: 'Add your text here',
style: {
color: {
text: '#1e73be',
background: '#81d742'
}
}
},
isActive: ( blockAttributes ) => {
return (
blockAttributes.level === 2 &&
blockAttributes.textAlign === 'center' &&
blockAttributes.style?.color?.text === '#1e73be' &&
blockAttributes.style?.color?.background === '#81d742'
);
},
icon: 'airplane',
scope: [ 'inserter' ]
} );Deze code voegt een nieuw bloktype met een vliegtuigpictogram toe aan de Block Inserter. Als je op het vliegtuigje klikt, wordt er een nieuwe blokvariant Heading tekst toegevoegd aan de pagina met je aangepaste instellingen. We stellen het Heading niveau in (H2), centreren de tekst, stellen een placeholder in en definiëren de tekst- en achtergrondkleuren van de Heading tekst.
Opmerking: Om deze code naar verwachting te laten werken, moet je ervoor zorgen dat je hybride thema ondersteuning biedt voor editorfuncties zoals 'editor-color-palette', editor-styles, en andere. Kijk voor een uitgebreidere lijst met ondersteuningen op de Block Variations API.
Blokpatterns
Blokpatterns zijn vooraf samengestelde groepen blokken die je kunt toevoegen aan je inhoud en kunt aanpassen met de interface van de Block Editor.
Blokthema’s bieden meestal een variabel aantal blokpatterns die je direct vanuit de Block Inserter aan je inhoud kunt toevoegen. Hybride thema’s kunnen ondersteuning voor patterns toevoegen, zodat gebruikers van klassieke thema’s kunnen profiteren van deze krachtige functie.
Je kunt een map patterns maken in de root van je thema en daar je blokpatterns in opnemen, of je kunt ze registreren in de functions.php of andere .php bestanden van je thema.
Om alles op orde te houden, kun je een bestand inc/block-patterns.php maken en het opnemen in de function.php van je thema met de volgende code:
require get_template_directory() . '/inc/block-patterns.php';Als je dat gedaan hebt, kun je je pattern maken in de editor, de code kopiëren en je pattern en patterncategorie registreren in inc/block-patterns.php met de functies register_block_pattern_category en register_block_pattern():
if ( function_exists( 'register_block_pattern_category' ) ) {
function my_hybrid_theme_register_block_pattern_category() {
register_block_pattern_category(
'myhybridtheme',
array( 'label' => esc_html__( 'My Hybrid Theme', 'myhybridtheme' ) )
);
}
add_action( 'init', 'my_hybrid_theme_register_block_pattern_category' );
}
if ( function_exists( 'register_block_pattern' ) ) {
function my_hybrid_theme_register_block_pattern() {
// My pattern
register_block_pattern(
'myhybridtheme/huge-heading',
array(
'title' => esc_html__( 'Huge heading', 'myhybridtheme' ),
'categories' => array( 'myhybridtheme' ),
'viewportWidth' => 1440,
'blockTypes' => array( 'core/heading' ),
'content' => '<!-- wp:heading {"textAlign":"center","align":"wide","fontSize":"gigantic","style":{"typography":{"lineHeight":"1.2"}}} --><h2 class="alignwide has-text-align-center has-gigantic-font-size" style="line-height:1.2">' . esc_html__( 'A simple Heading in a pattern', 'myhybridtheme' ) . '</h2><!-- /wp:heading -->',
)
);
}
add_action( 'init', 'my_hybrid_theme_register_block_pattern' );
}Je kunt een voorbeeld van je pattern bekijken in je WordPress dashboard onder Appearance > Design > Patterns > My Hybrid Theme en het gebruiken in je inhoud.
Je kunt je pattern ook dupliceren en exporteren en importeren in andere WordPress websites.
Template parts
Hoewel hybride thema’s de klassieke PHP templates en template parts gebruikt, kun je ondersteuning voor template parts toevoegen in het bestand functions.php van je thema:
function my_hybrid_theme_setup() {
add_theme_support( 'block-template-parts' );
}
add_action( 'after_setup_theme', 'my_hybrid_theme_setup' );Zodra je ondersteuning voor template parts hebt toegevoegd, kun je elk templateonderdeel in elk templatebestand van je hybride thema opnemen met behulp van de functie block_template_part.
Laten we eens kijken naar een praktisch voorbeeld. Begin met het maken van een map /parts in de root van je thema en upload daarin een bestand footer.html. Voor dit voorbeeld hebben we de voettekst gekopieerd van het thema Twenty Twenty-Five:
<!-- wp:group {"align":"full","className":"is-style-section-5","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-style-section-5" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group">
<!-- wp:site-title {"level":2,"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"}},"fontSize":"x-large"} /-->
<!-- wp:navigation {"overlayMenu":"never","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"},"spacing":{"blockGap":"var:preset|spacing|20"}},"fontSize":"x-large","layout":{"type":"flex","justifyContent":"center"},"ariaLabel":"Social media"} -->
<!-- wp:navigation-link {"label":"Facebook","url":"#"} /-->
<!-- wp:navigation-link {"label":"Instagram","url":"#"} /-->
<!-- wp:navigation-link {"label":"X","url":"#"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:group -->
<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">
Designed with <a href="https://wordpress.org" rel="nofollow">WordPress</a>
</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->Nu kun je deze template part opnemen in een klassiek template met de functie block_template_part:
<?php block_template_part( 'footer' ); ?> Je kunt het bijvoorbeeld opnemen in het bestand footer.php van Twenty Twenty-One. De volgende afbeelding toont het resultaat op het scherm.
Je kunt ook template parts opnemen in een bloktemplate met de volgende code:
<!-- wp:template-part {"slug":"footer"} /-->
Je kunt bijvoorbeeld de code van het template page.html van Twenty Twenty-Five kopiëren:
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|60"}}}} /-->
<!-- wp:post-title {"level":1} /-->
<!-- wp:post-content {"align":"full","layout":{"type":"constrained"}} /-->
</div>
<!-- /wp:group -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->Sla dit template op in je /templates map en noem het page.html. WordPress zal het automatisch laden volgens de templatehiërarchie. Dit template zal automatisch de template parts header.html en footer.html uit de map /parts van je hybride thema bevatten.
Wanneer kies je een hybride thema boven een blokthema?
Een hybride thema kan de beste optie zijn in de volgende scenario’s:
- Wanneer je een paar moderne features van blokthema’s wilt gebruiken zonder een bestaande site volledig te herstructureren.
Met hybride thema’s kun je gebruikmaken van blokfeatures zoals de Block Editor, global styles en blokpatterns. hybride thema’s ondersteunen ook block editor API’s zoals de Block Bindings API, Interactivity API en HTML API. Dit betekent dat je moderne websites kunt maken zonder dat je een complexe migratie hoeft uit te voeren. - Als je compatibiliteit met klassieke plugins of widgets wilt behouden, maar niet wilt afzien van een aantal krachtige functies van blokthema’s.
Oudere versies van sommige plugins kunnen compatibiliteitsproblemen hebben met blokthema’s, zoals oudere versies van Contact Form 7, NextGEN Gallery, Custom Post Type UI en andere plugins. Hoewel het wordt aanbevolen om plugins bij te werken naar de nieuwste versies om beveiligingsproblemen te voorkomen, is het mogelijk dat op sommige WordPress sites oudere versies van een plugin zijn geïnstalleerd. Als je nog niet klaar bent om al je plugins te upgraden, kun je overwegen om een hybride thema te installeren. - Als je op zoek bent naar het beste compromis tussen ontwerp en prestaties.
Sommige populaire hybride thema’s zijn geoptimaliseerd voor snelheid en kunnen aanzienlijk betere prestaties leveren dan blokthema’s. Toch ondersteunen ze de no-code/low-code benadering van blokthema’s en bieden ze een betere ontwerpervaring dan klassieke thema’s. Met prestatie-geoptimaliseerde hybride thema’s zoals Neve of Kadence kun je modern ogende websites maken zonder dat dit ten koste gaat van de prestaties. - Als je een soepele overgang naar FSE wilt.
Soms kan de overgang van de oude naar de nieuwe ontwerplogica tijd kosten, vooral als je in teams aan grote sites werkt, en is de leercurve een punt van zorg. Met een hybride thema kan je team experimenteren met blokfunctionaliteit met behoud van vertrouwde ontwerptools zoals de Customizer en klassieke PHP-templates.
Er zijn echter ook scenario’s waarbij hybride thema’s niet de beste optie zijn. Bijvoorbeeld:
- Wanneer de ontwerptools van de site voorrang krijgen op de algemene prestaties.
Wanneer je bepaalde functies wilt gebruiken die specifiek zijn voor volledige sitebewerking, zoals de site-editor, volledige templatebewerking via blokken en de interface voor globale stijlen, is een hybride thema geen optie omdat deze functies niet of slechts gedeeltelijk worden ondersteund in hybride thema’s. - Met headless WordPress sites gebaseerd op de WordPress REST API.
In dit scenario verdienen blokthema’s de voorkeur omdat blokgegevens eenvoudig toegankelijk zijn via de REST API (zie bijvoorbeeld het eindpunt/wp/v2/blocks) of WPGraphQL, waar hybride thema’s meer complexiteit zouden kunnen toevoegen. - Wanneer een no-code benadering voor het bouwen van sites de voorkeur heeft.
Hybride thema’s ondersteunen het maken of bewerken van templates via de site editor niet. Hoewel ondersteuning voor template parts kan worden toegevoegd, is deze ondersteuning momenteel beperkt en het beheer van templates is voornamelijk PHP-gebaseerd.
Het komt erop neer dat er geen harde en snelle regel is voor de keuze tussen hybride en blokthema’s. Het hangt van veel factoren af, zoals de beschikbare vaardigheden in je team, het type site dat wordt gebouwd, prestatie-eisen, achterwaartse compatibiliteit en nog veel meer.
Samenvatting
Full Site Editing en blokthema’s hebben de manier waarop we WordPress websites bouwen drastisch veranderd. Deze benadering van blokken geeft gebruikers meer mogelijkheden om complexe layouts te maken en elk aspect van een website nauwkeurig af te stellen.
Maar als je nog niet klaar bent om de sprong te wagen omdat je site misschien niet volledig compatibel is met blokthema’s of omdat je specifieke functies van een klassiek thema nodig hebt, dan zijn hybride thema’s een optie die je het beste van twee werelden biedt door je toe te staan enkele krachtige functies van blokthema’s te gebruiken terwijl je compatibiliteit behoudt met de functies van plugins en klassieke thema’s.
En dan hebben we het nog niet eens over de prestaties. blokthema’s kunnen veel resources gebruiken vanwege het uitgebreide renderen van blokken en het gebruik van JavaScript. Hybride thema’s met geoptimaliseerde prestaties kunnen je site lichter maken en beter laten presteren doordat er minder JavaScript nodig is.
Carlo is een gepassioneerd liefhebber van webdesign en front-end development. Hij werkt al meer dan 10 jaar met WordPress, ook in samenwerking met Italiaanse en Europese universiteiten en onderwijsinstellingen. Hij heeft tientallen artikelen en gidsen over WordPress geschreven, gepubliceerd op zowel Italiaanse als internationale websites en in gedrukte tijdschriften. Je kunt Carlo vinden op X en LinkedIn.
