Hoewel iets later dan oorspronkelijk gepland, krijgen we een nieuw standaard WordPress thema. De naam is Twenty Twenty-Two!
Het nieuwe standaard WordPress thema wordt geleverd met de WordPress 5.9 release. We waren nieuwsgierig naar meer over het nieuwe thema, dus installeerden en testten we Twenty Twenty-Two op een lokale ontwikkelomgeving met WordPress 5.9.
We laten je onze resultaten zien voordat we onze gedachten delen om je een diepgaand overzicht te geven van de ins en outs van het nieuwe WordPress thema.
Twenty Twenty-Two is ontworpen om het meest flexibele, lichtgewicht en aanpasbare standaardthema ooit te zijn. Het biedt een geweldige speeltuin voor het testen van blokken, patronen en templates.
Omdat het een blokthema is, kun je de full-site editing, global styles, navigatieblokken en de nieuwe afbeeldingsgalerijen, de meest verwachte features van WordPress 5.9, beter verkennen.
We moeten meteen zeggen dat Twenty Twenty-Two het eerste standaardblokthema is!
Een van de meest ambitieuze doelen van het nieuwe thema is om gebruikers in hun kracht te zetten. Met zoveel patronen en templates die direct beschikbaar zijn, kunnen gebruikers met slechts een paar klikken complexe lay-outs bouwen. De rest is stijlaanpassing.
Vanuit technisch oogpunt verschilt het schrijven over Twenty Twenty-Two niet veel van het schrijven over de nieuwste en krachtigste features van WordPress 5.9. Maar Twenty Twenty-Two biedt ons een vergrootglas om de nieuwe features voor sitebewerking beter te waarderen en een beter idee te krijgen van de toekomst van het platform.
Dus hier zijn we dan om je voor te stellen aan het nieuwe thema.
Eerst zullen we de nieuwe sitebewerkingsflow verkennen die gebruikers zullen ervaren met WordPress 5.9 en Twenty Twenty-Two.
Daarna kijken we naar de belangrijkste features van het bloktema die zijn geïmplementeerd in Twenty Twenty-Two. Je maakt kennis met global styles, blokpatronen, templates en template-onderdelen.
Maar er is nog veel meer te zeggen over Twenty Twenty-Two en WordPressblokthema’s. Daarom geven we als bonushoofdstuk een snel overzicht van hoe je de functies van Twenty Twenty-Two kunt uitbreiden door gebruik te maken van het theme.json bestand.
Laten we meteen aan het werk gaan en het gloednieuwe Twenty Twenty-Two WordPress standaardthema bekijken.
Twenty Twenty-Two brengt een nieuwe sitebewerkingsflow
Verschillende functies voor full-site editing site worden toegevoegd aan de core met WordPress 5.9. Site-eigenaren die de nieuwste WordPress versie gebruiken met een blokthema zoals Twenty Twenty-Two geïnstalleerd, kunnen binnenkort:
- Berichten en pagina’s maken en bewerken met meer blokken en patronen
- De instellingen en stijlen aanpassen die zijn gedefinieerd in het bestand theme.json via de Global Styles interface
- Templates voor pagina’s en berichten maken en bewerken
- Template-onderdelen maken en bewerken voor header, footer en andere templategebieden
Nu al deze functies tot de core zijn samengevoegd, hebben de core-bijdragers van WordPress de evolutie van de informatie-architectuur besproken en de hele sitebewerkingsflow opnieuw ontworpen.
Het eerste dat opvalt als je Twenty Twenty-Two hebt geactiveerd, is dat het toegangspunt tot de site-editor zich niet langer in het hoofdmenu van je WordPress dashboard bevindt, maar is verplaatst naar het Appearance menu.
Het samenbrengen van de template- en stijlaanpassingfeatures onder het Appearance menu zou de bewerkingservaring moeten stoomlijnen. Het moet het makkelijker maken om te begrijpen dat de features die je gebruikt, verband houden met de presentatie van je pagina’s.
Het Editor menu item opent de homepagetemplate van de site. Afhankelijk van je leesinstellingen kan dit je pagina met laatste berichten of een statische pagina zijn.
Als je nu op het WordPress pictogram in de linkerbovenhoek klikt, wordt een nieuw navigatiemenu voor de site-editor weergegeven, inclusief drie menu items: Site, Templates, and Template Parts.
Laten we deze eens van dichterbij bekijken.
De Site optie opent de template van de homepagina (nieuwste blogartikelen of statische startpagina).
Via het menu-item Templates krijg je een lijst met de beschikbare templates. Je kunt op elke template in de lijst klikken om deze in de editor te starten.
Op het moment van schrijven biedt Twenty Twenty-Two 11 templates.
Door op het ellipspictogram (︙) aan de rechterkant te klikken, kun je je aanpassingen wissen.
In tegenstelling tot thematemplates kunnen aangepaste templates alleen worden hernoemd of verwijderd (maar je kunt aangepaste templates bewerken in de berichteditor).
Het Template Parts menu-item vermeldt de beschikbare template-onderdelen die je in de editor kunt openen voor je aanpassingen.
Standaard zijn er vier template-onderdelen toegevoegd aan Twenty Twenty-Two. Als je de cursor over een gewijzigde template beweegt, wordt er een tooltip weergegeven om je te laten weten dat de template is aangepast.
Je kunt deze aanpassingen wissen door op het ellipspictogram (︙) aan de rechterkant te klikken.
Templates en template-onderdelen bewerken
De Editor biedt de interface om de structuur van je templates en template-onderdelen aan te passen.
Hier kun je eenvoudig blokken en patronen toevoegen of bewerken, en je wijzigingen worden automatisch toegepast op elke pagina die dat template gebruikt.
De afbeelding hieronder toont de template van de 404 pagina in de editor. Het is een vrij eenvoudige template, met alleen een kop, een alinea en een zoekvak. Toch geeft het ons een goed begrip van hoe de gebruikersinterface werkt.
Hier kun je bewerkingen uitvoeren en templates aanpassen aan jouw behoeften. Je wilt bijvoorbeeld misschien een raster van afbeeldingsberichten toevoegen om de betrokkenheid van je bezoekers te vergroten en ze uit te nodigen om door de content van je website te bladeren.
De dropdown voor de header boven aan de template-editor geeft een lijst weer van de beschikbare templategebieden. Dezelfde lijst verschijnt op het Template tabblad in de Settings zijbalk.
Door op een templategebied te klikken (bijv. Header), word je direct naar het templategedeelte gebracht dat je wil bewerken.
Als je op het ellipspictogram aan de rechterkant klikt, krijg je toegang tot de Isolated template part editor.
De editor van dit template-onderdeel editor biedt ook een paar versleepbare handles, zodat je kunt controleren hoe de template zich gedraagt bij verschillende schermresoluties.
Als je tevreden bent met je aanpassingen, sla je je bewerkingen op en ga je terug naar de hoofd template-editor om het eindresultaat te controleren.
Als je meer informatie wil over de nieuwe informatiearchitectuur, kun je de volgende artikelen raadplegen:
Twenty Twenty-Two in de kern: een snel overzicht van theme.json
Laten we, om volledig te begrijpen hoe Twenty Twenty-Two en blokthema’s (zoals Bricksy) werken, een blik werpen op de nieuwe themaconfiguratie en het nieuwe stijlmechanisme op basis van het theme.json bestand.
Dit nieuwe mechanisme dat geïntroduceerd werd met WordPress 5.8 stelt themaontwikkelaars in staat om de editor te configureren en featureondersteuning toe te voegen vanaf een centraal configuratiepunt.
In Twenty Twenty-Two heeft het theme.json bestand de volgende structuur:
{
"version": 2,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {}
}Laten we snel naar elke sectie kijken.
Version
Het version veld beschrijft de specificatieversie, die momenteel 2 is.
Settings
Het settings gedeelte definieert instellingen op globaal of blokniveau. Instellingen die op het hoogste niveau zijn gedefinieerd, zijn van invloed op alle blokken, maar losse blokken kunnen algemene instellingen overschrijven. In Twenty Twenty-Two vind je de volgende instellingen:
{
"settings": {
"appearanceTools": true,
"color": {
"duotone": [...],
"gradients": [...],
"palette": [...]
},
"custom": {...},
"spacing": {...},
"typography": {
"dropCap": false,
"fontFamilies": [...],
"fontSizes": [...]
},
"layout": {...}
}
}Standaardinstellingen worden presets genoemd en worden gebruikt om aangepaste CSS eigenschappen en klassenamen te genereren op basis van een specifieke naamgevingsconventie:
- CSS custom property:
--wp--preset--{preset-category}--{preset-slug} - CSS class name:
.has-{preset-slug}-{preset-category}
Zodra een thema zijn presets heeft gedefinieerd, kunnen de bijbehorende aangepaste CSS properties worden gebruikt om blokken en elementen in de styles sectie op te maken.
Styles
In de styles sectie definiëren thema’s de default styles voor blokken en elementen. Zie bijvoorbeeld de volgende Twenty Twenty-Two stijlen voor het Button blok van de core:
{
"version": 2,
"styles": {
"blocks": {
"core/button": {
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--background)"
},
"typography": {
"fontSize": "var(--wp--preset--typography--font-size--normal)"
}
}
}
}
}Je zult de custom CSS properties opmerken die worden gebruikt in de property declarations.
Custom templates
De customTemplates sectie is waar een thema zijn aangepaste templates declareert. De name en title velden zijn verplicht. Thema’s kunnen ook aangeven welk berichttype de template kan gebruiken door de postTypes property.
Twenty Twenty-Two biedt vier custom templates:
{
"version": 2,
"customTemplates": [
{
"name": "blank",
"title": "Blank",
"postTypes": [
"page",
"post"
]
},
{
"name": "page-large-header",
"title": "Page (Large Header)",
"postTypes": [
"page"
]
},
{
"name": "single-no-separators",
"title": "Single Post (No Separators)",
"postTypes": [
"post"
]
},
{
"name": "page-no-separators",
"title": "Page (No Separators)",
"postTypes": [
"page"
]
}
]
}Je vindt de bijbehorende .html bestanden in de map block-templates.
Template parts
De templateParts sectie bevat definities van template-onderdelen:
{
"version": 2,
"templateParts": [
{
"name": "header",
"title": "Header",
"area": "header"
},
{
"name": "header-large-dark",
"title": "Header (Dark, large)",
"area": "header"
},
{
"name": "header-small-dark",
"title": "Header (Dark, small)",
"area": "header"
},
{
"name": "footer",
"title": "Footer",
"area": "footer"
}
]
}De name en title velden zijn verplicht. Thema’s kunnen ook een area term declareren, waarbij het template-onderdeel in de editor wordt gerenderd.
De .html bestanden van template-onderdelen bevinden zich in de template-parts map.
Nu je meer weet over theme.json van Twenty Twenty-Two, kunnen we de features van het thema en de nieuwe bewerkingsinterface grondiger verkennen.
Laten we kijken naar Twenty Twenty-Two’s Global Styles.
Global Styles in Twenty Twenty-Two
Als je naar de style.css van Twenty Twenty-Two kijkt, zal het je misschien verbazen dat het een minimaal aantal CSS declarations bevat. De reden is dat stijlen van block-based thema’s in het theme.json bestand worden gedeclareerd.
WordPress 5.9 gaat een stap verder en introduceert een nieuwe functie waarmee gebruikers van blokthema’s het uiterlijk van site-elementen kunnen aanpassen vanuit een gebruikersinterface genaamd Global Styles.
De Global Styles interface is toegankelijk via het nieuwe Styles pictogram in de rechterbovenhoek van de Editor (zie ook The Global Styles Interface).
Als je op dat pictogram klikt, wordt een nieuwe Styles zijbalk weergegeven, inclusief drie afzonderlijke vensters:
- Een Preview venster met een voorbeeld van je aanpassingen
- Een Global Styles venster dat toegang biedt tot specifieke groepen bedieningselementen voor typografie, kleuren en lay-out
- Een Blocks item dat toegang biedt tot stijlinstellingen op blokniveau
Twenty Twenty-Two’s kleurenpalet
Het Colors venster kan je helpen bij het bewerken van de beschikbare paletten en het toewijzen of wijzigen van kleuren voor Background, Text of Links.
In het Palette venster kun je de Theme of Default paletten aanpassen en zelfs je eigen palet maken.
Heb je de code die de kleurcontroles genereert al gevonden?
Zo niet, open dan Twenty Twenty-Two’s theme.json in je favoriete code-editor. Je vindt de volgende declarations voor het kleurenpalet:
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "foreground",
"color": "#000000",
"name": "Foreground"
},
{
"slug": "background",
"color": "#ffffff",
"name": "Background"
},
{
"slug": "primary",
"color": "#1a4548",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#ffe2c7",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#F6F6F6",
"name": "Tertiary"
}
]
}
}
}De afbeelding hieronder laat zien hoe de bovenstaande code overeenkomt met het kleurenpalet van Twenty Twenty-Two.
Laten we nu aannemen dat je de standaard achtergrondkleur voor een bepaald blok wilt wijzigen. Als je een andere kleur kiest voor de achtergrond van het blok, wordt simpelweg een andere CSS variabele toegewezen aan de property background color van het element. Onderstaande afbeelding geeft daar een voorbeeld van:
En dat is alles! Je hoeft geen enkele regel custom CSS code aan de Customizer toe te voegen of daarvoor een childthema te maken.
Laten we de Global Styles van Twenty Twenty-Two verder verkennen met enkele aanvullende voorbeelden.
Typography instellingen
In het Typography venster kun je typografiestijlen aanpassen voor de Text en Links elementen van je website op globaal niveau.
Elk item biedt toegang tot een groep controls waarmee je de lettertypefamilie, grootte en regelhoogte kunt aanpassen.
Vraag je je af welke code deze controls genereert?
Open Twenty Twenty-Two’s theme.json en zoek de typography. Je zult de volgende instellingen zien:
{
"version": 1,
"settings": {
"appearanceTools": true,
"typography": {
"dropCap": false,
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
"name": "System Font",
"slug": "system-font"
},
{
"fontFamily": "\"Source Serif Pro\", serif",
"name": "Source Serif Pro",
"slug": "source-serif-pro"
}
],
"fontSizes": [
{
"name": "Small",
"size": "1rem",
"slug": "small"
},
{
"name": "Normal",
"size": "1.125rem",
"slug": "normal"
},
{
"name": "Medium",
"size": "1.75rem",
"slug": "medium"
},
{
"name": "Large",
"size": "clamp(1.75rem, 3vw, 2.25rem)",
"slug": "large"
},
{
"name": "Huge",
"size": "clamp(2.5rem, 4vw, 3rem)",
"slug": "huge"
}
]
},
}Je mag uit de bovenstaande code twee lettertypefamilies en vijf lettergroottes verwachten. En je had het goed geraden.
Hier zie je hoe de bovenstaande code zich vertaalt naar instellingen voor Global Styles Typography:
Je kunt raden welke instelling de controls van de Line height genereert. In Twenty Twenty-Two zul je daar geen specifieke instelling voor vinden omdat het wordt ingeschakeld door de property appearanceTools, wat een shortcut is voor verschillende instellingsdeclarations (zie volgende sectie).
Layout en Appearance tools
Het laatste element in de zijbalk Global Styles is de Layout. Op het moment van schrijven bevat het alleen een padding control.
In Twenty Twenty-Two wordt het Layout venster ingeschakeld door de appearanceTools setting property, een boolean die kan worden gebruikt om meerdere instellingen tegelijk in te schakelen:
{
"settings": {
"appearanceTools": true
}
}"appearanceTools": true vervangt gewoon het volgende blok declaraties:
{
'settings': {
'border': {
'color': true,
'radius': true,
'style': true,
'width': true
},
'color': {
'link': true
},
'spacing': {
'blockGap': true,
'margin': true,
'padding': true
},
'typography': {
'lineHeight': true
}
}
}
OK – je begrijpt nu hopelijk hoe de instellingen die zijn gedeclareerd in het theme.json bestand overeenkomen met de corresponderende Global Styles controls.
Er ontbreekt nog een stukje van onze puzzel om een compleet beeld te krijgen van het nieuwe standaard WordPress thema: blokpatronen.
Twenty Twenty-Two blokpatronen
Je zou kunnen zeggen dat Twenty Twenty-Two voornamelijk een verzameling patronen is – en dat is het eigenlijk ook. In Twenty Twenty-Two vind je talloze kant-en-klare blokpatronen waaruit je kunt kiezen om verbazingwekkende en onvoorspelbare structuren van nested blokken voor je webpagina’s te bouwen.
De sleutelterm hier is empowerment van de gebruiker. En dat zien we terug, want met blokpatronen kun je van alles bouwen, van een aansprekend portfolio tot een promotionele website met maar één pagina, ook als je geen verstand hebt van HTML of CSS!
En WordPress 5.9 brengt aanzienlijke verbeteringen aan het patroonsysteem met de nieuwe Pattern Explorer, een tool waarmee je door patronen kunt bladeren in een full-screen modus.
De nieuwe tool stelt je ook in staat om snel en eenvoudig blokpatronen rechtstreeks uit de Pattern Directory te importeren. Dit opent nieuwe mogelijkheden voor zowel WordPress gebruikers als ontwikkelaars, dus het gebruik ervan zal in de toekomst waarschijnlijk aanzienlijk toenemen.
Twenty Twenty-Two bevat tal van patronen (meer dan 65) in vijf categorieën.
Deze solide set patronen past perfect bij de templates en template-onderdelen die worden geleverd met het nieuwe standaardthema, wat zorgt voor een fantastische bewerkingservaring.
Als je nog niet de kans hebt gehad om met blokpatronen te experimenteren, laten we je met een eenvoudig voorbeeld zien waarom ze als zulke krachtige tools worden beschouwd.
Stel dat je de standaard header uit de Index en Single Post templates wilt verwijderen en deze wilt vervangen door een ander Twenty Twenty-Two blokpatroon.
Start de site-editor vanuit het Appearance menu of de werkbalkknop van de WordPress frontend om de indextemplate aan te passen.
Klik op de Index knop om de dropdown voor de header weer te geven met de lijst met beschikbare templategebieden op de pagina. Klik op de ellips knop naast Footer en vervolgens op Edit Footer.
Zoals hierboven vermeld, wordt hiermee de Isolated template parts editor gestart.
Open nu de Block inserter en klik op Patterns.
Start de nieuwe Pattern Explorer tool, selecteer de categorie Twenty Twenty-Two Footers en kies de footer van je keuze.
Voeg nu de blokken toe en bewerk ze volgens naar wens.
Sla de header op en controleer je site opnieuw wanneer je tevreden bent met je wijzigingen.
De onderstaande afbeelding vergelijkt drie templates (index, single post en post en single post zonder separators) met verschillende aanpassingen voor header en footer:
Twenty Twenty-Two uitbreiden met een childthema
Het maken van een childthema voor een blokthema is heel wat anders dan het maken van een childthema voor een klassiek thema.
Maar als je eenmaal een goed begrip hebt van de structuur van een blokthema, zul je het niet moeilijk vinden om een childthema te maken voor Twenty Twenty-Two of een ander blokthema.
Laten we dus eens kijken hoe je het uiterlijk van je op Twenty Twenty-Two gebaseerde website kunt aanpassen.
1. Een childthema instellen voor Twenty Twenty-Two
Maak in je /wp-content/themes directory een nieuwe map en noem deze zoals je wilt (volgens de standaarden voor themaontwikkeling). In dit voorbeeld noemden we de onderliggende-themamap Twentytwentytwo-child.
Nu heb je een style.css bestand nodig. Open je favoriete code editor en maak de volgende stylesheet:
/*
Theme Name: Twenty Twenty-Two Child
Theme URI: https://example.com/
Author: Your name
Author URI: https://example.com/
Description: A child theme for TT2.
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.6
Version: 0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo-child
Template: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments
Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two Child is distributed under the terms of the GNU GPL.
*/Zoals altijd kun je velden aanpassen aan je behoeften.
Je childthema is nu beschikbaar om te bekijken. Je kunt het activeren in het admin scherm Appearance > Themes.
2. Algemene instellingen aanpassen
Vanaf WordPress 5.9 zullen childthema’s met een theme.json bestand de instellingen van het parent thema overnemen. Als de theme.json van het childthema een set stijlen definieert, worden die stijlen toegepast bovenop de stijlen van het parent thema.
We kunnen dus een theme.json bestand maken dat slechts een klein aangepast blok met instellings- en stijldefinities bevat in plaats van al onze oorspronkelijke keuzes opnieuw te definiëren.
Zo declareer je een custom kleurenpalet
Bij het bouwen van een childthema voor Twenty Twenty-Two is de eenvoudigste taak het vervangen van het kleurenpalet. Het enige dat je hoeft te doen, is een nieuw kleurenpalet definiëren in het theme.json van je childthema, zoals hieronder weergegeven:
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "foreground",
"color": "#FFFFFF",
"name": "Foreground"
},
{
"slug": "background",
"color": "#001F29",
"name": "Background"
},
{
"slug": "primary",
"color": "#D6FDFF",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#FDFCDC",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#FED9B7",
"name": "Tertiary"
},
{
"slug": "accent",
"color": "#E94435",
"name": "Accent"
}
]
}
}
}Sla je bestand op en ga terug naar de site-editor. Het hierboven gedefinieerde kleurenpalet had het standaardkleurenpalet van Twenty Twenty-Two moeten vervangen.
De kleuren worden in volgorde op het palet zelf weergegeven en hun namen moeten de best practices en naamgevingsconventies volgen die op Github zijn besproken, volgen.
Je kunt nog veel meer lezen over de kleuropties van theme.json in dit uitgebreide overzicht van Carolina Nymark.
Zo declareer je custom duotoonfilters
Je kunt ook de standaard duotoonkleuren vervangen door je aangepaste set filters.
Om dat te doen, voeg je eenvoudig de volgende code toe aan de theme.json instellingen van je childthema op hetzelfde niveau als de palette property:
{
"version": 2,
"settings": {
"color": {
"palette": [...],
"duotone": [
{
"colors": [
"#001F29",
"#FFFFFF"
],
"slug": "default-filter",
"name": "Default filter"
}
]
}
}
}Sla je bestand op en controleer het resultaat in de blokeditor. Je zou slechts één duotoonfilter moeten zien.
3. Blokstijlen aanpassen
Zoals we eerder vermeldden, kun je met WordPress 5.9 nu de instellingen en stijlen van theme.json aanpassen vanuit de Global Styles interface.
Blokstijlen kunnen alleen worden aangepast vanuit de Global Styles interface als het blok ondersteuning voor specifieke functionaliteit aangeeft in het bijbehorende block.json bestand. Maar je kunt de standaardblokinstellingen overschrijven in de theme.json van je childthema.
Stel nu dat je de blokstijlen Post Title en Group wilt overschrijven. Het enige dat je hoeft te doen, is de stijlen definiëren die je wilt toevoegen of overschrijven, zoals hieronder wordt weergegeven:
{
"version": 2,
"settings": {...},
"styles": {
"blocks": {
"core/post-title": {
"typography": {
"fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif"
},
"color": {
"background": "var(--wp--preset--color--tertiary)"
},
"spacing": {
"padding": "var(--wp--custom--spacing--small)"
}
},
"core/group": {
"spacing": {
"margin": {
"top": "0",
"bottom": "0"
}
}
}
}
}
}In het bovenstaande voorbeeld hebben we de waarden van de lettertypefamilie, achtergrondkleur en padding voor core/post-title gewijzigd, evenals de boven- en ondermarges voor core/group.
The image below shows the result as it would look on the public site:
En dat was het wat betreft onze review!
We zullen voorlopig niet dieper ingaan op childthema’s, omdat dit buiten het bestek van dit bericht zou vallen. Ondertussen vind je meer voorbeelden van Twenty Twenty-Two childthema’s op Github.
Samenvatting
Terwijl we het nieuwe WordPress standaardthema Twenty Twenty-Two en de bijbehorende features (waardoor het het meest flexibele standaardthema ooit is uitgebracht) onder de loep nemen, hebben we de nieuwe informatiearchitectuur onthuld die is geïntroduceerd met WordPress 5.9. We kregen zelfs een voorproefje van de nieuwe Global Styles interface.
Er komen veel spannende nieuwe features aan en het lijkt duidelijk dat de nieuwe bewerkingsomgeving in de loop van de tijd robuuster, betrouwbaarder en functioneler wordt.
Hoewel er veel nieuwe WordPress features op komst zijn, verdwijnen andere of nemen ze in belang af. Veel gebruikers vragen zich af wat er met de Customizer zal gebeuren en hoe ze de achterwaartse compatibiliteit met bestaande thema’s het beste kunnen behouden.
Je moet echter niet verwachten dat we plotseling in één keer van traditionele thema’s naar blockthema’s springen. We hebben momenteel vier verschillende soorten thema’s om uit te kiezen:
- Blokthema’s: Thema’s ontworpen voor Full-Site Editing
- Universele thema’s: thema’s die werken met zowel de Customizer als de Site Editor
- Hybride thema’s: klassieke thema’s die FSE features ondersteunen, zoals theme.json
- Klassieke thema’s: thema’s met PHP templates, functions.php, enz.
Dus vrees niet – er zijn nog steeds genoeg oplossingen om uit te kiezen als je nog niet klaar bent om over te schakelen naar blokthema’s.
En nu is het aan jou! Ben je klaar om de grote sprong te maken en nu blokthema’s te gaan gebruiken? Deel je mening met ons in de onderstaande comments.
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.
Een goede dag,
Een goede uitleg om met het thema twenty twenty-two aan de slag te gaan en dat zal ik zeker gaan doen.
Echter ik heb het thema proberen te activeren in een sub-domein, maar dat werkt niet, wel op mijn domein.
Doorgegeven aan WordPress en konden dit simuleren. Nu afwachten op een nieuwe update.
Mvg Hans Jansen