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:

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)

Twenty Twenty-One è il nuovo tema predefinito di WordPress in arrivo con WordPress 5.6! 👁‍🗨 Scopri tutte le caratteristiche principali del nuovo tema in questa guida approfonditaClick to Tweet

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:

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.

Important

Si noti che Twenty Twenty-One è ancora in fase di sviluppo attivo, molte anomalie non sono ancora state risolte e alcune funzionalità potrebbero cambiare in futuro.

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:

Funzionalità dei blocchi:

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:

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:

Dimensioni dei Caratteri dell’Editor

Twenty Twenty-One supporta le seguenti dimensioni di font:

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:

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:

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:

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

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:
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.

Important

Twenty Twenty-One Blocks è un tema sperimentale e non dovrebbe essere usato in produzione! Provatelo in un ambiente di staging.

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.

Cerchi un hosting veloce, sicuro e adatto agli sviluppatori per i siti dei tui clienti? Kinsta è stata progettata con in mente gli sviluppatori di WordPress e fornisce un sacco di strumenti e un cruscotto potente. Scopri i nostri piani

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.

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 WordPress 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.

Scopri cosa c'è di nuovo nel mondo dei temi di WordPress, dal Dark Mode ai temi basati sui blocchi, in questa panoramica approfondita di Twenty Twenty-One 🌅Click to Tweet

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.

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!


Se ti è piaciuto questo articolo, allora apprezzerai la piattaforma di hosting WordPress di Kinsta. Metti il turbo al tuo sito web e ricevi supporto 24×7 dal nostro team di veterani di WordPress. La nostra infrastruttura potenziata da Google Cloud è centrata su scaling automatico, performance e sicurezza. Permettici di mostrarti la differenza di Kinsta! Scopri i nostri piani