Decodifica WordPress: Nuove Opzioni di Configurazione del Tema con il File Theme.JSON

Pubblicato: di Jason Cosper
Decodifica WordPress: Nuove Opzioni di Configurazione del Tema con il File Theme.JSON thumbnail

Le nuove opzioni di configurazione dei temi in WordPress rendono più facile che mai modificare l’aspetto del tuo sito secondo le tue esigenze specifiche e uniche. Inoltre, la possibilità di convertire i temi classici in temi a blocchi aggiunge ulteriori funzionalità intuitive per l’utente.

In questo post del blog, il quarto della nostra serie “Decodifica di WordPress”, discuteremo entrambi questi sviluppi, inclusi cosa sono e come possono semplificarti la vita per avere un sito bello e su misura, sia che tu abbia competenze di sviluppo WordPress di livello principiante o intermedio.

Ricevi contenuti direttamente nella tua casella di posta

Iscriviti ora per ricevere tutti gli ultimi aggiornamenti direttamente nella tua casella di posta.

Panoramica dei Temi e dei Template WordPress

Prima di esaminare le nuove opzioni per configurare il tuo tema utilizzando le ultime possibilità offerte da un file chiamato theme.json, ci familiarizzeremo con cosa significa effettivamente configurare un tema. Per aiutare la nostra comprensione, chiariremo prima la differenza tra un tema e un modello in WordPress, poiché spesso c’è un po’ di confusione a riguardo, soprattutto se sei un principiante.

Un tema è il design completo e la base per l’aspetto e la sensibilità coesivi del tuo sito, visibili qui. Include elementi come palette di colori, tipografia, layout delle pagine, margini, interlinea, intestazioni e piedini di pagina, posizionamento delle barre laterali e altri elementi. Quando scegli un tema e lo installi, tutti questi elementi vengono installati automaticamente. Ci sono praticamente innumerevoli temi gratuiti e a pagamento disponibili.

Un template, tuttavia, è un layout di singola pagina all’interno di un tema esteso al sito. E sebbene sia possibile apportare modifiche a un template, queste sono applicate solo alle pagine che utilizzano quel template, e non all’intero sito. Elementi come la personalizzazione del layout del tuo blog, la costruzione di landing pages e la creazione di un aspetto distintivo per altri contenuti sono esempi di ciò che puoi ottenere tramite i template.

nuove opzioni di configurazione del tema WordPress

Allora, Quali Sono Le Opzioni Di Configurazione Del Tema?

Le opzioni di configurazione del tema sono pagine di amministrazione che sono incluse in alcuni temi di WordPress. Queste pagine di amministrazione ti permettono di personalizzare le impostazioni del tuo tema installato senza dover modificare alcun file del tema o impelagarti nella modifica del codice. Alcune di queste pagine di amministrazione possono offrire poche opzioni, mentre altre possono avere molte, molte di più. Se sei un principiante, la relativa semplicità di una pagina di amministrazione rispetto alla via più complicata può essere un notevole risparmio di tempo e di sanità mentale.

Se il tuo obiettivo è solo quello di migliorare o modificare le funzionalità all’interno di un tema, puoi semplificare notevolmente le cose installando un plugin piuttosto che riconfigurare l’intero tema. Tuttavia, se desideri modificare gli stili del tema e le impostazioni dei blocchi in tutto il sito, quello che dovrai fare è riconfigurare tutto attraverso la personalizzazione.

Che Cosa Diavolo È JSON?

Per personalizzare il tuo tema di WordPress quando non include una pagina di amministrazione, dovrai creare e aggiungere un file di configurazione theme.json al tema. Ma cos’è JSON? L’acronimo sta per JavaScript Object Notation, che è un formato aperto di interscambio di dati basato su testo che può essere letto sia dagli umani che dalle macchine e non è legato a nessun linguaggio di programmazione specifico. Il suo uso più comune è per la trasmissione di dati nelle applicazioni web.

theme.json è stato aggiunto a WordPress nella versione 5.8 e non funziona con versioni precedenti di WordPress a meno che non si attivi il plugin Gutenberg. (L’editor Gutenberg è stato ufficialmente rilasciato nel 2018 insieme a WordPress 5.0.)

Alcune delle opzioni di personalizzazione che puoi scegliere all’interno di theme.json includono:

  • Abilitare o disabilitare funzionalità come capolettera, padding dei blocchi, margini e altezze di linea personalizzate
  • Aggiungere molteplici palette di colori, gradienti e filtri duotono per le foto
  • Modificare le dimensioni dei caratteri
  • Aggiungere larghezze predefinite per i contenuti
  • Gestire le proprietà CSS (foglio di stile a cascata). Il CSS è utilizzato per definire l’aspetto visivo e la formattazione dei documenti HTML.
  • Assegnare parti di template alle aree di parti di template

Con l’avanzamento dello sviluppo di Gutenberg, le opzioni disponibili con theme.json in WordPress variano dalla versione 5.8 (dove viene utilizzata la versione 1 di theme.json) alla versione 5.9+ (dove viene utilizzata la versione 2 di theme.json) così come nel plugin Gutenberg.

Opzioni Spiegate

Con queste opzioni di personalizzazione più dettagliate ora a portata di mano per sviluppatori WordPress principianti e intermedi, parliamo sia di cosa sono sia del perché potrebbero essere vantaggiose per te.

Abilitare o disabilitare funzionalità come capolettera, padding dei blocchi, margini e altezze di linea personalizzate

Le lettere capitali (una tecnica di stile in cui la prima lettera di un paragrafo ha una dimensione di carattere più grande), il riempimento del blocco (lo spazio all’interno del blocco che si trova tra l’elemento/contenuto e il bordo del blocco, e che circonda tutti i lati dell’elemento), i margini e le altezze di linea personalizzate possono dare alle tue pagine un aspetto più distintivo e persino formale, a seconda di come riesci a stilizzarli.

Aggiunta di più palette di colori, gradienti e filtri duotone per foto

La giusta palette di colori – o più palette – può aiutare a definire e potenziare l’identità commerciabile sia del tuo marchio che del tuo sito, e i gradienti (sfondi di due colori che si fondono l’uno nell’altro) possono conferire al tuo sito un’identità più dinamica rispetto all’uso di colori solidi per le pagine del tuo sito. I filtri duotono possono essere applicati alle foto che hai caricato sul tuo sito e riducono il numero di colori nella foto a soli due – uno per le parti scure della foto, un altro per le parti chiare. Utilizzando queste risorse all’interno delle impostazioni del tema WordPress del tuo sito, le combinazioni di colori complessive del tuo sito possono essere formali, moderate o avanguardistiche – limitate solo dalla tua immaginazione.

Modifica delle Dimensioni dei Caratteri

A volte, i font nel tema scelto possono adattarsi all’identità, al tono o all’atteggiamento specifici che desideri trasmettere, ma le dimensioni del font disponibili potrebbero non essere adatte. Potrebbero essere troppo piccole o troppo grandi. Avendo la possibilità di modificare le dimensioni, puoi personalizzare ogni aspetto dell’aspetto della copia del tuo sito in base all’immagine del tuo marchio.

Aggiungere Larghezze Predefinite per il Contenuto

La larghezza del contenuto è una funzionalità del tema mediante la quale puoi impostare la larghezza predefinita o massima consentita (dimensione) per qualsiasi contenuto nel tema, come incorporamenti e immagini aggiunte ai post. Quando imposti larghezze predefinite, WordPress può ridimensionare i codici di incorporamento a dimensioni specifiche sul frontend e inserire immagini grandi senza interrompere l’area principale del contenuto.

Gestione delle proprietà CSS personalizzate (Cascading Style Sheets).

Se hai trascorso del tempo lavorando con CSS, siamo sicuri che ti starai chiedendo perché vorresti scrivere il tuo CSS personalizzato nel formato JSON, radicalmente diverso. In una parola: flessibilità.

Immaginiamo che tu abbia scelto un colore, verde foresta, per il tuo sito che ti piace davvero molto. Con CSS, dovresti andare e aggiungere il codice colore in tutti i posti in cui vuoi usare quel colore. Non è un grande problema, vero?

Ora diciamo che qualche settimana dopo trovi una tonalità di verde foresta leggermente più scura che preferiresti usare. Con CSS, devi tornare indietro e trovare/sostituire tutte le occorrenze del codice colore “vecchio” verde foresta con quello nuovo.

Ma, usando theme.json, dovresti aggiornare la definizione del colore una sola volta, nel file JSON, per farlo cambiare in tutto il tuo sito.

Assegna parti di template alle aree di parti di template

I modelli di pagina sono file che controllano l’aspetto di una pagina specifica e possono essere utilizzati per applicare layout particolari a diverse pagine del tuo sito. In WordPress, esistono anche parti di template, che funzionano come sezioni strutturali più piccole di un modello di pagina.

Se stai esaminando i file del tuo tema, di solito vedrai parti di template per elementi come intestazioni o piè di pagina. theme.json ti permette di assegnare parti di template alle tre aree di posizionamento disponibili all’interno di un template: Generale, Intestazione e Piè di pagina.

Convertire o Non Convertire – Questo è il Problema

Ora che hai acquisito una comprensione delle opzioni di configurazione del tema WordPress disponibili grazie al file theme.json, vogliamo toccare un ultimo argomento: convertire un tema classico in un tema a blocchi, e le questioni che dovresti considerare nella conversione.

I temi a blocchi in WordPress offrono numerosi vantaggi, poiché sono stati sviluppati per migliorare sia la scalabilità che le prestazioni.

  • I temi a blocchi migliorano le prestazioni di caricamento caricando gli stili solo per i blocchi che sono stati aggiunti a una pagina.
  • I temi a blocchi non richiedono di inserire manualmente i fogli di stile sia per il frontend che per gli editor.
  • theme.json gestisce tutti gli aspetti di add_theme_support(), il che riduce il tempo speso a programmare in PHP.
  • Le funzionalità di accessibilità come Salta al contenuto, navigazione da tastiera e landmark vengono generate automaticamente senza aggiungere codice aggiuntivo.
  • Con un tema a blocchi, l’utente finale può modificare tutte le parti del proprio sito web senza toccare alcun codice.
  • Utilizzando l’interfaccia Stili, gli utenti possono personalizzare colori e tipografia per il sito web e per qualsiasi blocco che potrebbero utilizzare.

Tuttavia, convertire un tema classico in un tema a blocchi non è privo di alcuni rischi.

  • Convertire un tema classico in un tema a blocchi può influenzare i temi child che si aspettano un tema classico. Considera le possibili implicazioni — o la creazione di un nuovo progetto con un nuovo nome di tema — prima di convertire.
  • theme.json richiede la versione 5.8 di WordPress o successiva. Di conseguenza, il supporto per Internet Explorer 11 è stato interrotto quando è stata rilasciata la versione 5.8 di WordPress. Quindi, se il tuo tema classico supporta IE11 — o hai visitatori che usano IE11 — convertire tutto in un tema a blocchi potrebbe influenzare l’esperienza dei tuoi visitatori.

Il Supporto Pro È Disponibile!

Anche se personalizzare i tuoi temi WordPress con opzioni tramite un file theme.json può essere abbastanza fattibile se sei uno sviluppatore WordPress principiante o intermedio, forse non sei ancora completamente sicuro che sia un passo che ti senti a tuo agio a fare da solo. Non temere, perché quando ti iscrivi ai tre piani di hosting WordPress gestito DreamPress di DreamHost, ottieni automaticamente accesso al nostro squadrone d’élite di esperti WordPress completamente interni, disponibili 24/7 per aiutarti in questo e in qualsiasi altro componente del tuo percorso di sviluppo!

Ad background image

Fai Di Più Con DreamPress

Gli utenti di DreamPress Plus e Pro hanno accesso a Jetpack Professional (e oltre 200 temi premium) senza costi aggiuntivi!

Scopri i Piani