style.css<\/code>. Ja k\u00e4ytt\u00e4m\u00e4ll\u00e4 SCSS:\u00e4\u00e4, m\u00e4\u00e4rit\u00e4t todenn\u00e4k\u00f6isimmin toistuvia asioita, kuten v\u00e4rit, koon tai keskeytyspisteet, SCSS-muuttujiksi ja k\u00e4yt\u00e4t n\u00e4it\u00e4 muuttujia koko tyyliss\u00e4si.<\/p>\nVoit luoda SCSS-tiedostosi muuttujille mit\u00e4 tahansa ja kuinka monta tahansa mukauttaja-asetuksia haluat. V\u00e4rinvalitsimet, numero- ja tekstinsy\u00f6tt\u00f6 sopivat t\u00e4h\u00e4n t\u00e4ydellisesti. Kun k\u00e4ytt\u00e4j\u00e4 muuttaa asetuksia WordPress Customizerissa, h\u00e4n n\u00e4kee esikatselun teemasta muutettujen muuttujien kanssa. Ja kun he napsauttavat "Tallenna", lopullinen CSS k\u00e4\u00e4nnet\u00e4\u00e4n p\u00e4\u00e4tyylitaulukon CSS-tiedostoon k\u00e4ytt\u00e4m\u00e4ll\u00e4 valittuja arvoja.<\/p>\n
Esimerkkin\u00e4 t\u00e4st\u00e4 opetusohjelmasta oletetaan, ett\u00e4 teeman p\u00e4\u00e4tyylitaulukon SCSS-tiedosto tekee @import<\/code>tiedoston variables.scss<\/code>. Siell\u00e4 olemme m\u00e4\u00e4ritt\u00e4neet kolme muuttujaa, jotka haluamme mukauttaa Customizerissa: Kaksi v\u00e4ri\u00e4 ja yksi tekstikoko px<\/code>.<\/p>\n$main: #594c74 !default;\n$secondary: #555 !default;\n$text-size: 12px !default;<\/code><\/pre>\nHuomaa, ett\u00e4 jotta SCSS voi m\u00e4\u00e4ritt\u00e4\u00e4 muuttujat uudelleen, ne on m\u00e4\u00e4ritett\u00e4v\u00e4<\/strong> komennolla !default<\/code>. T\u00e4m\u00e4 on s\u00e4\u00e4nt\u00f6 SCSS:ss\u00e4<\/a>. Jotta t\u00e4m\u00e4 opetusohjelma toimisi; kaikki muuttujat, joita haluat muokata, on m\u00e4\u00e4ritett\u00e4v\u00e4 oletusarvoiksi SCSS-tiedostoissasi.<\/p>\nOn sinun p\u00e4\u00e4tett\u00e4viss\u00e4si, milloin (tai haluatko) korvata CSS-tiedoston. T\u00e4ss\u00e4 opetusohjelmassa oletetaan, ett\u00e4 kun k\u00e4ytt\u00e4j\u00e4 napsauttaa "Tallenna" Customizerissa, se k\u00e4\u00e4nt\u00e4\u00e4 uudelleen ja kirjoittaa teeman CSS:\u00e4\u00e4n. Mutta kun Customizer-esikatselu on aktiivinen ja k\u00e4ytt\u00e4j\u00e4 muuttaa asetuksia (ennen kuin napsautat Tallenna), n\u00e4yt\u00e4mme yksinkertaisesti k\u00e4\u00e4nnetyn CSS:n verkkosivuston esikatselun otsikossa. Emme halua korvata CSS-tiedostoa heti, jos k\u00e4ytt\u00e4j\u00e4 haluaa peruuttaa tekem\u00e4ns\u00e4 muutokset.<\/p>\n
\u00a0 Pit\u00e4\u00e4 mieless\u00e4\u2026<\/h3>\n
T\u00e4m\u00e4 opetusohjelma korvaa teeman style.css<\/code>tiedoston aina, kun Customizer-asetukset tallennetaan.<\/p>\nOletan, ett\u00e4 olet jo k\u00e4\u00e4nt\u00e4nyt SCSS-tiedostosi k\u00e4\u00e4nt\u00e4j\u00e4ohjelmalla (esim. Koala<\/a> tai komentorivi). T\u00e4m\u00e4n koodin lis\u00e4\u00e4minen teemaan korvaa CSS-tiedoston, mutta se ei muuta l\u00e4hde-SCSS-tiedostoja. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 aina kun teet muutoksia Customizeriin ja palaat sitten alkuper\u00e4isiin SCSS-tiedostoihisi ja k\u00e4\u00e4nn\u00e4t uudelleen, mukauttaminen-asetuksesi menetet\u00e4\u00e4n!<\/p>\nOn olemassa useita tapoja kiert\u00e4\u00e4 t\u00e4m\u00e4, ja se riippuu projektistasi ja ty\u00f6skentelytavasta. Useimmissa tapauksissa se ei olisi ongelma. Se on yleens\u00e4 vain asia pit\u00e4\u00e4 mieless\u00e4, kun kehit\u00e4t teemaasi. Jos annat viimeistellyn teemasi jonkun muun k\u00e4ytett\u00e4v\u00e4ksi, he eiv\u00e4t yleens\u00e4 koskettaisi SCSS-tiedostojasi.<\/p>\n
Kun t\u00e4m\u00e4 on poissa tielt\u00e4, aletaan tutkia, miten teemme t\u00e4m\u00e4n:<\/p>\n
\n- Tutustutaan SCSSPHP-kirjastoon ja sis\u00e4llytet\u00e4\u00e4n se teemaamme<\/li>\n
- Luo Customizer-asetukset jokaiselle SCSS-muuttujalle, jonka haluamme olla mukautettavissa<\/li>\n
- Varmista, ett\u00e4 Customizer esikatselee muutokset liikkeell\u00e4 ollessasi<\/li>\n
- Kun tallennamme Customizer-asetuksia, k\u00e4\u00e4nn\u00e4mme uudelleen ja korvaamme teeman CSS-tiedoston.<\/li>\n<\/ol>\n
1 SCSSPHP-kirjasto<\/h2>\n
![\"SCSS:n](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152472-61e4dfd0532a5.png\")
<\/a><\/p>\nSCSS-tiedostojen k\u00e4\u00e4nt\u00e4miseen k\u00e4yt\u00e4mme leafon SCSSPHP-kirjastoa<\/a> (MIT-lisenssi). Huomaa, ett\u00e4 t\u00e4m\u00e4 opetusohjelma on tarkoitettu SCSS-kirjastolle. Kirjaston kirjoittajalla on samanlainen V\u00c4HEMM\u00c4N PHP-kirjasto<\/a>, jos haluat mieluummin k\u00e4ytt\u00e4\u00e4 V\u00c4HEMM\u00c4N, mutta muista, ett\u00e4 seuraava opetusohjelma on tarkoitettu SCSS-kirjastolle.<\/p>\nSCSSPHP-kirjasto on todella helppok\u00e4ytt\u00f6inen! T\u00e4ss\u00e4 on yksinkertaistettu yleiskatsaus siit\u00e4, kuinka k\u00e4yt\u00e4mme kirjastoa teemamme PHP:ss\u00e4:<\/p>\n
\n- Mukana kirjasto<\/li>\n
- Luo uusi k\u00e4\u00e4nt\u00e4j\u00e4luokan esiintym\u00e4 kirjastosta<\/li>\n
- Lataa l\u00e4hde-SCSS-tiedoston sis\u00e4lt\u00f6 ja v\u00e4lit\u00e4 se k\u00e4\u00e4nt\u00e4j\u00e4objektille<\/li>\n
- M\u00e4\u00e4rittele assosiatiivinen taulukko; SCSS-muuttujien nimet (mukaan lukien
$<\/code>) avaimina ja niiden arvot. Mik\u00e4 tahansa t\u00e4m\u00e4n taulukon elementti ohittaa samannimiset muuttujat toimitetussa SCSS-tiedostossa.<\/li>\n- Pyyd\u00e4mme k\u00e4\u00e4nt\u00e4j\u00e4objektia k\u00e4\u00e4nt\u00e4m\u00e4\u00e4n ja vastaanottamaan k\u00e4\u00e4nnetyn CSS:n merkkijonona vastineeksi. Voimme sitten joko tulostaa t\u00e4m\u00e4n CSS
head<\/code>:n sis\u00e4ll\u00e4 tai kirjoittaa sen teeman style.css<\/code>tiedostoon<\/li>\n<\/ul>\n\u00a0 Millaisia \u200b\u200bSCSS-muuttujia voimme k\u00e4\u00e4nt\u00e4\u00e4?<\/h3>\n
Yksinkertainen vastaus on: Mik\u00e4 tahansa kelvollinen SCSS-muuttuja!<\/p>\n
SCSSPHP-kirjasto voi k\u00e4\u00e4nt\u00e4\u00e4 mink\u00e4 tahansa kelvollisen SCSS-muuttujan, mutta muista, ett\u00e4 sinun on varmistettava, ett\u00e4 ne muotoillaan oikein mukauttajalta. Esimerkiksi v\u00e4rit on joko oltava etuliitteen\u00e4 a #<\/code>for hex v\u00e4rit tai muotoiltava rgb()<\/code>tai rgba()<\/code>m\u00e4\u00e4ritelmi\u00e4. Kokomuuttuja on yleens\u00e4 liitett\u00e4v\u00e4 merkinn\u00f6ill\u00e4 ’ px<\/code>’, ’ em<\/code>’, ’ %<\/code>’ ja niin edelleen.<\/p>\nJos aiot tehd\u00e4 kehittyneen j\u00e4rjestelm\u00e4n SCSS-muuttujien kokoamiseen Customizer-teeman kautta, varmista, ett\u00e4 sinulla on hyv\u00e4 j\u00e4rjestelm\u00e4 jokaisen muuttujan muotoilemiseksi oikein!<\/p>\n
Otetaan ensimm\u00e4inen askel tielt\u00e4; kirjaston lataaminen ja sis\u00e4llytt\u00e4minen teemaamme:<\/p>\n
SCSSPHP-kirjaston lataaminen ja sis\u00e4llytt\u00e4minen teemaasi<\/h3>\n
Ensimm\u00e4inen vaihe on SCSSPHP-kirjaston<\/a> lataaminen. Napsauta linkitetyll\u00e4 sivulla "Lataa" -painiketta aivan yl\u00e4reunassa. Jos haluat mieluummin k\u00e4ytt\u00e4\u00e4 Composeria, sivusto tarjoaa oppaan t\u00e4h\u00e4n.<\/p>\nPura zip alikansioon jonnekin teemasi sis\u00e4ll\u00e4. Esimerkkin\u00e4 laitan sen theme\/inc\/scssphp\/<\/code>kansioon.<\/p>\nAvaa PHP-tiedosto, johon haluat lis\u00e4t\u00e4 koodin k\u00e4\u00e4nt\u00e4mist\u00e4 varten. Se voi olla suoraan teemasi sis\u00e4ll\u00e4 functions.php<\/code>tai PHP-tiedoston sis\u00e4ll\u00e4 functions.php<\/code>. Yksinkertaisuuden vuoksi kirjoitan kaiken sis\u00e4lle functions.php<\/code>.<\/p>\nEnnen kuin voimme k\u00e4ytt\u00e4\u00e4 kirjastoa, meid\u00e4n on sis\u00e4llytett\u00e4v\u00e4 se; niin kuin:<\/p>\n
require_once(get_stylesheet_directory(). '\/inc\/scssphp\/scss.inc.php');<\/code><\/pre>\nS\u00e4\u00e4d\u00e4 tiedostojesi polku vastaavasti. Meid\u00e4n on sis\u00e4llytett\u00e4v\u00e4 scss.inc.php<\/code>kirjaston juurikansiosta l\u00f6ytyv\u00e4 tiedosto. Nyt t\u00e4m\u00e4n rivin j\u00e4lkeen voimme k\u00e4ytt\u00e4\u00e4 kirjaston tunteja!<\/p>\n2 Mukautusasetusten luominen SCSS-muuttujille<\/h2>\n
Luodaan muuttujillemme WordPress Customizer -asetukset. Tutoriaalin vuoksi lis\u00e4\u00e4mme asetukset yll\u00e4 mainituille SCSS-muuttujille: kaksi v\u00e4rinvalitsinta ja numeron sy\u00f6tt\u00f6.<\/p>\n
En mene yksityiskohtiin selitt\u00e4m\u00e4\u00e4n, kuinka Customizer-asetukset lis\u00e4t\u00e4\u00e4n \u2013 t\u00e4t\u00e4 varten on paljon opetusohjelmia. Alla olevassa koodiesimerkiss\u00e4 luon uuden osion ja laitan kolme asetusta sis\u00e4\u00e4n:<\/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>\nT\u00e4m\u00e4 koodi kytkeytyy customize_register<\/code>ja lis\u00e4\u00e4 osion nimelt\u00e4 "Teemamuuttujat". Sitten se lis\u00e4\u00e4 v\u00e4rinvalitsimen ’ theme-main<\/code>’, toisen v\u00e4rivalitsimen ’ theme-secondary<\/code>’ ja numerosy\u00f6tteen ’ theme-text-size<\/code>’. T\u00e4m\u00e4 kaikki on WordPressin oletustoimintoa. Lis\u00e4\u00e4n my\u00f6s set kunkin asetuksen oletusarvot samoihin arvoihin kuin variables.scss<\/code>tiedostossa on m\u00e4\u00e4ritetty. T\u00e4m\u00e4 on vain sen varmistamiseksi, ett\u00e4 Customizer-asetukset alkavat oikeilla v\u00e4reill\u00e4.<\/p>\n![\"SCSS:n](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152472-61e4dfd112a70.png\")
<\/a><\/p>\nSe n\u00e4ytt\u00e4\u00e4 upealta! Mutta t\u00e4ll\u00e4 hetkell\u00e4 mit\u00e4\u00e4n ei tapahdu, kun s\u00e4\u00e4d\u00e4t n\u00e4it\u00e4 muuttujia. Jatketaan vaiheesta 3; esikatselun k\u00e4sittely mukauttajassa.<\/p>\n
3 K\u00e4\u00e4nn\u00e4 CSS liikkeell\u00e4 ollessasi Customizerin esikatselussa<\/h2>\n
T\u00e4m\u00e4 vaihe k\u00e4sittelee Customizer-esikatselun p\u00e4ivitt\u00e4misen, kun k\u00e4ytt\u00e4j\u00e4 muuttaa asetuksia, eik\u00e4 kirjoita tiedostoihimme. Sen sijaan tulostamme k\u00e4\u00e4nnetyn CSS: <head><\/code>n esikatselussa <style><\/code>tagin sis\u00e4ll\u00e4. T\u00e4ll\u00e4 tavalla varmistamme, ett\u00e4 tekstin sis\u00e4inen CSS ohittaa kaikki alkuper\u00e4isen CSS-tiedoston tyylit.<\/p>\nTarkistaaksemme, k\u00e4yt\u00e4mmek\u00f6 t\u00e4ll\u00e4 hetkell\u00e4 Customizer-esikatselua, k\u00e4yt\u00e4mme toimintoa [is_customize_preview](https:\/\/developer.wordpress.org\/reference\/functions\/is_customize_preview\/)()<\/code>. Kun t\u00e4m\u00e4 palaa true<\/code>, luomme funktion, joka on koukussa wp_head<\/code>. Toiminnon sis\u00e4ll\u00e4 k\u00e4ynnist\u00e4mme ja m\u00e4\u00e4rit\u00e4mme SCSSPHP-kirjaston, haemme nykyiset asetusarvot, k\u00e4\u00e4nn\u00e4mme CSS:n ja tulostamme sen <style><\/code>tagissa.<\/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>\nRivill\u00e4 #7<\/code>m\u00e4\u00e4rit\u00e4mme polun l\u00e4hde-SCSS-tiedostoon ja lataamme sen sis\u00e4ll\u00f6n muuttujaan osoitteessa #8<\/code>. Ja linjalla #9<\/code>ja m\u00e4\u00e4ritimme #10<\/code>kirjaston tuontipolun varmistaaksemme, ett\u00e4 kaikki @import<\/code>s toimivat oikein SCSS-tiedostoissamme. Voit lukea t\u00e4st\u00e4 lis\u00e4\u00e4 kirjaston dokumentaatiosivustolta kohdasta<\/a> "Tuontipolut". Periaatteessa SCSSPHP-kirjaston on tiedett\u00e4v\u00e4 SCSS-kansiosi suhteellinen polku, jotta kaikki @import<\/code>polut ovat oikein.<\/p>\nRivill\u00e4 #12-16<\/code>luomme taulukon k\u00e4\u00e4nt\u00e4j\u00e4lle; assosiatiivinen taulukko, jossa muuttujien nimet ovat avaimia. Arvoille, joita k\u00e4yt\u00e4mme [get_theme_mod](https:\/\/developer.wordpress.org\/reference\/functions\/get_theme_mod\/)()<\/code>arvojen saamiseen Customizerista. Toiminnon get_theme_mod()<\/code>avulla voit m\u00e4\u00e4ritt\u00e4\u00e4 oletusarvon toiseksi parametriksi, jos arvoa ei tallennettu. T\u00e4m\u00e4 s\u00e4\u00e4st\u00e4\u00e4 meid\u00e4t kaatumasta k\u00e4\u00e4nt\u00e4j\u00e4lle arvoilla, kuten null<\/code>. Joten tarjoamme saman oletusarvon kuin SCSS-muuttujatiedostossamme ja kun rekister\u00f6imme mukauttaja-asetukset.<\/p>\nHuomaa my\u00f6s, ett\u00e4 rivill\u00e4 oleva koodi #15<\/code>lis\u00e4\u00e4 merkin px<\/code>, joka varmistaa, ett\u00e4 muuttujan todellinen arvo on kelvollinen. Muuten se k\u00e4\u00e4nt\u00e4isi " $text-size: 12;<\/code>", kun tarvitsemme " $text-size: 12px;<\/code>". Annamme muuttujataulukon k\u00e4\u00e4nt\u00e4j\u00e4lle rivill\u00e4 #17<\/code>, k\u00e4skem\u00e4ll\u00e4 sen k\u00e4\u00e4nt\u00e4m\u00e4\u00e4n n\u00e4it\u00e4 muuttujia k\u00e4ytt\u00e4en.<\/p>\nSitten rivill\u00e4 #19-22<\/code>kutsumme compile()<\/code>funktiota, jonka pit\u00e4isi palauttaa k\u00e4\u00e4nnetty CSS merkkijonona. Tulostamme <style><\/code>tagin, jonka sis\u00e4ll\u00e4 on CSS-merkkijono. Koska olemme koukussa wp_head<\/code>-palveluun, muokkausty\u00f6kalu n\u00e4ytt\u00e4\u00e4 esikatselun muuttuneella CSS:ll\u00e4 aina, kun muutos tehd\u00e4\u00e4n.<\/p>\n4 Tallenna k\u00e4\u00e4nnetty CSS teeman tyylisivulle<\/h2>\n
CSS:n k\u00e4\u00e4nt\u00e4misen koodi on hyvin samanlainen kuin edellinen vaihe. Ainoa ero on, ett\u00e4 kirjoitamme nyt CSS:n tiedostoon sen sijaan, ett\u00e4 tulostamme sen. Sinun pit\u00e4isi todella<\/strong> harkita t\u00e4m\u00e4n laittamista funktioon, jotta et toista koodia, mutta selvyyden vuoksi olen p\u00e4\u00e4tt\u00e4nyt erottaa n\u00e4m\u00e4 kaksi toisistaan.<\/p>\nOtamme kiinni, [customize_save_after](https:\/\/developer.wordpress.org\/reference\/hooks\/customize_save_after\/)<\/code>mitk\u00e4 triggerit napsauttavat Tallenna WordPress Customizerissa. T\u00e4ss\u00e4 vaiheessa noudetaan l\u00e4hde-SCSS, m\u00e4\u00e4ritell\u00e4\u00e4n muuttujien arvot ja k\u00e4\u00e4nnet\u00e4\u00e4n se CSS:ksi. CSS-merkkijonolla k\u00e4yt\u00e4mme yksinkertaista PHP-funktiota sen kirjoittamiseen teeman CSS-tiedostoon.<\/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>\nAinoa ero aiempaan on rivill\u00e4 #8<\/code>, jolla m\u00e4\u00e4rit\u00e4mme kohdetiedoston, johon kirjoitetaan, ja rivill\u00e4 #19<\/code>, jolla kirjoitamme tiedostoon.<\/p>\n\u00a0 Johtop\u00e4\u00e4t\u00f6s<\/h2>\n
Meill\u00e4 on nyt Customizer-asetukset, jotka ohjaavat muuttujia teeman SCSS-tiedostossa ja korvaavat teeman p\u00e4\u00e4tyylitaulukon n\u00e4iden muuttujien avulla. Ei ole rajoituksia sille, kuinka monta tai millaisia \u200b\u200basetuksia haluat antaa teeman k\u00e4ytt\u00e4jien muokata! K\u00e4yt\u00e4 aikaa oikean j\u00e4rjestelm\u00e4n luomiseen, jotta voit k\u00e4sitell\u00e4 eri muuttujatyyppien muotoilua (esim. etuliitteet tai j\u00e4lkiliitteet) ja muokata mukauttaja-asetukset oikein. Teeman k\u00e4ytt\u00e4j\u00e4t arvostavat joustavuutta ja kuinka helppoa on mukauttaa teemasi!<\/p>\n
Voit my\u00f6s selvitt\u00e4\u00e4 erilaisia \u200b\u200btapoja k\u00e4sitell\u00e4 lopullisen CSS:n tiedostojen kirjoittamista. Jos et halua korvata p\u00e4\u00e4tyylitaulukkoa, haluat ehk\u00e4 tulostaa sen toiseen tiedostoon. Voit my\u00f6s harkita if-else-ehtojen k\u00e4ytt\u00f6\u00e4 SCSS:ss\u00e4<\/a>.<\/p>\nT\u00e4m\u00e4 opetusohjelma on kirjoitettu antamaan sinulle ponnahduslauta WordPress-teeman mukauttamiseen Customizerin avulla. Kerro minulle, oliko siit\u00e4 sinulle hy\u00f6ty\u00e4 \u2013 tai jos haluat kehittyneemm\u00e4n opetusohjelman, joka varmistaa, ett\u00e4 teeman tyylitaulukkoa ei kirjoiteta p\u00e4\u00e4lle!<\/p>\n