Decodifica di WordPress: Un’Introduzione agli Stili Globali

I blocchi WordPress e le funzionalità di Modifica Completa del Sito (FSE) rendono la creazione e la personalizzazione di un sito web di successo rapida e semplice.

Le Global Styles possono aiutarti a unificare l’aspetto del tuo sito WordPress senza dover modificare singoli blocchi o pagine. Quindi, sia che tu voglia cambiare il colore di sfondo o regolare la tipografia dei titoli, potrai effettuare le tue modifiche in un unico luogo, ottenendo un’esperienza utente (UX) più coesa e complessivamente migliore User Experience (UX).

In questo post, ti guideremo attraverso gli Stili Globali. Spiegheremo cosa sono, i loro benefici e come funzionano le nuove funzionalità. Poi discuteremo su come usarli per stilizzare il tuo sito web WordPress. Iniziamo!

Panoramica Degli Stili Globali di WordPress

Prima di lavorare con gli Stili Globali, è importante capire cosa sono e come funzionano. Questa funzionalità funziona in congiunzione con theme.json, un nuovo file di impostazioni del tema. Gli sviluppatori possono utilizzare theme.json per definire i valori predefiniti per un sito così come per i singoli blocchi. Gutenberg applica automaticamente questo JSON quando posizioni il file nella directory radice di un tema basato su blocchi.

Questo file è uno degli strumenti più utili del nuovo editor completo del sito in WordPress 5.9. Il file consente agli autori di temi di condividere Stili Globali così come Impostazioni Globali. WordPress riformatta i dati presi da questi oggetti JSON e li trasforma in CSS. Successivamente, gli utenti possono personalizzare ulteriormente gli stili nell’editor di WordPress.

Nelle versioni precedenti del plugin Gutenberg, dovevi registrare il supporto per le proprietà di stile di un blocco prima di poter lavorare con esse in theme.json. Inoltre, nei temi classici e nelle versioni più vecchie, dovevi usare PHP per definire elementi come le tue scelte di colori e font. Poi era necessario aggiungere stili per il frontend e il backend del tuo tema.

Tuttavia, con l’ultimo rilascio, quando utilizzi un tema con il file theme.json incluso, WordPress aggiunge automaticamente gli stili definiti lì al tuo foglio di stile. Puoi utilizzare questo sistema per aggiungere completamente nuove palette di colori, modificare la tipografia dei temi e altro ancora.

Perché Usare Gli Stili Globali Di WordPress

Indipendentemente dal tuo livello di competenza, troverai probabilmente l’uso degli Stili Globali un’esperienza intuitiva e accessibile. In generale, possono semplificare il processo di web design rendendo più facile cambiare l’aspetto del tuo sito. Se sei un principiante di WordPress, sfruttare questi Stili Globali potrebbe significare che non avrai bisogno di assumere uno sviluppatore per progettare il tuo sito web. Spiacente, sviluppatori.

D’altra parte, però, questa nuova funzionalità potrebbe essere particolarmente utile per gli sviluppatori di temi. Questo perché i Global Styles aiutano gli sviluppatori WordPress a stilizzare i blocchi all’interno del Block Editor. Questo può essere molto vantaggioso, specialmente per i nuovi autori di temi. Offre una varietà di controlli che riducono la necessità di creare soluzioni personalizzate per lo styling di un sito.

In altre parole, Global Styles semplifica notevolmente lo sviluppo dei temi. Di conseguenza, può aiutare gli sviluppatori ad evitare errori di progettazione dannosi.

Creazione del File theme.json

Il file theme.json contiene due parti importanti: impostazioni e stili. Le impostazioni si riferiscono a un elenco di valori di configurazione globali o contestuali che determinano il comportamento dell’editor e dei blocchi. Ad esempio, influisce sui controlli che sono abilitati di default, sui controlli che sono nascosti dall’interfaccia utente (UI), sulla palette di colori disponibili, sulle impostazioni di tipografia, ecc.

Styles gestisce il linguaggio di design del tema e consente agli autori di tema di definire elementi come:

• Dimensione del carattere
• Altezza della linea
• Colori dello sfondo
• Colori dei link

Se vuoi creare un file theme.json, puoi creare un nuovo file con quel nome e poi posizionarlo nella cartella radice del tuo tema. Tutti i contenuti del tuo file dovrebbero essere inseriti all’interno di due parentesi graffe: { }.

In seguito, userai nomi di proprietà e valori tra virgolette doppie e separati da un due punti, per esempio:

{

"property-name": "value"

}

Il nome della proprietà può essere una impostazione o un nome di blocco. Di seguito è riportato un esempio di un file theme.json molto semplice:

{

    "version": 1,

    "settings": {},

    "styles": {},

    "customTemplates": {},

    "templateParts": {}

}

La versione 1 del formato theme.json è la più antica e stabile. Tuttavia, la versione 2 è utilizzata a partire da WordPress 5.9. Anche se la sezione della versione deve essere la prima a seguire la parentesi graffa aperta, le sezioni successive possono essere posizionate in qualsiasi ordine.

Come abbiamo accennato, le due sezioni principali del file sono Impostazioni e Stili. Quindi diamo un’occhiata più da vicino ai preset per ciascuna.

Preimpostazioni Delle Impostazioni

Presets si riferiscono ai controlli predefiniti così come a qualsiasi proprietà CSS personalizzata e sono generati dai valori in theme.json. Alcune delle principali categorie di preset includono:

• Colore
• Tipografia
• Layout
• Spaziatura

Le categorie possono avere anche sottocategorie. Ad esempio, una sottocategoria di Colore potrebbe essere Tavolozza dei Colori:

{

"versione": 2,

"impostazioni": {

"colore": {

"palette": [

{

Ogni preset crea anche una proprietà CSS personalizzata usando la convenzione di denominazione “–wp–preset–{preset-category}–{preset-slug}”.

Ci sono tantissimi preset ed esempi che puoi utilizzare per creare il tuo file theme.json, quindi non li esamineremo tutti qui. Tuttavia, puoi fare riferimento al Manuale di WordPress per una guida più dettagliata.

Preimpostazioni Degli Stili

Preset di stili controllano gli stili degli oggetti all’interno dei blocchi. Ad esempio, il seguente sarebbe un modo per utilizzare il valore esadecimale per uno sfondo e un preset di Stili Globali per il colore del testo:

{

        "versione": 2,

"impostazioni": { ... },

"stili": {

"colore": {

"sfondo": "#FBF",

"testo": "var(--wp--preset--color--purple)"

}

}

}

Se volessimo cambiare il colore dell’intestazione di un blocco, sarebbe simile a questo:

{

        "version": 2,

"settings": {...},

"styles": {

...,

               "blocks": {

             "core/heading": {

     "color": {

      "text": "var(--wp--preset--color--blu)"

     }

Anche in questo caso, ci sono quasi infinite esempi e modi di utilizzare i preset per gli stili dei blocchi. Puoi consultare la documentazione di WordPress per una spiegazione dettagliata.

Ci sono anche le sezioni Template e parti di Template. Queste includono i file base del tuo tema, come index.html, così come le sezioni per organizzare e strutturare il tuo tema.

Come Stilizzare il Tuo Sito WordPress Usando gli Stili Globali

Se stai cercando un modo accessibile ai principianti per utilizzare gli Stili Globali per stilizzare il tuo sito web, puoi usare l’interfaccia degli Stili Globali con un tema a blocchi di WordPress. Nota che avrai accesso all’interfaccia degli Stili solo con WordPress 5.9 o versioni successive.

Scegliere Un Tema Basato Su Blocchi

Prima di tutto, avrai bisogno di un tema basato su blocchi. Per trovarne uno, puoi navigare nella Directory dei Temi WordPress dal tuo dashboard di amministrazione cercando in Aspetto > Temi > Aggiungi Nuovo. Successivamente, puoi cliccare su Filtro Caratteristiche e selezionare Modifica Completa del Sito, seguito da Applica:

Una volta che trovi un tema WordPress che ti piace, puoi posizionare il mouse sopra di esso, poi selezionare Installa seguito da Attiva. Noi utilizzeremo Twenty Twenty-Two, che potrebbe già essere installato se stai utilizzando WordPress 5.9 o successivo.

Accesso All’Interfaccia Degli Stili

Successivamente, vai al tuo Theme Editor (Appearance > Editor). Nell’angolo in alto a destra dello schermo, vedrai un cerchio semiombreggiato, che rappresenta il pannello degli Stili:

Quando fai clic per la prima volta, ti verrà presentata una Guida di Benvenuto agli Stili. Se necessiti di accedervi in futuro, puoi trovarla facendo clic sui tre puntini verticali nell’angolo in alto a destra e selezionando Guida di Benvenuto.

La finestra di anteprima mostra come appare lo stile attuale del tuo tema. Nel pannello Stili, troverai le impostazioni per:

• Tipografia
• Colori
• Layout
• Blocchi

Diamo un’occhiata più da vicino a ciascuno.

Tipografia

Sotto Typography, puoi gestire le impostazioni di tipografia per due elementi: Testo e Link.

Puoi cambiare il tipo di carattere e la dimensione:

Puoi anche regolare l’altezza della linea e selezionare un peso del carattere. Avrai queste stesse opzioni per i tuoi link. Quando hai finito, ricorda di salvare le tue modifiche.

Colori

Sotto Colors, troverai le preimpostazioni di colore di default che accompagnano il tuo tema. Per creare le tue palette di colori, puoi inserire i numeri dei valori HEX o utilizzare il costruttore di colori drag-and-drop per generare i colori preferiti:

Puoi anche rinominare i colori con qualcosa di più identificabile o descrittivo rispetto ai valori alfanumerici esadecimali standard. Puoi aggiungere gradienti personalizzati, applicare filtri duo-tone alle immagini e altro ancora.

Successivamente, puoi modificare i colori per tre elementi principali: Background, Testo e Link. Puoi anche selezionare uno di questi elementi per personalizzarne lo stile. Le modifiche saranno applicate immediatamente mentre modifichi.

Layout

Sotto Layout, puoi regolare il padding e altri elementi. Questo è semplice e può essere molto utile quando è necessario fare un piccolo aggiustamento (ad esempio, per la simmetria della pagina).

Blocchi

Finalmente, puoi cambiare l’aspetto di singoli blocchi. Dopo aver selezionato Blocchi dal pannello degli Stili, troverai un elenco di blocchi sul tuo sito.

Immagina che tu voglia cambiare lo stile del tuo blocco Intestazione. Puoi selezionare Intestazione dall’elenco, quindi regolare le impostazioni di Colori e Tipografia :

Quando hai finito, puoi cliccare su Salva. Se desideri tornare agli stili del tema che avevi prima di apportare modifiche, puoi navigare nel pannello degli Stili, cliccare sui tre puntini verticali, e poi selezionare Ripristina impostazioni predefinite.

Un Metodo Migliore per Usare e Stilizzare WordPress

WordPress lavora continuamente per migliorare l’esperienza di editing per i suoi utenti. Ora, grazie agli Stili Globali, lo sviluppo dei temi è diventato molto più semplice sia per i principianti che per i professionisti esperti.

Come discusso in questo post, puoi creare un file theme.json per applicare le configurazioni degli Stili Globali al tuo tema. Puoi anche utilizzare l’editor di Stili con un tema basato su blocchi per personalizzare l’aspetto del tuo sito. Tutto questo rende la progettazione di un sito di successo un gioco da ragazzi.

DreamHost è un team di esperti web esperti. Comprendiamo l’importanza di ottimizzare la tua esperienza WordPress. Ci impegniamo a supportare i tuoi sforzi utilizzando l’ultima tecnologia open-source e un supporto premiato. Scopri oggi i nostri piani di hosting WordPress gestito per saperne di più!