style.css<\/code>. Och genom att anv\u00e4nda SCSS definierar du med st\u00f6rsta sannolikhet \u00e5terkommande saker som f\u00e4rger, storlekar eller brytpunkter som SCSS-variabler, och anv\u00e4nder dessa variabler genom hela din styling.<\/p>\nDu kan skapa vilka som helst och hur m\u00e5nga Customizer-inst\u00e4llningar du vill f\u00f6r variablerna i din SCSS-fil. Colorpickers, nummer och textinmatningar \u00e4r perfekta f\u00f6r detta. Medan anv\u00e4ndaren \u00e4ndrar inst\u00e4llningarna i WordPress Customizer kommer de att se en f\u00f6rhandsvisning av temat med de \u00e4ndrade variablerna. Och n\u00e4r de klickar p\u00e5 "Spara" kommer den slutliga CSS-en att kompileras till CSS-filen f\u00f6r huvudformatmallen med hj\u00e4lp av de valda v\u00e4rdena.<\/p>\n
Som ett exempel f\u00f6r denna handledning antar jag att temats huvudformatmalls SCSS-fil g\u00f6r en @import<\/code>av en variables.scss<\/code>fil. D\u00e4r har vi definierat tre variabler som vi vill ska kunna anpassas i Customizer: Tv\u00e5 f\u00e4rger och en textstorlek i px<\/code>.<\/p>\n$main: #594c74 !default;\n$secondary: #555 !default;\n$text-size: 12px !default;<\/code><\/pre>\nObservera att f\u00f6r att till\u00e5ta SCSS att omdefiniera variabler m\u00e5ste de definieras<\/strong> med !default<\/code>. Detta \u00e4r en regel i SCSS<\/a>. F\u00f6r att denna handledning ska fungera; alla variabler som du vill vara anpassningsbara m\u00e5ste definieras som standard i dina SCSS-filer.<\/p>\nDet \u00e4r upp till dig n\u00e4r (eller om) du vill skriva \u00f6ver CSS-filen. Denna handledning f\u00f6ruts\u00e4tter att n\u00e4r anv\u00e4ndaren klickar p\u00e5 "Spara" i Customizer, kommer den att kompilera om och skriva till temats CSS. Men medan Customizer-f\u00f6rhandsgranskningen \u00e4r aktiv och anv\u00e4ndaren \u00e4ndrar inst\u00e4llningar (innan du klickar p\u00e5 Spara), matar vi helt enkelt ut den kompilerade CSS-en i rubriken f\u00f6r f\u00f6rhandsgranskningen av webbplatsen. Vi vill inte skriva \u00f6ver CSS-filen direkt ifall anv\u00e4ndaren vill avbryta eventuella \u00e4ndringar de gjort.<\/p>\n
\u00a0 Kom ih\u00e5g\u2026<\/h3>\n
Denna handledning kommer att skriva \u00f6ver temats style.css<\/code>fil varje g\u00e5ng Customizer-inst\u00e4llningarna sparas.<\/p>\nJag antar att du redan kompilerar dina SCSS-filer med ett kompileringsprogram (t.ex. Koala<\/a> eller kommandorad). Att ha den h\u00e4r koden i ditt tema kommer att skriva \u00f6ver CSS-filen, men det kommer inte att \u00e4ndra dina SCSS-k\u00e4llfiler. Det betyder att n\u00e4r du g\u00f6r \u00e4ndringar i Customizer och sedan g\u00e5r tillbaka till dina ursprungliga SCSS-filer och kompilerar om, kommer dina Customize-inst\u00e4llningar att g\u00e5 f\u00f6rlorade!<\/p>\nDet finns flera metoder att g\u00e5 runt detta och det beror p\u00e5 ditt projekt och hur du arbetar. I de flesta fall skulle det inte vara ett problem. Det \u00e4r vanligtvis bara en sak att t\u00e4nka p\u00e5 n\u00e4r du utvecklar ditt tema. Om du ger ditt f\u00e4rdiga tema till n\u00e5gon annan att anv\u00e4nda, skulle de normalt sett inte r\u00f6ra dina SCSS-filer \u00e4nd\u00e5.<\/p>\n
Med det ur v\u00e4gen, l\u00e5t oss b\u00f6rja titta p\u00e5 hur vi g\u00e5r tillv\u00e4ga f\u00f6r att g\u00f6ra detta:<\/p>\n
\n- Bekanta dig med SCSSPHP-biblioteket och inkludera det i v\u00e5rt tema<\/li>\n
- Skapa Customizer-inst\u00e4llningar f\u00f6r varje SCSS-variabel som vi vill ska kunna anpassas<\/li>\n
- Se till att Customizer f\u00f6rhandsgranskar \u00e4ndringarna n\u00e4r du \u00e4r p\u00e5 spr\u00e5ng<\/li>\n
- N\u00e4r vi sparar Customizer-inst\u00e4llningarna kompilerar vi om och skriver \u00f6ver temats CSS-fil.<\/li>\n<\/ol>\n
1 SCSSPHP-biblioteket<\/h2>\n
![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152472-61e4dfd0532a5.png\")
<\/a><\/p>\nF\u00f6r att kompilera SCSS-filerna kommer vi att anv\u00e4nda ett SCSSPHP-bibliotek av leafo<\/a> (MIT-licens). Observera att den h\u00e4r handledningen \u00e4r f\u00f6r SCSS-biblioteket. Bibliotekets f\u00f6rfattare har ett liknande LESS PHP-bibliotek<\/a> om du hellre vill anv\u00e4nda LESS, men kom ih\u00e5g att f\u00f6ljande handledning \u00e4r f\u00f6r SCSS-biblioteket.<\/p>\nSCSSPHP-biblioteket \u00e4r v\u00e4ldigt enkelt att anv\u00e4nda! H\u00e4r \u00e4r en f\u00f6renklad \u00f6versikt \u00f6ver hur vi kommer att anv\u00e4nda biblioteket i v\u00e5rt temas PHP:<\/p>\n
\n- Vi inkluderar biblioteket<\/li>\n
- Skapa en ny instans av kompilatorklassen fr\u00e5n biblioteket<\/li>\n
- Ladda inneh\u00e5llet i k\u00e4ll-SCSS-filen och skicka den till kompilatorobjektet<\/li>\n
- Definiera en associativ array; SCSS-variabelnamn (inklusive
$<\/code>) som nycklar och deras v\u00e4rden. Alla element i denna array kommer att \u00e5sidos\u00e4tta variabler med samma namn i den medf\u00f6ljande SCSS-filen.<\/li>\n- Vi ber kompilatorobjektet att kompilera och ta emot den kompilerade CSS som en str\u00e4ng i geng\u00e4ld. Vi kan sedan antingen mata ut denna CSS inuti
head<\/code>eller s\u00e5 kan vi skriva detta p\u00e5 temats style.css<\/code>fil<\/li>\n<\/ul>\n\u00a0 Vilken typ av SCSS-variabler kan vi kompilera?<\/h3>\n
Det enkla svaret \u00e4r: Vilken typ av giltig SCSS-variabel som helst!<\/p>\n
SCSSPHP-biblioteket kan kompilera vilken typ av giltig SCSS-variabel som helst, men kom ih\u00e5g att du m\u00e5ste se till att de formateras korrekt fr\u00e5n Customizer. Till exempel m\u00e5ste f\u00e4rger antingen ha prefixet a #<\/code>f\u00f6r hex-f\u00e4rger eller formateras som rgb()<\/code>eller rgba()<\/code>definitioner. En storleksvariabel skulle vanligtvis beh\u00f6va l\u00e4ggas till med ’ px<\/code>’, ’ em<\/code>’, ’ %<\/code>’ och s\u00e5 vidare.<\/p>\nOm du planerar att skapa ett avancerat system f\u00f6r att kompilera SCSS-variabler genom Customizer-tema, se till att du har ett bra system p\u00e5 plats f\u00f6r att korrekt formatera varje typ av variabel!<\/p>\n
L\u00e5t oss ta det f\u00f6rsta steget ur v\u00e4gen; ladda ner och inkludera biblioteket i v\u00e5rt tema:<\/p>\n
Ladda ner och inkludera SCSSPHP-biblioteket i ditt tema<\/h3>\n
Det f\u00f6rsta steget \u00e4r att ladda ner SCSSPHP-biblioteket<\/a>. P\u00e5 den l\u00e4nkade sidan klickar du p\u00e5 knappen "Ladda ner" l\u00e4ngst upp. Om du hellre vill anv\u00e4nda Composer ger sajten en guide om detta.<\/p>\nExtrahera zip-filen till en undermapp n\u00e5gonstans i ditt tema. Som ett exempel placerar jag den i theme\/inc\/scssphp\/<\/code>mappen.<\/p>\n\u00d6ppna PHP-filen d\u00e4r du vill l\u00e4gga till din kod f\u00f6r kompilering. Det kan vara direkt i ditt teman functions.php<\/code>eller en PHP-fil som ing\u00e5r i functions.php<\/code>. F\u00f6r enkelhetens skull skriver jag allt inuti functions.php<\/code>.<\/p>\nInnan vi kan anv\u00e4nda biblioteket m\u00e5ste vi inkludera det; s\u00e5h\u00e4r:<\/p>\n
require_once(get_stylesheet_directory(). '\/inc\/scssphp\/scss.inc.php');<\/code><\/pre>\nJustera s\u00f6kv\u00e4gen till dina filer i enlighet med detta. Vi m\u00e5ste inkludera scss.inc.php<\/code>filen som finns i bibliotekets rotmapp. Nu, efter denna linje kan vi anv\u00e4nda bibliotekets klasser!<\/p>\n2 Skapa Customizer-inst\u00e4llningarna f\u00f6r SCSS-variablerna<\/h2>\n
L\u00e5t oss skapa WordPress Customizer-inst\u00e4llningarna f\u00f6r v\u00e5ra variabler. F\u00f6r handledningens skull kommer vi att l\u00e4gga till inst\u00e4llningar f\u00f6r SCSS-variablerna som n\u00e4mns ovan: tv\u00e5 f\u00e4rgplockare och en nummerinmatning.<\/p>\n
Jag kommer inte att g\u00e5 in p\u00e5 detaljer och f\u00f6rklara hur man l\u00e4gger till Customizer-inst\u00e4llningar \u2013 det finns gott om handledningar f\u00f6r detta. I kodexemplet nedan skapar jag ett nytt avsnitt och l\u00e4gger in de tre inst\u00e4llningarna:<\/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>\nDenna kod hakar p\u00e5 customize_register<\/code>och l\u00e4gger till ett avsnitt som heter "Temavariabler". Den forts\u00e4tter sedan med att l\u00e4gga till en f\u00e4rgv\u00e4ljare ’ theme-main<\/code>’, ytterligare en f\u00e4rgv\u00e4ljare ’ theme-secondary<\/code>’ och en sifferinmatning ’ theme-text-size<\/code>’. Detta \u00e4r all standard WordPress-funktionalitet. Jag l\u00e4gger ocks\u00e5 till set varje inst\u00e4llnings standard till samma v\u00e4rden som definierats i variables.scss<\/code>filen. Detta \u00e4r bara f\u00f6r att s\u00e4kerst\u00e4lla att Customizer-inst\u00e4llningarna initieras med r\u00e4tt f\u00e4rger.<\/p>\n![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152472-61e4dfd112a70.png\")
<\/a><\/p>\nDet ser j\u00e4ttebra ut! Men just nu h\u00e4nder ingenting n\u00e4r du justerar dessa variabler. L\u00e5t oss forts\u00e4tta med steg 3; hantera f\u00f6rhandsgranskning i Customizer.<\/p>\n
3 Kompilera CSS n\u00e4r du \u00e4r p\u00e5 spr\u00e5ng i f\u00f6rhandsvisning av Customizer<\/h2>\n
Det h\u00e4r steget hanterar uppdatering av Customizer-f\u00f6rhandsvisningen medan anv\u00e4ndaren \u00e4ndrar inst\u00e4llningar och kommer inte att skriva till n\u00e5gon av v\u00e5ra filer. Ist\u00e4llet kommer vi att mata ut den kompilerade CSS i <head><\/code>f\u00f6rhandsgranskningen inuti en <style><\/code>tagg. P\u00e5 s\u00e5 s\u00e4tt s\u00e4kerst\u00e4ller vi att inline CSS \u00e5sidos\u00e4tter all styling fr\u00e5n den ursprungliga CSS-filen.<\/p>\nF\u00f6r att kontrollera om vi f\u00f6r n\u00e4rvarande anv\u00e4nder Customizer-f\u00f6rhandsvisning eller inte, anv\u00e4nder vi funktionen [is_customize_preview](https:\/\/developer.wordpress.org\/reference\/functions\/is_customize_preview\/)()<\/code>. N\u00e4r detta kommer tillbaka true<\/code>skapar vi en funktion kopplad till wp_head<\/code>. Inuti funktionen initierar vi och st\u00e4ller in SCSSPHP-biblioteket, h\u00e4mtar de aktuella inst\u00e4llningsv\u00e4rdena, kompilerar CSS och matar ut den i en <style><\/code>tagg.<\/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>\nVid raden #7<\/code>definierar vi s\u00f6kv\u00e4gen till k\u00e4ll-SCSS-filen och laddar dess inneh\u00e5ll till en variabel p\u00e5 #8<\/code>. Och p\u00e5 line #9<\/code>och #10<\/code>vi satte upp imports\u00f6kv\u00e4gen f\u00f6r biblioteket f\u00f6r att s\u00e4kerst\u00e4lla att alla @import<\/code>s fungerar korrekt i v\u00e5ra SCSS-filer. Du kan l\u00e4sa mer om detta p\u00e5 bibliotekets dokumentationssajt<\/a>, under rubriken "Importv\u00e4gar". I grund och botten beh\u00f6ver SCSSPHP-biblioteket k\u00e4nna till den relativa s\u00f6kv\u00e4gen till din SCSS-mapp s\u00e5 att alla @import<\/code>s\u00f6kv\u00e4gar \u00e4r korrekta.<\/p>\nVid raden #12-16<\/code>skapar vi arrayen f\u00f6r kompilatorn; en associativ array med variabelnamnen som nycklar. F\u00f6r de v\u00e4rden vi anv\u00e4nder [get_theme_mod](https:\/\/developer.wordpress.org\/reference\/functions\/get_theme_mod\/)()<\/code>f\u00f6r att h\u00e4mta v\u00e4rdena fr\u00e5n Customizer. Funktionen get_theme_mod()<\/code>l\u00e5ter dig definiera en standard som andra parameter om v\u00e4rdet inte har sparats. Detta r\u00e4ddar oss fr\u00e5n att krascha kompilatorn med v\u00e4rden som null<\/code>. S\u00e5 vi tillhandah\u00e5ller samma standard som i v\u00e5r SCSS-variabelfil och n\u00e4r vi registrerade Customizer-inst\u00e4llningarna.<\/p>\nObservera ocks\u00e5 att koden p\u00e5 raden #15<\/code>l\u00e4gger till ett ’ px<\/code>’, vilket s\u00e4kerst\u00e4ller att det faktiska variabelv\u00e4rdet \u00e4r giltigt. Annars skulle det kompileras som " $text-size: 12;<\/code>" n\u00e4r vi beh\u00f6ver " $text-size: 12px;<\/code>". Vi tillhandah\u00e5ller variabelmatrisen till kompilatorn p\u00e5 rad #17<\/code>, och s\u00e4ger att den ska kompilera med dessa variabler.<\/p>\nSedan #19-22<\/code>anropar vi p\u00e5 raden compile()<\/code>funktionen som ska returnera den kompilerade CSS som en str\u00e4ng. Vi matar ut en <style><\/code>tagg med CSS-str\u00e4ngen inuti. Eftersom vi \u00e4r anslutna till wp_head<\/code>, kommer Customizer att \u00e5terge f\u00f6rhandsgranskningen med den \u00e4ndrade CSS varje g\u00e5ng en \u00e4ndring g\u00f6rs.<\/p>\n4 Spara den kompilerade CSS-en p\u00e5 temats stilmall<\/h2>\n
Koden f\u00f6r att kompilera CSS \u00e4r mycket lik det f\u00f6reg\u00e5ende steget. Den enda skillnaden \u00e4r att vi nu skriver CSS till en fil ist\u00e4llet f\u00f6r att mata ut den. Du borde verkligen<\/strong> \u00f6verv\u00e4ga att l\u00e4gga in detta i en funktion s\u00e5 att du inte upprepar kod, men f\u00f6r tydlighetens skull har jag valt att separera de tv\u00e5.<\/p>\nVi hakar p\u00e5 [customize_save_after](https:\/\/developer.wordpress.org\/reference\/hooks\/customize_save_after\/)<\/code>vilka som utl\u00f6ser n\u00e4r n\u00e5gon klickar p\u00e5 Spara i WordPress Customizer. Vid det h\u00e4r laget h\u00e4mtar vi k\u00e4ll-SCSS, definierar variabelv\u00e4rden och kompilerar den till CSS. Med CSS-str\u00e4ngen anv\u00e4nder vi en enkel PHP-funktion f\u00f6r att skriva den till temats CSS-fil.<\/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>\nDen enda skillnaden fr\u00e5n tidigare \u00e4r p\u00e5 raden #8<\/code>d\u00e4r vi definierar m\u00e5lfilen att skriva till, och raden #19<\/code>d\u00e4r vi skriver till filen.<\/p>\n\u00a0 Slutsats<\/h2>\n
Vi har nu Customizer-inst\u00e4llningar som styr variabler i temats SCSS-fil och skriver \u00f6ver temats huvudformatmall med hj\u00e4lp av dessa variabler. Det finns ingen gr\u00e4ns f\u00f6r hur m\u00e5nga eller vilken typ av inst\u00e4llningar du vill l\u00e5ta temaanv\u00e4ndarna anpassa! Investera lite tid p\u00e5 att s\u00e4tta upp ett ordentligt system f\u00f6r att hantera formateringen av olika variabeltyper (t.ex. prefix eller postfixar) och strukturera Customizer-inst\u00e4llningarna ordentligt. Temaanv\u00e4ndarna kommer att uppskatta flexibiliteten och hur l\u00e4tt det \u00e4r att anpassa ditt tema!<\/p>\n
Du kan ocks\u00e5 komma p\u00e5 olika s\u00e4tt att hantera filskrivningen av den slutliga CSS. Om du inte vill skriva \u00f6ver huvudformatmallen kanske du vill mata ut den till en annan fil. Du kan ocks\u00e5 titta p\u00e5 att anv\u00e4nda if-else-villkor i SCSS<\/a>.<\/p>\nDenna handledning skrevs f\u00f6r att ge dig en spr\u00e5ngbr\u00e4da till hur du kan anpassa ditt WordPress-tema fr\u00e5n Customizer. L\u00e5t mig veta om det var n\u00e5gon anv\u00e4ndning f\u00f6r dig \u2013 eller om du vill ha en mer avancerad handledning som s\u00e4kerst\u00e4ller att temats stilmall inte skrivs \u00f6ver!<\/p>\n