Gli sviluppatori di temi WordPress possono utilizzare un file theme.json per semplificare un processo che in passato si basava in gran parte su PHP. Tuttavia, potete sempre utilizzare le vostre competenze in HTML, JavaScript e PHP per creare i vostri temi, e i CSS non fanno eccezione. Infatti, è possibile utilizzare le proprietà personalizzate CSS all’interno di theme.json. Questo può migliorare la fase di progettazione e offrire una maggiore flessibilità.
In questa guida affronteremo le proprietà personalizzate CSS per scoprire come funzionano con WordPress e theme.json. Ma prima di arrivare a questo punto, facciamo un riepilogo delle caratteristiche del file theme.json, del Full Site Editing (FSE) e di come i CSS si inseriscono in questo nuovo approccio alla progettazione.
Come funziona theme.json con WordPress
Il file theme.json è apparso per la prima volta con WordPress 5.8. Si tratta di un modo rivoluzionario di progettare i temi di WordPress, utilizzando la sintassi JSON per costruire un file di configurazione. WordPress lo legge e applica i risultati senza bisogno di PHP, CSS o JavaScript.
Le impostazioni globali e gli stili di FSE controllano vari aspetti visivi del tema. Possono includere le tipiche palette di colori e la tipografia, ma anche le opzioni di layout e gli stili dei singoli blocchi ed elementi.
Sebbene il FSE sia intuitivo, potente, adattabile e facile da usare, theme.json può aiutare a colmare il divario tra l’utente finale e lo sviluppatore. Quasi tutte le opzioni offerte da theme.json sono visibili anche nell’Editor del sito.
L’utilizzo di theme.json offre molti vantaggi nella creazione di temi WordPress. I motivi sono molteplici:
- Costituisce una posizione centrale per la configurazione del design del tema, il che rende più facile la gestione e l’aggiornamento.
- C’è meno confusione tra l’esperienza front-end, l’editor del sito e la base di codice del tema.
- L’utilizzo di
theme.jsonoffre compatibilità con il futuro dello sviluppo e del design di WordPress. - Le funzionalità integrate di WordPress riducono la necessità per l’utente di applicare CSS personalizzati.
Vediamo come theme.json si collega alle impostazioni globali e agli stili del FSE.
Un’introduzione alle impostazioni globali e agli stili del FSE
Il FSE rappresenta una nuova era nello sviluppo di temi WordPress e le impostazioni globali e gli stili sono in prima linea. Permettono agli utenti di personalizzare quasi ogni elemento dell’aspetto di un sito attraverso la funzionalità dell’Editor del sito.
Qui potete regolare alcuni aspetti del layout del tema con opzioni che prima richiedevano l’uso di CSS o di un plugin per la creazione di pagine di terze parti. La modifica dei margini, del padding e dei bordi ne sono un esempio, ma ce ne sono molti altri.
Potete anche attivare o disattivare molte di queste funzionalità all’interno di theme.json (o del file block.json di un blocco). Questo supporta la personalizzazione dell’interfaccia utente insieme al design generale del sito.
Tuttavia, le opzioni a vostra disposizione, pur essendo ampie, potrebbero non coprire tutte le vostre esigenze, e ciò è particolarmente vero se state costruendo un tema da zero. Questo è un compito che le proprietà personalizzate CSS possono aiutare a risolvere.
Le proprietà personalizzate dei CSS
In PHP, JavaScript e in quasi tutti i linguaggi di programmazione, le variabili contengono i valori di vari elementi del codice. Ad esempio, potete memorizzare valori come nomi, date e numeri e utilizzarli nel programma.
Le variabili CSS3 – o proprietà personalizzate CSS, come le chiameremo in questo post – sono supportate dalla maggior parte dei browser attuali. Internet Explorer non le supporta, così come Opera Mini. Tuttavia, tutti i principali browser le supportano.
Le proprietà personalizzate CSS permettono di memorizzare valori da riutilizzare nel vostro foglio di stile. È un modo potente per creare un CSS più dinamico e flessibile. Potete aggiornare più regole di stile cambiando un solo valore.
Il concetto di variabili CSS non è del tutto nuovo. Preprocessori come Sass utilizzano una funzionalità simile. Ad esempio, prendiamo il seguente esempio di Sass:
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-colorQuesto processa il tipico CSS:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}Tuttavia, le proprietà personalizzate dei CSS portano il tutto direttamente al browser. Questo offre alcuni vantaggi:
- Aggiornamenti dinamici. A differenza della maggior parte delle variabili del preprocessore, potete aggiornare le proprietà personalizzate CSS “al volo” utilizzando JavaScript.
- Natura a cascata. Le proprietà personalizzate seguono la cascata CSS, il che offre una maggiore flessibilità e uno stile più consapevole del contesto.
Le proprietà personalizzate saranno anche più performanti grazie alla riduzione della ridondanza del codice. Fogli di stile più piccoli significano tempi di caricamento più rapidi.
La sintassi delle proprietà personalizzate CSS
Come per le tipiche variabili del preprocessore, la sintassi delle proprietà personalizzate CSS è semplice. Utilizza doppi trattini anziché segni di dollaro per specificare una proprietà:
:root {
--primary-color: #007bff;
}Da qui, si utilizza la funzione var() per assegnare queste proprietà agli elementi:
.button {
background-color: var(--primary-color);
}Notate che potete anche assegnare proprietà personalizzate utilizzando la proprietà @. Tuttavia, come capirete tra poco, WordPress semplifica l’intero processo.
Dove usare le proprietà personalizzate CSS
La versatilità è all’ordine del giorno quando si parla di proprietà personalizzate CSS. Con WordPress e theme.json avete a disposizione diversi modi per utilizzarle:
- Preset: potete definire preset di colore, font e spaziatura.
- Stili di blocco: i singoli blocchi possono utilizzare proprietà personalizzate per uno stile coerente.
- Stili globali: le proprietà personalizzate sono preziose per il design dell’intero sito.
Potete creare proprietà completamente personalizzate per qualsiasi scopo vogliate. Vediamo un esempio pratico di come utilizzare le proprietà personalizzate nel vostro file theme.json:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"line-height": {
"body": 1.5,
"heading": 1.2
}
}
},
"styles": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--body)"
},
"blocks": {
"core/heading": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--heading)"
}
}
}
}
}Qui definiamo un colore preimpostato e utilizziamo la proprietà custom per definire i valori di line-height per i titoli e il corpo della pagina. WordPress genererà le proprietà CSS per gli elementi che definite utilizzando custom. Più avanti, possiamo assegnare queste proprietà personalizzate a vari stili, impostazioni, blocchi e altro ancora.
I vantaggi dell’uso delle proprietà personalizzate CSS
Forse avete già un’idea di come le proprietà personalizzate CSS possano aiutarvi nello sviluppo dei temi. Tuttavia, ci sono molti vantaggi da sottolineare.
Abbiamo già parlato di modularità e riutilizzabilità. Tutti i valori comuni che definite come proprietà personalizzate favoriscono la coerenza e riducono la ridondanza. Tale ridondanza si tradurrà in migliori prestazioni potenziali per il vostro tema.
Per l’utente finale, le proprietà personalizzate offrono diversi vantaggi:
- Personalizzazione semplificata. Gli utenti e i proprietari dei siti possono personalizzare un tema senza dover avere conoscenze complesse di CSS. Una volta esposte le variabili attraverso
theme.json, gli utenti possono accedere alle impostazioni attraverso l’Editor del sito. - Migliore compatibilità con FSE. Le proprietà personalizzate si allineano ai principi di FSE, permettendoti di creare temi più flessibili e dinamici.
- Manutenzione e aggiornamenti più semplici. Se avete bisogno di aggiornare valori comuni a tutto il tema, una proprietà personalizzata permette di modificarli in un solo punto. Questo semplifica la manutenzione e rende più gestibili gli aggiornamenti e le modifiche.
In generale, le proprietà personalizzate possono migliorare il flusso di lavoro dello sviluppo del tema. Inoltre, la loro determinazione è più semplice rispetto all’utilizzo delle tipiche variabili CSS.
Come definire le proprietà CSS personalizzate nel file theme.json
Passiamo agli aspetti pratici della definizione e dell’utilizzo delle proprietà personalizzate CSS all’interno di theme.json. Il primo passo è imparare a scriverle.
Sintassi e convenzioni di denominazione
WordPress offre la proprietà custom per facilitare le definizioni. Questa proprietà è leggermente più semplice da usare rispetto alla proprietà @ o alle definizioni all’interno delle pseudo-classi e utilizza il formato standard chiave/valore:
{
"settings": {
"custom": {
"property-name": "value"
}
}
}Dietro le quinte, WordPress elaborerà questa definizione e genererà una proprietà CSS personalizzata utilizzando i doppi trattini:
--wp--custom--<custom-element>--wp--custom-- sarà sempre parte della proprietà CSS e non utilizzerà le maiuscole. Ad esempio, se definite lineHeight come proprietà personalizzata, WordPress la trasformerà in “kebab case:”
--wp--custom--line-heightPer quanto riguarda le convenzioni di denominazione, potete usare le maiuscole se lo desiderate, ma vi consigliamo di usare le maiuscole per i nomi delle proprietà personalizzate. Questo è coerente con le convenzioni di denominazione di WordPress, migliora la leggibilità e riduce gli errori di elaborazione.
Nota: le proprietà personalizzate CSS utilizzano doppi trattini perché il gruppo di lavoro CSS del W3C vuole incoraggiare a utilizzare Sass (che utilizza il segno del dollaro per definire le proprietà). In questo modo, avete la possibilità di utilizzare entrambi i metodi per migliorare i vostri progetti.
WordPress definisce già alcune proprietà personalizzate – o almeno, i temi hanno la possibilità di farlo. Ciò significa che vedrete le variabili CSS all’interno di theme.json senza una dichiarazione esplicita:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "var(--wp--preset--color--primary)",
"name": "Primary"
}
]
},
"custom": {
"spacing": {
"small": "1rem",
"medium": "2rem",
"large": "3rem"
}
}
},
"styles": {
"spacing": {
"blockGap": "var(--wp--custom--spacing--medium)"
}
}
}In questo esempio, definiamo un colore primario utilizzando un colore preimpostato esistente. Poi, definiamo alcune proprietà di spaziatura personalizzate e le impostiamo con var().
In questo modo non abbiamo bisogno di codificare i valori in theme.json. Inoltre, gli utenti possono aggiornare questi valori nell’Editor del sito e fare in modo che si propaghino in tutto il tema.
Preset e proprietà personalizzate
Naturalmente, theme.json permette anche di definire dei preset per i colori, le dimensioni dei caratteri e altri elementi comuni del tema. D’altra parte, potete usare le proprietà personalizzate per qualsiasi valore che volete riutilizzare nel vostro tema.
La differenza maggiore riguarda le convenzioni di denominazione e l’accessibilità. Gli utenti non saranno in grado di accedere alle proprietà personalizzate nell’Editor del sito senza un ulteriore lavoro da parte vostra. Con le preimpostazioni, WordPress genererà un CSS simile a quello che elabora le proprietà personalizzate:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"fontFamily": {
"base": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
"headings": "'Helvetica Neue', Helvetica, Arial, sans-serif"
}
}
}
}Una volta che WordPress le avrà elaborate, potrete notare le differenze intrinseche:
--wp--preset--primary: #007bff;
--wp--custom--font-family--base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
--wp--custom--font-family--headings: "'Helvetica Neue', Helvetica, Arial, sans-serif";Notate che l’ulteriore annidamento delle proprietà utilizzerà doppi trattini, anche dopo aver convertito il camel case in kebab case.
CSS globale e specifico per il blocco rispetto alle proprietà CSS personalizzate
Con il classico WordPress, per disegnare gli elementi all’interno del tema si usavano CSS aggiuntivi e personalizzati sul front-end. Questo è ancora il caso di theme.json e del FSE, anche se l’approccio è diverso dalle proprietà personalizzate CSS.
Se visitate l’Editor del sito e andate nella schermata Stili, noterete la sezione CSS aggiuntivi. Questa funziona come un pannello CSS personalizzato nelle installazioni classiche di WordPress:
Rappresenta un modo per aggiungere una personalizzazione CSS globale a un tema. Tuttavia, è un modo per dare agli utenti la possibilità di aggiungere CSS. Potreste anche utilizzarla per apportare piccole modifiche che non giustificano un intero foglio di stile.
All’interno di theme.json, utilizzate la proprietà css per definire qualsiasi CSS aggiuntivo desideriate:
{
"version": 3,
"styles": {
"css": "margin: 0"
}
}Notate che non è necessario utilizzare il punto e virgola per terminare le dichiarazioni CSS. Potete anche impostare un CSS personalizzato per i blocchi:
{
"version": 2,
"styles": {
"blocks": {
"core/post-title": {
"css": "letter-spacing: 1px;"
}
}
}
}Ogni volta che impostate un CSS di questo tipo all’interno di theme.json, lo vedrete in tutti i campi CSS aggiuntivi dell’editor del sito. Tuttavia, ricordate che nulla di ciò che dichiarate utilizzando css è una proprietà CSS personalizzata.
Usare il selettore ampersand (&)
Come Sass, anche WordPress supporta il selettore ampersand, con alcune differenze. In questo caso, si tratta di un ottimo modo per puntare a elementi e proprietà annidate. Questo potrebbe essere importante se scegliete di dichiarare proprietà CSS personalizzate per singoli blocchi.
Prendiamo il seguente esempio:
…
"styles": {
"blocks": {
"core/table": {
"css": "color:#333 & th{ background:#f5f5f5; }"
}
…Questo definisce un colore di testo e un colore di sfondo per l’elemento intestazione della tabella. Una volta che WordPress lo elabora, otterrete un CSS pulito e semplice:
.wp-block-table > table {
color: #333;
}
.wp-block-table > table th {
background: #f5f5f5;
}I selettori ampersand sono eccellenti se desiderate estendere un CSS. Un modo comprensibile di pensare al selettore è che aiuta a separare gli elementi CSS. Vediamo il seguente esempio:
{
"version": 3,
"styles": {
"blocks": {
"core/avatar": {
"css": "& img {border-radius: 999px}"
}
}
}
}Aggiunge un raggio al bordo di un avatar e produce il CSS come ci si aspetterebbe:
.wp-block-image img {
border-radius: 999px;
}Tuttavia, senza l’ampersand, WordPress unirebbe le dichiarazioni:
…
.wp-block-imageimg
…L’utilizzo del selettore con l’ampersand per le proprietà personalizzate CSS sarà un’attività che farete regolarmente.
Il ruolo di Kinsta nel supportare lo sviluppo moderno di WordPress
La scelta dell’hosting è importante quanto qualsiasi linguaggio di programmazione, preprocessore o altro elemento tecnico. Senza un provider di hosting di qualità al vostro fianco, non potrete beneficiare delle prestazioni e degli strumenti di theme.json o FSE.
Kinsta può essere il fulcro del vostro intero flusso di lavoro, grazie ai nostri strumenti di sviluppo. Potete iniziare con DevKinsta, il nostro ambiente di sviluppo locale che utilizza i container Docker per isolare la vostra installazione di WordPress:
Una funzionalità utile è la capacità di DevKinsta di eseguire il push e il pull dei dati tra il vostro computer locale e gli ambienti di staging di Kinsta:
Questo permette di testare i vostri temi in un ambiente simile alla produzione prima di iniziare a distribuirli. Quando lavorate con le proprietà personalizzate dei CSS, potete assicurarvi che funzionino in contesti diversi. L’API di Kinsta può supportare la volta pipeline CI/CD una volta pronti ad andare in produzione.
Altri aspetti dell’architettura di Kinsta vi aiuteranno nell’intera configurazione di sviluppo. Ad esempio, Kinsta supporta Git, il che rende facile il controllo della versione dei file del tema, compreso theme.json. Per iterare le proprietà personalizzate o semplicemente per sperimentare diverse configurazioni, vorrete sapere che avete a disposizione un’opzione di rollback.
Infine, se scegliete di utilizzare il vostro tema su un server Kinsta, il nostro Edge Caching aumenta le prestazioni di theme.json fino all’80%. Avere un sito web che funziona velocemente a prescindere dal browser dell’utente farà sì che le aggiunte personalizzate vengano visualizzate prontamente.
Riepilogo
Così come theme.json è un potente file di configurazione per creare temi WordPress flessibili e manutenibili, le proprietà personalizzate CSS sono fondamentali per il flusso di lavoro. È così che costruirete e dichiarerete il CSS per gli elementi che non si possono costruire con l’Editor del sito. Saranno inoltre fondamentali se costruite i vostri blocchi o semplicemente se volete sviluppare temi WordPress unici con la massima profondità di personalizzazione. Inoltre, avete anche la possibilità di condividere il CSS con gli utenti attraverso l’Editor del sito.
Le proprietà personalizzate CSS faranno parte del vostro flusso di lavoro per lo sviluppo di temi? Se sì, come le utilizzerete? Condividete le vostre idee nella sezione commenti qui sotto!
Lascia un commento