Kuinka mukauttaa WordPress-teemaa CSS: llä

Tiesitkö, että voit kokeilla WordPress-sivustoasi ja muuttaa sen ulkoasua CSS:n avulla? Voit lisätä pieniä esteettisiä muutoksia, lisätä värejä, muuttaa asettelua tai jopa muuttaa WordPress-teemaa kokonaan.

Kun hallitset verkkosivustosi ulkoasua, voit luoda sen haluamallasi tavalla.

Voit lisätä persoonallisuuttasi brändisi verkkosivustoon, mikä tekee siitä erilaisen kuin muut ihmiset tai yritykset, jotka käyttävät samaa WordPress-teemaa!

Tässä viestissä katsotaan tarkemmin, kuinka voit mukauttaa WordPress-teemaa CSS:n avulla.

Mikä on CSS?

CSS tai Cascading Style Sheets on verkkokieli, jota käytetään verkkosivujen esittämiseen. CSS:n avulla voit määrittää asettelun, värit, fontin, taustan ja muut elementit, jotka voivat tehdä verkkosivuistamme esittelykelpoisia käyttäjille. Tästä syystä kutsumme CSS-käyttöliittymän asiakaspuolen kieleksi, koska se suoritetaan käyttäjäpäässä. CSS:ää käytetään yhdessä HTML:n ja Javascriptin kanssa tekemään sivustoista responsiivisia. Jos ajattelet, että sinun on oltava hardcore-ohjelmoija oppiaksesi ja toteuttaaksesi CSS:n, se ei ole totta. Voit oppia CSS:n helposti ja muuttaa sen avulla sivustosi esitystapaa, vaikka sinulla ei olisikaan ohjelmointitaitoja aiemmin.

Mikä on WordPress?

WordPress on suosituin ja helpoin tapa aloittaa verkkosivustosi tai blogisi. Teknisesti puhuen WordPress on avoimen lähdekoodin sisällönhallintajärjestelmä. Se käsittelee kaikki verkkosivuston tärkeät näkökohdat, kuten sisällön, ulkoasun, turvallisuuden jne. Voit luoda minkä tahansa verkkosivuston WordPressillä. Esimerkiksi yrityssivustot, verkkokauppasivustot, portfoliot, ansioluettelot, sosiaaliset verkostot jne. WordPress on ilmainen, ja sen mukana tulee erilaisia ​​teemoja ja laajennuksia. Voit muuttaa WordPress-sivustonsa ulkoasua CSS:n avulla.

CSS ja WordPress

Aloitaksesi WordPress-teeman muokkaaminen sinun on ensin ymmärrettävä muutama seikka – mallitiedostot, mallitunnisteet ja CSS-tyylitaulukko. Mallitiedostot hallitsevat WordPress-teemaasi. Saatat nähdä erilaisia ​​tiedostoja, kuten header.php, archive.php. Nämä ovat mallitiedostoja, jotka ohjaavat WordPress-teemaasi. Mallitunnisteita käytetään näiden tiedostojen ja muiden tietokantaelementtien hallintaan. CSS-tyylitaulukko tai style.css on tiedosto, jota sinun on etsittävä muuttaaksesi verkkosivustosi ulkoasua. Muokkaat koodia style.css-tiedostossa mukauttaaksesi WordPress-teemaasi.

Kuinka mukauttaa WordPress-teemaa CSS: llä

Ensinnäkin sinun on ymmärrettävä, että jos haluat mukauttaa WordPress-teemaasi CSS:llä, sinun on joko lisättävä siihen tietty koodi tai sinun on muokattava jo kirjoitettua koodia. Suosittelen, että opit ainakin joitakin CSS:n, HTML:n, JavaScriptin ja PHP:n perusteita ennen kuin alat muokata teemaasi.

Toinen huomioitava asia on, että jos aiot tehdä muutoksia WordPress-teeman tyylitaulukkoon, nämä muutokset poistetaan, kun teemasi päivitetään. Joten sinun täytyy oppia lapsiteemoja ja käyttää alatason teemaa tehdäksesi muutoksia style.css-, functions.php- tai muiden teemamallitiedostojen avulla. Olen puhunut lapsiaiheista myöhemmin tässä artikkelissa.

On kaksi tapaa muokata tai lisätä CSS:ää teemaasi

1 Kojelaudan käyttäminen

Tämän avulla voit muokata WordPress-teemaa suoraan käyttämällä WordPress-hallintapaneelin CSS-tyylitaulukkoa. Mutta sinun on huomattava, että tässä tehtyjä suuria muutoksia voi olla vaikea palauttaa. Suosittelen siis ottamaan varmuuskopion WordPress-teeman alkuperäisestä CSS:stä ja tekemään sitten muutokset. Suosittelen myös luomaan sivustollesi lapsiteeman. Jos et tiedä mitä se on, lue vain seuraava osa ja palaa takaisin.

Luo lapsiteema ja siirry sitten kyseisessä lapsiteemassa Ulkonäkö ja sitten Teemaeditori. Ponnahdusikkuna tulee näkyviin, kun käytät lapsiteemaa, mutta siitä ei ole syytä huoleen. Napsauta vain "Ymmärrän" ja siirryt tyylitaulukkoon. Jos haluat tehdä muutoksia mallitiedostoihin, kuten header.php, functions.php jne., sinun on ensin opittava PHP ja sitten kokeiltava koodaustaitojasi. Muussa tapauksessa pysy vain tyylitaulukon muokkaamisessa.

Mikä on lapsiteema WordPressissä?

Lapsiteema on kopio alkuperäisestä teemasta (tunnetaan myös yläteemana). Lapsiteema sisältää yläteeman toiminnallisuuden ja tyylin. On suositeltavaa käyttää alatason teemaa, kun haluat säilyttää alkuperäisen koodin ennallaan samalla, kun teet muutoksia sivustosi suunnitteluun. Voit siis luoda uusia, parempia malleja lapsiteemalla ja säilyttää pääteeman toiminnallisuuden. Muutamia lapsiteeman käytön etuja ovat:

• Sinun ei tarvitse huolehtia alkuperäisen koodin sekoittamisesta, koska pääteema on turvallinen ja muokkaamaton.
• Koodauksen avulla voit laajentaa pääteeman toimintoja, kokeilla sitä ja luoda jotain uutta.
• Sinun ei tarvitse luoda teemaa tyhjästä. Jos unohdat vahingossa jonkin tietyn toiminnon tai ominaisuuden, yläteeman koodi on sinua varten.

Sinun on kuitenkin oltava erittäin varovainen käyttäessäsi lapsiteemoja. Yksi syy on se, että se vaatisi koodaustaitoja ja kokemusta. Jos olet vasta aloittamassa CSS:n, HTML:n, JavaScriptin ja PHP:n käyttöä, anna itsellesi aikaa tulla ensin asiantuntijaksi. Muuten oppimiskäyrä voi olla melko korkea.

Toinen asia, joka on otettava huomioon käytettäessä lapsiteemaa, on se, että sinun on ensin tarkistettava päivitykset. Jos vanhemman teemasi on päivitetty toiminnolla, jota et halua, et saa päivittää WordPress-teemaa, koska se heijastuisi lapsesi teemaan. Joskus, jos jokin pääteeman ominaisuuksista jätetään pois ja päivität sen, lapsiteemaan saattaa tulla vaikutus. Näin lisäät koodaustyötäsi.

2 FTP-palvelimen käyttäminen

Saattaa olla mahdollista, että et pääse suoraan teemasi hallintapaneeliin. Joskus laajennusten käyttö poistaa tämän toiminnon käytöstä. Joten sinun on käytettävä FTP:tä tai tiedostonsiirtoprotokollaa päästäksesi etäkäyttöön sivustosi tiedostoja. Aloita lataamalla mikä tahansa FTP-asiakassovellus. Ota yhteyttä isäntään ja pyydä FTP-tunnistetietojasi.

Kun annat kirjautumistiedot, sinulla on pääsy style.css-tiedostoon. Tee nyt tiedostoon muutoksia, tallenna muutokset ja lähetä ne takaisin palvelimelle. Tämä voi olla melko hektinen tapa lisätä CSS sivustollesi, joten käytä sitä vain, jos sinulla ei ole pääsyä kojelautaan.

Helppoja tapoja lisätä CSS WordPress-sivustollesi

Voit lisätä CSS:n WordPress-sivustollesi kahdella helpolla menetelmällä. Niihin kuuluu WordPress-muokkausohjelman tai laajennuksen käyttö. CSS-koodin lisääminen näillä menetelmillä on paljon helpompaa. CSS:n lisääminen WordPress Customiserilla tai Pluginilla ei myöskään katoaisi koodia teeman päivityksen jälkeen. Suosittelen kuitenkin, että pidät varmuuskopion verkkosivustosi alkuperäisestä koodista siltä varalta, että jotain tapahtuu vahingossa. Katsokaamme nyt kaksi helppoa tapaa lisätä CSS WordPress-sivustollesi.

1 Muokkaaminen WordPress Customiserin kautta

Kirjaudu vain WordPress-taustajärjestelmääsi. Napsauta Ulkoasu ja napsauta sitten Mukauta. Se avaa mukautusnäytön. Tämä näyttö näyttää esikatselun verkkosivustostasi sillä hetkellä, ja näytön vasemmassa reunassa on vaihtoehtoja elementtien, kuten värien, valikoiden tai muiden widgetien mukauttamiseen.

Näytön vasemmalla puolella näet vaihtoehdon nimeltä Lisä-CSS. Tässä sinun täytyy ripotella taikuuttasi. Kun napsautat Lisä-CSS:ää, avautuu uusi sivu, jossa on verkkosivustosi koodi. Nyt voit tehdä muutoksia koodiin ja jos olet kirjoittanut sen oikein (ei virheitä!), näet muutokset näkyvän esikatselussa.

Tänne kirjoittamasi CSS-koodi ei muutu tai katoa, kun teemasi päivitetään! Mutta jos siirryt uuteen teemaan, tähän kirjoitettu koodi poistetaan. Siksi on suositeltavaa, että sinun on varmuuskopioitava CSS ennen teeman vaihtamista.

2 Käytä laajennusta

Tässä osiossa käsittelen neljää erilaista laajennusta, joita voit käyttää CSS:n muokkaamiseen WordPress-teemassasi – Advanced CSS Editor, Modular Custom CSS, SiteOrigin CSS ja CSS Hero. Jos et tiedä, WordPress-laajennukset ovat pieniä ohjelmiston osia, jotka voidaan liittää WordPressiin sen toimivuuden laajentamiseksi. Jotkut laajennukset ovat saatavilla ilmaiseksi, kun taas toisten joudut maksamaan rahaa lisätäksesi ne WordPress-sivustollesi. Laajennukset voivat auttaa sinua muokkaamaan tai lisäämään CSS:ää WordPress-sivustollesi muutamalla napsautuksella!

Advanced CSS Editor Pluginin käyttäminen

Ensimmäinen laajennus, jota suosittelen, on Advanced CSS Editor. Tämän laajennuksen avulla voit lisätä CSS:n sen, miltä verkkosivustosi näyttää pöytäkoneella, tabletilla ja matkapuhelimella. Tällä tavalla voit hienosäätää verkkosivustoasi jokaiselle laitteelle. Aloita muokkaaminen asentamalla laajennus. Siirry WordPress-hallintapaneeliin, napsauta Ulkoasu ja sitten Muokkaus. Näet uuden vaihtoehdon nimeltä Advanced CSS Editor. Lisää siihen haluamasi mukautettu CSS ja tallenna muutokset.

Valtava etu tämän laajennuksen käyttämisestä on, että voit hallita verkkosivustosi ulkoasua eri laitteilla. Lisäksi voit edelleen käyttää kohdassa #1 kerrottuani tekniikkaa muokataksesi WordPress-teemaa. Kuitenkin joillekin ihmisille, jotka eivät ole tottuneet koodaamaan, muutosten tekeminen kaikentyyppisille laitteille voi olla paljon työtä. Heidän olisi ensin opittava kirjoittamaan CSS:ää jokaiselle laitetyypille.

Modulaarisen mukautetun CSS-laajennuksen käyttäminen

Toinen lisäosa, jota suosittelen, on Modular Custom CSS. Tämä laajennus auttaa sinua tekemään muutoksia WordPress-sivustosi teemaan. Jos esimerkiksi käytät tällä hetkellä yhtä teemaa ja teet muutoksia kyseiseen teemaan käyttämällä modulaarista mukautettua CSS:ää. Sitten päätät valita sivustollesi toisen teeman. Joten ensimmäisessä teemassa tehdyt muutokset eivät poistuisi. Ne pysyvät ennallaan tässä laajennuksessa. Voit myös lisätä maailmanlaajuisen CSS:n tällä laajennuksella. Tämä CSS pysyisi samana teeman muutoksista huolimatta.

Jos haluat käyttää tätä laajennusta, lataa ensin laajennus ja lisää se WordPress-sivustollesi. Napsauta sitten Ulkoasu -> Muokkaus -> Lisä-CSS. Ainoa haittapuoli, jonka löysin tästä menetelmästä, on se, että globaalin CSS:n lisääminen ei ehkä aina ole paras idea. Joskus globaali CSS ei ehkä toimi teeman kanssa ja se voi olla sotku.

SiteOrigin CSS -laajennuksen käyttäminen

Kolmas suosittelemani laajennus tunnetaan nimellä SiteOrigin CSS. Tämä laajennus antaa sinulle visuaalisia ohjaimia, joiden avulla voit muokata sivustosi ulkoasua ja tuntumaa reaaliajassa. Tämä laajennus sopii sekä aloittelijoille että edistyneille CSS-käyttäjille. Reaaliaikainen esikatselu ja visuaaliset ohjaimet auttavat aloittelijoita, kun taas kokeneet käyttäjät voivat koodata nopeasti tämän laajennuksen koodin automaattisen täydennysominaisuuden avulla.

Tämä laajennus avaa erillisen CSS-editorin WordPressille. Voit käyttää tätä laajennusta lataamalla laajennuksen ja lisäämällä sen WordPress-sivustollesi. Napsauta sitten Ulkoasu -> Mukautettu CSS. Tämän laajennuksen hieno ominaisuus on, että voit muokata mitä tahansa elementtiä verkkosivustollasi napsauttamalla sitä. Voit muuttaa joitain yksinkertaisia ​​teeman elementtejä ilman CSS:ää. Yksi tällaisten toimintojen haittapuoli voi kuitenkin olla, että jos teet muutoksia teeman useisiin eri elementteihin, niiden seuraaminen voi olla vaikeaa.

CSS Hero Pluginin käyttäminen

Tämä on nyt jotain mielenkiintoista. Kolmas laajennussuositukseni sisältää laajennuksen, joka auttaa sinua muokkaamaan WordPress-sivustosi CSS:ää vetämällä ja pudottamalla. Se tunnetaan nimellä CSS Hero. Jos haluat muokata CSS:ää tällä laajennuksella, sinun on vietävä hiiren osoitin muutettavan elementin päälle ja napsauttamalla sitä. Sitten voit säätää sitä haluamallasi tavalla. Tässä on muutamia tämän laajennuksen hämmästyttäviä ominaisuuksia:

• Tämä laajennus sisältää helpon fonttityylien ja topografian muokkaamisen. Laajennus tukee Google Fonts- ja TypeKit-fontteja.
• Voit myös käyttää värinvalitsinta ja kokeilla live-värin ja taustan vaihtamista. Löydät uusimmat käytetyt värit helposti.
• Voit vain vetää liukusäädintä ja nähdä, miltä marginaalit näyttävät.
• Laajennus tukee myös sivustoelementtejä, kuten liukuvärejä, laatikkovarjoja, tekstivarjoja ja muita nykyaikaisia ​​CSS-ominaisuuksia.
• Voit tallentaa tilannekuvia muokkauksistasi tällä laajennuksella. Kaikkea ei siis tarvitse elää. Jatka vain työskentelyä ja julkaise lopullinen versio.
• Tämä laajennus ei vaikuta teematiedostoihisi. Sinun ei siis tarvitse huolehtia siitä, että päivitykset pilaavat muutokset.

Vertaamalla eri tapoja mukauttaa WordPress-teemaa CSS:n kanssa

Joten tänään opimme neljästä eri tavasta mukauttaa WordPress-sivustoa CSS:n avulla. Voit muokata tai lisätä CSS:ää WordPress-teemaasi käyttämällä hallintapaneelia tai voit käyttää FTP-sovellusta. Voit käyttää WordPress Customiseria CSS:n lisäämiseen tai muokkaamiseen tai viimeinkin voit käyttää joitain laajennuksia mukauttaaksesi WordPress-teemaasi CSS:n avulla.

• Jos olet aivan uusi WordPressin ja CSS:n käytössä, suosittelen käyttämään WordPress Customiseria CSS:n muokkaamiseen tai lisäämiseen. Tällä tavalla voit tarkistaa muutokset esikatselussa, eikä sinun tarvitse huolehtia muutosten poistamisesta teeman päivityksen jälkeen.
• Jos sinulla on kokemusta CSS:stä ja WordPressistä ja olet työskennellyt laajennuksien parissa aiemmin, suosittelen, että valitset minkä tahansa neljästä laajennuksesta, jotka jaoin kanssasi tänään. Laajennukset tarjoavat parempia vaihtoehtoja ja mahdollisuuksia parantaa sivustoasi.
• Jos olet CSS-veteraani. Olet luonut verkkosivustoja ja osaaminen CSS toimii perusteellisesti. Sitten suosittelen, että käytät Dashboardia tai FTP:tä tehdäksesi muutoksia suoraan WordPress-tyylitaulukkoon.

On tärkeää, miltä verkkosivustosi näyttää

Sivuston suunnittelu, ulkoasu, värit, fontit tai teema ovat varsin tärkeitä. Se auttaa välittämään tunteen, jonka haluat käyttäjän kokevan yrityksestäsi. Se voi luoda ainutlaatuisen tuotekuvan ja määrittää identiteettisi.

Myös sivustosi suunnittelulla ja ulkoasulla on tärkeä rooli käyttökokemuksen parantamisessa. Jos suunnittelusi ei ole niin hyvä, olet sijoittanut mainokset vääriin paikkoihin, sivustosi värit ovat melko häiritseviä, kaikki se voi vaikuttaa käyttökokemukseen.

Upea suunnittelu ja ulkoasu voivat auttaa sinua hallitsemaan, kuinka viesti toimitetaan käyttäjille. Voit kiinnittää heidän huomionsa oikeaan aikaan ja ohjata heidät polulle, joka täyttää tavoitteesi. Joten WordPress-sivustosi CSS:n muuttaminen, lisääminen tai muokkaaminen on vastuullista. Vastuu verkkosivustosi parantamisesta käyttäjille.

Toivottavasti nämä vinkit ja temput WordPress-teeman mukauttamiseen CSS:n avulla auttavat sinua antamaan verkkosivustollesi yksilöllisen ilmeen. Jos käytät jotakin niistä tai olet käyttänyt niitä aiemmin, jaa kokemuksesi kommenttiosiossa ja levitä sanaa!