Twenty Twenty-Four is het gloednieuwe standaard WordPress thema dat wordt meegeleverd met de volgende WordPress 6.4 release.
Het idee achter Twenty Twenty-Four is dat van een standaardthema dat geschikt is voor elk soort site, ongeacht het onderwerp van de site. Het thema is afgestemd op drie gebruikssituaties: eigenaren van kleine bedrijven, fotografen en kunstenaars, en schrijvers en bloggers.
Twenty Twenty-Four is meer dan een thema: het is een verzameling templates en patterns waarmee je, gecombineerd, een grote verscheidenheid aan websites kunt bouwen. Als zodanig kun je Twenty Twenty-Four beschouwen als een multifunctioneel thema, hoewel het een absoluut minimaal thema is.
Zoals je kunt verwachten, is Twenty Twenty-Four een blokthema dat volledig compatibel is met alle geweldige dingen die met WordPress 6.4 komen, inclusief het Details blok en verticale tekst.
Na deze korte intro van het nieuwe WordPress standaardthema zullen we in dit artikel de vele templates, patterns en stijlen verkennen om je te laten zien hoe je een aantrekkelijke, responsieve, bruikbare en toegankelijke website kunt bouwen met Twenty Twenty-Four.
Start nu de Site Editor, cijfer Cmd + k en voer Templates in.
Het Twenty Twenty-Four WordPress thema
Twenty Twenty-Four geeft ons een perfect voorbeeld van een WordPress blokthema. Als je de themamap in je WordPress installatie opent, vind je een uiterst eenvoudig functions.php bestand, dat als enige doel heeft om een handvol stylesheets voor specifieke blokken te laden.
Het Twenty Twenty-Four function bestand is een goed voorbeeld van hoe je een thema kunt optimaliseren door ervoor te zorgen dat specifieke bronnen alleen worden ingesloten als ze nodig zijn. De volgende code roept het stylesheet button-outline.css alleen op als er een knop op de pagina staat:
if ( ! function_exists( 'twentytwentyfour_block_styles' ) ) :
/**
* Register custom block styles
*
* @return void
* @since Twenty Twenty-Four 1.0
*
*/
function twentytwentyfour_block_styles() {
/**
* The wp_enqueue_block_style() function allows us to enqueue a stylesheet
* for a specific block. These will only get loaded when the block is rendered
* (both in the editor and on the front end), improving performance
* and reducing the amount of data requested by visitors.
*
* See https://make.wordpress.org/core/2021/12/15/using-multiple-stylesheets-per-block/ for more info.
*/
wp_enqueue_block_style(
'core/button',
array(
'handle' => 'twentytwentyfour-button-style-outline',
'src' => get_template_directory_uri() . '/assets/css/button-outline.css',
'ver' => wp_get_theme()->get( 'Version' ),
)
);
}
...
endif;Het thema biedt geen functionaliteit aan je WordPress website en je bent volledig afhankelijk van plugins om gedrag aan je pagina’s toe te voegen. Dus het functions.php bestand van Twenty-Four zorgt alleen voor het oproepen van specifieke stylesheets voor specifieke blokken.
Als we verder gaan met onze verkenning van de Twenty Twenty-Four themamap, zie je dat het style.css bestand alleen een header bevat met de details die nodig zijn om het thema goed te laten werken en geen CSS blokken bevat:
/*
Theme Name: Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentyfour
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile, and applicable to any website. Its collection of templates and patterns is tailored to different needs, such as presenting a business, blogging, and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full-page designs to help speed up the site-building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.2
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/Je vindt er ook een map met de naam assets, die een map met fonts bevat, een set images en een map css, die de stylesheet button-outline.css bevat.
De standaardstijl van Twenty Twenty-Four gebruikt twee lettertypen: Cardo voor koppen en Inter voor andere tekstelementen.
De lettertypefamilies Jost en Instrument Sans zijn ook beschikbaar en worden gebruikt in een paar stijlvariaties.
Hieronder vind je vier mappen met waar het Twenty Twenty-Four standaardthema om draait:
- styles
- patterns
- parts
- templates
Global styles
Twenty Twenty-Four wordt geleverd met een set van zes verschillende combinaties van stijlvariaties. Je kunt elke stijl verkennen in de sectie Styles van de Site Editor of in het paneel Browse styles in de bewerkingsmodus.
De standaardstijl wordt gedefinieerd in de theme.json en wordt geleverd met 11 kleuren, 12 kleurverlopen, 5 duotone kleurencombinaties en twee lettertypefamilies: Inter voor de inhoud en Cardo voor de koppen.
Elke variatie voegt specifieke stijlcombinaties toe.
Op het moment van schrijven heeft Twenty Twenty-Four de volgende stijlvariaties:
Ice: Deze variatie lijkt erg op de standaardstijl. Het gebruikt hetzelfde standaard kleurenpalet met een systeemlettertype voor koppen en Inter voor de body.
Milky: Deze variatie wordt geleverd met dezelfde standaard lettertypefamilies, maar met een ander kleurenpalet.
Mint: Mint voegt een variatie toe in zowel kleurenpalet als lettertypefamilies. Het gebruikt Instrument Sans voor koppen en Jost voor de body.
Onyx: Dit is de donkere versie van de standaardstijl. Het voegt een aangepast palet, kleurverlopen en duotooncombinaties toe.
Rust: Rust gebruikt een aangenaam kleurenpalet. De typografie is gebaseerd op de standaard lettertypefamilies, maar met verschillende lettergroottes.
Sandstorm: Deze variatie verandert verschillende elementen van de standaardstijl. Sandstorm definieert een 11-kleurenpalet, gebruikt Instrument Sans en Jost lettertypefamilies en past het uiterlijk van verschillende blokken en HTML elementen aan.
Templates
Twenty Twenty-Four wordt geleverd met elf ingebouwde templates. Je kunt de bijbehorende bestanden vinden in de templates map van de themamap:
- single.html
- single-with-sidebar.html
- search.html
- page.html
- page-with-sidebar.html
- page-wide.html
- page-no-title.html
- index.html
- home.html
- archive.html
- 404.html
Je kunt de lijst met templates voor je aanpassingen bekijken in het gedeelte Templates van de Site Editor.
Nogmaals, als je diep in de code van de Twenty Twenty-Four templates wilt duiken, hoef je er maar een of twee te openen in je favoriete code-editor. Het is geen verrassing dat elk templates een of meer patterns bevat. Dit bewijst opnieuw dat Twenty Twenty-Four min of meer een verzameling patterns is.
Neem bijvoorbeeld index.html en open het in je editor. Je zou de volgende code moeten zien:
<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">
<!-- wp:template-part {"slug":"header"} /-->
</div>
<!-- /wp:group -->
<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">
<!-- wp:heading {"level":1,"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} -->
<h1 class="wp-block-heading alignwide" style="padding-top:var(--wp--preset--spacing--50)">Posts</h1>
<!-- /wp:heading -->
<!-- wp:pattern {"slug":"twentytwentyfour/posts-three-columns"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->Het template begint met een div dat het header template part bevat. Een main element met een header en het posts-three-columns pattern produceert de body, terwijl het footer template part de onderkant van de pagina bouwt.
Laten we nu index.html vergelijken met archive.html:
<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">
<!-- wp:template-part {"slug":"header"} /-->
</div>
<!-- /wp:group -->
<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">
<!-- wp:query-title {"type":"archive","align":"wide","style":{"typography":{"lineHeight":"1"},"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} /-->
<!-- wp:pattern {"slug":"twentytwentyfour/posts-three-columns"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->Je zult zien dat de twee templates erg op elkaar lijken. Het enige verschil is dat archive.html een Archive titelblok gebruikt in plaats van een H1 element. Beide templates gebruiken een posts-three-columns pattern om de inhoud van de pagina te genereren.
Als je overschakelt van je HTML editor naar de WordPress site editor, kun je de templates van het thema bekijken en aanpassen. De afbeelding hieronder toont het Archive template in de bewerkingsmodus.
Als je tevreden bent met je wijzigingen, klik je op Save in de rechterbovenhoek. Dit toont een nieuw paneel waar je je wijzigingen kunt bevestigen of ze kunt negeren. Klik nogmaals op Save en je bent klaar.
Template parts en patterns
Je kunt patterns en template parts vinden in twee verschillende mappen van de twentytwentyfour map. De patterns map bevat +50 patterns, terwijl de parts map zes template parts bevat.
In de Site Editor zijn template parts en patterns allemaal opgenomen in dezelfde Patterns sectie.
Twenty Twenty-Four biedt verschillende patterns die je kunt gebruiken om de hele pagina op te bouwen. Dit vereenvoudigt de bewerkingsworkflow en stelt je in staat om je hele website op te bouwen met weinig aanpassingen.
Voorbeelden zijn de patterns van de Home pagina, About pagina en Portfolio Overview pagina die zijn opgenomen in de About patterncategorie.
Stel bijvoorbeeld dat je een About pagina wilt maken. Dankzij het About pattern in Twenty Twenty-Four kun je een nieuwe pagina maken en eenvoudig het pattern kiezen uit de Block Inserter.
Het About pattern levert de hele paginalayout en je hoeft alleen je aanpassingen toe te voegen, door blokken, afbeeldingen en tekst toe te voegen of te wisselen op basis van je behoeften. En als je je afvraagt wat er gebeurt met de structuur van je pagina als je het thema verandert, is het antwoord… helemaal niets. Zodra het pattern in je pagina is opgenomen, wordt het part van de inhoud en wordt het opgeslagen in de post tabel van de WordPress database.
.
Als je naar beneden scrolt in het Patterns navigatiemenu, vind je de sectie Template parts, met daarin de menu-items Header, Footer en General. Elk item is de ingang naar de corresponderende categorie template parts. Twenty Twenty-Four biedt één header, drie footers en twee algemene template parts.
Maar als je de temlate parts van Twenty-Four opent in je favoriete code-editor, zul je zien dat de meeste gewoon een pattern bevatten. Neem bijvoorbeeld het Sidebar template part:
<!-- wp:pattern {"slug":"twentytwentyfour/sidebar"} /-->Dit template part bevat het Sidebar pattern. Je zult dit pattern niet terugvinden in de Patterns sectie van de Site Editor, omdat het een verborgen pattern is. Als je in de code wilt duiken, ga dan naar de map patterns van het thema, zoek het bestand hidden-sidebar.php en open het in je code editor.
De header van dit bestand bevestigt dat het een verborgen pattern is en niet toegankelijk is via de Block Inserter:
<?php
/**
* Title: sidebar
* Slug: twentytwentyfour/sidebar
* Categories: hidden
* Inserter: no
*/
?>Samenvatting
Als je op zoek bent naar een multifunctioneel thema vol features en speciale effecten, dan is Twenty Twenty-Four niet het thema voor jou.
Het nieuwe standaard WordPress thema is licht, flexibel en heeft geen toeters en bellen, en het is volledig te beheren vanuit de Site Editor.
Met Twenty Twenty-Four hoef je geen enkele regel code aan te raken en het vereist geen configuratie. Om een site te maken met Twenty Twenty-Four hoef je alleen maar de templates aan te passen vanuit de site-editor en een of meer patterns te kiezen om de pagina’s van je site mee te vullen.
In de kern is Twenty Twenty-Four een verzameling patterns. Het weerspiegelt de nieuwe benadering van het bouwen van sites en biedt een geweldig voorbeeld van hoe je blokthema’s kunt bouwen.
Nu is het aan jou. Heb je Twenty Twenty-Four geïnstalleerd in je ontwikkelomgeving? Bevalt de nieuwe benadering van het bouwen van WordPress sites je? Laat hieronder in de comments weten wat je ervan vindt.
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.
Laat een reactie achter