style.css<\/code>. Ja kasutades SCSS-i, m\u00e4\u00e4rate t\u00f5en\u00e4oliselt SCSS-i muutujatena korduvad asjad, nagu v\u00e4rvid, suurused v\u00f5i katkestuspunktid, ja kasutate neid muutujaid kogu oma stiilis.<\/p>\nSaate luua oma SCSS-failis olevate muutujate jaoks mis tahes kohandaja s\u00e4tteid. V\u00e4rvivalijad, numbri- ja tekstisisestus sobivad selleks suurep\u00e4raselt. Sel ajal, kui kasutaja muudab WordPressi kohandaja s\u00e4tteid, n\u00e4eb ta muudetud muutujatega teema eelvaadet. Ja kui nad kl\u00f5psavad nupul \u201eSalvesta", kompileeritakse l\u00f5plik CSS valitud v\u00e4\u00e4rtusi kasutades p\u00f5hilaaditabeli CSS-faili.<\/p>\n
Selle \u00f5petuse n\u00e4itena eeldan, et teema p\u00f5hilaaditabeli SCSS-fail teeb @import<\/code>faili variables.scss<\/code>. Seal oleme m\u00e4\u00e4ratlenud kolm muutujat, mida soovime kohandaja abil kohandada: kaks v\u00e4rvi ja \u00fcks teksti suurus px<\/code>.<\/p>\n$main: #594c74 !default;\n$secondary: #555 !default;\n$text-size: 12px !default;<\/code><\/pre>\nPange t\u00e4hele, et selleks, et SCSS saaks muutujaid uuesti m\u00e4\u00e4ratleda, tuleb need defineerida<\/strong>!default<\/code>. See on SCSS-i reegel<\/a>. Et see \u00f5petus t\u00f6\u00f6taks; k\u00f5ik muutujad, mida soovite kohandada, peavad olema teie SCSS-failides vaikimisi m\u00e4\u00e4ratletud.<\/p>\nTeie otsustada, millal (v\u00f5i kas) soovite CSS-faili \u00fcle kirjutada. See \u00f5petus eeldab, et kui kasutaja kl\u00f5psab Customizeris nupul \u201eSalvesta”, kompileerib see uuesti ja kirjutab teema CSS-i. Kuigi kohandaja eelvaade on aktiivne ja kasutaja muudab s\u00e4tteid (enne Salvesta kl\u00f5psamist), v\u00e4ljastame kompileeritud CSS-i veebisaidi eelvaate p\u00e4ises. Me ei taha CSS-faili kohe \u00fcle kirjutada juhuks, kui kasutaja soovib tehtud muudatusi t\u00fchistada.<\/p>\n
\u00a0 Pea meeles\u2026<\/h3>\n
See \u00f5petus kirjutab teema style.css<\/code>faili \u00fcle iga kord, kui kohandaja s\u00e4tted salvestatakse.<\/p>\nEeldan, et sa juba kompileerid oma SCSS-failid kompilaatoriprogrammiga (nt Koala<\/a> v\u00f5i k\u00e4surida). Selle koodi lisamine teemasse kirjutab CSS-faili \u00fcle, kuid see ei muuda l\u00e4hteteksti SCSS-faile. See t\u00e4hendab, et iga kord, kui teete Customizeris muudatusi ja l\u00e4hete seej\u00e4rel tagasi oma algsete SCSS-failide juurde ja kompileerite uuesti, l\u00e4hevad teie kohandamisseaded kaotsi!<\/p>\nSelle \u00fcmber liikumiseks on mitu meetodit ja see s\u00f5ltub teie projektist ja sellest, kuidas te t\u00f6\u00f6tate. Enamikul juhtudel poleks see probleem. Tavaliselt tuleb seda teemat arendades lihtsalt meeles pidada. Kui annate oma l\u00f5petatud teema kellelegi teisele kasutamiseks, ei puutu ta tavaliselt teie SCSS-faile nagunii.<\/p>\n
Kui see on k\u00f5rvale j\u00e4\u00e4nud, alustame uurimist, kuidas seda teha.<\/p>\n
\n- Tutvuge SCSSPHP teegiga ja lisage see meie teemasse<\/li>\n
- Looge kohandaja s\u00e4tted iga SCSS-muutuja jaoks, mida soovime kohandada<\/li>\n
- Veenduge, et kohandaja kuvaks muudatuste eelvaate liikvel olles<\/li>\n
- Kohandaja s\u00e4tete salvestamisel kompileerime teema CSS-faili uuesti ja kirjutame selle \u00fcle.<\/li>\n<\/ol>\n
1 SCSSPHP teek<\/h2>\n
![\"Kuidas](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152472-61e4dfd0532a5.png\")
<\/a><\/p>\nSCSS-failide koostamiseks kasutame SCSSPHP raamatukogu by leafo<\/a> (MIT-litsents). Pange t\u00e4hele, et see \u00f5petus on SCSS-i teegi jaoks. Teegi autoril on sarnane V\u00c4HEM PHP-teek<\/a>, kui soovite kasutada V\u00c4HEM, kuid pidage meeles, et j\u00e4rgmine \u00f5petus on SCSS-i teegi jaoks.<\/p>\nSCSSPHP teeki on v\u00e4ga lihtne kasutada! Siin on lihtsustatud \u00fclevaade sellest, kuidas me teeki oma teema PHP-s kasutame:<\/p>\n
\n- Kaasame raamatukogu<\/li>\n
- Looge teegist uus kompilaatoriklassi eksemplar<\/li>\n
- Laadige l\u00e4hte-SCSS-faili sisu ja edastage see kompilaatori objektile<\/li>\n
- Defineeri assotsiatiivne massiiv; SCSS-muutujate nimed (sh
$<\/code>) v\u00f5tmetena ja nende v\u00e4\u00e4rtused. Iga element selles massiivis alistab sama nimega muutujad kaasasolevas SCSS-failis.<\/li>\n- Palume kompilaatoriobjektil kompileeritud CSS-i kompileerida ja vastutasuks stringina vastu v\u00f5tta. Seej\u00e4rel
head<\/code>saame selle CSS-i v\u00e4ljastada v\u00f5i kirjutada selle teema style.css<\/code>faili<\/li>\n<\/ul>\n\u00a0 Milliseid SCSS-muutujaid saame kompileerida?<\/h3>\n
Lihtne vastus on: mis tahes kehtiv SCSS-muutuja!<\/p>\n
SCSSPHP teek v\u00f5ib kompileerida mis tahes kehtivaid SCSS-muutujaid, kuid pidage meeles, et peate veenduma, et need vormindatakse kohandaja abil \u00f5igesti. N\u00e4iteks v\u00e4rvidele tuleb lisada #<\/code>kuueteistk\u00fcmnendv\u00e4rvide eesliide v\u00f5i need tuleb vormindada rgb()<\/code>definitsioonidena rgba()<\/code>. Suuruse muutujale tuleb tavaliselt lisada " px<\/code>", " em<\/code>", " %<\/code>" jne.<\/p>\nKui plaanite kohandaja teema kaudu luua t\u00e4iustatud s\u00fcsteemi SCSS-muutujate koostamiseks, veenduge, et teil oleks igat t\u00fc\u00fcpi muutujate \u00f5igeks vormindamiseks hea s\u00fcsteem!<\/p>\n
Teeme esimese sammu teelt v\u00e4lja; raamatukogu allalaadimine ja kaasamine meie teemasse:<\/p>\n
SCSSPHP teegi allalaadimine ja sellesse kaasamine<\/h3>\n
Esimene samm on SCSSPHP teegi<\/a> allalaadimine. Lingitud lehel kl\u00f5psake \u00fclaosas nuppu "Laadi alla". Kui soovite pigem kasutada Composerit, pakub sait selle kohta juhendit.<\/p>\nEkstraheerige ZIP-pakk kuskil oma teema sees olevasse alamkausta. N\u00e4iteks asetan selle theme\/inc\/scssphp\/<\/code>kausta.<\/p>\nAvage PHP-fail, kuhu soovite kompileerimiseks koodi lisada. See v\u00f5ib asuda otse teie teemas functions.php<\/code>v\u00f5i PHP-failis, mille sisaldab functions.php<\/code>. Lihtsuse huvides kirjutan k\u00f5ik sisse functions.php<\/code>.<\/p>\nEnne teegi kasutamist peame selle kaasama; nagu nii:<\/p>\n
require_once(get_stylesheet_directory(). '\/inc\/scssphp\/scss.inc.php');<\/code><\/pre>\nKohandage vastavalt oma failide teed. Peame lisama scss.inc.php<\/code>raamatukogu juurkaustast leitud faili. N\u00fc\u00fcd saame p\u00e4rast seda rida kasutada raamatukogu tunde!<\/p>\n2 SCSS-muutujate jaoks kohandaja s\u00e4tete loomine<\/h2>\n
Loome oma muutujate jaoks WordPressi kohandaja s\u00e4tted. \u00d5petuse huvides lisame \u00fclalmainitud SCSS-muutujate seaded: kaks v\u00e4rvivalijat ja numbrisisestus.<\/p>\n
Ma ei hakka \u00fcksikasjalikult selgitama, kuidas kohandaja seadeid lisada \u2013 selle jaoks on palju \u00f5petusi. Allolevas koodin\u00e4ites loon uue jaotise ja sisestan kolm seadet:<\/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>\nSee kood haakub customize_register<\/code>ja lisab jaotise "Teemamuutujad". Seej\u00e4rel lisatakse v\u00e4rvivalija " theme-main<\/code>", teine \u200b\u200bv\u00e4rvivalija " theme-secondary<\/code>" ja numbrisisend theme-text-size<\/code>. See k\u00f5ik on WordPressi vaikefunktsioonid. Lisan ka iga s\u00e4tte vaikev\u00e4\u00e4rtused samadele v\u00e4\u00e4rtustele, mis variables.scss<\/code>failis m\u00e4\u00e4ratletud. Selle eesm\u00e4rk on tagada, et kohandaja s\u00e4tted k\u00e4ivituvad \u00f5igete v\u00e4rvidega.<\/p>\n![\"Kuidas](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152472-61e4dfd112a70.png\")
<\/a><\/p>\nSee n\u00e4eb suurep\u00e4rane v\u00e4lja! Kuid praegu ei juhtu nende muutujate kohandamisel midagi. J\u00e4tkame sammuga 3; eelvaate k\u00e4sitlemine kohandajas.<\/p>\n
3 Kompileerige CSS liikvel olles kohandaja eelvaates<\/h2>\n
See samm k\u00e4sitleb kohandaja eelvaate v\u00e4rskendamist ajal, kui kasutaja seadeid muudab, ega kirjuta \u00fchtegi meie faili. Selle asemel v\u00e4ljastame koostatud CSS- <head><\/code>i eelvaate <style><\/code>sildi sees. Nii tagame, et tekstisisene CSS alistab k\u00f5ik algse CSS-faili stiilid.<\/p>\nSelleks et kontrollida, kas me kasutame praegu kohandaja eelvaadet v\u00f5i mitte, kasutame funktsiooni [is_customize_preview](https:\/\/developer.wordpress.org\/reference\/functions\/is_customize_preview\/)()<\/code>. Kui see naaseb true<\/code>, loome funktsiooniga \u00fchendatud funktsiooni wp_head<\/code>. Funktsiooni sees k\u00e4ivitame ja seadistame SCSSPHP teegi, hangime praegused seadistusv\u00e4\u00e4rtused, kompileerime CSS-i ja v\u00e4ljastame selle <style><\/code>sildina.<\/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>\nReal #7<\/code>m\u00e4\u00e4ratleme l\u00e4hte-SCSS-faili tee ja laadime selle sisu muutujasse aadressil #8<\/code>. Seadistame teegi imporditee, et tagada meie #9<\/code>SCSS -failide korrektne toimimine. Lisateavet selle kohta saate lugeda raamatukogu dokumentatsiooni saidilt<\/a> rubriigist "Imporditeed". P\u00f5him\u00f5tteliselt peab SCSSPHP teek teadma teie SCSS-kausta suhtelist teed, et k\u00f5ik teed oleksid \u00f5iged.#10``@import<\/code><\/a>@import<\/code><\/p>\nReal #12-16<\/code>loome massiivi kompilaatori jaoks; assotsiatiivne massiiv, mille v\u00f5tmeteks on muutujate nimed. V\u00e4\u00e4rtuste puhul, mida kasutame [get_theme_mod](https:\/\/developer.wordpress.org\/reference\/functions\/get_theme_mod\/)()<\/code>v\u00e4\u00e4rtuste hankimiseks kohandajast. Funktsioon get_theme_mod()<\/code>v\u00f5imaldab teil m\u00e4\u00e4rata teise parameetrina vaikev\u00e4\u00e4rtuse, kui v\u00e4\u00e4rtust ei salvestatud. See s\u00e4\u00e4stab meid kompilaatori kokkujooksmisest selliste v\u00e4\u00e4rtustega nagu null<\/code>. Seega pakume sama vaikimisi nagu meie SCSS-muutujate failis ja kohandaja s\u00e4tete registreerimisel.<\/p>\nPange t\u00e4hele ka seda, et real olev kood #15<\/code>lisab " px<\/code>", tagades muutuja tegeliku v\u00e4\u00e4rtuse kehtivuse. Vastasel juhul kompileeriks see kui " $text-size: 12;<\/code>", kui vajame " $text-size: 12px;<\/code>". Esitame muutujate massiivi kompilaatorile real #17<\/code>, k\u00e4ske tal neid muutujaid kasutades kompileerida.<\/p>\nSeej\u00e4rel #19-22<\/code>kutsume real v\u00e4lja compile()<\/code>funktsiooni, mis peaks tagastama kompileeritud CSS-i stringina. V\u00e4ljastame <style><\/code>sildi, mille sees on CSS-string. Kuna oleme konksul wp_head<\/code>, renderdab kohandaja iga kord, kui muudatus tehakse, muudetud CSS-iga eelvaate.<\/p>\n4 Koostatud CSS-i salvestamine teema stiililehele<\/h2>\n
CSS-i koostamise kood on v\u00e4ga sarnane eelmisele etapile. Ainus erinevus on see, et me kirjutame n\u00fc\u00fcd CSS-i faili, selle asemel, et seda v\u00e4ljastada. Peaksite t\u00f5esti<\/strong> kaaluma selle funktsiooni lisamist, et te ei kordaks koodi, kuid selguse huvides olen otsustanud need kaks eraldada.<\/p>\nKui keegi kl\u00f5psab WordPressi kohandajas k\u00e4sul Salvesta, v\u00f5tame selle k\u00fclge, [customize_save_after](https:\/\/developer.wordpress.org\/reference\/hooks\/customize_save_after\/)<\/code>millised k\u00e4ivitajad. Sel hetkel toome l\u00e4htekoodi SCSS-i, m\u00e4\u00e4ratleme muutujate v\u00e4\u00e4rtused ja kompileerime selle CSS-i. CSS-stringi puhul kasutame lihtsat PHP-funktsiooni selle kirjutamiseks teema CSS-faili.<\/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>\nAinus erinevus varasemast on real, #8<\/code>kus me m\u00e4\u00e4ratleme sihtfaili, kuhu kirjutame, ja real, #19<\/code>kus me faili kirjutame.<\/p>\n\u00a0 J\u00e4reldus<\/h2>\n
Meil on n\u00fc\u00fcd kohandaja s\u00e4tted, mis juhivad muutujaid teema SCSS-failis ja kirjutavad nende muutujate abil \u00fcle teema peamise laaditabeli. Kui palju v\u00f5i milliseid seadeid soovite teemakasutajatel kohandada, pole piiranguid! Investeerige veidi aega sobiva s\u00fcsteemi seadistamisse, et k\u00e4sitleda erinevate muutujate t\u00fc\u00fcpide (nt ees- v\u00f5i j\u00e4relliited) vormindamist ja kohandaja s\u00e4tete \u00f5iget struktureerimist. Teema kasutajad hindavad paindlikkust ja seda, kui lihtne on teie teemat kohandada!<\/p>\n
Samuti saate v\u00e4lja m\u00f5elda erinevaid viise l\u00f5pliku CSS-i faili kirjutamise k\u00e4sitlemiseks. Kui te ei soovi peamist laaditabelit \u00fcle kirjutada, v\u00f5ib-olla soovite selle v\u00e4ljastada teise faili. Samuti v\u00f5ite uurida SCSS-is tingimuss\u00f5nade if-else kasutamist<\/a>.<\/p>\nSee \u00f5petus on kirjutatud selleks, et anda teile h\u00fcppelaud, kuidas kohandada oma WordPressi teemat Customizerist. Andke mulle teada, kas sellest oli teile kasu v\u00f5i kui soovite t\u00e4psemat \u00f5petust, mis tagab, et teema laaditabelit \u00fcle ei kirjutata!<\/p>\n