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!

Anteprima di Twenty Twenty

Anteprima di Twenty Twenty (fonte di immagine Make WordPress Core)

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

Tema Chaplin di WordPress

Tema Chaplin di WordPress

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.

caratteri Inter

La font-family Inter

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 impatto leggibilita

Tipografia di Twenty Twenty: impatto e leggibilità

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.

Importante

Twenty Twenty è attualmente in fase di sviluppo e molti problemi non sono ancora stati risolti. Non dovreste usarlo in produzione.

Un issue aperto su GitHub

Un issue aperto su GitHub

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' ),
        )
);
Il Theme Customizer di Twenty Twenty

Il Theme Customizer di Twenty Twenty

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 );
}
Colore di sfondo e colore rifinitura nel Theme Customizer

Colore di sfondo e colore rifinitura nel Theme Customizer

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',
    ),
) );

 

Dimensioni del font nelle impostazioni testo dell’editor a blocchi

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

L’header 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 e Site Header del Customizer:

Il titolo del sito e la tagline possono essere abilitate/disabilitate nel Theme Customizer.

Il titolo del sito e la tagline possono essere abilitate/disabilitate nel Theme Customizer.

Sulla destra, troverete un pulsante di ricerca e una casella di menu modale che potete attivare/disattivare nella sezione Site Header:

sezione header

Sezione header del sito e search modal

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.
  • Due menu a discesa per impostare la modalità di fusione e il valore di opacità.
La sezione Cover Template nel Customizer

La sezione Cover Template nel Customizer

La sezione Menu include tre posizioni di menu: menu principale, menu del footer e menu social. Per impostazione predefinita, il menu principale è mostrato nell’header in una casella modale che è possibile attivare o disattivare. Disattivando la modalità menu nel Customizer, il menu principale viene visualizzato come un normale menu di navigazione.

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:

Template footer in Twenty Twenty

Template footer in Twenty Twenty

Infine, la sezione Additional CSS vi permette di includere i vostri stili personalizzati. L’immagine qui sotto mostra le dichiarazioni che abbiamo usato per mettere a punto l’aspetto dell’header di pagina con il Cover Template:

Additional CSS

Additional CSS

Per quanto riguarda il layout dei messaggi 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.

Template singolo Post/Pagina in Twenty Twenty

Template singolo Post/Pagina in Twenty Twenty

Il Block Editor 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:

media e text

Blocco Media & Text (allineamento larghezza piena)

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:

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 Appearance → Themes e attivate il vostro child theme. Potete finalmente iniziare con le vostre personalizzazioni.

Attivare il child theme

Attivare il child theme

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:

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

Post Attributes

Un nuovo template è disponibile in 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:

<?php
if ( is_singular() && ! is_page_template( array( 'template-canvas.php' ) ) ) {
?>
    <header id="site-header">
            ...
    </header><!-- #site-header -->

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

Questo codice controlla se la pagina corrente è di tipo post/pagina/pagina/custom post type e se il modello di pagina non è template-canvas.php. Se il modello di pagina è 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 canva. Basta aggiungere la stessa condizione in footer.php come mostrato sotto:

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

        </body>
</html>

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.

Abbiamo dato un'occhiata più da vicino al nuovo tema predefinito di WordPress Twenty Twenty. Ecco tutte le caratteristiche principali da non perdere! 🆕②⓪②⓪ Click to Tweet

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

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!

17
Condivisioni