Tämä opetusohjelma näyttää, kuinka voit lisätä teemaasetuksia, esim. teeman värejä, WordPress Customizerissa ja kääntää teematyylisivu uudelleen valituilla muuttujilla. Kun käytät teematyyliä SCSS:ssä kirjaston avulla, voit helposti antaa teeman käyttäjien muokata mitä tahansa teematyylitaulukon muuttujia ilman, että heidän tarvitsee muokata SCSS-tiedostoja itse.
Minkä tahansa hyvän teeman tulisi mahdollistaa paljon mukauttamista. Ainakin pääteeman värit pitäisi olla mahdollista asettaa. Sen sijaan, että kirjoittaisit paljon rumaa CSS:ää ohittaaksesi teeman värit kaikkialla, voit sen sijaan kääntää koko tyylitaulukon uudelleen suoraan Customizerista. Tämä opetusohjelma opettaa sinulle kuinka!
Mitä teemme – ja mitä tarvitsemme
Oletan, että teemallasi on jo hieman muotoilua SCSS-tiedostoissa, jotka olet jo kääntänyt teeman päätiedostoon style.css. Ja käyttämällä SCSS:ää, määrität todennäköisimmin toistuvia asioita, kuten värit, koon tai keskeytyspisteet, SCSS-muuttujiksi ja käytät näitä muuttujia koko tyylissäsi.
Voit luoda SCSS-tiedostosi muuttujille mitä tahansa ja kuinka monta tahansa mukauttaja-asetuksia haluat. Värinvalitsimet, numero- ja tekstinsyöttö sopivat tähän täydellisesti. Kun käyttäjä muuttaa asetuksia WordPress Customizerissa, hän näkee esikatselun teemasta muutettujen muuttujien kanssa. Ja kun he napsauttavat "Tallenna", lopullinen CSS käännetään päätyylitaulukon CSS-tiedostoon käyttämällä valittuja arvoja.
Esimerkkinä tästä opetusohjelmasta oletetaan, että teeman päätyylitaulukon SCSS-tiedosto tekee @importtiedoston variables.scss. Siellä olemme määrittäneet kolme muuttujaa, jotka haluamme mukauttaa Customizerissa: Kaksi väriä ja yksi tekstikoko px.
$main: #594c74 !default;
$secondary: #555 !default;
$text-size: 12px !default;Huomaa, että jotta SCSS voi määrittää muuttujat uudelleen, ne on määritettävä komennolla !default. Tämä on sääntö SCSS:ssä. Jotta tämä opetusohjelma toimisi; kaikki muuttujat, joita haluat muokata, on määritettävä oletusarvoiksi SCSS-tiedostoissasi.
On sinun päätettävissäsi, milloin (tai haluatko) korvata CSS-tiedoston. Tässä opetusohjelmassa oletetaan, että kun käyttäjä napsauttaa "Tallenna" Customizerissa, se kääntää uudelleen ja kirjoittaa teeman CSS:ään. Mutta kun Customizer-esikatselu on aktiivinen ja käyttäjä muuttaa asetuksia (ennen kuin napsautat Tallenna), näytämme yksinkertaisesti käännetyn CSS:n verkkosivuston esikatselun otsikossa. Emme halua korvata CSS-tiedostoa heti, jos käyttäjä haluaa peruuttaa tekemänsä muutokset.
Pitää mielessä…
Tämä opetusohjelma korvaa teeman style.csstiedoston aina, kun Customizer-asetukset tallennetaan.
Oletan, että olet jo kääntänyt SCSS-tiedostosi kääntäjäohjelmalla (esim. Koala tai komentorivi). Tämän koodin lisääminen teemaan korvaa CSS-tiedoston, mutta se ei muuta lähde-SCSS-tiedostoja. Tämä tarkoittaa, että aina kun teet muutoksia Customizeriin ja palaat sitten alkuperäisiin SCSS-tiedostoihisi ja käännät uudelleen, mukauttaminen-asetuksesi menetetään!
On olemassa useita tapoja kiertää tämä, ja se riippuu projektistasi ja työskentelytavasta. Useimmissa tapauksissa se ei olisi ongelma. Se on yleensä vain asia pitää mielessä, kun kehität teemaasi. Jos annat viimeistellyn teemasi jonkun muun käytettäväksi, he eivät yleensä koskettaisi SCSS-tiedostojasi.
Kun tämä on poissa tieltä, aletaan tutkia, miten teemme tämän:
- Tutustutaan SCSSPHP-kirjastoon ja sisällytetään se teemaamme
- Luo Customizer-asetukset jokaiselle SCSS-muuttujalle, jonka haluamme olla mukautettavissa
- Varmista, että Customizer esikatselee muutokset liikkeellä ollessasi
- Kun tallennamme Customizer-asetuksia, käännämme uudelleen ja korvaamme teeman CSS-tiedoston.
1 SCSSPHP-kirjasto
SCSS-tiedostojen kääntämiseen käytämme leafon SCSSPHP-kirjastoa (MIT-lisenssi). Huomaa, että tämä opetusohjelma on tarkoitettu SCSS-kirjastolle. Kirjaston kirjoittajalla on samanlainen VÄHEMMÄN PHP-kirjasto, jos haluat mieluummin käyttää VÄHEMMÄN, mutta muista, että seuraava opetusohjelma on tarkoitettu SCSS-kirjastolle.
SCSSPHP-kirjasto on todella helppokäyttöinen! Tässä on yksinkertaistettu yleiskatsaus siitä, kuinka käytämme kirjastoa teemamme PHP:ssä:
- Mukana kirjasto
- Luo uusi kääntäjäluokan esiintymä kirjastosta
- Lataa lähde-SCSS-tiedoston sisältö ja välitä se kääntäjäobjektille
- Määrittele assosiatiivinen taulukko; SCSS-muuttujien nimet (mukaan lukien
$) avaimina ja niiden arvot. Mikä tahansa tämän taulukon elementti ohittaa samannimiset muuttujat toimitetussa SCSS-tiedostossa. - Pyydämme kääntäjäobjektia kääntämään ja vastaanottamaan käännetyn CSS:n merkkijonona vastineeksi. Voimme sitten joko tulostaa tämän CSS
head:n sisällä tai kirjoittaa sen teemanstyle.csstiedostoon
Millaisia SCSS-muuttujia voimme kääntää?
Yksinkertainen vastaus on: Mikä tahansa kelvollinen SCSS-muuttuja!
SCSSPHP-kirjasto voi kääntää minkä tahansa kelvollisen SCSS-muuttujan, mutta muista, että sinun on varmistettava, että ne muotoillaan oikein mukauttajalta. Esimerkiksi värit on joko oltava etuliitteenä a #for hex värit tai muotoiltava rgb()tai rgba()määritelmiä. Kokomuuttuja on yleensä liitettävä merkinnöillä ‘ px‘, ‘ em‘, ‘ %‘ ja niin edelleen.
Jos aiot tehdä kehittyneen järjestelmän SCSS-muuttujien kokoamiseen Customizer-teeman kautta, varmista, että sinulla on hyvä järjestelmä jokaisen muuttujan muotoilemiseksi oikein!
Otetaan ensimmäinen askel tieltä; kirjaston lataaminen ja sisällyttäminen teemaamme:
SCSSPHP-kirjaston lataaminen ja sisällyttäminen teemaasi
Ensimmäinen vaihe on SCSSPHP-kirjaston lataaminen. Napsauta linkitetyllä sivulla "Lataa" -painiketta aivan yläreunassa. Jos haluat mieluummin käyttää Composeria, sivusto tarjoaa oppaan tähän.
Pura zip alikansioon jonnekin teemasi sisällä. Esimerkkinä laitan sen theme/inc/scssphp/kansioon.
Avaa PHP-tiedosto, johon haluat lisätä koodin kääntämistä varten. Se voi olla suoraan teemasi sisällä functions.phptai PHP-tiedoston sisällä functions.php. Yksinkertaisuuden vuoksi kirjoitan kaiken sisälle functions.php.
Ennen kuin voimme käyttää kirjastoa, meidän on sisällytettävä se; niin kuin:
require_once(get_stylesheet_directory(). '/inc/scssphp/scss.inc.php');Säädä tiedostojesi polku vastaavasti. Meidän on sisällytettävä scss.inc.phpkirjaston juurikansiosta löytyvä tiedosto. Nyt tämän rivin jälkeen voimme käyttää kirjaston tunteja!
2 Mukautusasetusten luominen SCSS-muuttujille
Luodaan muuttujillemme WordPress Customizer -asetukset. Tutoriaalin vuoksi lisäämme asetukset yllä mainituille SCSS-muuttujille: kaksi värinvalitsinta ja numeron syöttö.
En mene yksityiskohtiin selittämään, kuinka Customizer-asetukset lisätään – tätä varten on paljon opetusohjelmia. Alla olevassa koodiesimerkissä luon uuden osion ja laitan kolme asetusta sisään:
Tämä koodi kytkeytyy customize_registerja lisää osion nimeltä "Teemamuuttujat". Sitten se lisää värinvalitsimen ‘ theme-main‘, toisen värivalitsimen ‘ theme-secondary‘ ja numerosyötteen ‘ theme-text-size‘. Tämä kaikki on WordPressin oletustoimintoa. Lisään myös set kunkin asetuksen oletusarvot samoihin arvoihin kuin variables.scsstiedostossa on määritetty. Tämä on vain sen varmistamiseksi, että Customizer-asetukset alkavat oikeilla väreillä.
Se näyttää upealta! Mutta tällä hetkellä mitään ei tapahdu, kun säädät näitä muuttujia. Jatketaan vaiheesta 3; esikatselun käsittely mukauttajassa.
3 Käännä CSS liikkeellä ollessasi Customizerin esikatselussa
Tämä vaihe käsittelee Customizer-esikatselun päivittämisen, kun käyttäjä muuttaa asetuksia, eikä kirjoita tiedostoihimme. Sen sijaan tulostamme käännetyn CSS: <head>n esikatselussa <style>tagin sisällä. Tällä tavalla varmistamme, että tekstin sisäinen CSS ohittaa kaikki alkuperäisen CSS-tiedoston tyylit.
Tarkistaaksemme, käytämmekö tällä hetkellä Customizer-esikatselua, käytämme toimintoa [is_customize_preview](https://developer.wordpress.org/reference/functions/is_customize_preview/)(). Kun tämä palaa true, luomme funktion, joka on koukussa wp_head. Toiminnon sisällä käynnistämme ja määritämme SCSSPHP-kirjaston, haemme nykyiset asetusarvot, käännämme CSS:n ja tulostamme sen <style>tagissa.
Rivillä #7määritämme polun lähde-SCSS-tiedostoon ja lataamme sen sisällön muuttujaan osoitteessa #8. Ja linjalla #9ja määritimme #10kirjaston tuontipolun varmistaaksemme, että kaikki @imports toimivat oikein SCSS-tiedostoissamme. Voit lukea tästä lisää kirjaston dokumentaatiosivustolta kohdasta "Tuontipolut". Periaatteessa SCSSPHP-kirjaston on tiedettävä SCSS-kansiosi suhteellinen polku, jotta kaikki @importpolut ovat oikein.
Rivillä #12-16luomme taulukon kääntäjälle; assosiatiivinen taulukko, jossa muuttujien nimet ovat avaimia. Arvoille, joita käytämme [get_theme_mod](https://developer.wordpress.org/reference/functions/get_theme_mod/)()arvojen saamiseen Customizerista. Toiminnon get_theme_mod()avulla voit määrittää oletusarvon toiseksi parametriksi, jos arvoa ei tallennettu. Tämä säästää meidät kaatumasta kääntäjälle arvoilla, kuten null. Joten tarjoamme saman oletusarvon kuin SCSS-muuttujatiedostossamme ja kun rekisteröimme mukauttaja-asetukset.
Huomaa myös, että rivillä oleva koodi #15lisää merkin px, joka varmistaa, että muuttujan todellinen arvo on kelvollinen. Muuten se kääntäisi " $text-size: 12;", kun tarvitsemme " $text-size: 12px;". Annamme muuttujataulukon kääntäjälle rivillä #17, käskemällä sen kääntämään näitä muuttujia käyttäen.
Sitten rivillä #19-22kutsumme compile()funktiota, jonka pitäisi palauttaa käännetty CSS merkkijonona. Tulostamme <style>tagin, jonka sisällä on CSS-merkkijono. Koska olemme koukussa wp_head-palveluun, muokkaustyökalu näyttää esikatselun muuttuneella CSS:llä aina, kun muutos tehdään.
4 Tallenna käännetty CSS teeman tyylisivulle
CSS:n kääntämisen koodi on hyvin samanlainen kuin edellinen vaihe. Ainoa ero on, että kirjoitamme nyt CSS:n tiedostoon sen sijaan, että tulostamme sen. Sinun pitäisi todella harkita tämän laittamista funktioon, jotta et toista koodia, mutta selvyyden vuoksi olen päättänyt erottaa nämä kaksi toisistaan.
Otamme kiinni, [customize_save_after](https://developer.wordpress.org/reference/hooks/customize_save_after/)mitkä triggerit napsauttavat Tallenna WordPress Customizerissa. Tässä vaiheessa noudetaan lähde-SCSS, määritellään muuttujien arvot ja käännetään se CSS:ksi. CSS-merkkijonolla käytämme yksinkertaista PHP-funktiota sen kirjoittamiseen teeman CSS-tiedostoon.
Ainoa ero aiempaan on rivillä #8, jolla määritämme kohdetiedoston, johon kirjoitetaan, ja rivillä #19, jolla kirjoitamme tiedostoon.
Johtopäätös
Meillä on nyt Customizer-asetukset, jotka ohjaavat muuttujia teeman SCSS-tiedostossa ja korvaavat teeman päätyylitaulukon näiden muuttujien avulla. Ei ole rajoituksia sille, kuinka monta tai millaisia asetuksia haluat antaa teeman käyttäjien muokata! Käytä aikaa oikean järjestelmän luomiseen, jotta voit käsitellä eri muuttujatyyppien muotoilua (esim. etuliitteet tai jälkiliitteet) ja muokata mukauttaja-asetukset oikein. Teeman käyttäjät arvostavat joustavuutta ja kuinka helppoa on mukauttaa teemasi!
Voit myös selvittää erilaisia tapoja käsitellä lopullisen CSS:n tiedostojen kirjoittamista. Jos et halua korvata päätyylitaulukkoa, haluat ehkä tulostaa sen toiseen tiedostoon. Voit myös harkita if-else-ehtojen käyttöä SCSS:ssä.
Tämä opetusohjelma on kirjoitettu antamaan sinulle ponnahduslauta WordPress-teeman mukauttamiseen Customizerin avulla. Kerro minulle, oliko siitä sinulle hyötyä – tai jos haluat kehittyneemmän opetusohjelman, joka varmistaa, että teeman tyylitaulukkoa ei kirjoiteta päälle!