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