{"id":36376,"date":"2020-12-03T13:29:27","date_gmt":"2020-12-03T12:29:27","guid":{"rendered":"https:\/\/kinsta.com\/?p=83720"},"modified":"2023-06-07T09:10:33","modified_gmt":"2023-06-07T07:10:33","slug":"twenty-twenty-one-thema","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/","title":{"rendered":"Twenty Twenty-One: Een uitgebreide analyse van het nieuwe standaard WordPress thema"},"content":{"rendered":"<p>Twenty Twenty-One is het nieuwe standaard WordPress thema bij WordPress 5.6. Als je een <a href=\"https:\/\/kinsta.com\/nl\/blog\/snelste-wordpress-thema\/\">WordPress thema<\/a> met allerlei vernieuwende features verwachtte, dan ben je waarschijnlijk enigszins teleurgesteld.<\/p>\n<p>Twenty Twenty-One is een minimalistisch thema dat je het beste kan vergelijken is met een leeg blad, zowel qua uiterlijk als qua functies. Net als bij de voorgangers gebruikt het nieuwe standaardthema vooral de <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-wordpress-editor\/\">Blok Editor<\/a> om pagina&#8217;s samen te stellen.<\/p>\n<p>In dit artikel zullen we de meest interessante functies van Twenty Twenty-One bekijken, en laten zien hoe je de look en feel van een WordPress website eenvoudig kan aanpassen via een Twenty Twenty-One childthema.<\/p>\n<p>Ben je er klaar voor? Laten er dan meteen induiken!<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<figure id=\"attachment_83746\" aria-describedby=\"caption-attachment-83746\" style=\"width: 1580px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83746 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one.jpg\" alt=\"Twenty Twenty-One thema preview \" width=\"1580\" height=\"2048\"><figcaption id=\"caption-attachment-83746\" class=\"wp-caption-text\">Twenty Twenty-One thema preview (afbeelding: <a href=\"https:\/\/make.wordpress.org\/core\/2020\/09\/23\/introducing-twenty-twenty-one\/\">Make WordPress Core<\/a>)<\/figcaption><\/figure>\n<h2>Eerste impressie van het Twenty Twenty-One WordPress thema<\/h2>\n<p>Net als <a href=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-thema\/\">Twenty Twenty<\/a> is het nieuwe standaardthema van WordPress 5.6 niet helemaal \u201cfrom scratch\u201d ontwikkeld, maar is het een variatie op een populair thema vanuit de WordPress community.<\/p>\n<p>Twenty Twenty-One is ontwikkeld op basis van een nieuw thema van Automattic, het <a href=\"https:\/\/wordpress.org\/themes\/seedlet\/\">Seedlet<\/a> thema, dat een strakke en georganiseerde structuur van nested CSS custom properties biedt. Dankzij het uitgebreide gebruik van <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-css\/#wordpress-and-css\">CSS properties<\/a> in het stylesheet van het thema, is het bouwen van childthema&#8217;s van Twenty Twenty-One snel en eenvoudig.<\/p>\n<figure id=\"attachment_83739\" aria-describedby=\"caption-attachment-83739\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83739 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/seedlet.jpg\" alt=\"Seedlet WordPress thema\" width=\"600\" height=\"769\"><figcaption id=\"caption-attachment-83739\" class=\"wp-caption-text\">Seedlet WordPress thema<\/figcaption><\/figure>\n<p>Twenty Twenty-One is een erg toegankelijk, minimalistisch WordPress thema met \u00e9\u00e9n kolom als layout, een footer zijbalk, en twee <a href=\"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/\">menulocaties<\/a>: primaire navigatie en footer navigatie.<\/p>\n<p>Het nieuwe thema gebruikt een <a href=\"https:\/\/kinsta.com\/nl\/blog\/web-safe-fonts\/\">stack van systeemlettertypen<\/a>. Dit biedt diverse voordelen voor zowel gebruikers als <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ontwikkelaar-huren\/\">developers<\/a>:<\/p>\n<ul>\n<li>Het belangrijkste hiervan is dat een stack van systeemlettertypen (system fonts) diverse voordelen heeft voor UX en <a href=\"https:\/\/kinsta.com\/nl\/leren\/wordpress-sneller-maken\/\">prestaties<\/a> doordat native lettertypen al ondersteund worden door de meeste besturingssystemen, en dus niet meer geladen hoeven te worden.<\/li>\n<li>Daarnaast zien ze er neutraal uit, zodat ze soepel in elk soort ontwerp passen.<\/li>\n<li>Als laatste hoeven er geen extra lettertypebestanden gedownload te worden, waardoor het makkelijker wordt voor gebruikers en developers om de layout van een website met het Twenty Twenty-One thema aan te passen.<\/li>\n<\/ul>\n<p>Het Twenty Twenty-One thema gebruikt een <a href=\"https:\/\/kinsta.com\/nl\/blog\/website-kleurenschema\/\">minimalistisch kleurenpalet<\/a> gebaseerd op pastelgroene achtergrondkleuren en twee tinten grijs van voorgrondkleuren. Het thema biedt daarnaast diverse extra pastelkleuren.<\/p>\n<p>Hierover legt Mel Choyse-Dwan, hoofd design van het standaardthema het volgende uit:<\/p>\n<blockquote><p>We zullen het thema aanbieden met enkele extra kleurenpaletten, waaronder zowel een wit als een zwart kleurenschema. Waarom pastelgroen? Pastelkleuren en tussenkleuren zijn nu in.<\/p><\/blockquote>\n<figure id=\"attachment_83743\" aria-describedby=\"caption-attachment-83743\" style=\"width: 1640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83743 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one-colors.jpg\" alt=\"Twenty Twenty-One kleuren\" width=\"1640\" height=\"600\"><figcaption id=\"caption-attachment-83743\" class=\"wp-caption-text\">Twenty Twenty-One kleuren (afbeelding: <a href=\"https:\/\/make.wordpress.org\/core\/2020\/09\/23\/introducing-twenty-twenty-one\/\">Make WordPress Core<\/a>)<\/figcaption><\/figure>\n\n<h2>Zo installeer je Twenty Twenty-One<\/h2>\n<p>Op het moment van schrijven wordt Twenty Twenty-One nog actief ontwikkeld en is het nog niet beschikbaar om te downloaden in de WordPress themabibliotheek. Maar je kan al wel vast een conceptversie van het thema vinden op <a href=\"https:\/\/github.com\/wordpress\/twentytwentyone\">GitHub<\/a>.<\/p>\n<p>De Github repository zal gedeactiveerd worden zodra het thema met de <a href=\"https:\/\/kinsta.com\/nl\/docs\/ondersteuning\/mogelijkheden-support\/managed-wordpress-supportmogelijkheden\/\">kern<\/a> samengevoegd wordt, en vanaf dan kan je het thema gewoon in de themabibliotheek vinden. Aangezien Twenty Twenty-One het <a href=\"https:\/\/make.wordpress.org\/core\/5-6\/\">WordPress 5.6 release-schema<\/a> volgt, wil je wellicht de volgende data in je agenda noteren:<\/p>\n<ul>\n<li>20 Oktober 2020: Beta 1<\/li>\n<li>27 Oktober 2020: Beta 2<\/li>\n<li>2 November 2020: Beta 3<\/li>\n<li>12 November 2020: Beta 4<\/li>\n<li>17 November 2020: RC 1<\/li>\n<li>1 December 2020: RC 2<\/li>\n<li>7 December 2020: Dry run voor de release van WordPress 5.6<\/li>\n<li>8 December 2020: Geplande datum voor de release van WordPress 5.6<\/li>\n<\/ul>\n<p>Om het Twenty Twenty-One thema aan de gang te krijgen volg je deze stappen:<\/p>\n<ol>\n<li>Haal het zip-bestand van <a href=\"https:\/\/github.com\/wordpress\/twentytwentyone\">GitHub<\/a>.<\/li>\n<li>Upload je pakket naar je development installatie vanaf het <a href=\"https:\/\/kinsta.com\/blog\/wordpress-admin\/\">WordPress dashboard<\/a> of via <a href=\"https:\/\/kinsta.com\/nl\/blog\/zo-gebruik-je-sftp\/\">SFTP<\/a>.<\/li>\n<li>Ga naar\u00a0<strong>Weergave \u2192 Thema\u2019s <\/strong>en klik op de knop <strong>Activeren<\/strong>\u00a0bij de preview van het thema.<\/li>\n<li>Ga naar <strong>Weergave \u2192 Customizer <\/strong>om Twenty Twenty-One verder in te stellen.<\/li>\n<\/ol>\n<p>Je kan nu gaan testen met het thema via een <a href=\"https:\/\/kinsta.com\/nl\/docs\/wordpress-hosting\/testomgeving\/\">testwebsite<\/a> of in je <a href=\"https:\/\/kinsta.com\/nl\/blog\/lokale-wordpress-installatie\/\">lokale omgeving<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Let erop dat Twenty Twenty-One dus nog actief ontwikkeld wordt, en <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\">veel problemen<\/a> zijn dus nog niet opgelost, en er nog functies kunnen veranderen.<\/p>\n<\/aside>\n\n<figure id=\"attachment_83731\" aria-describedby=\"caption-attachment-83731\" style=\"width: 1480px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83731 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-issue.jpg\" alt=\"dark mode issue\" width=\"1480\" height=\"2728\"><figcaption id=\"caption-attachment-83731\" class=\"wp-caption-text\">Twenty Twenty-One <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/620\">Issue #620<\/a> op Github<\/figcaption><\/figure>\n<p>Ben je er nog niet klaar voor om je tests uit te voeren?<\/p>\n<p>Geen zorgen, wij hebben al flink zitten wroeten in het thema, en zullen je laten zien wat je kan verwachten van Twenty Twenty-One.<\/p>\n<h2>De blokken en functies van het Twenty Twenty-One thema<\/h2>\n<p>Net als bij Twenty Twenty is het nieuwe standaard WordPress thema geen volledig functioneel thema, maar meer een minimalistisch thema dat de Blok Editor gebruikt voor het bouwen van pagina&#8217;s. Het thema richt zich ook op het <a href=\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#how-to-make-your-website-more-accessible\">bieden van maximale toegankelijkheid<\/a>. In de woorden van Mel Choyce-Dwan:<\/p>\n<blockquote><p>Verder willen we heel graag dat het thema voldoet aan de relevante richtlijnen van WCAG 2.1 level AAA. We vonden het idee van +make.wordpress.org\/accessibility\/ geweldig, en we waarderen alle hulp en tips van community experts om dit mogelijk te maken.<\/p><\/blockquote>\n<p>Het thema ondersteunt een aanzienlijk aantal <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_theme_support\/\">thema-<\/a> en <a href=\"https:\/\/developer.wordpress.org\/block-editor\/developers\/themes\/theme-support\/\">blokfuncties<\/a> waaronder de volgende:<\/p>\n<p><strong>Themafuncties:<\/strong><\/p>\n<ul>\n<li>Automatisch feed links<\/li>\n<li>Title tag<\/li>\n<li>Artikel formats<\/li>\n<li>Artikel <a href=\"https:\/\/kinsta.com\/nl\/blog\/regenereer-thumbnails\/\">thumbnails<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/nl\/blog\/html-vs-html5\/#what-is-html5\">HTML5 elementen<\/a><\/li>\n<li>Custom logo<\/li>\n<li>Selectieve refresh voor widgets<\/li>\n<li>Custom achtergrond<\/li>\n<li>Twee navigatiemenu&#8217;s<\/li>\n<li>E\u00e9n zijbalk<\/li>\n<\/ul>\n<p><strong>Blokfuncties:<\/strong><\/p>\n<ul>\n<li>Standaard blokstyles<\/li>\n<li>Editor styles<\/li>\n<li>Dark editor styles (donkere achtergrond)<\/li>\n<li>Brede uitlijning<\/li>\n<li>Blok lettertype groottes<\/li>\n<li>Blok kleurenpaletten<\/li>\n<li>Blok presets voor kleurverloop<\/li>\n<li>Startcontent<\/li>\n<li>Responsieve embeds<\/li>\n<li>Custom regelhoogte<\/li>\n<li>Experimentele linkkleur<\/li>\n<li>Experimentele custom spacing<\/li>\n<li>Custom units (verwijderd in WordPress 5.6)<\/li>\n<\/ul>\n<p>De volgende lijst bevat functies die vooral relevant zijn wanneer je een website wil bouwen op basis van Twenty Twenty-One.<\/p>\n<h3>Navigatiemenu&#8217;s<\/h3>\n<p>Twenty Twenty-One ondersteunt twee locaties voor je menu&#8217;s, de <strong>Primary Navigation<\/strong>, rechtsboven in de header, en de <strong>Footer Navigation<\/strong>.<\/p>\n<figure id=\"attachment_83737\" aria-describedby=\"caption-attachment-83737\" style=\"width: 1678px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83737 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/menu-locations.jpg\" alt=\"Twenty Twenty-One menu locaties\" width=\"1678\" height=\"954\"><figcaption id=\"caption-attachment-83737\" class=\"wp-caption-text\">Twenty Twenty-One menu locaties<\/figcaption><\/figure>\n<p>Wanneer je het footermenu gebruikt, worden <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-social-media-plugins\/\">sociale links<\/a> automatisch gedetecteerd en omgezet naar <a href=\"https:\/\/kinsta.com\/nl\/blog\/bestandstypen-afbeeldingen\/#vector-image-file-formats\">SVG iconen<\/a> voor ondersteunde social media.<\/p>\n<figure id=\"attachment_83742\" aria-describedby=\"caption-attachment-83742\" style=\"width: 1376px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83742 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/social-icons.jpg\" alt=\"Twenty Twenty-One social menu\" width=\"1376\" height=\"1294\"><figcaption id=\"caption-attachment-83742\" class=\"wp-caption-text\">Twenty Twenty-One social menu<\/figcaption><\/figure>\n<h3>Artikel formats<\/h3>\n<p>Twenty Twenty-One ondersteunt negen artikelformats: link, aside, gallery, image, quote, status, video, audio, chat. Je kan je artikelformat kiezen in het paneel <strong>Status &#038; Visibility<\/strong> binnen de instellingen van de editor.<\/p>\n<figure id=\"attachment_83738\" aria-describedby=\"caption-attachment-83738\" style=\"width: 280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83738 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/post-formats.jpg\" alt=\"Twenty Twenty-One ondersteunt negen artikelformats\" width=\"280\" height=\"329\"><figcaption id=\"caption-attachment-83738\" class=\"wp-caption-text\">Twenty Twenty-One ondersteunt negen artikelformats<\/figcaption><\/figure>\n<p>Om te zien hoe Twenty Twenty-One omgaat met artikelformats, ga je naar de map <em>template-parts\/excerpt<\/em> en kies je een template. Open bijvoorbeeld het bestand <em>excerpt-image.php<\/em> in de <a href=\"https:\/\/kinsta.com\/nl\/blog\/gratis-html-editors\/\">code-editor<\/a> van je voorkeur. In dat bestand zie je dan de volgende code:<\/p>\n<pre><code class=\"language-php\">\/**\n * Show the appropriate content for the Image post format.\n *\n * @link https:\/\/developer.wordpress.org\/themes\/basics\/template-hierarchy\/\n *\n * @package WordPress\n * @subpackage Twenty_Twenty_One\n * @since 1.0.0\n *\/\n\n\/\/ If there is no featured-image, print the first image block found.\nif (\n\t! twenty_twenty_one_can_show_post_thumbnail() &&\n\thas_block( 'core\/image', get_the_content() )\n) {\n\n\ttwenty_twenty_one_print_first_instance_of_block( 'core\/image', get_the_content() );\n}\n\nthe_excerpt();<\/code><\/pre>\n<p>De code is helder gedocumenteerd en goed leesbaar, maar laten we er toch even langs lopen:<\/p>\n<ul>\n<li><code>has_block<\/code> <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/has_block\/\">bepaalt<\/a> of een artikel of een string een specifiek blok type bevat (zoals het afbeeldingsblok in dit voorbeeld).<\/li>\n<li><code>twenty_twenty_one_print_first_instance_of_block<\/code> is een Twenty Twenty-One templatefunctie dat de eerste instantie van een blok in de content print, en dan afbreekt.<\/li>\n<\/ul>\n<p>Wanneer een websitebezoeker dus een archief van het artikel van het format &#8216;image&#8217; wil zien, zal WordPress voor elk artikel in het archief een afbeelding weergeven. Door deze logica te volgen kan je elk artikelformat bekijken door de bijbehorende sjabloondelen te bekijken.<\/p>\n<h3>Site identity en custom logo<\/h3>\n<p>Twenty Twenty-One ondersteunt een 300&#215;100 px custom logo. Je kan instellingen voor een custom logo vinden in het scherm <strong>Site Identity<\/strong>.<\/p>\n<figure id=\"attachment_83741\" aria-describedby=\"caption-attachment-83741\" style=\"width: 1894px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83741 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/site-identity.jpg\" alt=\"Site Identity in Twenty Twenty-One\" width=\"1894\" height=\"1674\"><figcaption id=\"caption-attachment-83741\" class=\"wp-caption-text\">Site Identity in Twenty Twenty-One<\/figcaption><\/figure>\n<p>Dit bevat onder meer:<\/p>\n<ul>\n<li>Custom logo<\/li>\n<li>Site Title<\/li>\n<li>Tagline<\/li>\n<li>Site Icon<\/li>\n<\/ul>\n<h3>Editor Font Sizes<\/h3>\n<p>Twenty Twenty-One ondersteunt de volgende <a href=\"https:\/\/kinsta.com\/nl\/blog\/zo-verander-je-het-lettertype-in-wordpress\/\">lettertype groottes<\/a>:<\/p>\n<ul>\n<li>Extra small \u2013 16<\/li>\n<li>Small \u2013 18<\/li>\n<li>Normal\/Medium \u2013 20<\/li>\n<li>Large \u2013 24<\/li>\n<li>Extra large \u2013 40<\/li>\n<li>Huge \u2013 96<\/li>\n<li>Gigantic \u2013 144<\/li>\n<\/ul>\n<p>In het stylesheet van het thema wordt de grootte ingesteld in <code>rem<\/code> units.<\/p>\n<figure id=\"attachment_83735\" aria-describedby=\"caption-attachment-83735\" style=\"width: 572px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83735 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/font-sizes.png\" alt=\"Twenty Twenty-One ondersteunt zeven maten voor lettertypes\" width=\"572\" height=\"502\"><figcaption id=\"caption-attachment-83735\" class=\"wp-caption-text\">Twenty Twenty-One ondersteunt zeven maten voor lettertypes<\/figcaption><\/figure>\n<h3>Kleurinstellingen<\/h3>\n<p>De Theme Customizer biedt een scherm <strong>Colors &#038; Dark Mode<\/strong> waaronder de volgende twee keuzes:<\/p>\n<ul>\n<li>Een eenvoudige kleurenkiezer met 10 ingestelde kleurenpaletten.<\/li>\n<li>Een selectievakje voor het in- en uitschakelen van de dark mode.<\/li>\n<\/ul>\n<p>De afbeelding hieronder laat een lichtgele achtergrondkleur zien met een donkergrijze tekst.<\/p>\n<figure id=\"attachment_83727\" aria-describedby=\"caption-attachment-83727\" style=\"width: 554px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83727 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/colors.jpg\" alt=\"Colors &#038; Dark Mode instellingen in Twenty Twenty-One\" width=\"554\" height=\"658\"><figcaption id=\"caption-attachment-83727\" class=\"wp-caption-text\">Colors &#038; Dark Mode instellingen in Twenty Twenty-One<\/figcaption><\/figure>\n<p>De standaardinstelling voor de achtergrondkleur is pastelgroen (<code>'#d1e4dd'<\/code>), maar <a href=\"https:\/\/kinsta.com\/nl\/blog\/gebruikersrollen-wordpress\/\">site-admins<\/a> kunnen eenvoudig naar een alternatieve achtergrondkleur switchen:<\/p>\n<ul>\n<li>Black = <code>'#000000'<\/code>;<\/li>\n<li>Dark gray = <code>'#28303D'<\/code>;<\/li>\n<li>Gray = <code>'#39414D'<\/code>;<\/li>\n<li>Green = <code>'#D1E4DD'<\/code>;<\/li>\n<li>Blue = <code>'#D1DFE4'<\/code>;<\/li>\n<li>Purple = <code>'#D1D1E4'<\/code>;<\/li>\n<li>Red = <code>'#E4D1D1'<\/code>;<\/li>\n<li>Orange = <code>'#E4DAD1'<\/code>;<\/li>\n<li>Yellow = <code>'#EEEADD'<\/code>;<\/li>\n<li>White = <code>'#FFFFFF'<\/code>;<\/li>\n<\/ul>\n<p>Dezelfde kleuren zijn ook beschikbaar als <strong>blok kleurenpalet<\/strong> in de blokinstellingen in de editor.<\/p>\n<p>Daarnaast ondersteunt Twenty Twenty-One diverse <strong>gradient presets<\/strong> voor blok die deze feature ondersteunen. De afbeelding hieronder laat de standaard kleurschakeringen zien in de instellingen van de Columns blok.<\/p>\n<figure id=\"attachment_83752\" aria-describedby=\"caption-attachment-83752\" style=\"width: 280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83752 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/color-gradients.png\" alt=\"Acht gradient presets in de Color instellingen van een blok\" width=\"280\" height=\"765\"><figcaption id=\"caption-attachment-83752\" class=\"wp-caption-text\">Acht gradient presets in de Color instellingen van een blok<\/figcaption><\/figure>\n<p>Vanuit het perspectief van toegankelijkheid is de ondersteuning voor Dark Mode (donkere modus) een absolute innovatie voor een standaardthema.<\/p>\n<p>Laten we daar dus eens beter naar kijken!<\/p>\n<h2>Ondersteuning voor dark mode in Twenty Twenty-One<\/h2>\n<p>Als gevolg van een discussie op het Slack kanaal <a href=\"https:\/\/wordpress.slack.com\/archives\/C02RP4VMP\/p1603294484103600\">#core-themes<\/a>, introduceerde <a href=\"https:\/\/make.wordpress.org\/core\/2020\/10\/22\/twenty-twenty-one-dark-mode-discussion\/\">Mel Choyce-Dwan ondersteuning voor Dark Mode<\/a> voor Twenty Twenty-One.<\/p>\n<figure id=\"attachment_83732\" aria-describedby=\"caption-attachment-83732\" style=\"width: 1338px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83732 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-mac.jpg\" alt=\"Inschakelen van de donkere modus in macOS\" width=\"1338\" height=\"510\"><figcaption id=\"caption-attachment-83732\" class=\"wp-caption-text\">Inschakelen van de donkere modus in macOS<\/figcaption><\/figure>\n<p>Eerst was het niet helemaal duidelijk of deze functie ge\u00efmplementeerd zou worden in Twenty Twenty-One als thema-functie of als een apart project dat als plugin verkrijgbaar zou zijn.<\/p>\n<p>Er waren vijf mogelijke opties om uit te kiezen:<\/p>\n<ul>\n<li>Sitebeheerders toestaan om ondersteuning voor dark mode uit te schakelen, en sitebezoekers om de dark mode aan\/uit te schakelen tijdens het bekijken van de site.<\/li>\n<li>Toestaan dat sitebeheerders de ondersteuning voor dark mode uitschakelen (dus zonder optie voor bezoekers om de dark mode aan\/uit te zetten).<\/li>\n<li>Ondersteuning voor dark mode inschakelen en op &#8220;always on&#8221; zetten, waarbij bezoekers het kunnen in- en uitschakelen.<\/li>\n<li>Inschakelen van dark mode als &#8220;always on&#8221;, waarbij bezoekers dit niet aan\/uit kunnen zetten.<\/li>\n<li>Dark mode niet ondersteunen.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2020\/11\/10\/twenty-twenty-one-dark-mode-update\/\">Na diepgaande discussies<\/a> werd Dark Mode toegevoegd aan het thema. Dat betekent:<\/p>\n<ul>\n<li><strong>Dark Mode ondersteuning is beschikbaar als opt-in functie voor sitebeheerders <\/strong>.<\/li>\n<li>De <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/pull\/622\">schakelaar<\/a> is verwijderd van de interface van de editor en is alleen beschikbaar via de Customizer.<\/li>\n<li>De schakelknop voor de Dark Mode is rechtsonder te vinden (links op RTL) en verdwijnt wanneer een bezoeker naar beneden scrolt.<\/li>\n<li>Wanneer Dark Mode is ingeschakeld kunnen bezoekers het zelf aan\/uit zetten op basis van hun voorkeur, <strong>onafhankelijk van de instellingen van hun OS of browser<\/strong>.<\/li>\n<\/ul>\n<figure id=\"attachment_83733\" aria-describedby=\"caption-attachment-83733\" style=\"width: 2410px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83733 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-off.jpg\" alt=\"Dark mode ingeschakeld in de Customizer en uitgeschakeld op de front-end\" width=\"2410\" height=\"1194\"><figcaption id=\"caption-attachment-83733\" class=\"wp-caption-text\">Dark mode ingeschakeld in de Customizer en uitgeschakeld op de front-end<\/figcaption><\/figure>\n<p>Alhoewel dark mode wordt gezien als verbetering voor de toegankelijkheid, is het niet vanzelfsprekend dat je pagina&#8217;s daarmee in elke context toegankelijker worden.<\/p>\n<p>De grootste uitdagingen treden op bij donkere logo&#8217;s en transparante afbeeldingen. Wanneer je van een standaard lichte template naar een donkere achtergrondkleur gaat, kan dat problemen voor de leesbaarheid opleveren waardoor het gebruiksgemak juist vermindert en het uiterlijk van je website verslechtert.<\/p>\n<p>Zo kan een donker logo op een lichte achtergrond bijvoorbeeld helemaal verdwijnen wanneer lezers zelf Dark Mode inschakelen. Vergelijkbare problemen treden op bij de <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/618\">helderheid en contrast van afbeeldingen<\/a> en <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/620\">doorzichtigheid van grenzen, dividers en separators<\/a>.<\/p>\n<p>Ben je van plan om dark mode toe te voegen aan je website, dan moet je goed testen hoe je website eruit ziet met een donkere achtergrond.<\/p>\n<figure id=\"attachment_83734\" aria-describedby=\"caption-attachment-83734\" style=\"width: 2409px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83734 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-on.jpg\" alt=\"Dark mode ingeschakeld in de Customizer en ingeschakeld op de front-end\" width=\"2409\" height=\"1193\"><figcaption id=\"caption-attachment-83734\" class=\"wp-caption-text\">Dark mode ingeschakeld in de Customizer en ingeschakeld op de front-end<\/figcaption><\/figure>\n<p>Mensen die aan het thema werken zijn zich hier bewust van, en de discussie loopt nog altijd op GitHub. Voor een gedetailleerd overzicht van problemen rond de bruikbaarheid van de dark mode en het bijdragen aan de discussie, vind je <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\">hier op GitHub de hele lijst met problemen<\/a>.<\/p>\n<p>Voorkeuren voor dark mode worden opgeslagen in de LocalStorage en kunnen bekeken worden via de developer tools van de browser.<\/p>\n<p>In <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/storage\/localstorage\">Google Chrome<\/a> kan je daarvoor Chrome WebTools starten en klikken op het tabblad <strong>Application<\/strong>. Zoek het deel <strong>Storage<\/strong> en klap het menu Local Storage uit.<\/p>\n<figure id=\"attachment_83723\" aria-describedby=\"caption-attachment-83723\" style=\"width: 1740px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83723 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/brave-browser-local-storage.jpg\" alt=\"Gebruikersvoorkeuren voor Dark Mode in de Brave Browser lokale opslag\" width=\"1740\" height=\"1086\"><figcaption id=\"caption-attachment-83723\" class=\"wp-caption-text\">Gebruikersvoorkeuren voor Dark Mode in de Brave Browser lokale opslag<\/figcaption><\/figure>\n<p>Om eerlijk te zijn is Dark Mode ook niet meer een veelvoorkomend onderwerp rondom moderne websites. Maar aangezien het nieuwe standaardthema van WordPress dark mode nu ondersteunt kunnen we binnen dit gebied van toegankelijkheid veranderingen verwachten, aangezien WordPress de meest gebruikte <a href=\"https:\/\/kinsta.com\/nl\/blog\/cms-systemen\/\">CMS software<\/a> is.<\/p>\n<p>Developers die verder in de technische materie willen duiken moeten vooral eens deze gedetailleerde gids over <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-dark-mode-on-the-web\/\">dark mode op het web<\/a> lezen.<\/p>\n<h2>Styles en CSS custom properties<\/h2>\n<p>Dat gezegd hebbende is het nu tijd om de meest interessante functie van Twenty Twenty-One voor themadevelopers te bekijken.<\/p>\n<p>Laten we beginnen met CSS custom properties.<\/p>\n<p>Zoals hierboven gezegd, is Twenty Twenty-One gebaseerd op <a href=\"https:\/\/wordpress.org\/themes\/seedlet\/\">Seedlet<\/a>, een thema met dubbele kolommen, een footer zijbalk en drie menulocaties. De styling van Seedlet is volledig gebaseerd op CSS custom properties, wat het makkelijker maakt voor themadevelopers en gevorderde gebruikers om <a href=\"https:\/\/kinsta.com\/nl\/blog\/child-thema-wordpress\/\">child-thema&#8217;s te bouwen<\/a> op het thema van Automattic.<\/p>\n<p>Hetzelfde geldt voor Twenty Twenty-One. Het nieuwe standaardthema biedt een layout met enkele kolom, een footer zijbalk en twee menu-locaties. Het stylesheet volgt het systeem van nested custom properties dat Seedlet gebruikt, waardoor Twenty Twenty-One een ideaal startpunt is voor het bouwen van child-thema&#8217;s en gepersonaliseerde websites.<\/p>\n<p><strong>CSS custom properties<\/strong>\u00a0(ook wel <strong>CSS variables<\/strong> genoemd) zijn speciale entities die specifieke waarden bevatten die je overal in je stylesheet kan gebruiken.<\/p>\n<p>Als je dus bijvoorbeeld een specifiek kleuraccent wil veranderen binnen je document, hoef je geen zoekopdracht te doen of je die specifieke kleur ergens in je stylesheet kan vinden. In plaats daarvan stel je gewoon een andere property value in binnen het <code>:root<\/code> <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:root\">blok<\/a>.<\/p>\n<figure id=\"attachment_83728\" aria-describedby=\"caption-attachment-83728\" style=\"width: 1970px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83728 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/css-custom-properties.jpg\" alt=\"CSS custom properties in Twenty Twenty-One\" width=\"1970\" height=\"1108\"><figcaption id=\"caption-attachment-83728\" class=\"wp-caption-text\">CSS custom properties in Twenty Twenty-One<\/figcaption><\/figure>\n<p>Ter illustratie van een eenvoudige aanpassing: stel dat je een bepaalde achtergrondkleur wil instellen. Daar heb je geen child-thema voor nodig. Je moet in plaats daarvan simpelweg twee CSS declarations opnemen in je code-editor van het <a href=\"https:\/\/kinsta.com\/nl\/blog\/bewerken-wordpress-code\/#css\"><strong>Additional CSS <\/strong><\/a><a href=\"https:\/\/kinsta.com\/nl\/blog\/bewerken-wordpress-code\/#css\">paneel<\/a>:<\/p>\n<pre><code class=\"language-css\">:root {\n\t--global--color-beige: #e6d7c1;\n}\n\nbody {\n\tbackground-color: var(--global--color-beige);\n}<\/code><\/pre>\n<figure id=\"attachment_83722\" aria-describedby=\"caption-attachment-83722\" style=\"width: 1682px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83722 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/additional-css.jpg\" alt=\"Custom CSS in de Twenty Twenty-One Customizer\" width=\"1682\" height=\"786\"><figcaption id=\"caption-attachment-83722\" class=\"wp-caption-text\">Custom CSS in de Twenty Twenty-One Customizer<\/figcaption><\/figure>\n<p>CSS custom properties zijn veilig te gebruiken aangezien ze ondersteund worden door alle grote browsers, zoals te zien is in de afbeelding hieronder van <a href=\"https:\/\/caniuse.com\/css-variables\">Can I Use<\/a>:<\/p>\n<figure id=\"attachment_83724\" aria-describedby=\"caption-attachment-83724\" style=\"width: 1326px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83724 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/caniuse-css-custom-properties.jpg\" alt=\"CSS custom properties worden ondersteund door de meerderheid van de grote moderne webbrowsers.\" width=\"1326\" height=\"610\"><figcaption id=\"caption-attachment-83724\" class=\"wp-caption-text\">CSS custom properties worden ondersteund door de meerderheid van de grote moderne webbrowsers.<\/figcaption><\/figure>\n<p>Wil je dieper ingaan op CSS custom properties, bekijk dan eens de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_custom_properties\">MDN Documentatie<\/a>.<\/p>\n<h2>Twenty Twenty-One blokpatronen<\/h2>\n<p>Twenty Twenty-One biedt diverse patronen voor de Blok Editor. In een <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-5\/#block-patterns\">vorig blogartikel<\/a> definieerden we Blokpatronen als <strong>voorgedefinieerde bloklayouts waarmee gebruikers snel complexe structuren van nested blocks aan hun pagina&#8217;s kunnen toevoegen<\/strong>.<\/p>\n<p>WordPress 5.5 introduceerde een handjevol blokpatronen en in WordPress 5.6 verwachten we er nog meer. Daarnaast biedt Twenty Twenty-One een eigen set van blokpatronen.<\/p>\n<p>In Twenty Twenty-One, worden blokpatronen gedefinieerd in het bestand <em>inc\/block-patterns.php<\/em>\u00a0.\u00a0<a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/50\">Twenty Twenty-One patronen<\/a>\u00a0vari\u00ebren van eenvoudige patronen zoals het\u00a0<em>Large Text<\/em>\u00a0patroon, dat slechts \u00e9\u00e9n H2 element bevat, tot meer complexe patronen, zoals\u00a0<em>Overlapping Images and Text<\/em>\u00a0en <em>Media and Text Article Title<\/em>.<\/p>\n<figure id=\"attachment_83744\" aria-describedby=\"caption-attachment-83744\" style=\"width: 580px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83744 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one-media-and-text-block-pattern.jpg\" alt=\"Media and Text Article Title blockpatroon in Twenty Twenty-One\" width=\"580\" height=\"306\"><figcaption id=\"caption-attachment-83744\" class=\"wp-caption-text\">Media and Text Article Title blockpatroon in Twenty Twenty-One<\/figcaption><\/figure>\n<p>Op dit moment biedt het thema de volgende patronen:<\/p>\n<ul>\n<li><strong>Large Text<\/strong><\/li>\n<li><strong>Links Area<\/strong>: Een grote tekst gevolgd door sociale netwerken en links naar een e-mailadres.<\/li>\n<li><strong>Media and Text Article Title<\/strong>: Een Media &#038; Text blok met links een grote afbeelding en rechts een heading. De heading wordt gevolgd door een separator en beschrijvende paragraaf.<\/li>\n<li><strong>Overlapping Images<\/strong>: Drie afbeeldingen in een blok met overlappende kolommen.<\/li>\n<li><strong>Two Images Showcase<\/strong>: Een\u00a0<a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-mediabibliotheek\/\">Media<\/a> &#038; Text blok met links een grote afbeelding een rechts een kleinere afbeelding met omlijning.<\/li>\n<li><strong>Overlapping Images and Text<\/strong>: Een blok met overlappende kolommen, met twee afbeeldingen en een beschrijving.<\/li>\n<li><strong>Portfolio List<\/strong>: Een projectlijst met thumbnail afbeeldingen.<\/li>\n<li><strong>Contact Information<\/strong>: Een blok met 3 kolommen, met contactinformatie en links naar social media.<\/li>\n<\/ul>\n<figure id=\"attachment_83745\" aria-describedby=\"caption-attachment-83745\" style=\"width: 792px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83745 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one-overlapping-images-block-pattern.jpg\" alt=\"Overlapping Images blockpatroon in Twenty Twenty-One\" width=\"792\" height=\"1028\"><figcaption id=\"caption-attachment-83745\" class=\"wp-caption-text\">Overlapping Images blokpatroon in Twenty Twenty-One<\/figcaption><\/figure>\n<p>Keuze uit zoveel blokpatronen is ideaal voor zowel gebruikers als developers. Gebruikers kunnen hiermee makkelijk en snel complexe blokken met code toevoegen aan hun artikelen en pagina&#8217;s, terwijl developers die patronen kunnen gebruiken voor handige sjablonen waarop ze eigen variaties kunnen bouwen.<\/p>\n<h2>Het Twenty Twenty-One blokexperiment<\/h2>\n<p>Twenty Twenty-One Blocks is een aparte experimentele versie van het Twenty Twenty-One thema, helemaal gebaseerd op blokken. Het doel ervan is om iedereen te betrekken bij wat er gebeurt bij het Full Site Editing experiment, waardoor iedereen de nieuwe FSE functies kan bekijken voordat ze onderdeel worden van de WordPress kern.<\/p>\n<p>Het is <a href=\"https:\/\/make.wordpress.org\/themes\/2020\/10\/07\/block-based-themes-and-wordpress-5-6\/\">onwaarschijnlijk<\/a> dat we deze experimentele versie als onderdeel van de kern zullen zien bij WordPress 5.6. <a href=\"https:\/\/make.wordpress.org\/themes\/2020\/10\/23\/developing-the-full-site-editing-version-of-twenty-twenty-one\/\">volgens Carolina Nymark<\/a>:<\/p>\n<blockquote><p>Het thema heeft Gutenberg en de Full Site Editing experiment nodig om te kunnen draaien. Het zal geen onderdeel van de kern worden, maar wel beschikbaar zijn in de themabibliotheek wanneer het klaar is.<\/p><\/blockquote>\n<p>Op het moment van schrijven, <strong>vereist Twenty Twenty-One Bloks de Gutenberg plugin<\/strong>. Nadat zowel de plugin als het thema ge\u00efnstalleerd en geactiveerd zijn, verschijnt er een Site Editor menu-item in je WordPress admin menu (je hoeft het Full Site Editing experiment niet meer apart te activeren).<\/p>\n<figure id=\"attachment_83740\" aria-describedby=\"caption-attachment-83740\" style=\"width: 519px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83740 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/site-editor-menu-item.jpg\" alt=\"Het Site Editor menu item in Twenty Twenty-One Blocks experiment\" width=\"519\" height=\"438\"><figcaption id=\"caption-attachment-83740\" class=\"wp-caption-text\">Het Site Editor menu item in Twenty Twenty-One Blok experiment<\/figcaption><\/figure>\n<p>Vervolgens klik je op het nieuwe <strong>Site Editor<\/strong> menu-item om de Full Site Editing interface te openen en te beginnen met het bewerken van een element op de pagina via de blok editor.<\/p>\n<figure id=\"attachment_83736\" aria-describedby=\"caption-attachment-83736\" style=\"width: 2260px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83736 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/full-site-editing.jpg\" alt=\"Full Site Editing in Twenty Twenty-One Blocks\" width=\"2260\" height=\"1278\"><figcaption id=\"caption-attachment-83736\" class=\"wp-caption-text\">Full Site Editing in Twenty Twenty-One Blocks<\/figcaption><\/figure>\n<p>We zullen de technische details hier even laten voor wat ze zijn. Het is in ieder geval al duidelijk dat klassieke thema&#8217;s en op blokken gebaseerde thema&#8217;s compleet anders werken.<\/p>\n<p>De afbeelding hieronder laat de content van de map Twenty Twenty-One Blocks zien:<\/p>\n<figure id=\"attachment_83747\" aria-describedby=\"caption-attachment-83747\" style=\"width: 1266px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83747 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twentytwentyone-blocks.jpg\" alt=\"Twenty Twenty-One Blocks map\" width=\"1266\" height=\"700\"><figcaption id=\"caption-attachment-83747\" class=\"wp-caption-text\">Twenty Twenty-One Blocks map<\/figcaption><\/figure>\n<p>Het bestand <em>experimental-theme.json<\/em>\u00a0en de mappen\u00a0<em>block-templates<\/em>\u00a0en <em>block-template-parts<\/em>\u00a0vallen meteen op.<\/p>\n<p>Het grote verschil tussen traditionele WordPress thema&#8217;s en op blokken gebaseerde thema&#8217;s is dat deze laatste groep thema\u2019s templates biedt die volledig uit blokken bestaan.<\/p>\n<p>Open bijvoorbeeld maar eens <em>block-template-parts\/header.html<\/em> in je <a href=\"https:\/\/kinsta.com\/nl\/blog\/gratis-html-editors\/\">code-editor<\/a>. Daar zie je de volgende code:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:spacer {\"height\":70} --&gt;\n&lt;div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"&gt;&lt;\/div&gt;\n&lt;!-- \/wp:spacer --&gt;\n\n&lt;!-- wp:columns {\"align\":\"wide\"} --&gt;\n&lt;div class=\"wp-block-columns alignwide\"&gt;&lt;!-- wp:column --&gt;\n&lt;div class=\"wp-block-column\"&gt;&lt;!-- wp:site-title \/--&gt;\n\n&lt;!-- wp:site-tagline \/--&gt;&lt;\/div&gt;\n&lt;!-- \/wp:column --&gt;\n\n&lt;!-- wp:column --&gt;\n&lt;div class=\"wp-block-column\"&gt;&lt;!-- wp:navigation {\"orientation\":\"horizontal\",\"itemsJustification\":\"right\"} --&gt;\n&lt;!-- wp:navigation-link {\"label\":\"Home\",\"url\":\"#\"} \/--&gt;\n\n&lt;!-- wp:navigation-link {\"label\":\"Blog\",\"url\":\"#\"} \/--&gt;\n\n&lt;!-- wp:navigation-link {\"label\":\"Work\",\"url\":\"#\"} \/--&gt;\n\n&lt;!-- wp:navigation-link {\"label\":\"Contact\",\"url\":\"#\"} \/--&gt;\n&lt;!-- \/wp:navigation --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:column --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:columns --&gt;\n\n&lt;!-- wp:spacer {\"height\":70} --&gt;\n&lt;div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"&gt;&lt;\/div&gt;\n&lt;!-- \/wp:spacer --&gt;<\/code><\/pre>\n<p>Zoals je ziet, is het klassieke <a href=\"https:\/\/kinsta.com\/nl\/blog\/code-toevoegen-aan-de-wordpress-header-en-footer\/\"><em>header.php<\/em> templatebestand<\/a> vervangen door een <em>.html<\/em> bestand met diverse blokken.<\/p>\n<p>Je kan de conceptversie van het Twenty Twenty-One Blocks thema vinden in het <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\">theme-experiments<\/a> project op GitHub.<\/p>\n<p>Als themadeveloper vind je in <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/master\/docs\/designers-developers\/developers\/themes\/block-based-themes.md\">de offici\u00eble documentatie<\/a> alle informatie die je nodig hebt over deze block-based thema&#8217;s.<\/p>\n<p>Wil je graag bijdragen aan het Full Site Editing Experiment, deel je feedback dan <a href=\"https:\/\/make.wordpress.org\/test\/handbook\/full-site-editing-outreach-experiment\/\">hier<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Twenty Twenty-One Blocks is een experimenteel thema en moet dus niet voor een operationele website gebruikt worden. Experimenteer erop los in een <a href=\"https:\/\/kinsta.com\/nl\/docs\/wordpress-hosting\/testomgeving\/\">testomgeving<\/a>.<\/p>\n<\/aside>\n\n<h2>Zo maak je een child-thema van Twenty Twenty-One<\/h2>\n<p>Standaard WordPress thema&#8217;s zijn een goed startpunt om de basics van <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ontwikkelaar-salaris\/\">themadevelopment<\/a> onder de knie te krijgen en om te beginnen met het bouwen van custom <a href=\"https:\/\/kinsta.com\/nl\/blog\/child-thema-wordpress\/\">child-thema&#8217;s<\/a>.<\/p>\n<p>Standaardthema&#8217;s volgen de richtlijnen van de offici\u00eble <a href=\"https:\/\/make.wordpress.org\/core\/handbook\/best-practices\/coding-standards\/\">WordPress Coding Standards<\/a> en voldoen aan <a href=\"https:\/\/en.wikipedia.org\/wiki\/Web_standards\">webstandaarden<\/a>.<\/p>\n<p>Is er ergens een betere plek om <a href=\"https:\/\/kinsta.com\/nl\/blog\/scripttalen\/\">te leren programmeren<\/a>?<\/p>\n<p>Child-thema&#8217;s zijn een handige WordPress feature waarmee je eenvoudig de layout, functies en structuur van je pagina&#8217;s kan aanpassen. Met de volgende voorbeelden zullen we elk aspect van thema customization verder uitdiepen.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Opzetten van je child-thema<\/h3>\n<p>Het bouwen van een WordPress child-thema doe je in 3 stappen:<\/p>\n<h4>1. Maak een map voor je child-thema<\/h4>\n<p>Maak een nieuwe map aan in <em>wp-content\/themes<\/em> en geef het een toepasselijke naam. Onthoud dat de naam uniek moet zijn. <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#1-create-a-child-theme-folder\">Het Child Themes handbook<\/a> raadt je aan om dezelfde naam als het parent-thema te gebruiken, met <strong>-child<\/strong> aan het eind toegevoegd.<\/p>\n<p>We zouden de map dan dus\u00a0<strong>twentytwentyone-child<\/strong> kunnen noemen.<\/p>\n<h4>2. Maak een style.css bestand<\/h4>\n<p>Ga nu naar je nieuwe map en maak daarin een nieuwe <em>style.css<\/em> bestand met de volgende code:<\/p>\n<pre><code class=\"language-php\">\/*\nTheme Name: My Twenty Twenty One Child Theme\nTheme URI: https:\/\/example.com\nDescription: A child theme for Twenty Twenty One.\nAuthor: Your Name\nAuthor URI: https:\/\/example.com\/\nTemplate: twentytwentyone\nVersion: 1.0\nLicense: GNU General Public License v2 or later\nLicense URI: https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/\n<\/code><\/pre>\n<p>De informatieheader zorgt ervoor dat WordPress je child-thema goed kan lezen.<\/p>\n<ul>\n<li>Theme Name: De unieke naam die je aan het thema geeft.<\/li>\n<li>Theme URI: Waar gebruikers de code of documentatie voor het thema kunnen vinden.<\/li>\n<li>Description: De omschrijving, die helder aangeeft wat het thema doet.<\/li>\n<li>Author: Je eigen naam<\/li>\n<li>Author URI: De website van de auteur.<\/li>\n<li>Template: De map waar het parent-thema opgeslagen is. Gebruik de naam van de map van het thema, en niet de naam van het thema. Zonder deze regel code zal je thema niet als child-thema werken.<\/li>\n<li>Version: Het versienummer<\/li>\n<li>License: De licentie, die\u00a0<a href=\"https:\/\/developer.wordpress.org\/themes\/getting-started\/wordpress-licensing-the-gpl\/\">GNU moet zijn<\/a>.<\/li>\n<li>License URI: Link naar informatie over de licentie.<\/li>\n<\/ul>\n<p>Onder die tekst kan je CSS blokken met declarations toevoegen, zoals we zometeen zullen laten zien.<\/p>\n<h4>3. Maak een functions.php bestand<\/h4>\n<p>Met Twenty Twenty-One zul je ook een <em>functions.php<\/em> bestand nodig hebben. Maak daarom een eigen bestand aan binnen de map van het child-thema, open dit in je code-editor en voeg de volgende code toe:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/* enqueue scripts and style from parent theme *\/\n   \nfunction twentytwentyone_styles() {\n\twp_enqueue_style( 'child-style', get_stylesheet_uri(),\n\tarray( 'twenty-twenty-one-style' ), wp_get_theme()-&gt;get('Version') );\n}\nadd_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');<\/code><\/pre>\n<p>Aangezien het Twenty Twenty-One thema\u00a0<code>get_template_directory()<\/code>\u00a0gebruikt om de stylesheet te laden, moet je de stylesheet van het child-thema aan de rij toevoegen via de <code>wp_enqueue_scripts<\/code>\u00a0action.<\/p>\n<p>Nadat je dit gedaan hebt, sla je je bestanden op, open je WordPress dashboard en ga naar <strong>Weergave -&gt; Thema\u2019s<\/strong>, en activeer je je eigen spiksplinternieuwe child-thema van Twenty Twenty-One.<\/p>\n<p>Nu gaan we onze eigen aanpassingen toevoegen.<\/p>\n<h3>Toevoegen van custom styles<\/h3>\n<p>Als het gaat om het aanpassen van de layout van je WordPress website, heb je diverse mogelijkheden om <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-css\/\">je eigen custom CSS code toe te voegen<\/a>. Het scherm <strong>Additional CSS<\/strong> van de Customizer is goed genoeg voor kleine aanpassingen.<\/p>\n<p>Maar een child-thema is een betere keuze als je van plan bent om complexere aanpassingen te maken, of wanneer je je code op meerdere WordPress websites wilt gebruiken.<\/p>\n<p>Laten we het eens uitproberen met een eenvoudige aanpassing: een andere standaard lettertype stack.<\/p>\n<p>Stel dat je een andere stack met lettertypen wilt laden, of gewoon je <a href=\"https:\/\/kinsta.com\/nl\/blog\/moderne-lettertypes\/\">eigen favoriete lettertype wilt toevoegen<\/a> aan de standaard Twenty Twenty-One font families.<\/p>\n<p>Hoe doe je dat dan?<\/p>\n<p>Ik zal je hier laten zien hoe je het standaardlettertype voor H1 headings verandert, maar je kan de font family van elk gewenst tekstelement op je website op dezelfde manier veranderen.<\/p>\n<p>Open allereerst het <em>style.css<\/em> bestand van Twenty Twenty-One en zoek het volgende blok met CSS:<\/p>\n<pre><code class=\"language-css\">h1,\n.h1,\nh2,\n.h2,\nh3,\n.h3,\nh4,\n.h4,\nh5,\n.h5,\nh6,\n.h6 {\n\tclear: both;\n\tfont-family: var(--heading--font-family);\n\tfont-weight: var(--heading--font-weight);\n}<\/code><\/pre>\n<p>Zoals je kan zien, is de font family voor headings ingesteld via de variabele <code>--heading--font-family<\/code>.<\/p>\n<p>Ga nu naar het <code>:root{}<\/code> blok en zoek deze declaration:<\/p>\n<pre><code class=\"language-css\">--heading--font-family: var(--global--font-primary);<\/code><\/pre>\n<p><code>--heading--font-family<\/code>\u00a0is afhankelijk van de\u00a0<code>--global--font-primary<\/code>\u00a0variabele, welke gedefinieerd wordt helemaal bovenaan het <code>:root{}<\/code>\u00a0blok:<\/p>\n<pre><code class=\"language-css\">:root{\n\t\/* Font Family *\/\n\t--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif);\n\t...\n}<\/code><\/pre>\n<p>Kopieer de <code>--global--font--primary<\/code> declaration van het stylesheet van de parent en kopieer het in <em>style.css<\/em> van je child-thema. Verander vervolgens de naam en waarde van de property zoals hieronder te zien is:<\/p>\n<pre><code class=\"language-css\">:root{\n\t\/* Font Family *\/\n\t--global--font-primary-child: var(--font-headings, Ubuntu, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Cantarell, \"Helvetica Neue\", sans-serif);\n\n\t--global--font-family-child: var(--global--font-primary-child);\n}<\/code><\/pre>\n<p>Nadat je je custom font stack hebt gedefinieerd, kan je het overal in je stylesheet gebruiken. In de H1 headings in ons voorbeeld:<\/p>\n<pre><code class=\"language-css\">h1,\n.h1 {\n\tfont-family: var(--global--font-family-child);\n}<\/code><\/pre>\n<p>Sla het <em>style.css<\/em> van je child-thema op en laad de pagina opnieuw. Je zou nu Ubuntu als nieuwe standaard font family moeten zien bij de headings van je pagina.<\/p>\n<figure id=\"attachment_83729\" aria-describedby=\"caption-attachment-83729\" style=\"width: 2612px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83729 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/custom-font-family.png\" alt=\"Standaard font family vs. custom font family in Twenty Twenty-One\" width=\"2612\" height=\"1576\"><figcaption id=\"caption-attachment-83729\" class=\"wp-caption-text\">Standaard font family vs. custom font family in Twenty Twenty-One<\/figcaption><\/figure>\n<p>Nu je weet hoe je Twenty Twenty-One kan aanpassen via een child-thema, kunnen we ook de geavanceerdere functies gaan verkennen.<\/p>\n<h3>Zo voeg je nieuwe blokpatronen toe<\/h3>\n<p>In dit voorbeeld bouwen we een custom blokpatroon met een blok voor twee kolommen, met een afgeronde afbeelding aan de linkerkant, een H4 heading en een paragraaf aan de rechterkant.<\/p>\n<p>Je kan je patroon meteen in de Blok Editor opbouwen of <a href=\"https:\/\/kinsta.com\/nl\/blog\/bewerken-wordpress-code\/\">de code aanpassen<\/a> van een bestaand blokpatroon.<\/p>\n<p>Kies je ervoor om je patroon te bouwen in de Blok Editor, dan hoef je alleen maar de benodigde blokken toe te voegen aan een artikel of pagina, en dan naar de Code Editor te switchen om de benodigde code toe te voegen.<\/p>\n<figure id=\"attachment_83725\" aria-describedby=\"caption-attachment-83725\" style=\"width: 1058px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83725 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/code-editor-2.png\" alt=\"Een blok van twee kolommen in de Code Editor\" width=\"1058\" height=\"528\"><figcaption id=\"caption-attachment-83725\" class=\"wp-caption-text\">Een blok van twee kolommen in de Code Editor<\/figcaption><\/figure>\n<p>Nu kunnen we ons patroon registreren in het <em>functions.php<\/em> bestand van ons child-thema:<\/p>\n<pre><code class=\"language-php\">add_action( 'init', function(){\n\n\tregister_block_pattern_category( \n\t\t'custom-patterns', \n\t\tarray( 'label' =&gt; esc_html__( 'Custom patterns', 'twentytwentyone-child' ) ) );\n\n\tregister_block_pattern(\n\t'twentytwentyone-child\/custom-bio-pattern',\n\tarray(\n\t\t'title'\t\t\t=&gt; __( 'Author Bio', 'twentytwentyone-child' ),\n\t\t'description'\t=&gt; _x( 'A block with 2 columns that displays an avatar image, a heading and a paragraph.', 'Block pattern description', 'twentytwentyone-child' ),\n\t\t'content'\t\t=&gt; '&lt;!-- wp:columns {\"verticalAlignment\":null} --&gt; &lt;div class=\"wp-block-columns\"&gt;&lt;!-- wp:column {\"verticalAlignment\":\"center\",\"width\":\"33.33%\"} --&gt; &lt;div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:33.33%\"&gt;&lt;!-- wp:image {\"id\":29,\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"className\":\"is-style-rounded\"} --&gt; &lt;figure class=\"wp-block-image size-large is-style-rounded\"&gt;&lt;img src=\"' . esc_url( get_stylesheet_directory_uri() ) . '\/assets\/images\/Kinsta-logo.png\" alt=\"Kinsta\" \/&gt;&lt;\/figure&gt; &lt;!-- \/wp:image --&gt;&lt;\/div&gt; &lt;!-- \/wp:column --&gt; &lt;!-- wp:column {\"width\":\"66.66%\"} --&gt; &lt;div class=\"wp-block-column\" style=\"flex-basis:66.66%\"&gt;&lt;!-- wp:heading {\"level\":4} --&gt; &lt;h4&gt;About Kinsta&lt;\/h4&gt; &lt;!-- \/wp:heading --&gt; &lt;!-- wp:paragraph --&gt; &lt;p&gt;Kinsta was founded in 2013 with a desire to change the status quo. We set out to create the best hosting platform in the world, and that\u2019s our promise. We don\u2019t settle and are here to stay.&lt;\/p&gt; &lt;!-- \/wp:paragraph --&gt;&lt;\/div&gt; &lt;!-- \/wp:column --&gt;&lt;\/div&gt; &lt;!-- \/wp:columns --&gt;',\n\t\t'categories'\t=&gt; array( 'custom-patterns' ),\n\t)\n\t);\n});<\/code><\/pre>\n<p>De bovenstaande code registreert de categorie <strong>Custom patterns<\/strong> en het patroon <strong>Author Bio<\/strong>.<\/p>\n<p>Let op de code die we voor het <code>img<\/code> element hebben gebruikt:<\/p>\n<pre><code class=\"language-php\">&lt;img src=\"' . esc_url( get_stylesheet_directory_uri() ) . '\/assets\/images\/Kinsta-logo.png\" alt=\"Kinsta\" \/&gt;<\/code><\/pre>\n<p>De <code>get_stylesheet_directory_uri()<\/code>\u00a0<a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_stylesheet_directory_uri\/\">function<\/a> geeft de URI met de map van het child-thema (de afbeelding hadden we eerder toegevoegd aan de <em>assets<\/em> map van het child-thema).<\/p>\n<p>Sla je bestanden op en maak een nieuw artikel of pagina.<\/p>\n<p>Je zou nu het nieuwe patroon moeten zien in de blok-inserter.<\/p>\n<figure id=\"attachment_83730\" aria-describedby=\"caption-attachment-83730\" style=\"width: 2306px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83730 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/custom-pattern.jpg\" alt=\"Een custom block patroon toegevoegd aan Twenty Twenty-One\" width=\"2306\" height=\"908\"><figcaption id=\"caption-attachment-83730\" class=\"wp-caption-text\">Een custom blok patroon toegevoegd aan Twenty Twenty-One<\/figcaption><\/figure>\n<h3>Customizen van een templatebestand<\/h3>\n<p>Wanneer je een nieuwe template wil aanmaken voor een specifiek archief of een enkele pagina\/artikel, dan moet je een nieuw <em>.php<\/em> template maken dat de <a href=\"https:\/\/kinsta.com\/nl\/blog\/child-thema-wordpress\/#how-wordpress-chooses-template-files\">Template Hierarchy<\/a> van WordPress volgt.<\/p>\n<p>Maar als je alleen een bestaand sjabloon (of deel van een sjabloon) wil bewerken, dan hoef je alleen maar het originele sjabloon van het parent-thema te kopi\u00ebren en te plakken op dezelfde plek binnen je child-thema (lees meer over dit onderwerp in onze <a href=\"https:\/\/kinsta.com\/nl\/blog\/child-thema-wordpress\/#the-files-in-a-wordpress-child-theme\">uitgebreide gids over child-thema&#8217;s<\/a>).<\/p>\n<p>Stel dat je de tekst &#8220;Proudly powered by WordPress&#8221; wil aanpassen. Je hebt diverse mogelijkheden om deze <a href=\"https:\/\/kinsta.com\/nl\/blog\/powered-by-wordpress-verwijderen\/\">regel tekst aan te passen of te verwijderen<\/a>. Laten we ter illustratie het handmatig aanpassen.<\/p>\n<p>Om dit te doen kopieer je het templatebestand <em>footer.php<\/em> vanuit de map van de parent en plak je dit in de root van je child-thema. Daarna open je dit nieuwe <code>footer.php<\/code> bestand van je child-thema in je code-editor en voeg je de volgende code toe:<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"powered-by\"&gt;\n\t&lt;?php\n\tprintf(\n\t\t\/* translators: %s: WordPress. *\/\n\t\tesc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),\n\t\t'&lt;a href=\"' . esc_attr__( 'https:\/\/wordpress.org\/', 'twentytwentyone' ) . '\"&gt;WordPress&lt;\/a&gt;'\n\t);\n\t?&gt;\n&lt;\/div&gt;&lt;!-- .powered-by --&gt;<\/code><\/pre>\n<p>Nu kan je de boel gaan bewerken. Stel dat je een vriendelijke webhost wil bedanken, dan pas je het <code>a<\/code> element aan, als volgt:<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"powered-by\"&gt;\n\t&lt;?php\n\tprintf(\n\t\tesc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),\n\t\t'&lt;a href=\"https:\/\/kinsta.com\/\"&gt;Kinsta&lt;\/a&gt;'\n\t);\n\t?&gt;\n&lt;\/div&gt;&lt;!-- .powered-by --&gt;<\/code><\/pre>\n<p>Om die tekst te verwijderen kan je een comment maken van het <code>div.powered-by<\/code> element, of het helemaal verwijderen:<\/p>\n<pre><code class=\"language-php\">&lt;!-- &lt;div class=\"powered-by\"&gt;\n\t&lt;?php\n\tprintf(\n\t\t\/* translators: %s: WordPress. *\/\n\t\tesc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),\n\t\t'&lt;a href=\"' . esc_attr__( 'https:\/\/wordpress.org\/', 'twentytwentyone' ) . '\"&gt;WordPress&lt;\/a&gt;'\n\t);\n\t?&gt;\n&lt;\/div&gt; --&gt;<\/code><\/pre>\n<p>En dat is het! Nu kan je op basis van deze eenvoudige voorbeelden doorgaan met ingewikkeldere aanpassingen, en je website op basis van het Twenty Twenty-One thema verder ontwikkelen.<\/p>\n\n<h2>Samenvatting<\/h2>\n<p>Twenty Twenty-One is de derde poging om mensen zonder geavanceerde technische vaardigheden te helpen om mooie, unieke websites te laten bouwen. Het is een minimalistisch en toegankelijk WordPress thema met goede prestaties, en kan voor allerlei use cases goed gebruikt worden. WordPress sites die worden aangedreven door het Twenty Twenty-One thema zijn er in alle soorten en maten. Als je wilt weten of een thema Twenty Twenty-One gebruikt, bekijk dan onze handige <a href=\"https:\/\/kinsta.com\/nl\/tools\/wordpress-theme-detector\/\">WordPress Theme Detector Tool<\/a>.<\/p>\n<p>Ontwikkeld met het oog op de Blok Editor, is het nieuwe standaardthema eenvoudig aan te passen voor zowel beginnende gebruikers als gevorderde developers.<\/p>\n<p>Nu is het jouw beurt: Heb jij het Twenty Twenty-One thema al ge\u00efnstalleerd? Wat is jouw ervaring tot nu toe? Deel het in de reacties hieronder!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Twenty Twenty-One is het nieuwe standaard WordPress thema bij WordPress 5.6. Als je een WordPress thema met allerlei vernieuwende features verwachtte, dan ben je waarschijnlijk enigszins &#8230;<\/p>\n","protected":false},"author":36,"featured_media":36386,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[28,94],"topic":[902],"class_list":["post-36376","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-wordpress","tag-wordpresstheme","topic-wordpress-themas"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Twenty Twenty-One: Een uitgebreide analyse van het nieuwe standaard WordPress thema<\/title>\n<meta name=\"description\" content=\"Het Twenty Twenty-One thema is het nieuwe standaardthema dat ge\u00efntroduceerd wordt met WordPress 5.6. Bekijk de belangrijkste functies in deze uitgebreide gids.\" \/>\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\/twenty-twenty-one-thema\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Twenty Twenty-One: Een uitgebreide analyse van het nieuwe standaard WordPress thema\" \/>\n<meta property=\"og:description\" content=\"Het Twenty Twenty-One thema is het nieuwe standaardthema dat ge\u00efntroduceerd wordt met WordPress 5.6. Bekijk de belangrijkste functies in deze uitgebreide gids.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/\" \/>\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=\"2020-12-03T12:29:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-07T07:10:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/12\/twenty-twenty-one-thema-nl.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Het Twenty Twenty-One thema is het nieuwe standaardthema dat ge\u00efntroduceerd wordt met WordPress 5.6. Bekijk de belangrijkste functies in deze uitgebreide gids.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/12\/twenty-twenty-one-thema-nl.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"27 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Twenty Twenty-One: Een uitgebreide analyse van het nieuwe standaard WordPress thema\",\"datePublished\":\"2020-12-03T12:29:27+00:00\",\"dateModified\":\"2023-06-07T07:10:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/\"},\"wordCount\":4421,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/12\/twenty-twenty-one-thema-nl.jpg\",\"keywords\":[\"WordPress\",\"wordpresstheme\"],\"articleSection\":[\"WordPress handleidingen\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/\",\"name\":\"Twenty Twenty-One: Een uitgebreide analyse van het nieuwe standaard WordPress thema\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/12\/twenty-twenty-one-thema-nl.jpg\",\"datePublished\":\"2020-12-03T12:29:27+00:00\",\"dateModified\":\"2023-06-07T07:10:33+00:00\",\"description\":\"Het Twenty Twenty-One thema is het nieuwe standaardthema dat ge\u00efntroduceerd wordt met WordPress 5.6. Bekijk de belangrijkste functies in deze uitgebreide gids.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/12\/twenty-twenty-one-thema-nl.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/12\/twenty-twenty-one-thema-nl.jpg\",\"width\":1024,\"height\":512,\"caption\":\"twenty-twenty-one-thema-nl\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress thema's\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-themas\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Twenty Twenty-One: Een uitgebreide analyse van het nieuwe standaard WordPress thema\"}]},{\"@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\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Twenty Twenty-One: Een uitgebreide analyse van het nieuwe standaard WordPress thema","description":"Het Twenty Twenty-One thema is het nieuwe standaardthema dat ge\u00efntroduceerd wordt met WordPress 5.6. Bekijk de belangrijkste functies in deze uitgebreide gids.","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\/twenty-twenty-one-thema\/","og_locale":"nl_NL","og_type":"article","og_title":"Twenty Twenty-One: Een uitgebreide analyse van het nieuwe standaard WordPress thema","og_description":"Het Twenty Twenty-One thema is het nieuwe standaardthema dat ge\u00efntroduceerd wordt met WordPress 5.6. Bekijk de belangrijkste functies in deze uitgebreide gids.","og_url":"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2020-12-03T12:29:27+00:00","article_modified_time":"2023-06-07T07:10:33+00:00","og_image":[{"width":1024,"height":512,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/12\/twenty-twenty-one-thema-nl.jpg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Het Twenty Twenty-One thema is het nieuwe standaardthema dat ge\u00efntroduceerd wordt met WordPress 5.6. Bekijk de belangrijkste functies in deze uitgebreide gids.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/12\/twenty-twenty-one-thema-nl.jpg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Carlo Daniele","Geschatte leestijd":"27 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Twenty Twenty-One: Een uitgebreide analyse van het nieuwe standaard WordPress thema","datePublished":"2020-12-03T12:29:27+00:00","dateModified":"2023-06-07T07:10:33+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/"},"wordCount":4421,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/12\/twenty-twenty-one-thema-nl.jpg","keywords":["WordPress","wordpresstheme"],"articleSection":["WordPress handleidingen"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/","url":"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/","name":"Twenty Twenty-One: Een uitgebreide analyse van het nieuwe standaard WordPress thema","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/12\/twenty-twenty-one-thema-nl.jpg","datePublished":"2020-12-03T12:29:27+00:00","dateModified":"2023-06-07T07:10:33+00:00","description":"Het Twenty Twenty-One thema is het nieuwe standaardthema dat ge\u00efntroduceerd wordt met WordPress 5.6. Bekijk de belangrijkste functies in deze uitgebreide gids.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/12\/twenty-twenty-one-thema-nl.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/12\/twenty-twenty-one-thema-nl.jpg","width":1024,"height":512,"caption":"twenty-twenty-one-thema-nl"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"WordPress thema's","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-themas\/"},{"@type":"ListItem","position":3,"name":"Twenty Twenty-One: Een uitgebreide analyse van het nieuwe standaard WordPress thema"}]},{"@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\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/nl\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/36376","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\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=36376"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/36376\/revisions"}],"predecessor-version":[{"id":47787,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/36376\/revisions\/47787"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/36376\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/36376\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/36376\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/36376\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/36376\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/36376\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/36376\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/36376\/translations\/se"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/36376\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/36386"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=36376"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=36376"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=36376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}