Twenty Twenty-One è il nuovo tema predefinito di WordPress in arrivo con WordPress 5.6. Se vi doveste aspettare un tema WordPress pieno di funzionalità potreste rimanere un po’ delusi.

Twenty Twenty-One è un tema minimalista dall’aspetto e dal comportamento di una tela bianca altamente personalizzabile. Come i suoi predecessori, il nuovo tema predefinito si affiderà principalmente al Block Editor per la costruzione delle pagine.

In questo articolo, passeremo in rassegna le caratteristiche più interessanti del tema Twenty Twenty-One e vi mostreremo come personalizzare l’aspetto di un sito WordPress con un semplice child theme per Twenty Twenty-One.

Pronti? Cominciamo!

Anteprima del tema Twenty Twenty-One
Anteprima del tema Twenty Twenty-One (origine immagine: Make WordPress Core)

Una Prima Occhiata al Tema Twenty Twenty-One di WordPress

Come TwentyTwenty, il nuovo tema predefinito in arrivo con WordPress 5.6 non è costruito da zero, ma si basa su un tema proveniente dalla community.

Twenty Twenty-One è stato sviluppato su un nuovo tema di Automattic, il tema Seedlet, che dispone di una struttura pulita e ben ordinata di CSS custom properties. Dato il grande utilizzo di proprietà CSS nel foglio di stile del tema, la creazione di child theme su Twenty Twenty-One è facile e veloce.

Il tema WordPress Seedlet
Il tema WordPress Seedlet

Twenty Twenty-One è un tema WordPress accessibile e minimalista, con un layout a colonna singola, una barra laterale nel footer e due posizioni di menu: Primary Navigation e Footer Navigation.

Il nuovo tema utilizza una set di font di sistema. Questo dovrebbe avere diversi vantaggi sia per gli utenti che per gli sviluppatori:

  • Innanzitutto, l’utilizzo di uno stack di font di sistema porta benefici alla UX e alle prestazioni, perché i font nativi sono già supportati dalla maggior parte dei sistemi operativi e non richiedono tempi di caricamento aggiuntivi.
  • In secondo luogo, hanno un aspetto neutro, quindi si possono fondere senza problemi in qualsiasi tipo di design.
  • In terzo luogo, dato che non richiedono il caricamento di file di font aggiuntivi, è più facile per gli utenti e gli sviluppatori personalizzare il layout di un sito web utilizzando Twenty Twenty-One.

Il tema Twenty Twenty-One utilizza una palette di colori minimale basata su un colore di sfondo verde pastello e due tonalità di grigio come colori di primo piano. Il tema fornisce diverse palette di colori pastello aggiuntive.

A questo proposito, Mel Choyse-Dwan, Default Theme Design Lead, spiega:

Il tema sarà abbinato ad alcune palette di colori supplementari, tra cui sia il bianco che il nero. Perché il verde pastello? I colori pastello e i colori tenui sono abbastanza in voga questo momento

I colori di Twenty Twenty-One
I colori di Twenty Twenty-One (origine immagine: Make WordPress Core)

Come Installare Twenty Twenty-One

Al momento in cui scriviamo, Twenty Twenty-One è ancora in fase di sviluppo attivo e non è disponibile per il download nel Directory dei temi di WordPress. Ma è possibile scaricare una versione in corso di sviluppo del tema su Github.

Il repository di Github sarà deprecato una volta che il tema sarà inserito nel core e lo troverete nella Theme Directory. Dato che Twenty Twenty-One segue il programma di rilascio di WordPress 5.6, potrebbe essere utile ricordare le seguenti date:

  • 20 ottobre 2020: Beta 1
  • 27 ottobre 2020: Beta 2
  • 2 novembre 2020: Beta 3
  • 12 novembre 2020: Beta 4
  • 17 novembre 2020: RC 1
  • 1 dicembre 2020: RC 2
  • 7 dicembre 2020: Dry Run per il rilascio di WordPress 5.6
  • 8 dicembre 2020: Data obiettivo per il rilascio di WordPress 5.6

Per installare il tema Twenty Twenty-One, seguite questi passaggi:

  1. Recuperate il pacchetto zip da GitHub.
  2. Caricate il vostro pacchetto sulla vostra installazione di sviluppo dalla bacheca di WordPress o via SFTP.
  3. Andate su Aspetto → Temi e fate clic sul pulsante Attiva che si trova sull’immagine di anteprima del tema.
  4. Andate poi su Aspetto → Personalizza per configurare Twenty Twenty-One.

Ora potete iniziare a eseguire i vostri test su un sito web di staging o sul vostro ambiente locale.

Twenty Twenty-One
Twenty Twenty-One Issue #620 su Github

Non siete pronti a fare i vostri test?

Non preoccupatevi, abbiamo dissezionato il tema e vi mostreremo cosa potete aspettarvi da Twenty Twenty-One.

Funzionalità dei Temi e Funzionalità dei Blocchi in Twenty Twenty-One

Proprio come Twenty Twenty, il nuovo tema predefinito di WordPress non è un tema pienamente funzionale, ma un tema minimalista che si basa sull’editor di blocchi per la costruzione delle pagine. Il tema mira anche a fornire una grande accessibilità. Nelle parole di Mel Choyce-Dwan:

Infine, ci piacerebbe che il tema rispondesse alle linee guida del WCAG 2.1 livello AAA. Ci è piaciuta molto l’idea quando ne abbiamo parlato +make.wordpress.org/accessibility/ e apprezzeremmo qualsiasi indicazione da parte della nostra community di esperti a11y che ci aiutasse a rendere possibile tutto questo.

Il tema supporta un buon numero di funzionalità dei temi e dei blocchi, in particolare:

Funzionalità dei temi:

  • Feed link automatici
  • Tag title
  • Formati dei post
  • Immagini in evidenza dei post
  • Elementi HTML5
  • Logo personalizzato
  • Aggiornamento selettivo dei widget
  • Sfondo personalizzato
  • Due menu di navigazione
  • Una barra laterale

Funzionalità dei blocchi:

  • Stili di blocco predefiniti
  • Stili dell’editor
  • Stili dell’editor scuro (sfondo scuro)
  • Allineamento esteso
  • Dimensioni dei caratteri dei blocchi
  • Palette di colori dei blocchi
  • Set predefiniti di sfumature dei blocchi
  • Contenuto di avvio
  • Embed reattivi
  • Altezza linea personalizzata
  • Colore dei link sperimentale
  • Spaziatura personalizzata sperimentale
  • Unità di misura personalizzate (rimosse in WordPress 5.6)

La seguente lista include le funzionalitò che possono essere considerate più rilevanti quando si costruisce un sito web basato su Twenty Twenty-One.

Menu di Navigazione

Twenty Twenty-One supporta due posizioni di menu, la Primary Navigation, situata nell’angolo in alto a destra dell’header, e la Footer Navigation.

Posizioni dei menu in Twenty Twenty-One
Posizioni dei menu in Twenty Twenty-One

Se aggiunti al menu Footer, i social link vengono automaticamente rilevati e convertiti in icone SVG per i social media supportati.

Social menu di Twenty Twenty-One
Social menu di Twenty Twenty-One

Formati dei Post

Twenty Twenty-One supporta nove formati di post: link, aside, gallery, image, quote, status, video, audio, chat. Potete scegliere il formato del vostro post nel pannello Status & Visibility delle impostazioni dell’editor.

Twenty Twenty-One supporta nove formati di post
Twenty Twenty-One supporta nove formati di post

Per vedere come il tema Twenty Twenty-One gestisce i formati dei post, aprite la cartella template-parts/excerpt e scegliete un template. Ad esempio, aprite il file excerpt-image.php nel vostro editor di codice preferito. In quel file dovreste vedere il seguente codice:

/**
 * Show the appropriate content for the Image post format.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since 1.0.0
 */

// If there is no featured-image, print the first image block found.
if (
	! twenty_twenty_one_can_show_post_thumbnail() &&
	has_block( 'core/image', get_the_content() )
) {

	twenty_twenty_one_print_first_instance_of_block( 'core/image', get_the_content() );
}

the_excerpt();

Il codice si spiega da solo, ma diamo comunque un’occhiata più da vicino:

  • has_block determina se un post o una stringa contiene un tipo di blocco specifico (il blocco immagine del core in questo esempio).
  • twenty_twenty_one_print_first_instance_of_block è una funzione template di Twenty Twenty-One che stampa la prima istanza di un blocco presente nel contenuto e poi si interrompe.

Quindi, se un utente del sito richiede un archivio di post in formato ‘image’, WordPress visualizzerà un’immagine in alto per ogni post dell’archivio. Seguendo la stessa logica, è possibile analizzare qualsiasi formato di post controllando le parti di template corrispondenti.

Identità del Sito e Logo Personalizzato

Twenty Twenty-One supporta un logo personalizzato di 300×100 px. Le impostazioni del logo personalizzato si trovano nel pannello Identità del sito.

Identità del sito in Twenty Twenty-One
Identità del sito in Twenty Twenty-One

Questa schermata include:

  • Logo personalizzato
  • Titolo del sito
  • Tagline
  • Icona del sito

Dimensioni dei Caratteri dell’Editor

Twenty Twenty-One supporta le seguenti dimensioni di font:

  • Extra small – 16
  • Small – 18
  • Normal/Medium – 20
  • Large – 24
  • Extra large – 40
  • Huge – 96
  • Gigantic – 144

Nel foglio di stile del tema, le dimensioni sono impostate in unità rem.

Twenty Twenty-One supporta sette dimensioni di font
Twenty Twenty-One supporta sette dimensioni di font

Impostazioni Colore

Il Theme Customizer fornisce un pannello Colors & Dark Mode che include due opzioni:

  • Un semplice selezionatore di colori con 10 palette di colori predefinite.
  • Una casella di controllo per attivare/disattivare la modalità scura.

L’immagine qui sotto mostra un colore di sfondo giallo chiaro con un testo grigio scuro.

Impostazioni Colors & Dark Mode in Twenty Twenty-One
Impostazioni Colors & Dark Mode in Twenty Twenty-One

Il colore di sfondo predefinito è un verde pastello ('#d1e4dd'), ma gli amministratori del sito possono facilmente passare alle seguenti alternative di colore di sfondo:

  • Nero = '#000000';
  • Grigio scuoro = '#28303D';
  • Grigio= '#39414D';
  • Verde = '#D1E4DD';
  • Blu = '#D1DFE4';
  • Viola = '#D1D1E4';
  • Rosso = '#E4D1D1';
  • Arancione = '#E4DAD1';
  • Giallo = '#EEEADD';
  • Bianco = '#FFFFFF';

Gli stessi colori sono disponibili come palette di colori dei blocchi nelle impostazioni dell’editor dei blocchi.

Inoltre, Twenty Twenty-One supporta diversi preset di sfumature per i blocchi che supportano questa funzionalità. L’immagine sottostante mostra le sfumature predefinite nelle impostazioni del blocco Columns.

Otto sfumature predefinite nelle impostazioni di colore di un blocco
Otto sfumature predefinite nelle impostazioni di colore di un blocco

Dal punto di vista dell’accessibilità, il supporto della modalità scura è una novità assoluta per un tema predefinito.

Analizziamola un po’ più a fondo!

Supporto del “Dark Mode” in Twenty Twenty-One

A seguito di una discussione sul canale Slack #core-themes, Mel Choyce-Dwan ha presentato il supporto del Dark Mode in Twenty Twenty-One.

Abilitazione del Dark Mode in macOS
Abilitazione del Dark Mode in macOS

All’inizio non era chiaro come implementare questa funzionalità in Twenty Twenty-One, se aggiunta come funzionalità del tema o come progetto separato attraverso un plugin.

C’erano cinque possibili soluzioni:

  • Permettendo ai proprietari dei siti di disabilitare il supporto del Dark Mode e ai visitatori del sito di attivare/disattivare il Dark Mode durante la visualizzazione del sito.
  • Permettendo ai proprietari dei siti solo di disabilitare il supporto del Dark Mode (nessuna opzione per i visitatori del sito).
  • Abilitare il supporto del Dark Mode come “sempre attivo”, consentendo ai visitatori del sito di attivarlo durante la visualizzazione.
  • Abilitare il supporto del Dark Mode come “sempre attivo” e impedire ai visitatori del sito di attivare/disattivare il Dark Mode.
  • Non supporta affatto il Dark Mode.

Dopo un’attenta discussione, il Dark Mode è stato aggiunto al tema. Ora:

  • Il supporto del Dark Mode è disponibile come opzione per i proprietari dei siti.
  • Il pulsante di attivazione è stato rimosso dall’interfaccia dell’editor ed è disponibile solo nel Customizer.
  • Il pulsante di attivazione del Dark Mode si trova nell’angolo in basso a destra (a sinistra su RTL) e scompare quando il visitatore del sito scorre la pagina verso il basso.
  • Se il Dark Mode è attivo, i visitatori del sito possono attivarlo/disattivarlo a seconda delle loro preferenze personali e indipendentemente dalle impostazioni del sistema operativo/browser.
Dark Mode abilitato nel Customizer e disabilitato sul sito frontale
Dark Mode abilitato nel Customizer e disabilitata sul sito frontale

Anche se il Dark Mode è considerato un miglioramento dell’accessibilità, non è del tutto scontato che le pagine del sito siano più accessibili in ogni contesto.

Le preoccupazioni maggiori riguardano i loghi scuri e le immagini trasparenti. Il passaggio da un template predefinito dai toni chiari a un colore di sfondo scuro potrebbe portare a problemi di leggibilità che potrebbero diminuire l’usabilità e rovinare l’aspetto del vostro sito web.

Ad esempio, un logo scuro su sfondo chiaro può scomparire del tutto se i lettori attivano il Dark Mode dal loro lato. Preoccupazioni simili riguardano la luminosità e il contrasto delle immagini e l’opacità di bordi, divisori e separatori.

Per questo motivo, se avete intenzione di fornire il supporto del “Dark Mode” al vostro sito web, dovreste anche tenere in considerazione il modo in cui appare il sito con uno sfondo scuro.

Dark Mode abilitato nel Customizer e abilitato sul sito frontale
Dark Mode abilitato nel Customizer e abilitato sul sito frontale

I contributor del tema sono consapevoli di questi problemi e la discussione continua su Github. Per un’analisi più approfondita dei problemi di usabilità in modalità scura e per avere l’opportunità di partecipare alla discussione, consultate l’elenco completo delle issue su Github.

Le preferenze del Dark Mode sono memorizzate nel LocalStorage e possono essere visualizzate negli strumenti di sviluppo dei browser.

In Google Chrome, lanciate Chrome WebTools e fate clic sulla scheda Application. Cercate la sezione Storage ed espandete il menu Local Storage.

Preferenze del Dark Mode dell'utente nel local storage di Brave Browser
Preferenze del Dark Mode dell’utente nel local storage di Brave Browser

Ad essere onesti, il Dark Mode non è molto comune nel contesto dei siti web di oggi. Tuttavia, dato che un nuovo tema predefinito di WordPress supporta il Dark Mode, ci si potrebbe aspettare un cambiamento in questo specifico settore dell’accessibilità, dato che WordPress è il software CMS più utilizzato.

Gli sviluppatori che vogliono andare più a fondo nella tecnologia del Dark Mode non dovrebbero perdere questa guida approfondita al Dark Mode sul web.

Stili e Proprietà CSS Personalizzate

Detto questo, è giunto il momento di analizzare le caratteristiche più interessanti di Twenty Twenty-One per gli sviluppatori di temi.

Iniziamo con le Proprietà CSS Personalizzate (CSS Custom Properties).

Come già detto, Twenty Twenty-One si basa su Seedlet, un tema a due colonne, con una barra laterale nel footer e tre posizioni di menu. Lo stile di Seedlet è completamente basato su proprietà CSS personalizzate e questo rende più facile per gli sviluppatori di temi e gli utenti avanzati costruire child theme sul tema di Automattic.

Lo stesso vale per Twenty Twenty-One. Il nuovo tema predefinito viene fornito con un layout a colonna singola, una barra laterale nel footer e due posizioni di menu. Il foglio di stile rispecchia il sistema di proprietà personalizzate annidate fornito da Seedlet e questo rende Twenty Twenty-One una base perfetta per costruire child theme e siti web altamente personalizzati.

Le proprietà CSS personalizzate (note anche come variabili CSS) sono entità speciali contenenti valori specifici che possono essere riutilizzati ovunque nel foglio di stile.

Quindi, se avete bisogno di cambiare un accento di colore specifico nel vostro documento, non è necessario eseguire una ricerca globale per individuare ogni occorrenza di quel colore in tutto il foglio di stile. È sufficiente impostare un valore diverso per la proprietà all’interno del blocco :root.

Proprietà CSS personalizzate in Twenty Twenty-One
Proprietà CSS personalizzate in Twenty Twenty-One

Per fare un esempio di semplice personalizzazione, supponiamo di voler impostare un colore di sfondo personalizzato. Non è necessario costruire un child theme per questo. È sufficiente includere due dichiarazioni CSS nell’editor di codice del pannello CSS Aggiuntivo:

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}
CSS personalizzati nel Customizer di Twenty Twenty-One
CSS personalizzati nel Customizer di Twenty Twenty-One

Le proprietà CSS personalizzate sono sicure in quanto supportate da tutti i principali browser, come mostrato nell’immagine qui sotto tratta da Can I Use:

Le CSS Custom Properties sono supportate dalla maggior parte dei moderni browser web
Le CSS Custom Properties sono supportate dalla maggior parte dei moderni browser web

Per approfondire le CSS Custom Properties, consultare la documentazione di MDN.

Block Pattern in Twenty Twenty-One

Twenty Twenty-One fornisce diversi pattern per il Block Editor. In un precedente articolo del blog, abbiamo definito i block pattern come layout di blocchi predefiniti che consentono agli utenti di aggiungere rapidamente alle loro pagine strutture complesse di blocchi annidati.

WordPress 5.5 ha introdotto svariati block pattern e altri dovrebbero essere disponibili con WordPress 5.6. Ma Twenty Twenty-One di una propria serie di block pattern.

In Twenty Twenty-One, i block pattern sono definiti nel file inc/block-patterns.php. I pattern di Twenty Twenty-One variano da pattern semplici come il Large Text, che contiene un singolo elemento H2, a pattern più complessi, come l’Overlapping Images e Text e il Media and Text Article Title.

Il pattern Media and Text Article Title in Twenty Twenty-One
Il pattern Media and Text Article Title in Twenty Twenty-One

Attualmente, il tema fornisce i seguenti pattern:

  • Large Text
  • Links Area: un testo enorme seguito da link di social network e e-mail.
  • Media and Text Article Title: un blocco Media & Text con una grande immagine a sinistra e un titolo a destra. Il titolo è seguito da un separatore e da un paragrafo di descrizione.
  • Overlapping Images: tre immagini all’interno di un blocco di colonne sovrapposte.
  • Two Images Showcase: un blocco Media & Text con un’immagine grande a sinistra e uno più piccolo con una cornice bordata a destra.
  • Overlapping Images and Text: un blocco di colonne sovrapposte con due immagini e un testo con una descrizione.
  • Portfolio List: una lista di progetti con immagini in miniatura.
  • Contact Information: Un blocco con 3 colonne con informazioni di contatto e link ai social media.
Il block pattern Overlapping Images in Twenty Twenty-One
Il block pattern Overlapping Images in Twenty Twenty-One

La disponibilità di così tanti block pattern è un’ottima cosa sia per gli utenti che per gli sviluppatori. Gli utenti potranno aggiungere rapidamente e facilmente blocchi complessi di codice ai loro post e alle loro pagine, gli sviluppatori potranno utilizzare questi modelli come utili template su cui costruire i propri.

L’Esperimento di Twenty Twenty-One Blocks

Twenty Twenty-One Blocks è una versione sperimentale a blocchi separata del tema Twenty Twenty-One. Il suo scopo è quello di condividere e tenere aggiornati su ciò che sta accadendo nell’esperimento del Full Site Editing, dando a tutti la possibilità di conoscere le nuove funzionalità del FSE prima che queste diventino parte del Core di WordPress.

È improbabile che vedremo questa versione sperimentale nel core di WordPress 5.6. Secondo Carolina Nymark,

Il tema avrà bisogno di Gutenberg e dell’esperimento del Full Site Editing per essere abilitato. Non farà parte del Core, ma una volta completato sarà disponibile nella directory dei temi.

Al momento in cui scriviamo questo articolo, Twenty Twenty-One Blocks richiede il plugin Gutenberg. Una volta installato e attivato sia il tema che il plugin, nel menu di amministrazione di WordPress appare una voce di menu Site Editor (non è più necessario attivare l’esperimento del Full Site Editing).

La voce di menu Site Editor in Twenty Twenty-One Blocks
La voce di menu Site Editor in Twenty Twenty-One Blocks

Ora, cliccate sulla nuova voce di menu Site Editor per aprire l’interfaccia di editing dell’intero sito e iniziate a modificare qualsiasi elemento della pagina utilizzando l’editor dei blocchi.

Full Site Editing in Twenty Twenty-One Blocks
Full Site Editing in Twenty Twenty-One Blocks

Qui non ci immergeremo nelle cose tecniche. Basti dire che i temi classici e i temi a blocchi sono strutturalmente diversi.

L’immagine qui sotto mostra il contenuto della cartella del tema Twenty Twenty-One Blocks:

Cartella del tema Twenty Twenty-One Blocks
Cartella del tema Twenty Twenty-One Blocks

Noterete il file experimental-theme.json e le cartelle block-template e block-template-parts.

La differenza principale tra i temi tradizionali di WordPress e i temi basati su blocchi è che questi ultimi includono template interamente composti da blocchi.

Ad esempio, aprite block-template-parts/header.html nel vostro editor di codice. Dovreste vedere il seguente codice:

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:site-title /-->

<!-- wp:site-tagline /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
<!-- wp:navigation-link {"label":"Home","url":"#"} /-->

<!-- wp:navigation-link {"label":"Blog","url":"#"} /-->

<!-- wp:navigation-link {"label":"Work","url":"#"} /-->

<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
<!-- /wp:navigation --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

Come si può vedere, il classico template file header.php è stato sostituito da un file .html contenente diversi blocchi.

Potete prelevare la versione in sviluppo del tema Twenty Twenty-One Blocks dal progetto theme-experiments su Github.

Se siete sviluppatori di temi, la documentazione ufficiale fornisce tutto quello che c’è da sapere sui temi a blocchi.

Se volete contribuire al Full Site Editing Experiment, inviate il vostro feedback qui.

Come Costruire un Child Theme su Twenty Twenty-One

I temi predefiniti di WordPress sono ottimi punti di partenza per imparare le basi dello sviluppo dei temi e per iniziare a costruire child theme personalizzati.

I temi predefiniti seguono le linee guida degli Coding Standard ufficiali di WordPress e sono conformi agli standard web.

C’è un posto migliore per imparare a usare il codice?

I child theme sono una grande funzionalità di WordPress che vi permette di personalizzare il layout, le funzionalità e la struttura delle vostre pagine. Negli esempi che seguono, analizzeremo tutti e tre questi aspetti della personalizzazione dei temi.

Impostare il Child Theme

Costruire un child theme per WordPress consiste in un processo in 3 fasi:

1. Create la Cartella del Child Theme

Create una nuova cartella in wp-content/themes e assegnatele il nome che volete. Ma ricordate che dovrebbe essere un nome univoco. Il manuale dei Child Themes raccomanda di utilizzare lo stesso nome del tema genitore, con l’appendice -child alla fine.

Quindi potremmo chiamare la nuova cartella twentytwentyone-child.

2. Create un File style.css

Ora spostatevi nella directory del vostro child theme e create un nuovo file style.css che contenga il seguente codice:

/*
Theme Name: My Twenty Twenty One Child Theme
Theme URI: https://example.com
Description: A child theme for Twenty Twenty One.
Author: Your Name
Author URI: https://example.com/
Template: twentytwentyone
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

L’intestazione contenente le informazioni permette a WordPress di gestire correttamente il vostro child theme.

  • Theme Name: Il nome unico del tema.
  • Theme URI: Dove gli utenti possono trovare il codice o la documentazione relativa al tema.
  • Description: Testo descrittivo per aiutare gli utenti a capire cosa fa il tema.
  • Author: Il nome dell’autore
  • Author URI: Il sito web dell’autore.
  • Template: La cartella in cui è memorizzato il tema genitore. Utilizzate il nome della cartella e non il nome del tema. Senza questa riga, il vostro tema non funzionerà come un child theme.
  • Version: Il numero di versione
  • License: La licenza, che deve essere GNU.
  • License URI: Il link alle informazioni sulla licenza.

Sotto quel testo, potete aggiungere i vostri blocchi di dichiarazioni CSS, come mostrerò tra un momento.

3. Create un File functions.php

Con Twenty Twenty-One, avrete bisogno anche di un file functions.php. Quindi, create il vostro file nella directory del child theme, apritelo nel vostro editor di codice e aggiungete il seguente codice:

<?php
/* enqueue scripts and style from parent theme */
   
function twentytwentyone_styles() {
	wp_enqueue_style( 'child-style', get_stylesheet_uri(),
	array( 'twenty-twenty-one-style' ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');

Dato che il tema Twenty Twenty-One utilizza la directory get_template_directory() per caricare il suo foglio di stile, è necessario accodare il foglio di stile del tema figlio utilizzando l’azione wp_enqueue_scripts.

Dopo di che, salvate i vostri file, aprite la bacheca di WordPress, navigate su Aspetto -> Temi e attivate il child theme del vostro Twenty Twenty-One.

E ora aggiungiamo le nostre personalizzazioni.

Come Aggiungere Stili Personalizzati

Quando dovete personalizzare il layout del vostro sito WordPress, avete diverse soluzioni a disposizione per aggiungere il vostro codice CSS personalizzato.

Il pannello CSS Aggiuntivo del Customizer potrebbe essere sufficiente per piccole modifiche. Ma un child theme è una soluzione migliore se avete bisogno di personalizzazioni avanzate oppure dovete esportare il codice in diversi siti WordPress.

Proviamo con una semplice personalizzazione: cambiamo lo stack dei font predefiniti.

Supponiamo che vogliate caricare un diverso stack di font, o semplicemente aggiungere il vostro font preferito alle famiglie di font predefinite di Twenty Twenty-One.

Come si fa?

Qui vi mostrerò come cambiare il font predefinito per le intestazioni H1, ma potete cambiare la famiglia di font per qualsiasi elemento di testo del vostro sito web.

Per prima cosa, aprite il file style.css di Twenty Twenty-One e cercate il seguente blocco CSS:

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	clear: both;
	font-family: var(--heading--font-family);
	font-weight: var(--heading--font-weight);
}

Come si può vedere, la famiglia di font per le intestazioni è impostata dalla variabile --heading--font-family.

Ora andate al blocco :root{} e individuate la seguente dichiarazione:

--heading--font-family: var(--global--font-primary);

--heading--font-family dipende dalla variabile --global--font-primary, che è definiti all’inizio del blocco :root{}:

:root{
	/* Font Family */
	--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
	...
}

Ora sappiamo cosa modificare!

Copiate la dichiarazione --global--font-primary dal foglio di stile del genitore e incollatela nel file style.css del vostro child. Quindi, modificate il nome e il valore della proprietà come indicato di seguito:

:root{
	/* Font Family */
	--global--font-primary-child: var(--font-headings, Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif);

	--global--font-family-child: var(--global--font-primary-child);
}

Una volta dichiarato il vostro stack di caratteri personalizzato, potete utilizzarlo dove volete nel vostro foglio di stile. Le intestazioni H1, nel nostro esempio:

h1,
.h1 {
	font-family: var(--global--font-family-child);
}

Salvate il file style.css del vostro child theme e ricaricate la pagina. Dovreste vedere Ubuntu come nuova famiglia di font predefinita per le intestazioni.

Famiglia di font predefinita e personalizzata in Twenty Twenty-One
Famiglia di font predefinita e personalizzata in Twenty Twenty-One

Ora che sapete come personalizzare lo stile di Twenty Twenty-One con un child theme, possiamo esplorare le caratteristiche più avanzate.

Come Aggiungere Nuovi Block Pattern

In questo esempio, creeremo un block pattern personalizzato che contiene un blocco a due colonne con un’immagine arrotondata a sinistra, un’intestazione H4 e un paragrafo a destra.

Potete costruire il vostro pattern direttamente nell’Editor dei Blocchi o personalizzando il codice di un block pattern esistente.

Se scegliete di costruire il vostro pattern nell’Editor dei Blocchi, è sufficiente aggiungere i blocchi necessari a una bozza di un post o di una pagina, quindi passare all’Editor del codice e copiare il codice corrispondente.

Un blocco di due colonne nell'editor del codice
Un blocco di due colonne nell’editor del codice

Possiamo ora registrare il nostro pattern nel file functions.php del child theme:

add_action( 'init', function(){

	register_block_pattern_category( 
		'custom-patterns', 
		array( 'label' => esc_html__( 'Custom patterns', 'twentytwentyone-child' ) ) );

	register_block_pattern(
	'twentytwentyone-child/custom-bio-pattern',
	array(
		'title'			=> __( 'Author Bio', 'twentytwentyone-child' ),
		'description'	=> _x( 'A block with 2 columns that displays an avatar image, a heading and a paragraph.', 'Block pattern description', 'twentytwentyone-child' ),
		'content'		=> '<!-- wp:columns {"verticalAlignment":null} --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:image {"id":29,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --> <figure class="wp-block-image size-large is-style-rounded"><img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" /></figure> <!-- /wp:image --></div> <!-- /wp:column --> <!-- wp:column {"width":"66.66%"} --> <div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"level":4} --> <h4>About Kinsta</h4> <!-- /wp:heading --> <!-- wp:paragraph --> <p>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’s our promise. We don’t settle and are here to stay.</p> <!-- /wp:paragraph --></div> <!-- /wp:column --></div> <!-- /wp:columns -->',
		'categories'	=> array( 'custom-patterns' ),
	)
	);
});

Il codice sopra riportato registra la categoria Custom patterns e il pattern Author Bio.

Notate il codice che abbiamo utilizzato per creare l’elemento img:

<img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" />

La funzione get_stylesheet_directory_uri() fornisce l’URI della directory del child theme (l’immagine è stata precedentemente inserita alla cartella assets del child theme).

Salvate le modifiche e create un nuovo post o una nuova pagina.

Ora dovreste trovare il nuovo pattern nel block inserter.

Un block pattern personalizzato
Un block pattern personalizzato aggiunto a Twenty Twenty-One

Modificare un Template File

Se volete creare un nuovo template file per un archivio specifico, o per un singolo post/pagina, dovrete creare un nuovo template .php seguendo la Gerarchia dei Template di WordPress.

Ma se volete solo modificare un template (o template part) esistente, è sufficiente copiare il template originale dal tema genitore e incollarlo nella posizione corrispondente del tema figlio (per saperne di più su questo argomento consultate la nostra Guida Estesa ai Child Theme).

Supponiamo di voler personalizzare il testo “Proudly powered by WordPress”. Avete diverse strade per rimuovere o personalizzare questa riga. Per il nostro esempio, modifichiamola manualmente.

Copiate il template file footer.php dalla cartella del parent e incollatelo nella root del vostro child theme. Una volta fatto, aprite il footer.php del vostro child theme nel vostro editor e individuate il seguente codice:

<div class="powered-by">
	<?php
	printf(
		/* translators: %s: WordPress. */
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
	);
	?>
</div><!-- .powered-by -->

Ora, potete fare le vostre modifiche. Supponiamo che vogliate dare dei crediti al vostro web host. Vi basta sostituire l’elemento a come mostrato di seguito:

<div class="powered-by">
	<?php
	printf(
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="https://kinsta.com/">Kinsta</a>'
	);
	?>
</div><!-- .powered-by -->

Per rimuovere questa stringa di testo, basta commentare o cancellare l’elemento div.powered-by:

<!-- <div class="powered-by">
	<?php
	printf(
		/* translators: %s: WordPress. */
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
	);
	?>
</div> -->

E questo è tutto. Ora, partendo dai semplici esempi qui sopra, potrete effettuare personalizzazioni più interessanti e portare il vostro sito web basato sul tema Twenty Twenty-One al livello successivo.

Riepilogo

Il tema Twenty Twenty-One è il terzo tentativo di permettere a persone senza competenze tecniche avanzate di costruire siti web. Si tratta di un tema WordPress minimalista, performante e accessibile, che si adatta a una vasta gamma di casi d’uso. I siti WordPress alimentati dal tema Twenty Twenty-One sono di tutte le forme e dimensioni. Per scoprire se un tema usa Twenty Twenty-One, date un’occhiata al nostro pratico strumento di rilevamento del tema WordPress.

Progettato per l’editor di blocchi, il nuovo tema predefinito è facile da personalizzare sia per gli utenti che per gli sviluppatori.

Ora tocca a voi: Avete già installato il tema Twenty Twenty-One? Qual è la vostra impressione? Diteci cosa ne pensate nella sezione dei commenti!

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.