Twenty Twenty: Introduzione al Nuovo Tema Predefinito di WordPress

Twenty Twenty è il nuovo tema predefinito di WordPress che arriva con l’ultima versione di WordPress 5.3. Come il suo predecessore Twenty Nineteen, Twenty Twenty è stato progettato con particolare attenzione a Gutenberg. C’è una grande differenza tra i due, però: Twenty Twenty non è costruito da zero, ma si basa su un tema già esistente proveniente dalla comunità WordPress.

Poiché amiamo tutto di WordPress, abbiamo dato un’occhiata più da vicino al nuovo tema Twenty Twenty, sbirciando nei file delle funzioni, nel foglio di stile e nei modelli.

Anche se Twenty Twenty è ben lungi dall’essere stabile — perlomeno nel momento in cui scriviamo — e con molti problemi ancora da risolvere, oggi condivideremo con voi le nostre primissime riflessioni sul nuovo tema predefinito di WordPress.

Immergiamoci nel tema di WordPress Twenty Twenty!

Introduzione Rapida al Tema Twenty Twenty

Twenty Twenty è stato costruito su Chaplin, un tema gratuito WordPress creato da Anders Norén, che è anche il Default Theme Design Lead di WordPress 5.3.

Potete scaricare Chaplin nella repository di WordPress.org; questo tema, secondo Anders, è stato costruito pensando al Block Editor:

Chaplin è un tema WordPress ricco di funzionalità che vi dà pieno controllo su font HTML e colori del vostro sito. È costruito da zero ma con il nuovo Block Editor in mente e rende facile creare layout di bell’aspetto sia sui post che sulle pagine.

La stessa filosofia sta anche alla base di Twenty Twenty: flessibilità, chiarezza e leggibilità sono le parole chiave del nuovo tema.

Twenty Twenty include un layout a colonna singola e tre modelli di post/pagina, con l’obiettivo di dare a chi amministra e a chi progetta siti WordPress la libertà di creare i loro layout personalizzati direttamente nell’editor a blocchi, sfruttando allineamenti ampi e a larghezza piena per gli elementi a blocchi come colonne, immagini e il blocco di gruppo introdotto con Gutenberg 5.5.

Come spiega Anders:

Twenty Twenty è stato progettato pensando alla flessibilità. Se si desidera utilizzarlo per un’organizzazione o un’azienda, è possibile combinare colonne, gruppi e supporti con allineamenti ampi e completi, creando così layout dinamici per mostrare i propri servizi o prodotti. Se volete usarlo per un blog tradizionale, la colonna di contenuto centrata lo rende perfetto anche per questo scopo.

Inoltre, Twenty Twenty viene fornito con un nuovo font: Inter. Si tratta di una font-family libera e open source progettata appositamente da Rasmus Andersson per la leggibilità di testi in caratteri misti e in particolare per quelli di piccole dimensioni.

Inter regala una personalità forte alle intestazioni di grandi dimensioni, ma ne otterrete il massimo quando la usate con testo di dimensioni alternate, come mostrato nell’anteprima del tema del post del blog di WordPress.org:

Twenty Twenty è più di un tema completo: è un tema che segna un nuovo importante passo verso la futura evoluzione dell’interfaccia utente di WordPress. Twenty Twenty si basa essenzialmente sull’editor a blocchi per la modifica e il layout del contenuto e sul Theme Customizer per l’header, il footer e le personalizzazioni aggiuntive.

Detto questo, è tempo di installare questo tema WordPress e attivarlo.

Come Installare Twenty Twenty

L’imminente tema di default seguirà il piano di rilascio di WordPress 5.3. Questo significa che, al momento in cui scriviamo, Twenty Twenty non è ancora disponibile per il download nell’elenco dei temi di WordPress, né lo troverete incorporato nel core di WordPress 5.3, almeno per un po’ di tempo ancora.

In ogni caso, è possibile ottenere una versione attuale di Twenty Twenty da GitHub e installarla sia nella versione stabile corrente di WordPress che su WordPress 5.3. Il repository Github sarà dichiarato obsoleto una volta che il tema verrà integrato nel core. Nel frattempo, è possibile salvare le seguenti date dal programma di rilascio di WordPress 5.3:

• 23 settembre 2019: Beta 1
• 30 settembre 2019: Beta 2
• 7 ottobre 2019: Beta 3
• 15 ottobre 2019: Release candidate 1
• 22 ottobre 2019: Release candidate 2
• 29 ottobre 2019: Release candidate 3
• 5 novembre 2019: Release candidate 4 (se necessario)
• 12 novembre 2019: data limite per il rilascio di WordPress 5.3.

Per iniziare con Twenty Twenty, seguite la procedura seguente:

1. Scaricate il pacchetto zip da GitHub.
2. Caricate il file zip nella vostra installazione di sviluppo nella dashboard di WordPress o via SFTP.
3. Andate su Appearance → Themes e fate clic sul pulsante Activate sull’immagine di anteprima del tema.
4. Andate su Aspetto → Customize per configurare Twenty Twenty.

E questo è tutto! Ora potete effettuare i vostri test sia sul vostro sito web di staging o sul vostro ambiente locale.

Ora che siete pronti a partire, andiamo avanti e immergiamoci nel tema Twenty Twenty WordPress.

Caratteristiche del Tema Twenty Twenty

Twenty Twenty non è un tema WordPress super accessoriato, ma un tema minimal e snello che mira a dare a sviluppatori e amministratori del sito la libertà di costruire layout di contenuti personalizzati per post e pagine. Così come Twenty Nineteen, anche Twenty Twenty è stato costruito per Gutenberg ed è legato a doppio filo al ciclo di vita di Gutenberg (maggiori informazioni su questo argomento in questo video di Matt Mullenweg al WCEU 2019).

Il tema supporta una serie di caratteristiche del tema come la larghezza del contenuto (580), i link per il feed automatico, le miniature, il tag titolo e alcuni elementi HTML5 (modulo di ricerca, modulo di commento, lista dei commenti, galleria e didascalia).

Altre funzioni aggiungono opzioni al Theme Customizer. Questi includono sfondi e logo personalizzati. Le porzioni di codice qui sotto mostrano queste caratteristiche abilitate nel file delle funzioni del tema:

// Custom background color
add_theme_support(
        'custom-background',
        array(
                'default-color'        => 'F5EFE0'
        )
);

// Custom logo
add_theme_support(
        'custom-logo',
        array(
                'height'      => 240,
                'width'       => 320,
                'flex-height' => true,
                'flex-width'  => true,
                'header-text' => array( 'site-title', 'site-description' ),
        )
);

Twenty Twenty supporta anche alcune delle caratteristiche specifiche di Gutenberg. In primo luogo, il tema supporta allineamenti ampi e a larghezza piena:

// Add support for full and wide align images.
add_theme_support( 'align-wide' );

La tavolozza dei colori dell’editor è abilitata se l’utente imposta un colore rifinitura nel Customizer (abilitato per impostazione predefinita):

// If we have accent colors, add them to the block editor palette
if ( $editor_color_palette ) {
    add_theme_support( 'editor-color-palette', $editor_color_palette );
}

Il tema Twenty Twenty include già quattro dimensioni di font per l’editor disponibili nell’editor a blocchi:

// Gutenberg Font Sizes
add_theme_support( 'editor-font-sizes', array(
    array(
            'name'             => _x( 'Small', 'Name of the small font size in Gutenberg', 'twentytwenty' ),
            'shortName' => _x( 'S', 'Short name of the small font size in the Gutenberg editor.', 'twentytwenty' ),
            'size'             => 16,
            'slug'             => 'small',
    ),
    array(
            'name'             => _x( 'Regular', 'Name of the regular font size in Gutenberg', 'twentytwenty' ),
            'shortName' => _x( 'M', 'Short name of the regular font size in the Gutenberg editor.', 'twentytwenty' ),
            'size'             => 18,
            'slug'             => 'regular',
    ),
    array(
            'name'             => _x( 'Large', 'Name of the large font size in Gutenberg', 'twentytwenty' ),
            'shortName' => _x( 'L', 'Short name of the large font size in the Gutenberg editor.', 'twentytwenty' ),
            'size'             => 24,
            'slug'             => 'large',
    ),
    array(
            'name'             => _x( 'Larger', 'Name of the larger font size in Gutenberg', 'twentytwenty' ),
            'shortName' => _x( 'XL', 'Short name of the larger font size in the Gutenberg editor.', 'twentytwenty' ),
            'size'             => 32,
            'slug'             => 'larger',
    ),
) );

E questo è tutto. Il tema è abbastanza minimal anche nella funzionalità, ma è facilmente estendibile con un tema child, cosa di cui parleremo in un minuto.

Come Personalizzare l’Aspetto dei Twenty Twenty

Twenty Twenty non contiene decorazioni ed elementi superflui, ma offre una grande flessibilità se usato in tandem con Gutenberg (o con un buon page builder).

Personalizzazione del Tema dei Twenty Twenty

La Site Identity contiene il titolo del sito, la descrizione del sito, un pulsante di ricerca e un menu modale. Potete attivare/disattivare tutti questi elementi nelle sezioni Site Identity del Customizer:

La sezione del Customizer chiamata Cover Template gestisce le impostazioni di personalizzazione per il template di pagina del Cover Template. Lì, troverete:

• Un’opzione per abilitare un effetto parallax sull’immagine di sfondo (Fixed Background Image).
• I color picker vi permettono di impostare il colore di sfondo personalizzato e il colore del testo per l’overlay delle immagini in evidenza.
• Uno slider per controllare l’opacità dell’overlay.

La sezione Menu fornisce cinque posizioni di menu. Potete includere un menu orizzontale regolare nell’header (Desktop Horizontal Menu) e/o un menu di navigazione alternabile (Desktop Expanded Menu). Il Mobile Menu è un menu specifico per i dispositivi mobili, mentre il Footer Menu e il Social Menu si trovano nel footer della pagina.

Il footer contiene gli spazi per il menu footer e per quello social, insieme a due aree widget. L’immagine seguente mostra il footer del tema con tutti i suoi elementi al loro posto:

Infine, la sezione Additional CSS vi permette di includere i vostri stili personalizzati.

Template di Post/Pagina Singola

Per quanto riguarda il layout dei post e delle pagine, è possibile scegliere fra tre diversi modelli. Oltre al modello predefinito, Twenty Twenty fornisce un Cover Template e un Full Width template (un template a larghezza piena) con cui è possibile giocare per personalizzare l’aspetto del contenuto.

L’Editor a Blocchi in Twenty Twenty

Grazie al suo approccio minimal, l’aspetto di Twenty Twenty si basa principalmente sul Block Editor. Abbiamo eseguito i nostri test su Twenty Twenty usando la versione 6.4.0 di Gutenberg. Questa versione fornisce un buon numero di nuove funzionalità, miglioramenti e correzioni di bug che hanno migliorato significativamente l’esperienza di editing.

Alcuni blocchi sono utili, specialmente quando si costruiscono siti web a pagina singola. Blocchi come Media & Text e Cover sono stati migliorati e ora hanno un aspetto fantastico quando si tratta di presentare prodotti e/o portfolio professionali:

Tuttavia, dato che Gutenberg è un progetto in progress, potreste voler dare un’occhiata ad alcuni dei plugin più popolari che permettono di aggiungere altri blocchi all’editor.

Ecco una rapida lista di plugin che potrebbe valer la pena provare:

• Gutenberg Blocks
• CoBlocks
• Stackable
• Atomic Blocks.
• Advanced Gutenberg

Il Theme Customizer e il Block Editor fanno un ottimo lavoro quando si tratta di personalizzazione dell’aspetto e del layout, ma un child theme potrebbe darvi un maggiore controllo sull’aspetto delle vostre pagine.

Come Creare un Child Theme per il Tema Twenty Twenty

Costruire child theme per WordPress potrebbe essere divertente e anche un buon modo per iniziare una carriera nello sviluppo di temi per WordPress: Twenty Twenty potrebbe essere un gran parent theme quando si costruiscono child theme in WordPress. Perché non ci provate? 😉

Se non sapete da dove iniziare con i temi child, assicuratevi di controllare la nostra guida estesa su Come Creare un Child Theme in WordPress.

Ora, costruiamo il nostro primo child theme per Twenty Twenty!

Create una nuova directory sotto wp-content/themes e datele un nome come twentytwenty-child o quello che volete.

Andate su wp-content/themes/twentytwenty-child e create un nuovo file style.css con la seguente intestazione:

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

Ora dobbiamo includere il foglio di stile del parent theme. Nella stessa directory, create il seguente file functions.php:

<?php
/* enqueue scripts and style from parent theme */        
function twentytwenty_styles() {
	wp_enqueue_style( 'parent', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twentytwenty_styles');

Ora andate su Aspetto → Temi e attivate il vostro child theme. Potete finalmente iniziare con le vostre personalizzazioni.

Potete cambiare quasi tutto in Twenty Twenty, dall’aggiunta di template personalizzati all’aggiunta di stili personalizzati o alla modifica degli stili predefiniti del tema.

Qui vi mostrerò come creare un nuovo modello personalizzato per i singoli articoli e pagine.

Aggiunta di un Template Personalizzato di Post/Pagina su Twenty Twenty

Finora abbiamo creato un child theme per Twenty Twenty e attaccato gli stili del parent theme al foglio di stile del child theme. Nell’esempio qui sotto, ci libereremo dell’header e del footer, facendo spazio per il corpo della pagina in un file di template per post/pagina.

Passo 1

Copiate e incollate i seguenti file dal parent theme alla directory del child theme:

• templates/template-full-width.php
• header.php
• footer.php

Step 2

Rinominate template-full-width.php come template-canvas.php (o quello che volete). Aprite il file, eliminate il contenuto corrente e incollate quanto segue:

<?php
/*
Template Name: Canvas Template
Template Post Type: post, page
*/
get_template_part( 'singular' );

Template Name imposta il nome del file di template come lo vedrete nel Block Editor, mentre Template Post Type definisce i tipi di post che supportano questo file template. La funzione get_template_part carica il file singular.php dal tema parent (non abbiamo bisogno di una copia di questo file nel nostro tema child).

Andate alla dashboard di WordPress e create un nuovo post. Ora dovreste trovare un modello di pagina aggiuntiva nella sezione Post attributes.

Passo 3

E ora arriva la parte divertente. Aprite header.php nel vostro editor di testo preferito e avvolgete l’elemento header all’interno dell’istruzione seguente if:

<?php
if ( ! is_page_template( array( 'templates/template-canvas.php' ) ) ) {
?>
	<header id="site-header" class="header-footer-group" role="banner">
		...
	</header><!-- #site-header -->

	<?php 
	// Output the menu modal
	get_template_part( 'template-parts/modal-menu' );
}

Questo codice controlla se il template di pagina non è templates/template-canvas.php. Se il template è templates/template-canvas.php, allora non includerà l’header del sito e il menu modale.

Allo stesso modo, possiamo rimuovere il footer da una pagina articolo quando il template della pagina attiva è il nostro canvas. Basta aggiungere la stessa condizione in footer.php come mostrato sotto:

<?php
if ( ! is_page_template( array( 'templates/template-canvas.php' ) ) ) {
?>
	<footer id="site-footer" role="contentinfo" class="header-footer-group">
	...
	</footer><!-- #site-footer -->
<?php } ?>
	<?php wp_footer(); ?>

    </body>
</html>

Potete scaricare qui il codice dell’esempio.
Ora create un nuovo articolo o pagina, selezionate il modello di Canvas in Post/Page attributes e controllate la pagina nel front-end del vostro sito.

Riepilogo

Twenty Twenty è un tema WordPress minimalista, con un layout a colonna singola. Il modo in cui lo useremo dipenderà principalmente dall’evoluzione del Block Editor. Come dice esplicitamente Anders:

“La promessa del Block Editor è di dare agli utenti la libertà di progettare e strutturare i loro siti come meglio credono”.

Dopo Twenty Nineteen, il tema default Twenty Twenty è il secondo di una nuova generazione di temi che mira a “permettere la costruzione di siti web senza editing manuale del codice”. I siti WordPress alimentati dal tema Twenty Twenty sono di tutte le forme e dimensioni. Per scoprire se un tema usa Twenty Twenty, date un’occhiata al nostro pratico strumento di rilevamento del tema WordPress.

Se pensate che Gutenberg non sia ancora completamente affidabile per i vostri progetti, potete aggiungere i blocchi di cui avete bisogno con plugin come quelli elencati sopra. Oppure, semplicemente, potete affidarvi a un page builder di terzi.

È il vostro turno, ora: installate il nuovo tema predefinito di WordPress, giocateci sopra, e fateci sapere nei commenti quali sono le vostre impressioni!

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.

• Sito Web
• Twitter