Twenty Twenty is het nieuwe standaardthema van WordPress en hoort bij de nieuwste release van WordPress 5.3. Net als zijn voorganger TwentyNineteen is Twenty Twenty speciaal gericht op Gutenberg. Er bestaat echter een groot verschil tussen beide: Twenty Twenty is niet vanuit het niets opgebouwd; het is ontworpen op basis van een bestaand thema uit de WordPress-community.
Omdat we dol zijn op alles wat met WordPress te maken heeft, hebben we eens goed gekeken naar het nieuwe Twenty Twenty-thema. We keken hiervoor onder andere naar het function.php-bestand, de stylesheet en de sjablonen.
Twenty Twenty is op moment van schrijven verre van ook maar enigszins stabiel en bovendien kampt het thema met veel onopgeloste problemen. Toch zullen we vandaag onze allereerste gedachten over het nieuwe standaard WordPress-thema met je delen.
Laten we eens goed kijken naar dit nieuwe Twenty Twenty WordPress-thema!
Korte inleiding tot het Twenty Twenty-thema
Twenty Twenty is op Chaplin gebouwd, een gratis WordPress-thema van Anders Norén, die ook Default Theme Design Lead is van WordPress 5.3.
Chaplin kan worden gedownload in de WordPress.org-bibliotheek en is volgens Anders gebouwd met de Block Editor in gedachten:
Chaplin is een WordPress-thema boordevol functies en een die jou volledige controle geeft over de lettertypen en kleuren op je site. Het is vanaf de grond af opgebouwd met de nieuwe Block Editor in het achterhoofd en maakt het gemakkelijk om mooie lay-outs te maken voor zowel artikelen als pagina’s.
Dezelfde filosofie zit achter Twenty Twenty: flexibiliteit, duidelijkheid en leesbaarheid zijn de kernwoorden voor het nieuwe thema.
Twenty Twenty wordt geleverd met een enkele kolomindeling en drie post-of paginasjablonen, met als doel WordPress-beheerders en ontwerpers de vrijheid te geven hun aangepaste lay-outs rechtstreeks in de Block Editor te creëren, door gebruik te maken van brede en volledige uitlijningen voor blokelementen zoals kolommen, afbeeldingen en het door Gutenberg 5.5 geïntroduceerde groepsblok.
Zoals Anders uitlegt:
Twenty Twenty is ontworpen met flexibiliteit als uitgangspunt. Als je het wilt gebruiken voor een organisatie of een bedrijf, kun je kolommen, groepen en media combineren met brede en volledige uitlijningen om dynamische lay-outs te creëren, zodat je met je diensten of producten kunt schitteren. Als je het voor een traditionele blog wilt gebruiken, is de gecentreerde inhoudskolom daar ook perfect voor.
Daarnaast komt Twenty Twenty met een nieuw lettertype: Inter. Het is een gratis en opensource lettertypefamilie, speciaal ontworpen door Rasmus Andersson voor de leesbaarheid van tekst in een combinatie van hoofdletters en kleine letters, vooral met kleine lettergroottes.
Inter geeft een sterkere persoonlijkheid aan grote kopteksten, maar je zult er het meeste uit halen wanneer je het gebruikt met afwisselende tekstgroottes, zoals getoond in het themavoorbeeld van het WordPress.org-blogpost:
Twenty Twenty is een meer dan volledig uitgerust thema; het is een thema dat een belangrijke nieuwe stap zet in de richting waar WordPress als bewerkingsinterface naartoe wil. Twenty Twenty stoelt in wezen op de Block Editor voor het bewerken en opmaken van de inhoud en op de Theme Customizer voor de koptekst, voettekst en aanvullende aanpassingen.
Het is nu tijd om dit WordPress-thema te installeren en uit te voeren.
Twenty Twenty installeren
Het aankomende standaardthema volgt het releaseplan van WordPress 5.3. Dit betekent dat op het moment van schrijven Twenty Twenty nog steeds niet beschikbaar is om te downloaden in de WordPress Theme Directory.
Hoe dan ook, je kunt een lopende versie van Twenty Twenty op GitHub vinden en deze installeren in de huidige stabiele versie van WordPress en in WordPress 5.3. De Github-opslagplaats zal overigens worden opgeheven zodra het thema bij de kern is gevoegd. Ondertussen kun je de volgende datums uit het release-schema van WordPress 5.3 in de gaten houden:
- 23 september 2019: Beta 1
- 30 september 2019: Beta 2
- 7 oktober 2019: Beta 3
- 15 oktober 2019: Release kandidaat 1
- 22 oktober 2019: Release kandidaat 2
- 29 oktober 2019: Release kandidaat 3
- 5 november 2019: Release kandidaat 4 (indien nodig)
- 12 november 2019: Streefdatum voor de release van WordPress 5.3.
Volg de onderstaande stappen om met Twenty Twenty te beginnen:
- Download het ZIP-pakket van GitHub.
- Upload het ZIP-bestand naar je testomgeving in het WordPress-dashboard of via
- Blader naar Weergave → Thema’sen klik op de knop Activeren in de voorbeeldafbeelding van het thema.
- Ga naar Weergave → Customizerom Twenty Twenty in te stellen.
Dat is het dan! Nu kun je beginnen met het uitvoeren van je tests op je tijdelijke website of binnen je lokale omgeving.
Nu je klaar bent om te beginnen, gaan we verder en duiken in het Twenty Twenty WordPress-thema.
Twenty Twenty’s themafuncties
Twenty Twenty is geen volledig uitgerust WordPress-thema, maar een beperkt en minimaal thema met als doel ontwikkelaars en sitebeheerders de vrijheid te geven om aangepaste inhoudsindelingen voor hun posts en pagina’s te bouwen. Net als TwentyNineteen is Twenty Twenty gebouwd voor Gutenberg en hangt die grotendeels af van de levenscyclus van Gutenberg (meer over dit onderwerp in deze video van Matt Mullenweg op WCEU 2019).
Het thema ondersteunt een aantal themafuncties, zoals inhoudsbreedte (580), automatische feedkoppelingen, artikel-thumbnails, titeltags en sommige HTML5-elementen (zoekformulier, opmerkingenformulier, opmerkingenlijst, galerij en bijschrift).
Andere functies voegen opties toe aan de Theme Customizer. Dit zijn onder andere aangepaste achtergronden en aangepast logo. De codefragmenten hieronder vertonen deze functies al ingeschakeld in het functiebestand van het thema:
// Custom background color
add_theme_support(
'custom-background',
array(
'default-color' => 'F5EFE0'
)
);// Custom logo
add_theme_support(
'custom-logo',
array(
'height' => 240,
'width' => 320,
'flex-height' => true,
'flex-width' => true,
'header-text' => array( 'site-title', 'site-description' ),
)
);
Twenty Twenty ondersteunt ook enkele specifieke functies van Gutenberg. Ten eerste ondersteunt het thema brede en volledige breedte-uitlijningen:
// Add support for full and wide align images.
add_theme_support( 'align-wide' );Het kleurenpalet van de editor wordt ingeschakeld wanneer de gebruiker een accentkleur heeft ingesteld in de Customizer (standaard ingeschakeld):
// If we have accent colors, add them to the block editor palette
if ( $editor_color_palette ) {
add_theme_support( 'editor-color-palette', $editor_color_palette );
}
Het thema Twenty Twenty wordt geleverd met vier lettertypegroottes in de editor die allemaal beschikbaar zijn in de Block Editor:
// Gutenberg Font Sizes
add_theme_support( 'editor-font-sizes', array(
array(
'name' => _x( 'Small', 'Name of the small font size in Gutenberg', 'twentytwenty' ),
'shortName' => _x( 'S', 'Short name of the small font size in the Gutenberg editor.', 'twentytwenty' ),
'size' => 16,
'slug' => 'small',
),
array(
'name' => _x( 'Regular', 'Name of the regular font size in Gutenberg', 'twentytwenty' ),
'shortName' => _x( 'M', 'Short name of the regular font size in the Gutenberg editor.', 'twentytwenty' ),
'size' => 18,
'slug' => 'regular',
),
array(
'name' => _x( 'Large', 'Name of the large font size in Gutenberg', 'twentytwenty' ),
'shortName' => _x( 'L', 'Short name of the large font size in the Gutenberg editor.', 'twentytwenty' ),
'size' => 24,
'slug' => 'large',
),
array(
'name' => _x( 'Larger', 'Name of the larger font size in Gutenberg', 'twentytwenty' ),
'shortName' => _x( 'XL', 'Short name of the larger font size in the Gutenberg editor.', 'twentytwenty' ),
'size' => 32,
'slug' => 'larger',
),
) );
En dat is het dan. Het thema is vrij minimaal, ook qua functionaliteit, maar het is gemakkelijk uit te breiden met een child-thema, en we zullen het daar zo meteen over hebben.
Het uiterlijk van Twenty Twenty aanpassen
Twenty Twenty komt zonder toeters en bellen, maar biedt grote flexibiliteit bij gebruik in combinatie met Gutenberg (of met een goede paginabouwer).
Het thema Twenty Twenty aanpassen
The Site Identity handles site title and tagline, logo, and icon. You can enable/disable all these elements in the Site Identity section of the Customizer:
In het gedeelte van de Cover Template van de Customizer worden de aanpassingsinstellingen voor de Cover Template-pagina behandeld. Daar vind je:
- Een optie om een parallax-effect op de achtergrondafbeelding in te schakelen (vaste achtergrondafbeelding).
- Kleurkiezers om je aangepaste achtergrondkleur en tekstkleur in te stellen voor de aanbevolen beeldoverlay.
- Een schuifregelaar om de dekking van de overlay te regelen.
De sectie Menus biedt vijf menulocaties. Je kunt een normaal horizontaal menu aan de header toevoegen (Desktop Horizontal Menu) en/of een in- en uitklapbaar navigatiemenu (Desktop Expanded Menu). Het Mobile Menu is een menu dat alleen op mobiele apparaten te zien is en het Footer Menu en het Social Menu bevinden zich in de footer van de pagina.
De voettekst verwerkt de locaties van het Footer Menu en het Social Menu tezamen met twee andere widgetgebieden. De volgende afbeelding toont de voettekst van het thema met alle elementen op hun plaats:
Ten slotte kun je in het gedeelte Additional CSS je aangepaste stijlen opnemen.
Artikel/paginasjablonen
Wanneer het gaat om post- en paginalay-outs, kun je kiezen uit drie verschillende sjablonen. Naast het standaardsjabloon biedt Twenty Twenty een omslagsjabloon (Cover Template) en een sjabloon voor de volledige breedte (Full Width Template), waarmee je het uiterlijk van je inhoud kunt aanpassen.
De Block Editor in Twenty Twenty
Vanwege de minimale aanpak is het uiterlijk van Twenty Twenty grotendeels afhankelijk van de Block Editor. We voeren onze tests uit op Twenty Twenty met Gutenberg-versie 6.4.0. Deze versie biedt een groot aantal nieuwe functies, verbeteringen en bugfixes die de bewerkingservaring aanzienlijk hebben verbeterd.
Sommige blokken zijn vooral handig bij het bouwen van websites met maar één pagina. Blokken zoals Media & Text en Cover zijn verbeterd en zien er nu fantastisch uit wanneer het aankomt op het presenteren van producten en/of professionele portfolio’s:
Omdat Gutenberg “werk in uitvoering” is, wil je misschien enkele van de meest populaire plugins bekijken waarmee je meer blokken aan de editor kunt toevoegen.
Hier heb je een korte lijst met plugins die het proberen waard zijn:
Theme Customizer en Block Editor werken heel goed wanneer het gaat om uiterlijk en lay-outaanpassing, maar een child-thema kan je meer controle geven over het uiterlijk van je pagina’s.
Hoe maak je een child-thema voor het Twenty Twenty-thema
Het bouwen van child-thema’s voor WordPress kan handig zijn en is ook een goede manier om een carrière te starten als een WordPress-thema-ontwikkelaar. Twenty Twenty kan een geweldig parent-thema zijn bij het bouwen van child-thema’s in WordPress. Misschien is het iets voor je? 😉
Als je niet weet waar je moet beginnen wat betreft child-thema’s, bekijk dan onze uitgebreide gids over het maken van een child-thema in WordPress.
Laten we nu ons eerste child-thema bouwen voor Twenty Twenty!
Maak een nieuwe map onder wp-content/themes en noem deze zoiets als twentytwenty-child, of wat je maar te binnen schiet.
Blader naar wp-content/themes/twentytwenty-child en maak een nieuw style.css-bestand met de volgende kop:
/*
Theme Name: My Twenty Twenty Child Theme
Theme URI: https://example.com
Description: A child theme for Twenty Twenty.
Author: Your Name
Author URI: https://example.com/
Template: twentytwenty
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/Vervolgens moeten we het opmaakmodel van het bovenliggende thema opnemen. Maak in dezelfde map het volgende functies.php-bestand:
<?php
/* enqueue scripts and style from parent theme */
function twentytwenty_styles() {
wp_enqueue_style( 'parent', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twentytwenty_styles');Ga nu naar Weergave → Thema’s en activeer je onderliggend thema. Je kunt nu beginnen met je aanpassingen.
Je kunt bijna alles in Twenty Twenty wijzigen, van het toevoegen van aangepaste sjablonen, tot het toevoegen van aangepaste stijlen of het wijzigen van de standaardstijlen van het thema.
Hier zal ik je laten zien hoe je een nieuwe aangepaste sjabloon voor enige posts en pagina’s kunt maken.
Een aangepast post- of paginasjabloon toevoegen in Twenty Twenty
We hebben nu een child-thema voor Twenty Twenty gemaakt en de bovenliggende stijlen aan het opmaakmodel van dit child-thema toegevoegd. In het onderstaande voorbeeld verwijderen we de koptekst en voettekst, en maken we ruimte voor de hoofdtekst van de pagina in een post- of paginasjabloonbestand.
Stap 1
Kopieer en plak de volgende bestanden van het parent-thema in de map van het onderliggend thema:
- template-full-width.php
- header.php
- footer.php
Stap 2
Hernoem template-full-width.php naar template-canvas.php (of wat je maar wilt). Open het bestand, verwijder de huidige inhoud en plak het volgende:
<?php
/*
Template Name: Canvas Template
Template Post Type: post, page
*/
get_template_part( 'singular' );Template Name stelt de naam van het sjabloonbestand in zoals je het in de Block Editor ziet, terwijl Template Post Type de posttypen definieert die dit sjabloonbestand ondersteunen. De functie get_template_part laadt het bestand singular.php vanuit het parent-thema (we hebben dus geen kopie van dit bestand nodig in ons onderliggend thema).
Ga naar het WordPress-dashboard en maak een nieuw bericht. Je zou nu een extra paginasjabloon moeten vinden in het gedeelte Post attributes.
Stap 3
En nu komt het leuke gedeelte. Open header.php in je favoriete teksteditor en plaats het header -element in de volgende if -instructie:
<?php
if ( is_singular() && ! is_page_template( array( 'template-canvas.php' ) ) ) {
?>
<header id="site-header" class="header-footer-group" role="banner">
...
</header><!-- #site-header -->
<?php
// Output the menu modal
get_template_part( 'template-parts/modal-menu' );
}Deze code controleert of de huidige pagina een bericht, pagina, of aangepast bericht is en of de paginasjabloon geen template-canvas.php is. Als de paginasjabloon template-canvas.php is, bevat deze niet de siteheader en het modale menu.
Op dezelfde manier kunnen we de voettekst van een postpagina verwijderen wanneer de actieve paginasjabloon onze canvas is. Voeg gewoon dezelfde voorwaarde toe in footer.php zoals hieronder getoond:
<?php
if ( is_singular() && ! is_page_template( array( 'template-canvas.php' ) ) ) {
?>
<footer id="site-footer" role="contentinfo" class="header-footer-group">
...
</footer><!-- #site-footer -->
<?php } ?>
<?php wp_footer(); ?>
</body>
</html>U kunt de code van dit voorbeeld hier downloaden.
Maak nu een nieuwe post of pagina, selecteer de Canvas-sjabloon in Post/Page attributes en controleer de pagina door er als normale bezoeker naartoe te gaan.
Samenvatting
Twenty Twenty is een minimalistisch WordPress-thema met een lay-out bestaande uit een enkele kolom. De manier waarop we dit thema zullen inzetten hangt vooral af van hoe de Block Editor zich ontwikkelt. Zoals Anders uitdrukkelijk zegt:
“De belofte van de Block Editor is om gebruikers de vrijheid te geven hun sites naar eigen inzicht te ontwerpen en te structureren.”
Na Twenty Nineteen is het nieuwe standaardthema van Twenty Twenty de tweede in een nieuwe generatie thema’s met als doel “het bouwen van websites mogelijk te maken zonder handmatige codebewerking”. WordPress sites die worden aangedreven door het Twenty Twenty thema zijn er in alle soorten en maten. Als je wil weten of een thema Twenty Twenty gebruikt, gebruik dan onze handige WordPress Theme Detector Tool.
Als je denkt dat Gutenberg nog steeds niet volledig betrouwbaar is voor je projecten, kun je de benodigde blokken toevoegen met plugins zoals eerder vermeld. Of je kunt simpelweg een externe paginabouwer gebruiken.
Nu is het jouw beurt: installeer het nieuwe standaard WordPress-thema, speel ermee en laat ons weten wat je ervan vindt, hier in de reacties!
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.
Dank voor deze uitleg. Ik vind het jammer dat de header niet meer aanpasbaar is om de hoogte aan te passen of er bijvoorbeeld een foto in te plaatsen. Verhoudingsgewijs is de header veel te hoog. Hij neemt veel van de ruimte op het scherm weg. Ook vind ik de pagina titels ENORM op je af komen. Dit kan ik ook niet wijzigen? En de kleur van de linken in het menu kan ik ook niet veranderen. Jammer. Het lijkt verder wel een leuk thema, maar de bewerkingen die je kunt doen zijn te beperkt.
Hoi Tonny,
Jammer dat het thema niet gelijk optimaal voor je is! Gelukkig zijn dit allemaal zaken die je met CSS code kunt bewerken waardoor je het thema aan jouw wensen kunt aanpassen onder Customizer –> Extra CSS. Dit kun je zelf doen of een web designer inhuren!