style.css<\/code>. 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.<\/p>\nPuoi 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\u00e0 un’anteprima del tema con le variabili modificate. E quando fanno clic su "Salva", il CSS finale verr\u00e0 compilato nel file CSS del foglio di stile principale utilizzando i valori scelti.<\/p>\n
Come esempio per questo tutorial, presumo che il file SCSS del foglio di stile principale del tema esegua @import<\/code>un variables.scss<\/code>file. L\u00ec abbiamo definito tre variabili che vogliamo siano personalizzabili in Customizer: due colori e una dimensione del testo in px<\/code>.<\/p>\n$main: #594c74 !default;\n$secondary: #555 !default;\n$text-size: 12px !default;<\/code><\/pre>\nSi noti che per consentire a SCSS di ridefinire le variabili, queste devono essere definite<\/strong> con !default<\/code>. Questa \u00e8 una regola in SCSS<\/a>. Affinch\u00e9 questo tutorial funzioni; tutte le variabili che desideri siano personalizzabili devono essere definite come predefinite nei tuoi file SCSS.<\/p>\nSta 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\u00e0 ricompilato e scritto nel CSS del tema. Tuttavia, mentre l’anteprima della personalizzazione \u00e8 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.<\/p>\n
\u00a0 Tieni a mente\u2026<\/h3>\n
Questo tutorial sovrascriver\u00e0 il file del tema style.css<\/code>ogni volta che vengono salvate le impostazioni di Customizer.<\/p>\nPresumo che tu abbia gi\u00e0 compilato i tuoi file SCSS con un programma di compilazione (ad esempio Koala<\/a> o riga di comando). Avere questo codice nel tuo tema sovrascriver\u00e0 il file CSS, ma non cambier\u00e0 i tuoi file SCSS di origine. Ci\u00f2 significa che ogni volta che apporti modifiche in Customizer, quindi torni ai file SCSS originali e ricompili, le impostazioni di personalizzazione andranno perse!<\/p>\nEsistono 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 \u00e8 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.<\/p>\n
Detto questo, iniziamo a esaminare come procediamo in questo modo:<\/p>\n
\n- Familiarizzare con la libreria SCSSPHP e includerla nel nostro tema<\/li>\n
- Crea le impostazioni di personalizzazione per ogni variabile SCSS che vogliamo sia personalizzabile<\/li>\n
- Assicurati che Customizer visualizzi in anteprima le modifiche in movimento<\/li>\n
- Quando salviamo le impostazioni del Customizer, ricompiliamo e sovrascriviamo il file CSS del tema.<\/li>\n<\/ol>\n
1 La libreria SCSSPHP<\/h2>\n
![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152472-61e4dfd0532a5.png\")
<\/a><\/p>\nPer la compilazione dei file SCSS utilizzeremo una libreria SCSSPHP di leafo<\/a> (licenza MIT). Tieni presente che questo tutorial \u00e8 per la libreria SCSS. L’autore della libreria ha una libreria LESS PHP<\/a> simile se preferisci usare LESS, ma ricorda che il seguente tutorial \u00e8 per la libreria SCSS.<\/p>\nLa libreria SCSSPHP \u00e8 davvero semplice da usare! Ecco una panoramica semplificata di come utilizzeremo la libreria nel PHP del nostro tema:<\/p>\n
\n- Includiamo la libreria<\/li>\n
- Crea una nuova istanza della classe del compilatore dalla libreria<\/li>\n
- Carica il contenuto del file SCSS di origine e passalo all’oggetto del compilatore<\/li>\n
- Definire un array associativo; Nomi delle variabili SCSS (incluso
$<\/code>) come chiavi e relativi valori. Qualsiasi elemento in questa matrice sovrascriver\u00e0 le variabili con lo stesso nome nel file SCSS fornito.<\/li>\n- Chiediamo all’oggetto compilatore di compilare e ricevere in cambio il CSS compilato come stringa. Possiamo quindi generare questo CSS all’interno
head<\/code>o possiamo scriverlo nel style.css<\/code>file del tema<\/li>\n<\/ul>\n\u00a0 Che tipo di variabili SCSS possiamo compilare?<\/h3>\n
La semplice risposta \u00e8: qualsiasi tipo di variabile SCSS valida!<\/p>\n
La libreria SCSSPHP pu\u00f2 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 #<\/code>for hex colori o essere formattati come rgb()<\/code>o rgba()<\/code>definizioni. Una variabile di dimensione dovrebbe in genere essere aggiunta con ‘ px<\/code>‘, ‘ em<\/code>‘, ‘ %<\/code>‘ e cos\u00ec via.<\/p>\nSe 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!<\/p>\n
Facciamo il primo passo fuori strada; scaricare e includere la libreria nel nostro tema:<\/p>\n
Download e inclusione della libreria SCSSPHP nel tema<\/h3>\n
Il primo passo \u00e8 scaricare la libreria SCSSPHP<\/a>. Nella pagina collegata, fai clic sul pulsante "Download" in alto. Se preferisci usare Composer, il sito fornisce una guida su questo.<\/p>\nEstrai lo zip in una sottocartella da qualche parte all’interno del tuo tema. Ad esempio lo sto mettendo all’interno della theme\/inc\/scssphp\/<\/code>cartella.<\/p>\nApri il file PHP in cui desideri aggiungere il codice per la compilazione. Pu\u00f2 essere direttamente all’interno del tuo tema functions.php<\/code>o in un file PHP incluso da functions.php<\/code>. Per semplicit\u00e0 vi scrivo tutto dentro functions.php<\/code>.<\/p>\nPrima di poter utilizzare la libreria, dobbiamo includerla; cos\u00ec:<\/p>\n
require_once(get_stylesheet_directory(). '\/inc\/scssphp\/scss.inc.php');<\/code><\/pre>\nRegola di conseguenza il percorso dei tuoi file. Dobbiamo includere il scss.inc.php<\/code>file trovato all’interno della cartella principale della libreria. Ora, dopo questa riga possiamo usare le classi della libreria!<\/p>\n2 Creazione delle impostazioni di personalizzazione per le variabili SCSS<\/h2>\n
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.<\/p>\n
Non entrer\u00f2 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:<\/p>\n
add_action('customize_register', function($wp_customize) {\n $wp_customize->add_section('theme-variables', [\n 'title' => __('Theme Variables', 'txtdomain'),\n 'priority' => 25\n ]);\n\u00a0\n $wp_customize->add_setting('theme-main', ['default' => '#594c74']);\n $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'theme-main', [\n 'section' => 'theme-variables',\n 'label' => __('Main theme color', 'txtdomain'),\n 'priority' => 10\n ]));\n\u00a0\n $wp_customize->add_setting('theme-secondary', ['default' => '#555']);\n $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'theme-secondary', [\n 'section' => 'theme-variables',\n 'label' => __('Secondary theme color', 'txtdomain'),\n 'priority' => 20\n ]));\n\u00a0\n $wp_customize->add_setting('theme-text-size', ['default' => '12']);\n $wp_customize->add_control('theme-text-size', [\n 'section' => 'theme-variables',\n 'label' => __('Text size', 'txtdomain'),\n 'type' => 'number',\n 'priority' => 30,\n 'input_attrs' => ['min' => 8, 'max' => 20, 'step' => 1]\n ]);\n});<\/code><\/pre>\nQuesto codice si aggancia customize_register<\/code>e aggiunge una sezione chiamata "Variabili del tema". Quindi procede con l’aggiunta di un colorpicker ‘ theme-main<\/code>‘, un altro colorpicker ‘ theme-secondary<\/code>‘ e un input numerico ‘ theme-text-size<\/code>‘. Questa \u00e8 tutta la funzionalit\u00e0 predefinita di WordPress. Aggiungo anche l’impostazione predefinita di ciascuna impostazione sugli stessi valori definiti nel variables.scss<\/code>file. Questo serve solo per garantire che le impostazioni della personalizzazione vengano avviate con i colori corretti.<\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152472-61e4dfd112a70.png\")
<\/a><\/p>\nSembra fantastico! Ma al momento non succede nulla quando si regolano queste variabili. Continuiamo con il passaggio 3; gestione dell’anteprima in Customizer.<\/p>\n
3 Compila CSS in movimento nell’anteprima di Customizer<\/h2>\n
Questo passaggio gestisce l’aggiornamento dell’anteprima della personalizzazione mentre l’utente modifica le impostazioni e non scriver\u00e0 su nessuno dei nostri file. Invece produrremo il CSS compilato <head><\/code>nell’anteprima all’interno di un <style><\/code>tag. In questo modo ci assicuriamo che il CSS inline sostituisca tutti gli stili del file CSS originale.<\/p>\nPer 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\/)()<\/code>. Quando questo ritorna true<\/code>, creiamo una funzione agganciata a wp_head<\/code>. 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><\/code>tag.<\/p>\nrequire_once(get_stylesheet_directory(). '\/inc\/scssphp\/scss.inc.php');\n\u00a0\nif (is_customize_preview()) {\n add_action('wp_head', function() {\n $compiler = new ScssPhpScssPhpCompiler();\n\u00a0\n $source_scss = get_stylesheet_directory(). '\/assets\/scss\/style.scss';\n $scssContents = file_get_contents($source_scss);\n $import_path = get_stylesheet_directory(). '\/assets\/scss';\n $compiler->addImportPath($import_path);\n\u00a0\n $variables = [\n '$main' => get_theme_mod('theme-main', '#594c74'),\n '$secondary' => get_theme_mod('theme-secondary', '#555'),\n '$text-size' => get_theme_mod('theme-text-size', '12'). 'px',\n ];\n $compiler->setVariables($variables);\n\u00a0\n $css = $compiler->compile($scssContents);\n if (!empty($css) && is_string($css)) {\n echo '<style type=\"text\/css\">'. $css. '<\/style>';\n }\n });\n}<\/code><\/pre>\nAlla riga #7<\/code>definiamo il percorso del file SCSS di origine e carichiamo il suo contenuto in una variabile in #8<\/code>. E in linea #9<\/code>e #10<\/code>impostiamo il percorso di importazione per la libreria per garantire che tutti @import<\/code>i messaggi di posta elettronica funzionino correttamente nei nostri file SCSS. Puoi leggere di pi\u00f9 a riguardo nel sito della documentazione della biblioteca<\/a>, alla voce “Percorsi di importazione". Fondamentalmente la libreria SCSSPHP deve conoscere il percorso relativo della cartella SCSS in modo che tutti @import<\/code>i percorsi siano corretti.<\/p>\nA riga #12-16<\/code>creiamo 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\/)()<\/code>per ottenere i valori da Customizer. La funzione get_theme_mod()<\/code>permette di definire un default come secondo parametro se il valore non \u00e8 stato salvato. Questo ci evita di mandare in crash il compilatore con valori come null<\/code>. Quindi forniamo lo stesso valore predefinito del nostro file di variabili SCSS e quando abbiamo registrato le impostazioni del Customizer.<\/p>\nSi noti inoltre che il codice alla riga #15<\/code>aggiunge un ‘ px<\/code>‘, assicurando che il valore effettivo della variabile sia valido. Altrimenti verrebbe compilato come ” $text-size: 12;<\/code>” quando abbiamo bisogno di ” $text-size: 12px;<\/code>“. Forniamo l’array delle variabili al compilatore alla riga #17<\/code>, dicendogli di compilare usando queste variabili.<\/p>\nQuindi alla riga #19-22<\/code>chiamiamo la compile()<\/code>funzione che dovrebbe restituire il CSS compilato come stringa. Produciamo un <style><\/code>tag con la stringa CSS all’interno. Poich\u00e9 siamo agganciati a wp_head<\/code>, il Customizer visualizzer\u00e0 l’anteprima con il CSS modificato ogni volta che viene apportata una modifica.<\/p>\n4 Salvataggio del CSS compilato nel foglio di stile del tema<\/h2>\n
Il codice per la compilazione del CSS \u00e8 molto simile al passaggio precedente. L’unica differenza \u00e8 che ora stiamo scrivendo il CSS su un file invece di emetterlo. Dovresti davvero<\/strong> considerare di inserirlo in una funzione in modo da non ripetere il codice, ma per motivi di chiarezza ho scelto di separare i due.<\/p>\nCi colleghiamo a [customize_save_after](https:\/\/developer.wordpress.org\/reference\/hooks\/customize_save_after\/)<\/code>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.<\/p>\nadd_action('customize_save_after', function() {\n $compiler = new ScssPhpScssPhpCompiler();\n\u00a0\n $source_scss = get_stylesheet_directory(). '\/assets\/scss\/style.scss';\n $scssContents = file_get_contents($source_scss);\n $import_path = get_stylesheet_directory(). '\/assets\/scss';\n $compiler->addImportPath($import_path);\n $target_css = get_stylesheet_directory(). '\/style.css';\n\u00a0\n $variables = [\n '$main' => get_theme_mod('theme-main', '#594c74'),\n '$secondary' => get_theme_mod('theme-secondary', '#555'),\n '$text-size' => get_theme_mod('theme-text-size', '12'). 'px',\n ]; \n $compiler->setVariables($variables);\n\u00a0\n $css = $compiler->compile($scssContents);\n if (!empty($css) && is_string($css)) {\n file_put_contents($target_css, $css);\n }\n});<\/code><\/pre>\nL’unica differenza rispetto a prima \u00e8 alla riga #8<\/code>in cui definiamo il file di destinazione in cui scrivere e alla riga #19<\/code>in cui scriviamo nel file.<\/p>\n\u00a0 Conclusione<\/h2>\n
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’\u00e8 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\u00e0 e quanto sia facile personalizzare il tuo tema!<\/p>\n
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<\/a>.<\/p>\nQuesto tutorial \u00e8 stato scritto per darti un trampolino di lancio su come personalizzare il tuo tema WordPress da Customizer. Fammi sapere se ti \u00e8 stato utile o se desideri un tutorial pi\u00f9 avanzato che assicuri che il foglio di stile del tema non venga sovrascritto!<\/p>\n