Kuinka mukauttaa WordPress-verkkosivustosi CSS: llä: 3 helppoa menetelmää

WordPress on kehittynyt vuosien varrella, ja nykyään se on melko joustava ja helposti muokattava alusta Gutenbergin lohkoeditorin kautta. Silti tulee aikoja, jolloin tarvitset hieman enemmän kattavuutta kuin Gutenberg-editori tarjoaa.

Tässä mukautettu CSS on hyödyllinen. CSS-tyylillä voit muokata WordPress-verkkosivustosi värejä, välilyöntejä, fontteja, asetteluja ja periaatteessa kaikkia muita visuaalisia elementtejä, jolloin voit tehdä siitä juuri sellaisen näköisen kuin haluat.

Tässä artikkelissa opastamme sinut WordPress-verkkosivustosi mukauttamiseen CSS: n avulla.

Miksi muokata verkkosivustoasi CSS: llä?

Mukautetun CSS: n lisääminen on vain yksi menetelmistä, joilla voit hienosäätää sivustosi ulkoasua. Muita menetelmiä ovat a hyvin varusteltu premium WordPress-teematai sivunrakennusohjelman asentaminen.

Vaikka nämä kaksi menetelmää ovat hieman helpompia käyttää aloittelijoille eivätkä vaadi koodaustietoa, mukautetun CSS: n käyttö on edullisempaa kahdella päätavalla:

Nolla kustannuksia

Premium-teemat ja WordPress-sivujen rakentajat voivat olla käteviä, mutta ne maksavat dollareita ja senttejä. Toisaalta voit saavuttaa samat vaikutukset ilman ylimääräisiä kuluja, kun tiedät kuinka kirjoittaa mukautettua CSS: ää.

Minimaalinen turvotus

Sivujen rakentajat ja hyvin varustetut teemat on suunniteltu antamaan käyttäjille enemmän joustavuutta ja laaja valikoima vaihtoehtoja verkkosivustojen mukauttamiseen. Tämän vuoksi niillä on taipumus lisätä verkkosivustojen turvotusta, mikä saattaa hidastaa niiden toimintaa.

Toisaalta, kun kirjoitat mukautettua CSS: ää, lisäät vain tarvittavat ominaisuudet, mikä yleensä johtaa kevyempiin verkkosivustoihin ja nopeampiin latausnopeuksiin.

3 helppoa tapaa mukauttaa WordPress-verkkosivustosi CSS: n avulla

Toivottavasti tiedät jo kuinka kirjoittaa CSS. Kun olet perehtynyt perusasiaan, voit lisätä mukautetun CSS: n WordPress-verkkosivustollesi jollakin seuraavista tavoista:

Tapa 1: Käytä WordPress-muokkaustyökalua

WordPress 4.7:llä tai millä tahansa sen jälkeisellä versiolla voit lisätä mukautetun CSS: n suoraan järjestelmänvalvojalta. Tämä on yksinkertaisin tapa, ja koska saatavilla on live-esikatselu, voit nähdä tekemäsi muutokset reaaliajassa.

Se on myös suosituin, koska kaikki tekemäsi muutokset tallennetaan itse WordPressiin. Tämä tarkoittaa, että vaikka muutat tai päivität teemaasi, et menetä mukautettua CSS: ääsi.

Tässä on seuraavat vaiheet:

Vaihe 1: Navigoida johonkin Ulkoasu > Mukauta.

Tämä avaa WordPress-teeman mukauttajan, joka näyttää sivustosi live-esikatselun oikealla sekä joitakin mukautusvaihtoehtoja vasemmalla. Vieritä alas vasemman paneelin alaosaan ja löydät Ylimääräinen CSS -välilehti.

Vaihe 2: Klikkaa Ylimääräinen CSS Tab.

Tämä avaa pienen laatikon vasempaan ruutuun, johon voit lisätä mukautetun CSS: n. Voit kirjoittaa niin monta riviä CSS-koodia kuin haluat. Hienoa tässä editorissa on, että se vahvistaa koodisi ja varoittaa, jos siinä on virheitä.

Vaihe 3: Julkaise muutokset.

Kaikki lisäämäsi kelvolliset CSS-säännöt näkyvät live-esikatselualueella oikealla. Ota muutokset käyttöön sivustossasi napsauttamalla Julkaista -painiketta vasemman ruudun yläosassa, kun olet tyytyväinen. Jos et halua muutosten tulevan voimaan heti, voit myös ajoittaa julkaisun myöhempään ajankohtaan tai tallentaa työsi luonnoksena.

On tärkeää huomata, että kaikki mukauttajalla tekemäsi muutokset liittyvät nykyiseen teemaasi. Jos vaihdat joskus toiseen teemaan, muutokset menetetään, ellet kopioi mukautettua CSS: ää ja lisää sitä uuteen teemaan. On hyvä käytäntö tallentaa kaikki teemaan lisäämäsi mukautetut CSS-tiedostot muistilehtiöön. Tällä tavalla voit yksinkertaisesti kopioida koodin ja liittää sen "LisäCSS" -osioon eri teemaa varten.

Jos tämä kuulostaa liian suurelta työltä ja haluat mieluummin ratkaisun, jonka avulla voit soveltaa mukautettua CSS-syötettä mihin tahansa käyttämääsi WordPress-teemaan, seuraava menetelmä on sinua varten.

Menetelmä 2. Käytä laajennusta

Mukautetut CSS-laajennukset tallentavat mukautetun CSS: n erilleen teemastasi, jolloin muutokset voidaan ottaa käyttöön käyttämästäsi teemasta riippumatta. Näissä laajennuksissa on myös lisäominaisuuksia, kuten automaattinen täydennys, jotka voivat helpottaa CSS: n lisäämistä.

Ainoa haittapuoli on, että ne ovat kolmannen osapuolen ohjelmistoja, mikä tarkoittaa, että ne voivat mahdollisesti hidastaa sivustoasi. Useimmat näistä laajennuksista ovat kuitenkin kevyitä, joten niillä ei yleensä ole juurikaan vaikutusta sivustosi suorituskykyyn. Tässä on joitain parhaista mukautetuista CSS-laajennuksista, joita voit käyttää:

• Yksinkertainen mukautettu CSS

Yksinkertainen mukautettu CSS on yksi suosituimmista mukautetuista CSS-laajennuksista. Se on kevyt, helppokäyttöinen ja tarjoaa upeita ominaisuuksia. Sen määrittäminen on helppoa. Sinun tarvitsee vain asentaa ja aktivoida laajennus. Siirry sitten kohtaan Ulkomuoto osio kojelautasi vasemmassa ruudussa.

Näet uuden vaihtoehdon nimeltä Mukautettu CSS. Napsauttamalla sitä avautuu editori, johon voit lisätä mukautetun CSS: n. Klikkaa Päivitä mukautettu CSS -painiketta tallentaaksesi muutokset. Voit tarkastella muutoksia päivittämällä verkkosivustosi.

• Yksinkertainen mukautettu CSS ja JS

Jos haluat vielä enemmän ominaisuuksia, Yksinkertainen mukautettu CSS- ja JS-laajennus on loistava vaihtoehto. CSS: n lisäämisen lisäksi voit lisätä JavaScript-merkintöjä.

• CSS-sankari

Jos et halua kirjoittaa yhtä koodiriviä, CSS Hero -laajennus on täydellinen sinulle. Tämä laajennus tarjoaa visuaalisen CSS-editorin, jossa on avattavat valikot ja syöttökentät, joiden avulla voit muokata melkein mitä tahansa sivustosi CSS-tyyliä ilman, että sinun tarvitsee kirjoittaa mitään koodia.

Menetelmä 3. Muokkaa raakakoodia

Yllä kuvattujen kahden menetelmän avulla voit lisätä mukautetun CSS: n sivustollesi ilman, että sinun tarvitsee koskea mihinkään teematiedostoosi. Joissakin tapauksissa saatat kuitenkin haluta muokata teemasi CSS: ää tai lisätä suoraan mukautetun CSS: n teemasi koodiin.

Tätä varten sinun on käytettävä verkkosivustosi tyylitaulukkoa. Helppo tapa käyttää tätä tyylitaulukkoa on Teeman editori WordPress-hallintapaneelissasi.

Ennen kuin siirrymme pidemmälle, sinun on kuitenkin otettava käyttöön muutamia suojatoimia. Ensimmäinen, varmuuskopioi verkkosivustosi. Teematiedostoja muokkaaessasi on helppo tehdä virheitä, jotka voivat kaataa sivustosi.

Varmuuskopio varmistaa, että sinulla on toimiva verkkosivusto, johon voit palata. Seuraava, luoda lapsiteeman. Jos muokkaat suoraan yläteemaasi, muutokset menetetään aina, kun teema päivitetään.

Kun nämä suojatoimet ovat käytössä, kirjaudu sisään WordPress-taustajärjestelmääsi. Mene Ulkoasu > Teemaeditori. Kun napsautat teemaeditorivaihtoehtoa, näet ponnahdusikkunan, joka varoittaa sinua tekemästä suoria muutoksia teematiedostoihisi. Jos noudatat yllä olevia ohjeita, olet valmis.

Klikkaus Ymmärrän edetä.

Napsautuksen jälkeen sinun pitäisi nähdä sivustosi tyylitaulukko oletuksena. Jos ei, katso vain oikeanpuoleista ruutua ja napsauta tyyli.css alla Tyylitaulukko vaihtoehto.

Täältä voit tehdä suoria muutoksia teematiedostoihisi. Älä vain unohda klikata Tallenna ja päivitä kun olet valmis.

Hallitse sivustosi ulkoasua mukautetulla CSS: llä

Mukautetun CSS: n kirjoittamisen oppiminen WordPressissä voi viedä jonkin aikaa aloittelijoilta, mutta se antaa sinulle todellisen hallinnan verkkosivustosi ulkoasuun. Ja se on nollakustannuksia ja vähäinen vaikutus sivustosi suorituskykyyn.

Jos et kuitenkaan halua tehdä manuaalista suunnittelua, on muita tapoja saada työ tehtyä, kuten käyttämällä yhtä WordPressin parhaista sivunrakennusohjelmista.

5 WordPress-sivunrakennusohjelmaa, jotka voivat auttaa sinua luomaan upeita verkkosivustoja

Haluatko tehdä WordPress-sivustostasi upean, mutta sinulla ei ole varaa kehittäjään? Kokeile sen sijaan näitä WordPress-sivujen rakentajia.

Lue Seuraava

Kirjailijasta