joko jos luot oman WordPress-teeman, lapsi-teeman sen vanhemmalta tai muokkaat teemaa, kohtaat tarpeen lisätä oman CSS mukautetun tyylisivun. Todennäköisesti haluat myös ohittaa joitakin tyylejä oletusteematyylisivuilta.
on useita tapoja lisätä omia tyylejä ja/tai ohittaa oletustyylejä. Mikä on paras tapa tehdä se? Kehittäjät sopivat, että se on luomalla omia mukautettuja CSS-tiedostoja ja upottaa ne WordPress teema työskentelet.
tapoja lisätä muokattua CSS-koodia WordPress-teemoihin
emme puhu poistetuista tavoista lisätä CSS-tyylejä HTML-elementteihin tai lisätä <tyyliä> lohkoja. Nykyään Kehittäjät luopuvat tästä menetelmästä. He eivät myöskään ole SEO-ystävällisiä, mikä on tärkeä asia välittää nykyään.
emme edes ehdota muokkaamaan teeman alkuperäistä CSS-tyylisivua (yleensä tyyliä.css) eli mukautetun koodin lisääminen siihen. Tämä tiedosto on usein hyvin suuri ja vaikea hallita. Mikä tahansa pieni kirjoitusvirhe tai syntaksivirhe siinä voi aiheuttaa koko sivuston kaatumisen.
tässä artikkelissa näytämme, miten voit luoda mukautetun CSS-tiedoston ja upottaa sen osaksi WordPress teema.
on olemassa useita tapoja lisätä mukautetun CSS-koodin WordPress-teemoihin. Mikä on paras käytäntö?
miten lisätä mukautettuja tyylitiedostoja WordPress teemoja käyttäen wp_register_style() ja wp_enqueue_style()
ensimmäinen askel upottaa mukautettuja CSS tiedostoja WordPress on lisäämällä tiedostoja teema. Joko käyttämällä FTP-asiakasohjelmaa tai cpanels-tiedostonhallintaasi etsi teemakansiosi ja avaa se. Nyt voit joko luoda uuden tiedoston ja nimen esimerkiksi custom.css tai ladata CSS-tiedoston tietokoneeltasi. Jos sinun täytyy lisätä enemmän kuin yksi CSS tiedosto WP teema toista tämä vaihe.
jos olet suorittanut tämän vaiheen oikein, sinun pitäisi nähdä mukautetun CSS-tiedoston tai tiedostoja WordPress asennus teema editor.
mukautettujen CSS-tiedostojen linkittäminen sivuston pään osio
nyt kun olet lisännyt muokatut CSS-tiedostot WP-teemakansioosi, on aika linkittää tiedostot sivustosi <pään> osioon. Näin sivusto voi soveltaa omia tyylejäsi sen elementteihin.
voit yksinkertaisesti lisätä <linkin> elementin sivustosi <head> osioon, mieluiten juuri ennen sulkemista </head> tag. Näin mukautetut CSS-tyylit latautuvat Viimeksi ja ohittavat oletustyylit. Sivustosi <head> – osio sijaitsee yleensä teemakansiosi otsikossa.php tiedosto ja pääsee kautta WordPress teema editor.
tässä on esimerkki – elementistä, kun sivustosi sijaitsee palvelimesi pääkansiossa olevassa kansiossa ”test-site”, teemakansiosi on nimeltään” test-theme ”ja CSS-tiedostosi on nimeltään” custom.css”:
<link rel="stylesheet" href="/test-site/wp-content/themes/test-theme/custom.css" type="text/css" media="all">tämä yksinkertainen ratkaisu toimii hyvin, mutta se ei ole paras käytäntö upottaa CSS-tiedostoja WordPress sivustoja.
CSS-tiedoston upottaminen WordPress käyttäen wp_register_style() ja wp_enqueue_style() toiminnot
suositeltava käytäntö upottaa mukautettuja CSS-tiedostoja WordPress-sivustolle on rekisteröimällä tyylisivusi WP-teeman funktioissa.php-tiedosto, joka käyttää funktioita wp_register_style() ja wp_enqueue_style (). Näin CSS-tiedostot latautuvat sillä hetkellä, kun wp_head toiminta käynnistyy. Tyylisivusi sijoitetaan heti teeman oletustyylisivun jälkeen. ja voit ohittaa oletustyylejä.
ensimmäiseksi pitää paikantaa teeman toiminnot.php-tiedosto. Se sijaitsee sisällä WordPress teema editor. Voit myös tehdä sen käyttämällä FTP tai cPanels Tiedostonhallinta. Jos työskentelet lapsi-teema, Muokkaa lapsi-teemat toiminnot tiedosto, ei vanhempi-teema yksi. Näin vältät oman mukautetun koodin menettämisen, kun päivität vanhemman teeman. Selaa alas pohjaan toimintoja.php ja lisää seuraava koodinpätkä:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_enqueue_style( 'custom' );}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );Mukauta katkelma: yllä olevassa esimerkissä, nimesimme Rekisteröinti toiminto ”additional_stylesheets”, ja rekisteröity stylesheet CSS-tiedoston nimeltä ” custom.css”, aiemmin ladattu teema kansioon. Voit nimetä funktion haluamallasi tavalla ja korvata funktion nimen snipetin ylä-ja alarivillä. Jos tyylitiedoston nimi on erilainen kuin custom.CSS korvaa sana custom snipet omalla tiedostonimellä.
jos olet tehnyt kaiken oikein, voit alkaa kirjoittaa omaa CSS-koodia tyylisivullesi. Huomaat, että tyylisi vaikuttavat sivustoon, kun tallennat muutoksia ja lataat sivun uudelleen. Älä unohda puhdistaa selaimen välimuisti, kun virkistät sivua.
useiden kustomoitujen tyylisivujen CSS-tiedostojen liittäminen funktioihin.php käyttämällä wp_register_style () ja wp_enqueue_style ()
ennen kuin lisäät useita CSS tiedostoja WP teema, ota huomioon, että se aiheuttaa enemmän palvelimen pyyntöjä, kun sivusto Ladataan, mikä vaikuttaa sivuston latausnopeuteen. Yritä käyttää mahdollisimman vähemmän tyylisivuja.
nyt sanotaan, että työpöytätyyleille on oma tyylitiedosto nimeltä custom.css ja toinen tyylisivu tiedosto nimeltään responsive.CSS mobiililaitteille. Upotetaan molemmat tyylisivut toimintoihisi.php-tiedosto on yksinkertainen ja vaatii hieman muutoksia yhden tiedoston pätkä yllä:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_register_style( 'responsive', get_template_directory_uri().'/responsive.css' );// register another file herewp_enqueue_style( 'custom' );wp_enqueue_style( 'responsive' );// enqueue another file here}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );sama kuin muokattaessa yksittäistä tiedostonimeä, muuta tiedostonimet tilanteen mukaan.
lisätietoja wp_register_style () – ja wp_enqueue_style () – funktioista
saadaksesi lisätietoja wp_register_style () – ja wp_enqueue_style () – funktioiden käytöstä tyylisivujen rekisteröimiseksi käy WP Codex-sivulla.