See õpetus näitab, kuidas lisada WordPressi kohandajasse teema sätteid, nt teemavärve, ja kompileerida teema laaditabel valitud muutujatega. Kui kasutate SCSS-i teemade stiili teeki kasutades, saate hõlpsalt lubada teema kasutajatel kohandada teema laaditabeli muutujaid, ilma et nad peaksid ise SCSS-faile redigeerima.
Iga hea teema peaks võimaldama palju kohandamist. Vähemalt peaks olema võimalik määrata põhiteema värve. Selle asemel, et kirjutada palju inetut CSS-i, et kõikjal teemavärvid alistada, saate selle asemel kompileerida täieliku laaditabeli otse Customizerist. See õpetus õpetab teile, kuidas!
Mida me teeme – ja mida me vajame
Eeldan, et SCSS-failides, mille te juba kompileerite teema põhifailiks, on teie teemal juba veidi stiili kujundatud style.css. Ja kasutades SCSS-i, määrate tõenäoliselt SCSS-i muutujatena korduvad asjad, nagu värvid, suurused või katkestuspunktid, ja kasutate neid muutujaid kogu oma stiilis.
Saate luua oma SCSS-failis olevate muutujate jaoks mis tahes kohandaja sätteid. Värvivalijad, numbri- ja tekstisisestus sobivad selleks suurepäraselt. Sel ajal, kui kasutaja muudab WordPressi kohandaja sätteid, näeb ta muudetud muutujatega teema eelvaadet. Ja kui nad klõpsavad nupul „Salvesta", kompileeritakse lõplik CSS valitud väärtusi kasutades põhilaaditabeli CSS-faili.
Selle õpetuse näitena eeldan, et teema põhilaaditabeli SCSS-fail teeb @importfaili variables.scss. Seal oleme määratlenud kolm muutujat, mida soovime kohandaja abil kohandada: kaks värvi ja üks teksti suurus px.
$main: #594c74 !default;
$secondary: #555 !default;
$text-size: 12px !default;Pange tähele, et selleks, et SCSS saaks muutujaid uuesti määratleda, tuleb need defineerida!default. See on SCSS-i reegel. Et see õpetus töötaks; kõik muutujad, mida soovite kohandada, peavad olema teie SCSS-failides vaikimisi määratletud.
Teie otsustada, millal (või kas) soovite CSS-faili üle kirjutada. See õpetus eeldab, et kui kasutaja klõpsab Customizeris nupul „Salvesta”, kompileerib see uuesti ja kirjutab teema CSS-i. Kuigi kohandaja eelvaade on aktiivne ja kasutaja muudab sätteid (enne Salvesta klõpsamist), väljastame kompileeritud CSS-i veebisaidi eelvaate päises. Me ei taha CSS-faili kohe üle kirjutada juhuks, kui kasutaja soovib tehtud muudatusi tühistada.
Pea meeles…
See õpetus kirjutab teema style.cssfaili üle iga kord, kui kohandaja sätted salvestatakse.
Eeldan, et sa juba kompileerid oma SCSS-failid kompilaatoriprogrammiga (nt Koala või käsurida). Selle koodi lisamine teemasse kirjutab CSS-faili üle, kuid see ei muuda lähteteksti SCSS-faile. See tähendab, et iga kord, kui teete Customizeris muudatusi ja lähete seejärel tagasi oma algsete SCSS-failide juurde ja kompileerite uuesti, lähevad teie kohandamisseaded kaotsi!
Selle ümber liikumiseks on mitu meetodit ja see sõltub teie projektist ja sellest, kuidas te töötate. Enamikul juhtudel poleks see probleem. Tavaliselt tuleb seda teemat arendades lihtsalt meeles pidada. Kui annate oma lõpetatud teema kellelegi teisele kasutamiseks, ei puutu ta tavaliselt teie SCSS-faile nagunii.
Kui see on kõrvale jäänud, alustame uurimist, kuidas seda teha.
- Tutvuge SCSSPHP teegiga ja lisage see meie teemasse
- Looge kohandaja sätted iga SCSS-muutuja jaoks, mida soovime kohandada
- Veenduge, et kohandaja kuvaks muudatuste eelvaate liikvel olles
- Kohandaja sätete salvestamisel kompileerime teema CSS-faili uuesti ja kirjutame selle üle.
1 SCSSPHP teek
SCSS-failide koostamiseks kasutame SCSSPHP raamatukogu by leafo (MIT-litsents). Pange tähele, et see õpetus on SCSS-i teegi jaoks. Teegi autoril on sarnane VÄHEM PHP-teek, kui soovite kasutada VÄHEM, kuid pidage meeles, et järgmine õpetus on SCSS-i teegi jaoks.
SCSSPHP teeki on väga lihtne kasutada! Siin on lihtsustatud ülevaade sellest, kuidas me teeki oma teema PHP-s kasutame:
- Kaasame raamatukogu
- Looge teegist uus kompilaatoriklassi eksemplar
- Laadige lähte-SCSS-faili sisu ja edastage see kompilaatori objektile
- Defineeri assotsiatiivne massiiv; SCSS-muutujate nimed (sh
$) võtmetena ja nende väärtused. Iga element selles massiivis alistab sama nimega muutujad kaasasolevas SCSS-failis. - Palume kompilaatoriobjektil kompileeritud CSS-i kompileerida ja vastutasuks stringina vastu võtta. Seejärel
headsaame selle CSS-i väljastada või kirjutada selle teemastyle.cssfaili
Milliseid SCSS-muutujaid saame kompileerida?
Lihtne vastus on: mis tahes kehtiv SCSS-muutuja!
SCSSPHP teek võib kompileerida mis tahes kehtivaid SCSS-muutujaid, kuid pidage meeles, et peate veenduma, et need vormindatakse kohandaja abil õigesti. Näiteks värvidele tuleb lisada #kuueteistkümnendvärvide eesliide või need tuleb vormindada rgb()definitsioonidena rgba(). Suuruse muutujale tuleb tavaliselt lisada " px", " em", " %" jne.
Kui plaanite kohandaja teema kaudu luua täiustatud süsteemi SCSS-muutujate koostamiseks, veenduge, et teil oleks igat tüüpi muutujate õigeks vormindamiseks hea süsteem!
Teeme esimese sammu teelt välja; raamatukogu allalaadimine ja kaasamine meie teemasse:
SCSSPHP teegi allalaadimine ja sellesse kaasamine
Esimene samm on SCSSPHP teegi allalaadimine. Lingitud lehel klõpsake ülaosas nuppu "Laadi alla". Kui soovite pigem kasutada Composerit, pakub sait selle kohta juhendit.
Ekstraheerige ZIP-pakk kuskil oma teema sees olevasse alamkausta. Näiteks asetan selle theme/inc/scssphp/kausta.
Avage PHP-fail, kuhu soovite kompileerimiseks koodi lisada. See võib asuda otse teie teemas functions.phpvõi PHP-failis, mille sisaldab functions.php. Lihtsuse huvides kirjutan kõik sisse functions.php.
Enne teegi kasutamist peame selle kaasama; nagu nii:
require_once(get_stylesheet_directory(). '/inc/scssphp/scss.inc.php');Kohandage vastavalt oma failide teed. Peame lisama scss.inc.phpraamatukogu juurkaustast leitud faili. Nüüd saame pärast seda rida kasutada raamatukogu tunde!
2 SCSS-muutujate jaoks kohandaja sätete loomine
Loome oma muutujate jaoks WordPressi kohandaja sätted. Õpetuse huvides lisame ülalmainitud SCSS-muutujate seaded: kaks värvivalijat ja numbrisisestus.
Ma ei hakka üksikasjalikult selgitama, kuidas kohandaja seadeid lisada – selle jaoks on palju õpetusi. Allolevas koodinäites loon uue jaotise ja sisestan kolm seadet:
See kood haakub customize_registerja lisab jaotise "Teemamuutujad". Seejärel lisatakse värvivalija " theme-main", teine värvivalija " theme-secondary" ja numbrisisend theme-text-size. See kõik on WordPressi vaikefunktsioonid. Lisan ka iga sätte vaikeväärtused samadele väärtustele, mis variables.scssfailis määratletud. Selle eesmärk on tagada, et kohandaja sätted käivituvad õigete värvidega.
See näeb suurepärane välja! Kuid praegu ei juhtu nende muutujate kohandamisel midagi. Jätkame sammuga 3; eelvaate käsitlemine kohandajas.
3 Kompileerige CSS liikvel olles kohandaja eelvaates
See samm käsitleb kohandaja eelvaate värskendamist ajal, kui kasutaja seadeid muudab, ega kirjuta ühtegi meie faili. Selle asemel väljastame koostatud CSS- <head>i eelvaate <style>sildi sees. Nii tagame, et tekstisisene CSS alistab kõik algse CSS-faili stiilid.
Selleks et kontrollida, kas me kasutame praegu kohandaja eelvaadet või mitte, kasutame funktsiooni [is_customize_preview](https://developer.wordpress.org/reference/functions/is_customize_preview/)(). Kui see naaseb true, loome funktsiooniga ühendatud funktsiooni wp_head. Funktsiooni sees käivitame ja seadistame SCSSPHP teegi, hangime praegused seadistusväärtused, kompileerime CSS-i ja väljastame selle <style>sildina.
Real #7määratleme lähte-SCSS-faili tee ja laadime selle sisu muutujasse aadressil #8. Seadistame teegi imporditee, et tagada meie #9SCSS -failide korrektne toimimine. Lisateavet selle kohta saate lugeda raamatukogu dokumentatsiooni saidilt rubriigist "Imporditeed". Põhimõtteliselt peab SCSSPHP teek teadma teie SCSS-kausta suhtelist teed, et kõik teed oleksid õiged.#10``@import@import
Real #12-16loome massiivi kompilaatori jaoks; assotsiatiivne massiiv, mille võtmeteks on muutujate nimed. Väärtuste puhul, mida kasutame [get_theme_mod](https://developer.wordpress.org/reference/functions/get_theme_mod/)()väärtuste hankimiseks kohandajast. Funktsioon get_theme_mod()võimaldab teil määrata teise parameetrina vaikeväärtuse, kui väärtust ei salvestatud. See säästab meid kompilaatori kokkujooksmisest selliste väärtustega nagu null. Seega pakume sama vaikimisi nagu meie SCSS-muutujate failis ja kohandaja sätete registreerimisel.
Pange tähele ka seda, et real olev kood #15lisab " px", tagades muutuja tegeliku väärtuse kehtivuse. Vastasel juhul kompileeriks see kui " $text-size: 12;", kui vajame " $text-size: 12px;". Esitame muutujate massiivi kompilaatorile real #17, käske tal neid muutujaid kasutades kompileerida.
Seejärel #19-22kutsume real välja compile()funktsiooni, mis peaks tagastama kompileeritud CSS-i stringina. Väljastame <style>sildi, mille sees on CSS-string. Kuna oleme konksul wp_head, renderdab kohandaja iga kord, kui muudatus tehakse, muudetud CSS-iga eelvaate.
4 Koostatud CSS-i salvestamine teema stiililehele
CSS-i koostamise kood on väga sarnane eelmisele etapile. Ainus erinevus on see, et me kirjutame nüüd CSS-i faili, selle asemel, et seda väljastada. Peaksite tõesti kaaluma selle funktsiooni lisamist, et te ei kordaks koodi, kuid selguse huvides olen otsustanud need kaks eraldada.
Kui keegi klõpsab WordPressi kohandajas käsul Salvesta, võtame selle külge, [customize_save_after](https://developer.wordpress.org/reference/hooks/customize_save_after/)millised käivitajad. Sel hetkel toome lähtekoodi SCSS-i, määratleme muutujate väärtused ja kompileerime selle CSS-i. CSS-stringi puhul kasutame lihtsat PHP-funktsiooni selle kirjutamiseks teema CSS-faili.
Ainus erinevus varasemast on real, #8kus me määratleme sihtfaili, kuhu kirjutame, ja real, #19kus me faili kirjutame.
Järeldus
Meil on nüüd kohandaja sätted, mis juhivad muutujaid teema SCSS-failis ja kirjutavad nende muutujate abil üle teema peamise laaditabeli. Kui palju või milliseid seadeid soovite teemakasutajatel kohandada, pole piiranguid! Investeerige veidi aega sobiva süsteemi seadistamisse, et käsitleda erinevate muutujate tüüpide (nt ees- või järelliited) vormindamist ja kohandaja sätete õiget struktureerimist. Teema kasutajad hindavad paindlikkust ja seda, kui lihtne on teie teemat kohandada!
Samuti saate välja mõelda erinevaid viise lõpliku CSS-i faili kirjutamise käsitlemiseks. Kui te ei soovi peamist laaditabelit üle kirjutada, võib-olla soovite selle väljastada teise faili. Samuti võite uurida SCSS-is tingimussõnade if-else kasutamist.
See õpetus on kirjutatud selleks, et anda teile hüppelaud, kuidas kohandada oma WordPressi teemat Customizerist. Andke mulle teada, kas sellest oli teile kasu või kui soovite täpsemat õpetust, mis tagab, et teema laaditabelit üle ei kirjutata!