Miten muokata WordPress teema CSS
kun haluat oppia muokata WordPress teema CSS, yksi ensimmäisistä asioista sinun täytyy tietää, miten muokata tiedostoja sisällä teema itse.
teematiedostojen muokkausprosessi on käytännössä sama riippumatta siitä, haluatko muokata CSS: ää tai HTML: ää, ja aiemmissa tutoriaaleissa tässä sarjassa olemme jo käsitelleet tätä prosessia HTML: n muokkaamista varten.
jotta välttyisit pinnaamasta samaan maahan, tutustu ”miten muokata HTML WordPress teema” ja ”miten asentaa WordPress Paikallisesti XAMPP” oppia:
- tiedostojen muokkaaminen teemaeditorilla
- Tiedostojen lataaminen ja lataaminen FTP-tai etäyhteyden kautta
- miksi sinun pitäisi harkita muutosten tekemistä lapsiteeman sisällä
- editointi offline-tilassa xamppin kautta
teematiedostojen muokkausmenetelmillä, jotka on jo katettu, tässä opetusohjelmassa keskitymme css: n muokkaamiseen WordPress-palvelussa oppimalla näistä aiheista:
- miten voit lisätä mukautetun CSS: n teeman muokkaajan kautta
- miten tunnistaa tyylisivut, joita teema käyttää
- miten tunnistaa, mitä CSS: ää on muutettava, ja missä, jotta voidaan muokata teeman tiettyä osaa
huomaa: tässä artikkelissa oletetaan, että sinulla on perustiedot CSS: stä, mutta ei välttämättä siitä, miten muokata CSS WordPress.
Premium WordPress teemoja ja Plugins
ennen kuin aloitamme, älä unohda voit tutustua tuhansia WordPress teemoja ThemeForest ja WordPress plugins CodeCanyon. Ostaa näitä laadukkaita WordPress teemoja ja plugins ja parantaa sivuston kokemus sinulle ja kävijöitä.
miten muokata CSS WordPress teema Customizer
WordPress on oma alue, johon voit lisätä oman mukautetun CSS-koodin. Tämä koodi ladataan oikeaan aikaan sen varmistamiseksi, että se ohittaa teeman oletustyylauksen, eikä tämän lähestymistavan käyttäminen tee suoria muutoksia teematiedostoihin.
WordPress admin-paneelin vasemmassa sivupalkissa siirry ulkoasuun > muokkaa:
tämä vie sinut teeman muokkausalueelle, jossa voit klikata valikon kohtaa Lisää CSS:
a large field will appear, into which you can add any custom CSS you like:
Tallenna muutokset klikkaamalla sinistä Julkaisupainiketta vasemman sivupalkin yläreunassa, kun olet lisännyt mukautetun koodin.
kuinka tunnistat teeman tyylisivut
jos et halua käyttää teeman muokkaajan CSS-aluetta, vaan haluat muokata teeman CSS: ää suoraan, tarvitset tavan selvittää, mitä tiedostoja teema todella käyttää muotoiluun.
useimmissa tapauksissa teemat käyttävät WordPressin standardirakennetta ja niissä on tiedosto nimeltä ” style.CSS” teeman juurihakemistossa. Itse asiassa, tämä on olennainen teema tiedosto, joten löydät sen aina tahansa teema.
kuitenkin kun avaat sen muokkausta varten, saatat huomata, että se on tyhjä koodista,ja Kehittäjä lataa tyylittelyä muualta mistä teemasta. Tai, saatat jopa löytää ne ladataan useita tyylisivut tiedostoja.
on kaksi tapaa tarkistaa, mitä tyylisivuja teema käyttää.
Tarkastuspääkoodi
ensimmäinen tapa on tarkastaa aihealueen <head> koodi. Voit tehdä tämän napsauttamalla hiiren oikealla painikkeella missä tahansa sivulla ja valitsemalla View Page Source, sitten paikallistamalla <head>...</head> tagit.
näiden tagien välistä etsi <link> elementtejä, joilla on myös rel='stylesheet'. Sitten katsoa, mitkä niistä tulevat teeman hakemistoon. Tyylisivujen URL-osoitteet kertovat, mistä teemarakenteesta ne löytyvät.
huomaa, että jos käytät liitännäistä, joka yhdistää ja minifioi kaikki sivustosi tyylisivut yhdeksi tiedostoksi, tämä tekniikka ei toimi, koska näet vain kyseisen yksittäisen tiedoston URL-osoitteen. Sen sijaan, käytä tekniikkaa kaksi, tarkistaa toiminnot tiedosto.
Funktiotiedoston tarkistaminen
aina, kun Teema käyttää tyylisivua, sen täytyy kertoa WordPress, mitä tiedostoa se haluaa käyttää, funktion wp_enqueue_style()kautta. Näin voimme nähdä tarkalleen, mitkä tyylisivut teema latautuu löytämällä sen käyttö tämän toiminnon.
jokaisella teemalla on tiedosto nimeltä ” funktiot.php ” sijaitsee sen juurihakemistossa. Funktion wp_enqueue_style() hyödyntäminen on tyypillisesti tässä tiedostossa, joten avaa se ja ala etsiä funktion nimeä.
kun etsit funktion wp_enqueue_style() esiintymiä, etsi sulkeiden välistä toinen parametri eli ensimmäisen pilkun jälkeinen tekstinpala. Tämä teksti näyttää tyylisivun sijainnin. Esimerkiksi:
wp_enqueue_style('main-style', get_template_directory_uri() . '/css/mainstyle.css');
yllä olevassa koodissa toinen parametri on:
get_template_directory_uri() . '/css/mainstyle.css')
tämä kertoo, että tyylisivu on teema-alihakemistossa nimeltä ”css”, ja että sen tiedostonimi on ” mainstyle.css”.
miten tunnistaa, mitä CSS: ää pitää muuttaa
kun osaa lisätä tai muokata teeman CSS: ää, seuraavaksi pitää oppia, miten selvittää, mitä koodia oikeasti pitää muuttaa.
paras tapa tehdä tämä on käyttää kehittäjätyökaluja selaimessasi, mieluiten joko Chromessa tai Firefoxissa niiden työkalujen laadun vuoksi.
sanotaan esimerkiksi, että haluat muuttaa post-otsikoiden kirjasinkokoa. Napsauta hiiren kakkospainikkeella yhtä post otsikot ja valitse tarkastaa vaihtoehto:
tämä avaa kehittäjän Työkalut-paneelin. Katso sen tyylit-välilehdeltä font-size ominaisuus.
jos et näe sellaista, selain saattaa näyttää vanhemman tai lapsen elementin, joten elementit-välilehdessä yritä napsauttaa lähellä olevia elementtejä, kunnes löydät elementin, joka sekä korostaa tarkasti post-otsikkotekstin muotoa että jolla on font-size ominaisuus:
kokeile nyt Tyyli-välilehdessä font-size ominaisuuden arvon muuttamista. Jos näet tekstin muuttaa kokoa selainikkunassa tiedät olet löytänyt oikean CSS.
jos haluat tietää, missä tyylisivussa tämä CSS on, katso sen paikan oikeasta yläkulmasta, jossa juuri muokkasit font-size arvoa. Sinun pitäisi nähdä tiedostonimi, sitten kaksoispiste, sitten numero.
tiedostonimi kertoo, missä tyylisivussa koodi on, ja kaksoispisteen jälkeinen numero kertoo, millä rivillä kyseisen koodin löytää. Esimerkiksi yllä olevassa kuvassa näkyy koodi ” tyylistä.CSS ” – tiedosto rivillä 4054. Jos olet suoraan muokkaamassa teeman tyylisivua, voit nyt avata sen, mennä kyseisen rivinumeron luo ja vaihtaa CSS: ää.
jos työskentelet teeman muokkaajan CSS-lisäkentässä tai lapsiteeman sisällä, sinun on myös kohdistettava sama valitsin kuin alkuperäinen CSS, joten voit ohittaa sen omalla tyylilläsi.
Etsi selainkehittäjän työkaluista valitsin, joka on juuri muuttamasi ominaisuuden font-size yläpuolella. Se on vasemmalla tyylisivutiedosto ja rivinumero erittely juuri katselimme.
Kopioi koko valitsin ja liitä se mukautettuun koodiin ja käytä sitä kohdentaaksesi muokatun font-size arvon oikein.
Tarkista aina leivotut Teemavaihtoehdot
ennen kuin näet vaivaa muokata CSS: ää, Tarkista aina teeman Muokkaajasta vaihtoehdot, jotka kehittäjä on saattanut jo leipoa teemaan.
teemoissa on usein varsin kattavat muokkausmahdollisuudet, jotka eivät vaadi mukautettua koodia. Joten ennen minkään css: n muokkaamista voit säästää paljon aikaa katsomalla, onko jo olemassa painonappi, jolla voit tehdä tarvitsemasi muutoksen.
miten muokata WordPress teema askel askeleelta
nyt kun olemme puhuneet miten muokata WordPress teema CSS ja HTML, saatat tuntea hieman epävarma mistä aloittaa. Joten nyt keitetään asiat alas perus listan vaiheet seurata:
- Tarkista teeman Muokkaajasta, onko käytettävissä jo vaihtoehto, joka voi helpottaa haluamaasi muutosta
- jos ei ole, ja sinun on lisättävä yksinkertaista mukautettua CSS: ää, käytä css: n lisäkenttää teeman muokkaajassa
- jos haluat tehdä laajempia muokkauksia HTML: ään tai CSS: ään, harkitse niiden tekemistä lapsiteemaan
- tehdäksesi pieniä muutoksia suoraan teema, Käytä WordPress rakennettu teema editor
- enemmän syvällisiä muutoksia suoraan teema, Käytä joko FTP, etäyhteyden, tai työskennellä täysin offline kanssa XAMPP
- kun olet valinnut muokkaustavan, tunnista teeman tyylisivut tarkastamalla sivustosi
<head>koodi tai katsomalla teeman ”toiminnot.php ”wp_enqueue_style()funktion - käyttöön Etsi Muokattavat css: n tietyt rivit ja niihin liittyvät valitsimet käyttämällä Chromen tai Firefoxin kehittäjätyökalujen Tarkastustoimintoa
kun kaivelet kaikkea yllä olevaa ja tutustut, alat nähdä, kuinka muokattavissa WordPress on.
ennen kuin huomaatkaan, teet omia täysin omaperäisiä lapsiteemojasi ja luot täysin omia kuvioitasi.
ja sattuu niin, että oppiminen ”Miten tehdä lapsi teema WordPress” on seuraava opetusohjelma Tulossa tässä sarjassa. Pysykää kuulolla!