Il wordpress Gpci framework utilizza, al contrario della maggior parte dei temi a blocchi, il customizer in modo molto importante. Il customizer in questo framework segue la seguente logica:
- è da considerarsi come una procedura guidata iniziale da eseguire appena attivato il tema child
- è da considerarsi il punto cardine per le modifiche che interessano tutto il sito; come codice css (che sarà comunque alleggerito dai settaggi del site-editor), codice javascript globale, parametri delle grandezze media, della cache, del file .htaccess e altro
- è da considerarsi come il punto cardine per ripristini e azzeramenti che interessano tutto il sito in caso di problemi lievi o indecisioni
Procedura iniziale
Appena attivato il tema child è da ritenersi obbligatorio recarsi al customizer (o dal frontend o da admin/aspetto/personalizza) in quanto durante il salvataggio del customizer vengono generati e modificati dinamicamente vari file essenziali del tema (come il theme.json, lo style.css e i files javascript). Quindi seguire e compilare tutte le sezioni poi salvare; tutti i files necessari nel tema child verranno aggiornati automaticamente. Ora vediamo la lista delle sezioni:
Operazioni
In questa sezione è possibile eseguire operazioni e ripristini che riguardano il sito globalmente e verificarne istantaneamente le conseguenze. Le operazioni possibili sono:
Pulsante Ripristina predefiniti
Se cliccato questo pulsante e confermato l'alert tutti i valori vuoti delle sezioni theme json e css base saranno ripristinati ai valori predefiniti, è necessario salvare il customizer affinchè i files siano automaticamente ricalcolati. La prima volta che si visita il customizer dopo l'installazione del framework è meglio utilizzare questo pulsante per riempire tutti i valori automaticamente.
Pulsante Resetta caches
Se cliccato questo pulsante e confermato l'alert tutte le caches relative alle variabili saranno azzerate, saranno poi automaticamente ricalcolate e reinserite in cache appena utili. Utilizzare questo pulsante la prima volta che si visita il customizer per scrivere le caches da zero, in seguito probabilmente non sarà quasi mai utilizzato ma potrà sempre essere utile in caso di caches calcolate in modo errato.
Denominazione del sito
Qui è possibile impostare il titolo del sito, il motto e il favicon (icona del sito). Documentazione ufficiale. Riguardo la dimensione della favicon: wordpress consiglia almeno 512x512px. I miei consigli sono:
- 256px è quasi sempre sufficiente per avere una buona resa e una dimensione ridotta
- caricare in estensione jpg o png così l'immagine sarà automaticamente convertita a webp (vedi modulo media) con retrocompatibilità automatica
Impostazioni homepage
Qui è possibile scegliere cosa visualizzare nella pagina iniziale del sito. Documentazione ufficiale. Le possibilità sono:
- gli ultimi articoli - la homepage sarà una query degli articoli (post) del sito. E' possibile modificare la query e/o aggiungere blocchi dal site editor
- una pagina statica - scegliere la pagina che verrà utilizzata come home e, se utilizzata, anche la pagina dove verrà generata la query degli articoli
Notare che il template home del blog in wordpress si riferisce sempre alla pagina che contiene la query degli articoli. Da notare anche che in un tema a blocchi probabilmente è più pratico utilizzare solo pagine statiche e, se necessaria una query, inserire nella pagina il blocco gutenberg corrispondente.
Menu
In questa sezione è possibile configurare il menu di navigazione. Documentazione ufficiale. Notare che appena attivato il tema verrà automaticamente creato, se non esistente, un menu predefinito (default classic) con una voce pagina iniziale. I menu classici (ossia non quelli a blocchi) sono generati nel frontend tramite il blocco menu classico che è preinserito nella template part header-primary.
Theme.json
Questa sezione è la più lunga. Serve a configurare il file theme.json ed è divisa in pannelli che rispecchiano le sezioni del file. Quando salvato il customizer, se necessario, il file sarà aggiornato. E' bene capire subito che questi parametri comunicano con gutenberg decidendone varie opzioni. Per dare un'idea il file è diviso in macro zone:
- Settings - questi sono i parametri globali che influiscono in tutti i blocchi che supportano la proprietà corrispondente. Ad esempio la larghezza del layout, se compaiono i comandi relativi ai colori di background, testo, links; se compaiono i comandi relativi ai bordi, margini. In vari casi si limitano ad aggiungere una classe css che andrà quindi integrata nel css del sito
- Styles - Assegnano proprietà css al body, elementi (come h1, h2, paragrafi, links) e blocchi. Il risultato di questi stili è visualizzato anche in gutenberg. Colori e alcuni elementi possono essere modificati nelle aree di testo di questa zona o direttamente dal site editor
- CustomTemplates, templateParts, patterns: Per operazioni sui templates e template parts e patterns.
Vediamo i pannelli uno per uno:
Settings > layout
Qui vengono definite una o due larghezze del contenuto del sito come stringhe, le unità disponibili sono:
- px
- em
- rem
- vh
- vw
- %
Quindi potremmo settare una larghezza come 1480px o 1280px, ecc... Le proprietà in questo pannello sono:
contentSize
Questa è la larghezza predefinita del contenuto, è applicata anche via css alla classe .wp-block-group per definirne proprio la larghezza predefinita. E' importante capire che in questo framework la larghezza del contenuto è sempre data dal blocco gruppo. Notare che questa larghezza influisce anche sulla larghezza ideale delle immagini.
wideSize
E' possibile anche impostare una seconda larghezza che potrebbe essere sia maggiore che minore e utilizzarla sempre all'interno del blocco gruppo cliccando sul pulsante dedicato. Può essere utile se il sito ha dei layout di diversa larghezza in base al contenuto. Non usare 100% in quanto è già riservato alla classe alignfull. A questa larghezza è collegata la classe gutenberg alignwide.
Altre proprietà
In questa textarea è possibile inserire, attivare o disattivare le altre proprietà di settings > layout.
Settings > color > palette TemplatesBtn
Qui vengono impostati i colori selezionabili in gutenberg. Per ogni colore impostare un nome (che verrà usato anche come slug) e scegliere ovviamente il colore corrispondente. Le altre proprietà setting>color del theme.json vengono impostate dopo.
TemplatesBtn
Note:
- la proprietà color deve contenere un colore in formato hex
- nella proprietà nome cercare di utilizzare solo lettere, numeri, spazi, trattini medi
- lo slug è calcolato automaticamente dal nome
I set di colori selezionabili si trovano nel modal. Appena selezionato il set, dopo una richiesta di conferma, la pagina sarà ricaricata. Ricordarsi di salvare il customizer sia prima (per eventuali modifiche su cui si stava lavorando) ma anche dopo in quanto solo durante quest'ultimo il salvataggio il theme json sarà popolato con i nuovi valori.
{
"themejson-palettes":[
{ "id":"Bianco e nero", "desc":"Palette per tema in bianco e nero", "palette":[
{ "name":"Bianco", "color":"#ffffff" },
{ "name":"Nero", "color":"#0a0002" }
] },
{ "id":"Colori gpci", "desc":"Colori utilizzati dal tema padre.", "palette":[
{ "name":"Blu", "color":"#1e8bc3" },
{ "name":"Blu scuro", "color":"#055580" },
{ "name":"Verde", "color":"#35bc7a" },
{ "name":"Verde scuro", "color":"#058c4b" },
{ "name":"Giallo", "color":"#ff9f00" },
{ "name":"Giallo scuro", "color":"#9b6100" },
{ "name":"Arancione", "color":"#f86924" },
{ "name":"Arancione scuro", "color":"#a43500" },
{ "name":"Rosso", "color":"#f05a49" },
{ "name":"Rosso scuro", "color":"#AC1D0E" },
{ "name":"Nero", "color":"#515151" },
{ "name":"Grigio normale", "color":"#808080" },
{ "name":"Grigio chiaro", "color":"#ebeff2" },
{ "name":"Grigio scuro", "color":"#cccccc" },
{ "name":"Bianco", "color":"#cccccc" }
] }
]
}Settings > border
Aggiunge o rimuove i controlli all’inspectorControl Bordo (come colore, raggio, stile, larghezza).
Settings > shadow
Aggiunge o rimuove i controlli all’inspectorControl Ombra, ossia se compariranno i preset default di wordpress ed è possibile definire uno o più box-shadow personalizzati.
Settings > color
Aggiunge o rimuove i controlli all’inspectorControl Colore (come sfondo, testo, link, gradienti, duotone e colori personalizzati). Se inserita qui anche la proprietà palette, verrà usata al posto di quella definita prima.
Settings > background
Aggiunge o rimuove i controlli all’ inspectorControl Sfondo (immagine di sfondo).
Settings > dimensions
Aggiunge o rimuove i controlli all’ inspectorControl Dimensioni (ratio e altezza minima).
Settings > spacing
Aggiunge o rimuove i controlli all’ inspectorControl Dimensioni (spaziature e margini). Permette anche, usando la proprietà spacingSizes, di aggiungere i propri spacing preset (verranno sostituiti nell'editor, ma quelli default di wordpress resteranno disponibili come variabili).
Settings > typography
Aggiunge o rimuove i controlli all’ inspectorControl Tipografia, se si usa la tipografia fluida è possibile aiutarsi con questo calcolatore. Ricordarsi che il valore rem fa riferimento all' html non al body. Quindi per cambiare questo valore base non usare il theme.json ma usare il css, ad esempio con:
:is(html){ font-size:18px; }Tenere però presente che il visitatore potrebbe aver cambiato il valore di questa grandezza nel proprio browser per esigenze visive.
Settings > blocks
Aggiunge o rimuove i controlli all’ inspectorControl per ogni blocco e controllo specificato, sovrascrivendo i settings globali nei campi precedenti. I parametri usabili sono gli stessi dei settings. Esempio:
{
"core/paragraph":{
"typography":{
"fontSizes":[
{ "name": "50px", "size": "50px", "slug": "50px" }
],
"custom":{ "baseFont":32 }
}
},
"core/group":{
"border":{ "radius":false },
"color":{
"custom":false,
"palette":[
{ "slug":"nero-profondo", "color":"#000000", "name":"Nero profondo" },
{ "slug":"white-light", "color":"#ffffff", "name":"Bianco scintillante" }
]
}
},
"core/image":{
"border":{ "radius":false }
}
}Settings > custom
Non modifica i controlli, semplicemente crea variabili da usare nel css o negli stili/settings del theme.json. Da notare che queste variabili sarebbero inserite nella head, da wordpress, come stile globale inline (id:global-styles-inline-css). In questo framework lo stile globale è invece automaticamente convertito in css e NON caricato sul frontend come stile inline nella head per i visitatori del sito.
Styles (body)
Applica proprietà css al body: si usano gli stessi parametri dei campi precedenti e si assegna un valore.
Styles > elements
Applica proprietà css agli elementi del sito (come paragrafi, h1, links): si usano gli stessi parametri dei campi precedenti e si assegna un valore.
Styles > blocks
Applica proprietà css ai blocchi del sito: si usano gli stessi parametri dei campi precedenti e si assegna un valore; è possibile anche bersagliare elementi all’ interno dei blocchi.
customTemplates
Modifica il titolo dei post types a cui applicare i templates.
templateParts
Modifica titolo e area a cui applicare le templates-parts.
patterns
Registra patterns remoti aggiuntivi che possono essere visualizzati in gutenberg.
Esempi
Ogni zona del theme.json è già compilata al mio meglio per fare capire la logica e dare esempi semplificati. Ovviamente ogni zona è pienamente configurabile a piacere, se si lascia vuota una textarea è buona norma inserire {} invece di nulla per non invalidare il theme.json.
Risorse utili
Javascript
In questa sezione è possibile inserire codice javascript personalizzato globale che verrà inserito nei files js-head.js e js-footer.js.
Javascript head
Inserire il codice javascript aggiuntivo che verrà accodato globalmente nella head del sito subito dopo il codice base.
Javascript footer
Inserire il codice javascript aggiuntivo che verrà accodato globalmente nel footer del sito (solo se il file contiene codice).
Css aggiuntivo
In questa sezione è possibile aggiungere css personalizzato e modificare il css predefinito che saranno inseriti nel file style.css. E' importante sapere l'ordine dei vari css inseriti nel file:
- stili globali - generati dai file theme.json del tema padre e del tema figlio
- codice css base - css preinserito nel framework e visibile da questa sezione spuntando la checkbox dedicata (è modificabile a piacimento)
- codice css aggiuntivo - css inserito nella textarea principale di questa sezione