Advertisement
  1. Code
  2. WordPress Themes
Code

Twenty Nineteen Teardown: utilizzare il nuovo tema predefinito di WordPress

by
Difficulty:BeginnerLength:LongLanguages:

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

Twenty Nineteen è l'ultimo tema predefinito di WordPress attualmente disponibile ed è stato incluso con la versione 5.0 di WordPress. Si sta già rivelando piuttosto popolare con oltre 800.000 installazioni attive fino ad oggi.

Twenty Nineteen Theme

Inoltre è anche disponibile per gli utenti di WordPress.com che aumenta la base di utenti ancora di più. È descritto come un tema minimale e non generico con tipografia semplice ma sofisticata e supporta più lingue tra cui:

  • Arabo
  • Cinese
  • Greco
  • Ebraico
  • Giapponese
  • Coreano
  • Tailandese

Il design è stato studiato per attrarre una varietà di tipi diversi di siti come un blog fotografico, piccole imprese, organizzazioni senza scopo di lucro o blog basati sulla tipografia.

Personalmente mi piace il design e sono sicuro che continuerà a fare bene. Sembra leggero e accessibile, è piacevole per gli occhi e beneficia di un look molto pulito ed elegante.

Tuttavia, il design minimalista può polarizzare alcuni utenti che sono alla ricerca di più di una dichiarazione di design da un tema predefinito di WordPress. È ancora presto però e sono sicuro che appena saranno disponibili più risorse per aiutare gli utenti a personalizzare Twenty Nineteen ciò contribuirà ad un'ulteriore adozione positiva.

Tuttavia se pensate che vi è necessario che sia fortemente personalizzato allora potrebbe essere meno lavoro iniziare invece con un tema alternativo. Riesco a vedere questo tema diventare molto popolare su siti con molto testo (cioè i blog) però. La tipografia, la spaziatura e il design minimalista sembrano soddisfare molto bene quel tipo di sito.

Per gli sviluppatori di temi

Se sviluppate temi per WordPress allora probabilmente sarete interessati alle funzionalità incluse in Twenty Nineteen. E in particolare, come funziona il nuovo editor (nome in codice Gutenberg) incluso in WordPress 5.0.

Twenty Nineteen è stato attentamente progettato per integrarsi perfettamente con il nuovo editor e serve come una dimostrazione di come integrarlo correttamente. Se scegliete di non supportare questo nuovo modo di creare i contenuti di pagina con i blocchi nel vostro tema allora avrà un fascino molto limitato in futuro. Forse non tanto nel breve termine, ma mi aspetto che gli utenti cresceranno rapidamente per aspettarsi una stretta integrazione dell'editor come un requisito minimo per i temi.

L'esperienza di editing è molto agile e abbina la vista admin alla vista front-end il più fedelmente possibile. Ogni blocco di base incluso a WordPress 5.0 ha gli stili personalizzati applicati per abbinare il tema. E fa un buon lavoro con questa cosa.

È solitamente utile mantenere i temi in un ciclo di sviluppo regolare per tenerli aggiornati con le ultime caratteristiche consigliate previsto in un tema moderno. Con questo in mente il tema Twenty Nineteen è un buon punto di riferimento con il quale confrontare il vostro tema.

Se avete familiarità con _s il popolare starter theme di WordPress allora avrete un vantaggio di come Twenty Nineteen è parzialmente basato su questo e un altro tema: lo starter theme di Gutenberg.

Caratteristiche in breve

Diamo ora un'occhiata ad alcune delle caratteristiche distintive di Twenty Nineteen. Ma prima di farlo vale la pena ricordare che la versione del tema che stiamo usando per questo articolo è v1.2. Se utilizzate una versione successiva allora è possibile che alcune delle caratteristiche del tema potrebbero essere cambiate nel frattempo.

Forse l'aspetto più immediatamente evidente di Twenty Nineteen è la mancanza di un supporto della barra laterale. Per impostazione predefinita siete limitati a un layout a colonna singola su tutte le pagine. Quindi se state cercando di utilizzare un layout multi-colonna pronto all'uso resterete delusi.

C'è un'area di widget del footer che si trova sotto il contenuto del sito. Alcuni potrebbero dire che questa è tecnicamente una barra laterale, ma non fatevi confondere, non può essere utilizzata per visualizzare una barra laterale nel senso di un tradizionale layout a colonna; a meno che non impiegate qualche stregoneria con del CSS personalizzato naturalmente!

Footer widget area

Le immagini in primo piano possono essere aggiunte ai post e pagine e si raccomanda che abbiano una dimensione di 2000 x 1200 pixel per ottenere risultati migliori. C'è anche un'opzione del tema nel customizer per tingere il colore di tutte le immagini in primo piano.

Featured image

Potete abilitare la colorazione tramite il customizer. Basta aprirlo e fare clic sul menu Colori. Quindi selezionate la casella Applica un filtro alle immagini in primo piano usando il colore primario.

Apply tinting to featured image

Qualunque immagine sia impostata come la immagine in primo piano verrà visualizzata a 100vh al caricamento della pagina. Questa unità consente di specificare la percentuale del viewport all'interno della finestra del browser.

È utile come indipendentemente dal dispositivo che state utilizzando, o qualunque sia attualmente l'altezza della finestra del browser, specificando 100vh sempre si tradurrà nell'altezza del viewport del browser (cioè l'area visibile della finestra del browser).

La stessa schermata di impostazioni del customizer può essere utilizzata anche per impostare un colore accentuato del tema personalizzato tramite nuovo cursore per il controllo di selezione del colore. Questo sembra fantastico e il controllo sembra piuttosto agile quando si trascina lo scorrimento per aggiornare i colori in tempo reale.

Theme color settings

Tuttavia, se volete impostare un valore di colore specifico, non c'è nessun modo ovvio per farlo che è sorprendente. Guadagnate un controllo un po' più preciso utilizzando i tasti freccia sinistra e destra per spostare il valore dello slider, ma il valore di incremento dello scorrimento non è sufficiente a coprire ogni possibile valore del colore. Avrebbe avuto più senso mostrare anche un controllo di input del testo per consentire i valori esatti del colore da inserire.

Un'altra caratteristica che supporta Twenty Nineteen è un logo del sito che può essere configurato tramite il customizer. Facendo clic su Identità del sito e quindi Seleziona Logo, viene visualizzata la finestra di dialogo dei media di WordPress. Basta caricare un'immagine o selezionarne una esistente dalla libreria multimediale come vostro nuovo logo. Verrà quindi inserita nel pannello del customizer e nella finestra di anteprima.

Adding site logo

Non importa più di tanto delle dimensioni dell'immagine utilizzata per il logo, ma vi consiglio di utilizzarne una con dimensioni di larghezza e altezza corrispondenti. Avete tuttavia la possibilità di ritagliare l'immagine prima che venga inserita nel customizer se le proporzioni dell'immagine non sono vicine a 1:1.

Potreste trovare la caratteristica del logo un po' limitante però, poiché rende solo un piccolo logo arrotondato a sinistra del titolo del sito e dello slogan. Un cerchio scuro viene anche eseguito attorno all'immagine del logo quando si passa sopra con il mouse.

Se volete un logo più rettangolare che richiede flessibilità per il posizionamento e la dimensione allora sarà necessario applicare degli stili personalizzati. Sarebbe anche necessario applicare un filtro per modificare le dimensioni quadrate predefinite per abbinare il vostro logo.

Per quanto riguarda il menu di navigazione, Twenty Nineteen registra tre posizioni separate nelle quali potete visualizzare le singole voci di menu.

  • Principale
  • Menu del footer
  • Menu dei collegamenti ai social

Le posizioni del menu principale e del menu del footer sono del menu standard e aggiungete voci di menu nel modo consueto. Il menu principale supporta anche voci di sottomenu ma il menu del footer non lo fa per impostazione predefinita.

Primary menu supports sub menu items

Qui potete vedere lo stesso menu utilizzato per il Menu del footer che elabora soltanto un elenco di link questa volta.

Footer menu outputs flat list of menu items

Il Menu dei collegamenti ai social prevede d'altra parte che aggiungiate i collegamenti ai vostri profili sui social media. Nell'editor di menu del customizer aggiungete un URL personalizzato per ogni profilo dei social media che volete visualizzare. Se il link corrisponde a uno dei siti dei social media supportati allora verrà sostituito nel menu da un'icona in corrispondenza del dominio specifico del social media.

Social links menu

I colori delle icone dei Social Media Links sono invertiti quando un'immagine in primo piano viene applicata alla pagina.

Social links menu colors when tinting applied to featured image

I collegamenti dei social media supportati comprendono:

  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Pinterest
  • Twitter
  • YouTube e molti altri

Supporto dell'editor

Come accennato in precedenza, Twenty Nineteen si integra molto bene con il nuovo editor di WordPress 5 Gutenberg. Questo viene fatto dichiarando in modo esplicito quali funzionalità di editor di base sono supportate tramite la funzione add_theme_support(). Ci sono diverse chiamate a questa funzione in Twenty Nineteen in functions.php che si trova nella cartella del tema principale.

Le chiamate di add_theme_support() rilevanti per bloccare il supporto sono:

  • add_theme_support( 'wp-block-styles' )
  • add_theme_support( 'align-wide' )
  • add_theme_support( 'editor-styles' )
  • add_theme_support( 'editor-font-sizes' )
  • add_theme_support( 'editor-color-palette' )

Ognuna di queste rappresenta una caratteristica particolare del nuovo editor. Diamo un'occhiata a ciascuna di esse una alla volta.

Supporto del tema degli stili di blocco

Nell'editor tutti i blocchi di base hanno stili predefiniti applicati per farli rendere subito. Tuttavia, questi stili dei blocchi predefiniti non vengono applicati per impostazione predefinita sul front-end se non aggiungete questo al vostro tema:

Naturalmente potete sostituire uno qualsiasi degli stili predefiniti di base come richiesto, ma è una buona idea includere un supporto per loro, quindi dovete solo sovrascrivere gli stili di cui avete bisogno anziché definire tutto da zero.

Supporto al tema per l'allineamento ampio

Con questa funzione attivata ora avete due opzioni di allineamento supplementare all'interno dell'editor: allineamento ampio e allineamento completo.

New block alignment options

Queste opzioni non sono disponibili per tutti i blocchi ma la maggior parte dei blocchi le supporta, tra cui il blocco immagine, il blocco galleria e il blocco tabella.

Dipende da voi implementare gli stili effettivi per questa funzionalità poiché WordPress aggiunge solo le classi CSS alignwide o alignfull all'elemento HTML relativo al wrapper dei blocchi. Non preoccupatevi però, Twenty Nineteen include tutti gli stili necessari per i contenuti ad ampia e piena larghezza in modo da non dover fare nient'altro per impostazione predefinita.

Supporto al tema degli stili dell'editor

Questo è dove avviene la magia che fa il lavoro vero e proprio di abbinare l'esperienza di post editing con il front end. Tutto ciò che serve è:

Purtroppo però non è così semplice. È inoltre necessario mostrare a WordPress il foglio di stile da utilizzare per sovrascrivere gli stili dell'editor per abbinare gli stili del front-end.

Twenty Nineteen utilizza il file style-editor.css situato nella cartella radice del tema per farlo.

Supporto al tema per le dimensioni del font dell'editor

Alcuni blocchi come il blocco del paragrafo vi consentono di scegliere da un elenco predefinito le dimensioni dei caratteri. Questo può essere personalizzato tramite add_theme_support( 'editor-font-sizes' ). Per effettuare questa operazione un'array viene passato come secondo parametro contenente le nuove scelte di carattere.

Twenty Nineteen aggiunge quattro formati di carattere univoci come segue:

Block font size options

Supporto al tema della tavolozza dei colori dell'editor

L'editor di WordPress implementa una tavolozza di colori predefinita disponibile per dare uno stile ai blocchi di base. E come si può immaginare questi colori possono essere personalizzati.

Twenty Nineteen implementa la propria tavolozza dei colori di blocco come:

Questo aggiunge cinque colori unici che vengono aggiunti alla tavolozza dei colori personalizzata: Primario, Secondario, Grigio scuro, Grigio chiaro, Bianco.

Block color palette options

Strumenti

È abbastanza comune in questi giorni per i temi e i plugin includere una sorta di strumentazione per aiutare a costruire e compilare i file del codice sorgente finale. Questo potrebbe includere, per esempio, eseguire del codice JavaScript tramite il compilatore Babel se volete utilizzare del codice React o ES6+ nel progetto. Un altro caso d'uso comune è la compilazione di codice SCSS o LESS fino a CSS.

Altri esempi di fasi di costruzione includono:

  • inserire il codice sorgente in un file zip
  • traduzione di una lingua
  • ottimizzazione delle immagini
  • minimizzazione del file
  • esecuzione di unit test
  • deployment

Questo non è un elenco esaustivo. C'è così tanto che potete fare con la post-elaborazione e automazione, che è perché ci sono molte serie di tutorial dedicate interamente a questo tema!

Twenty Nineteen include degli script personalizzati all'interno di package.json che si trova nella cartella del tema principale per compilare i vari file SCSS in CSS.

Inoltre tutti i principali prefissi vendor di CSS vengono aggiunti al codice CSS finale, e viene prodotto un file RTL CSS dal file principale style.css. Ciò è fatti via RTLCSS che consente di risparmiarvi di dover creare e gestire fogli di stile separati di RTL e LTR. Solo il codice LTR come normale e RTLCSS creerà automaticamente la versione del foglio di stile RTL per voi. Ottimo, vero?

Vale la pena dare un'occhiata più da vicino agli script inclusi in Twenty Nineteen, poiché può essere facilmente riutilizzato per altri temi o anche in un tema child.

Fogli di stile

Twenty Nineteen utilizza normalize.css (8.0.0) per definire i valori predefiniti CSS di buon senso per tutti i principali browser. In generale ci sembra che ci siano una notevole quantità di stili per coprire una vasta gamma di scenari, tra cui il supporto completo di RTL.

Nella cartella principale del tema troverete gli stili specifici per:

  • stili del tema principale (style.css)
  • stili specifici di customizer (style-editor-customizer.css)
  • stili specifici dell'editor di admin (style-editor.css)
  • Stili RTL generati automaticamente (style-rtl.css)
  • stampa di copie cartacee delle pagine web di Twenty Nineteen (print.css)

Ogni foglio di stile è stato creato con SCSS e viene compilato in CSS tramite gli script contenuti in package.json come accennato in precedenza.

Various style sheets included with Twenty Nineteen

Il futuro

Twenty Nineteen è un tema pulito e solido poiché sta in piedi ed è un'ottima scelta per illustrare le nuove funzionalità di WordPress 5.0. In particolare questo è vero per il nuovo editor che è un'esperienza di editing molto piacevole grazie all'attento styling dei blocchi dell'editor che corrispondono agli stili del front-end.

Il tema sta ancora migliorando continuamente però con un sacco di modifiche previste nelle prossime versioni. Alcuni degli aggiornamenti proposti includono:

  • aggiungere l'opzione di ricerca nell'intestazione della pagina
  • aggiungere un contenuto di partenza nella demo del tema
  • rendere filtrabile il colore primario predefinito
  • miglioramenti al menu mobile dei dispositivi touch screen

Queste e molte altre modifiche imminenti possono essere trovate nella pagina WordPress Core Trac.

E infine...

Nel complesso Twenty Nineteen è una splendida nuova aggiunta alla raccolta predefinita di temi di WordPress. Mi sono divertito a utilizzarlo finora e vi consiglio vivamente di dargli un'occhiata se non lo avete già fatto.

Fatemi sapere nei commenti cosa ne pensate voi del nuovo tema predefinito? Pensate di usarlo su uno qualsiasi dei vostri siti di produzione? In caso affermativo quale tipo(i) di sito avete in mente?

Farò seguire presto a questo tutorial una serie di una o due parti sull'estensione di Twenty Nineteen tramite un tema child. Quindi se c'è qualcosa in particolare che vi piacerebbe vedere allora assicuratevi di farmelo sapere nei commenti!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.