Questo tutorial ti mostrerà come aggiungere le impostazioni del tema, ad esempio i colori del tema, in WordPress Customizer e ricompilare il foglio di stile del tema con le variabili scelte. Avendo lo stile del tema in SCSS utilizzando una libreria, puoi facilmente consentire agli utenti del tema di personalizzare qualsiasi variabile nel foglio di stile del tema, senza che debbano modificare i file SCSS stessi.
Qualsiasi buon tema dovrebbe consentire una buona dose di personalizzazione. Per lo meno dovrebbe essere possibile impostare i colori del tema principale. Invece di scrivere un sacco di brutti CSS per sovrascrivere i colori del tema ovunque, puoi invece ricompilare l’intero foglio di stile direttamente da Customizer. Questo tutorial ti insegnerà come fare!
Cosa faremo e di cosa abbiamo bisogno
Presumo che il tuo tema abbia già un po’ di stile nei file SCSS che hai già compilato nel main style.css. E usando SCSS molto probabilmente definisci elementi ricorrenti come colori, dimensioni o punti di interruzione come variabili SCSS e utilizzi tali variabili durante lo stile.
Puoi creare tutte le impostazioni del Customizer che desideri per le variabili nel tuo file SCSS. Colorpicker, numeri e input di testo sono perfetti per questo. Mentre l’utente modifica le impostazioni in WordPress Customizer, vedrà un’anteprima del tema con le variabili modificate. E quando fanno clic su "Salva", il CSS finale verrà compilato nel file CSS del foglio di stile principale utilizzando i valori scelti.
Come esempio per questo tutorial, presumo che il file SCSS del foglio di stile principale del tema esegua @importun variables.scssfile. Lì abbiamo definito tre variabili che vogliamo siano personalizzabili in Customizer: due colori e una dimensione del testo in px.
$main: #594c74 !default;
$secondary: #555 !default;
$text-size: 12px !default;Si noti che per consentire a SCSS di ridefinire le variabili, queste devono essere definite con !default. Questa è una regola in SCSS. Affinché questo tutorial funzioni; tutte le variabili che desideri siano personalizzabili devono essere definite come predefinite nei tuoi file SCSS.
Sta a te decidere quando (o se) vuoi sovrascrivere il file CSS. Questo tutorial presuppone che quando l’utente fa clic su "Salva" in Customizer, verrà ricompilato e scritto nel CSS del tema. Tuttavia, mentre l’anteprima della personalizzazione è attiva e l’utente sta modificando le impostazioni (prima di fare clic su Salva), viene semplicemente visualizzato il CSS compilato nell’intestazione per l’anteprima del sito Web. Non vogliamo sovrascrivere immediatamente il file CSS nel caso in cui l’utente desideri annullare le modifiche apportate.
Tieni a mente…
Questo tutorial sovrascriverà il file del tema style.cssogni volta che vengono salvate le impostazioni di Customizer.
Presumo che tu abbia già compilato i tuoi file SCSS con un programma di compilazione (ad esempio Koala o riga di comando). Avere questo codice nel tuo tema sovrascriverà il file CSS, ma non cambierà i tuoi file SCSS di origine. Ciò significa che ogni volta che apporti modifiche in Customizer, quindi torni ai file SCSS originali e ricompili, le impostazioni di personalizzazione andranno perse!
Esistono diversi metodi per aggirare questo problema e dipende dal tuo progetto e da come lavori. Nella maggior parte dei casi non sarebbe un problema. Di solito è solo una cosa da tenere a mente mentre sviluppi il tuo tema. Se stai dando il tuo tema finalizzato a qualcun altro per usarlo, normalmente non toccherebbero comunque i tuoi file SCSS.
Detto questo, iniziamo a esaminare come procediamo in questo modo:
- Familiarizzare con la libreria SCSSPHP e includerla nel nostro tema
- Crea le impostazioni di personalizzazione per ogni variabile SCSS che vogliamo sia personalizzabile
- Assicurati che Customizer visualizzi in anteprima le modifiche in movimento
- Quando salviamo le impostazioni del Customizer, ricompiliamo e sovrascriviamo il file CSS del tema.
1 La libreria SCSSPHP
Per la compilazione dei file SCSS utilizzeremo una libreria SCSSPHP di leafo (licenza MIT). Tieni presente che questo tutorial è per la libreria SCSS. L’autore della libreria ha una libreria LESS PHP simile se preferisci usare LESS, ma ricorda che il seguente tutorial è per la libreria SCSS.
La libreria SCSSPHP è davvero semplice da usare! Ecco una panoramica semplificata di come utilizzeremo la libreria nel PHP del nostro tema:
- Includiamo la libreria
- Crea una nuova istanza della classe del compilatore dalla libreria
- Carica il contenuto del file SCSS di origine e passalo all’oggetto del compilatore
- Definire un array associativo; Nomi delle variabili SCSS (incluso
$) come chiavi e relativi valori. Qualsiasi elemento in questa matrice sovrascriverà le variabili con lo stesso nome nel file SCSS fornito. - Chiediamo all’oggetto compilatore di compilare e ricevere in cambio il CSS compilato come stringa. Possiamo quindi generare questo CSS all’interno
heado possiamo scriverlo nelstyle.cssfile del tema
Che tipo di variabili SCSS possiamo compilare?
La semplice risposta è: qualsiasi tipo di variabile SCSS valida!
La libreria SCSSPHP può compilare qualsiasi tipo di variabile SCSS valida, ma tieni presente che devi assicurarti che vengano formattate correttamente da Customizer. Ad esempio, i colori devono essere preceduti da un #for hex colori o essere formattati come rgb()o rgba()definizioni. Una variabile di dimensione dovrebbe in genere essere aggiunta con ‘ px‘, ‘ em‘, ‘ %‘ e così via.
Se hai intenzione di creare un sistema avanzato per la compilazione di variabili SCSS tramite il tema Customizer, assicurati di disporre di un buon sistema per formattare correttamente ogni tipo di variabile!
Facciamo il primo passo fuori strada; scaricare e includere la libreria nel nostro tema:
Download e inclusione della libreria SCSSPHP nel tema
Il primo passo è scaricare la libreria SCSSPHP. Nella pagina collegata, fai clic sul pulsante "Download" in alto. Se preferisci usare Composer, il sito fornisce una guida su questo.
Estrai lo zip in una sottocartella da qualche parte all’interno del tuo tema. Ad esempio lo sto mettendo all’interno della theme/inc/scssphp/cartella.
Apri il file PHP in cui desideri aggiungere il codice per la compilazione. Può essere direttamente all’interno del tuo tema functions.phpo in un file PHP incluso da functions.php. Per semplicità vi scrivo tutto dentro functions.php.
Prima di poter utilizzare la libreria, dobbiamo includerla; così:
require_once(get_stylesheet_directory(). '/inc/scssphp/scss.inc.php');Regola di conseguenza il percorso dei tuoi file. Dobbiamo includere il scss.inc.phpfile trovato all’interno della cartella principale della libreria. Ora, dopo questa riga possiamo usare le classi della libreria!
2 Creazione delle impostazioni di personalizzazione per le variabili SCSS
Creiamo le impostazioni del Customizer di WordPress per le nostre variabili. Per motivi di tutorial aggiungeremo le impostazioni per le variabili SCSS menzionate sopra: due colorpicker e un input numerico.
Non entrerò nei dettagli spiegando come aggiungere le impostazioni di personalizzazione: ci sono molti tutorial per questo. Nell’esempio di codice seguente creo una nuova sezione e inserisco le tre impostazioni all’interno:
Questo codice si aggancia customize_registere aggiunge una sezione chiamata "Variabili del tema". Quindi procede con l’aggiunta di un colorpicker ‘ theme-main‘, un altro colorpicker ‘ theme-secondary‘ e un input numerico ‘ theme-text-size‘. Questa è tutta la funzionalità predefinita di WordPress. Aggiungo anche l’impostazione predefinita di ciascuna impostazione sugli stessi valori definiti nel variables.scssfile. Questo serve solo per garantire che le impostazioni della personalizzazione vengano avviate con i colori corretti.
Sembra fantastico! Ma al momento non succede nulla quando si regolano queste variabili. Continuiamo con il passaggio 3; gestione dell’anteprima in Customizer.
3 Compila CSS in movimento nell’anteprima di Customizer
Questo passaggio gestisce l’aggiornamento dell’anteprima della personalizzazione mentre l’utente modifica le impostazioni e non scriverà su nessuno dei nostri file. Invece produrremo il CSS compilato <head>nell’anteprima all’interno di un <style>tag. In questo modo ci assicuriamo che il CSS inline sostituisca tutti gli stili del file CSS originale.
Per verificare se stiamo utilizzando o meno l’anteprima di Customizer, utilizziamo la funzione [is_customize_preview](https://developer.wordpress.org/reference/functions/is_customize_preview/)(). Quando questo ritorna true, creiamo una funzione agganciata a wp_head. All’interno della funzione avviamo e configuriamo la libreria SCSSPHP, recuperiamo i valori di impostazione correnti, compiliamo il CSS e lo emettiamo in un <style>tag.
Alla riga #7definiamo il percorso del file SCSS di origine e carichiamo il suo contenuto in una variabile in #8. E in linea #9e #10impostiamo il percorso di importazione per la libreria per garantire che tutti @importi messaggi di posta elettronica funzionino correttamente nei nostri file SCSS. Puoi leggere di più a riguardo nel sito della documentazione della biblioteca, alla voce “Percorsi di importazione". Fondamentalmente la libreria SCSSPHP deve conoscere il percorso relativo della cartella SCSS in modo che tutti @importi percorsi siano corretti.
A riga #12-16creiamo l’array per il compilatore; un array associativo con i nomi delle variabili come chiavi. Per i valori che utilizziamo [get_theme_mod](https://developer.wordpress.org/reference/functions/get_theme_mod/)()per ottenere i valori da Customizer. La funzione get_theme_mod()permette di definire un default come secondo parametro se il valore non è stato salvato. Questo ci evita di mandare in crash il compilatore con valori come null. Quindi forniamo lo stesso valore predefinito del nostro file di variabili SCSS e quando abbiamo registrato le impostazioni del Customizer.
Si noti inoltre che il codice alla riga #15aggiunge un ‘ px‘, assicurando che il valore effettivo della variabile sia valido. Altrimenti verrebbe compilato come ” $text-size: 12;” quando abbiamo bisogno di ” $text-size: 12px;“. Forniamo l’array delle variabili al compilatore alla riga #17, dicendogli di compilare usando queste variabili.
Quindi alla riga #19-22chiamiamo la compile()funzione che dovrebbe restituire il CSS compilato come stringa. Produciamo un <style>tag con la stringa CSS all’interno. Poiché siamo agganciati a wp_head, il Customizer visualizzerà l’anteprima con il CSS modificato ogni volta che viene apportata una modifica.
4 Salvataggio del CSS compilato nel foglio di stile del tema
Il codice per la compilazione del CSS è molto simile al passaggio precedente. L’unica differenza è che ora stiamo scrivendo il CSS su un file invece di emetterlo. Dovresti davvero considerare di inserirlo in una funzione in modo da non ripetere il codice, ma per motivi di chiarezza ho scelto di separare i due.
Ci colleghiamo a [customize_save_after](https://developer.wordpress.org/reference/hooks/customize_save_after/)quali attivatori ogni volta che qualcuno fa clic su Salva in Personalizzatore di WordPress. A questo punto prendiamo l’SCSS sorgente, definiamo i valori delle variabili e lo compiliamo in CSS. Con la stringa CSS utilizziamo una semplice funzione PHP per scriverla nel file CSS del tema.
L’unica differenza rispetto a prima è alla riga #8in cui definiamo il file di destinazione in cui scrivere e alla riga #19in cui scriviamo nel file.
Conclusione
Ora abbiamo le impostazioni del Customizer che controllano le variabili nel file SCSS del tema e sovrascrivono il foglio di stile principale del tema usando quelle variabili. Non c’è limite al numero o al tipo di impostazioni che vuoi consentire agli utenti del tema di personalizzare! Investi un po’ di tempo nella creazione di un sistema adeguato per gestire la formattazione di diversi tipi di variabili (ad es. prefissi o postfissi) e nella strutturazione corretta delle impostazioni del Customizer. Gli utenti del tema apprezzeranno la flessibilità e quanto sia facile personalizzare il tuo tema!
Puoi anche trovare diversi modi per gestire la scrittura dei file del CSS finale. Se non vuoi sovrascrivere il foglio di stile principale, forse vuoi esportarlo in un file diverso. Puoi anche esaminare l’utilizzo dei condizionali if-else in SCSS.
Questo tutorial è stato scritto per darti un trampolino di lancio su come personalizzare il tuo tema WordPress da Customizer. Fammi sapere se ti è stato utile o se desideri un tutorial più avanzato che assicuri che il foglio di stile del tema non venga sovrascritto!