Twenty Twenty-Four è il nuovissimo tema predefinito di WordPress che verrà distribuito con la prossima versione di WordPress 6.4.

L’idea alla base di Twenty Twenty-Four è quella di un tema predefinito adatto a qualsiasi tipo di sito, indipendentemente dall’argomento trattato. Il tema è stato pensato per tre casi d’uso: piccoli imprenditori, fotografi e artisti, scrittori e blogger.

Più che un tema, Twenty Twenty-Four è una raccolta di template e pattern che, combinati insieme, permettono di creare un’ampia varietà di siti web. Per questo motivo, potete considerare Twenty Twenty-Four un tema multiuso, anche se si tratta di un tema assolutamente minimalista.

Come potete immaginare, Twenty Twenty-Four è un tema a blocchi pienamente compatibile con tutte le novità di WordPress 6.4, tra cui il blocco dettagli e il testo verticale.

Fatta questa rapida introduzione al nuovo tema predefinito di WordPress, in questo articolo esploreremo i numerosi template, i pattern e gli stili per mostrarvi come costruire un sito web gradevole, reattivo, usabile e accessibile con Twenty Twenty-Four.

Ora, avviate l’Editor del sito, digitate Cmd + k e scrivete Templates.

Lanciare i template in WordPress 6.4
Lanciare i template in WordPress 6.4

Il tema WordPress Twenty Twenty-Four

Twenty Twenty-Four ci offre un perfetto esempio di tema a blocchi per WordPress. Accedendo alla cartella del tema nell’installazione di WordPress, troverete un file functions.php estremamente semplice, il cui unico scopo è quello di richiamare una manciata di fogli di stile per blocchi specifici.

Il file functions di Twenty Twenty-Four è un buon esempio di come ottimizzare un tema assicurandosi che determinate risorse vengano incorporate solo quando sono necessarie. Il codice seguente richiede il foglio di stile button-outline.css solo quando un pulsante è presente nella pagina:

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;

Il tema non fornisce alcuna funzionalità al sito e dovrete affidarci completamente ai plugin per aggiungere comportamento alle pagine. Quindi il file functions.php di Twenty Twenty-Four si occupa solo di accodare fogli di stile specifici per blocchi specifici.

Continuando la nostra esplorazione della cartella del tema Twenty Twenty-Four, noterete che il file style.css include solo un’intestazione con i dati necessari al corretto funzionamento del tema e non contiene alcun blocco CSS:

/*
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
*/

Troverete anche una cartella assets, che contiene una cartella di font, una serie di immagini e una cartella css, che include il foglio di stile button-outline.css.

Lo stile predefinito di Twenty Twenty-Four utilizza due font: Cardo per i titoli e Inter per gli altri elementi di testo.

Anteprima del font Cardo su Google Fonts
Anteprima del font Cardo su Google Fonts

Sono disponibili anche le famiglie di font Jost e Instrument Sans, utilizzate in un paio di varianti di stile.

A seguire, troverete quattro cartelle che contengono il vero succo del tema predefinito Twenty Twenty-Four:

  • styles
  • patterns
  • parts
  • templates

Stili globali

Sezione Stili di Twenty Twenty-Four
Sezione Stili di Twenty Twenty-Four

Twenty Twenty-Four è dotato di una serie di sei diverse combinazioni di stili. È possibile esplorare ogni stile nella sezione Stili dell’Editor del sito o nel pannello Sfoglia stili in modalità di modifica.

Pannello degli stili di Twenty Twenty-Four
Pannello degli stili di Twenty Twenty-Four

Lo stile predefinito è definito nel theme.json e prevede 11 colori, 12 gradienti, 5 combinazioni di colori duotone e due famiglie di font: Inter per il corpo del contenuto e Cardo per le intestazioni.

Gradienti e duotoni predefiniti di Twenty Twenty-Four
Gradienti e duotoni predefiniti di Twenty Twenty-Four

Ogni variante aggiunge combinazioni di stile specifiche.

Al momento in cui scriviamo, Twenty Twenty-Four è dotato delle seguenti varianti di stile:

Ice: Questa variante è piuttosto simile allo stile predefinito. Utilizza la stessa palette di colori predefinita con un font di sistema per le intestazioni e Inter per il corpo.

Variazione dello stile Ice di Twenty Twenty-Four
Variazione di stile di Twenty Twenty-Four Ice

Milky: questa variante presenta le stesse famiglie di font predefinite ma con una palette di colori diversa.

Palette dei colori di Milky in Twenty Twenty-Four
Palette dei colori di Twenty Twenty-Four Milky

Mint: Mint aggiunge una variazione sia nella palette dei colori che nelle famiglie di caratteri. Utilizza Instrument Sans per le intestazioni e Jost per il corpo.

La variante Mint cambia la famiglia di font e la palette di colori
La variante Mint cambia la famiglia di font e la palette di colori

Onyx: è la versione dark dello stile predefinito. Aggiunge una palette personalizzata, gradienti e combinazioni di toni.

Gradienti e combinazioni di duotoni di Onyx
Gradienti e combinazioni di toni Onyx

Rust: Rust utilizza una gradevole palette di colori. La tipografia si basa sulle famiglie di font predefinite ma con dimensioni diverse.

Variazione dello stile Twenty Twenty-Four Rust
Variazione dello stile Twenty Twenty-Four Rust

Sandstorm: Questa variante modifica diversi elementi dello stile predefinito. Sandstorm definisce una palette di 11 colori, utilizza le famiglie di font Instrument Sans e Jost e personalizza l’aspetto di diversi blocchi ed elementi HTML.

La palette dei colori di Sandstorm
La palette dei colori di Sandstorm

Template

Template di Twenty Twenty-Four nell'editor del sito
Template di Twenty Twenty-Four nell’editor del sito

Twenty Twenty-Four è dotato di undici template integrati. Troverete i file corrispondenti nella cartella templates della directory del tema:

  • single.html
  • singolo-con-sidebar.html
  • search.html
  • pagina.html
  • pagina-con-sidebar.html
  • pagina-ampia.html
  • pagina-senza-titolo.html
  • index.html
  • home.html
  • archivio.html
  • 404.html

Potete accedere all’elenco dei template nella sezione Template dell’Editor del sito.

Anche in questo caso, se volete approfondire il codice dei modelli di Twenty Twenty-Four, vi basterà aprire uno o due di essi nel vostro editor di codice preferito. Non c’è da sorprendersi se ogni template include uno o più template. Questo dimostra ancora una volta che Twenty Twenty-Four è più o meno una raccolta di template.

Prendete ad esempio index.html e apritelo nel vostro editor. Dovreste vedere il seguente codice:

<!-- 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"} /-->

Il template inizia con un elemento div che include la parte del template header. Un elemento main con un titolo e il template posts-three-columns produce il corpo, mentre la parte del template footer costruisce la parte inferiore della pagina.

Ora confrontiamo index.html con 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"} /-->

Noterete che i due template sono molto simili. L’unica differenza è che archive.html utilizza un blocco Archive title invece di un elemento H1. Entrambi i template utilizzano il pattern posts-three-columns per generare il contenuto della pagina.

Passando dall’editor HTML all’editor del sito WordPress, potete visualizzare l’anteprima e personalizzare i template del tema. L’immagine seguente mostra il template Archive in modalità di modifica.

Modifica del template Archive di Twenty Twenty-Four
Modifica del template Archive di Twenty Twenty-Four

Una volta soddisfatti delle modifiche, clicchate su Salva nell’angolo in alto a destra. Verrà visualizzato un nuovo pannello in cui potrete confermare le modifiche o eliminarle. Cliccate nuovamente su Salva e il gioco è fatto.

Parti di template e pattern

Pattern di Twenty Twenty-Four
Pattern di Twenty Twenty-Four

Trovate i pattern e le parti di template in due diverse cartelle della directory twentytwentyfour. La cartella dei pattern comprende oltre 50 pattern, mentre la cartella delle parti comprende sei parti di template.

Nell’Editor del sito, le parti di template e i pattern sono tutti inclusi nella stessa sezione Pattern.

Twenty Twenty-Four fornisce diversi pattern che potete utilizzare per costruire l’intera pagina. Questo semplifica il lavoro di editing e permette di costruire l’intero sito web con poche personalizzazioni.

Alcuni esempi sono i pattern Home page, About page e Portfolio Overview Page elencati nella categoria About dei pattern.

Pattern di pagine complete in Twenty Twenty-Four
Pattern di pagine complete in Twenty Twenty-Four

Supponiamo, ad esempio, che volete creare una pagina About. Grazie al pattern About di Twenty Twenty-Four, potete creare una nuova pagina e scegliere semplicemente il pattern dal block inserter.

Aggiungere un pattern a una pagina vuota con Twenty Twenty-Four
Aggiungere un pattern a una pagina vuota con Twenty Twenty-Four

Il pattern About fornisce l’intero layout della pagina e sarà necessario solo aggiungere le personalizzazioni, aggiungendo o cambiando blocchi, immagini e testo in base alle proprie esigenze. E se vi steste chiedendo cosa succede alla struttura della pagina cambiando il tema, la risposta è assolutamente nulla. Una volta inserito nella pagina, il pattern diventa parte del contenuto e viene memorizzato nella tabella dei post del database di WordPress.

Anteprima di un pattern di Twenty Twenty-Four con il tema Twenty Twenty-Three
Anteprima di un pattern di Twenty Twenty-Four con il tema Twenty Twenty-Three

Scorrendo il menu di navigazione dei pattern, troverete la sezione Template Parts, che comprende le voci di menu Header, Footer e General. Ogni voce è il punto di accesso alla corrispondente categoria di parte di template. Twenty Twenty-Four offre un’header, tre footer e due parti di template generiche.

I pattern e le parti di template di Twenty Twenty-Four nell'Editor del sito
I pattern e le parti di template di Twenty Twenty-Four nell’Editor del sito

Ma se aprite i template di Twenty Twenty-Four nel vostro editor di codice preferito, vedrete che la maggior parte di questi include semplicemente un pattern. Prendete ad esempio la parte di template Sidebar:

<!-- wp:pattern {"slug":"twentytwentyfour/sidebar"} /-->

Questa parte di template include semplicemente il pattern Sidebar. Non troverete questo pattern nell’elenco della sezione Pattern dell’Editor del sito perché è un pattern nascosto. Se volete studiarne il codice, andate nella cartella dei pattern del tema, cercate il file hidden-sidebar.php e apritelo nell’editor di codice.

L’header di questo file conferma che si tratta di un pattern nascosto e che non è accessibile tramite il block inserter:

<?php
/**
 * Title: sidebar
 * Slug: twentytwentyfour/sidebar
 * Categories: hidden
 * Inserter: no
 */
?>

Riepilogo

Se state cercando un tema multifunzionale ricco di funzioni ed effetti speciali, Twenty Twenty-Four non è il tema che fa per voi.

Il nuovo tema predefinito di WordPress è leggero, flessibile e privo di qualsiasi tipo di fronzoli, ed è interamente gestibile dall’editor del sito.

Con Twenty Twenty-Four non dovrete toccare una sola riga di codice né eseguire alcuna configurazione. Vi basterà personalizzare i template dall’editor del sito e scegliere uno o più pattern per popolare le pagine del sito.

In fondo, Twenty Twenty-Four è una raccolta di template e pattern. Riflette il nuovo approccio alla costruzione di siti e fornisce un ottimo esempio di come costruire temi a blocchi.

Ora tocca a voi. Avete installato Twenty Twenty-Four nel vostro ambiente di sviluppo? Vi piace il nuovo approccio alla creazione di siti WordPress? Scrivetecelo nei commenti qui sotto.

Carlo Daniele Kinsta

Carlo è cultore appassionato di webdesign e front-end development. Gioca con WordPress da oltre 20 anni, anche in collaborazione con università ed enti educativi italiani ed europei. Su WordPress ha scritto centinaia di articoli e guide, pubblicati sia in siti web italiani e internazionali, che su riviste a stampa. Lo trovate su LinkedIn.