Julkaistu
Päivitetty

WordPressin ulkonäkö ja teemat

Tämä artikkeli on toinen osa WordPress aloittelijalle -sarjaa. Ensimmäisessä osassa perehdyttiin WordPressin hallintaan ja sivujen yleisiin ominaisuuksiin. Tämä artikkeli käsittelee sivujen visuaalista puolta, teemoja ja perehtyy tarkemmin lapsiteeman käsitteeseen.

Ensimmäinen ajatus omista verkkosivuista liittyy luultavasti niiden ulkonäköön

Vaikkakin suosittelemme kääntymään vähänkään vaativampien sivustoprojektien kanssa alan ammattilaisen puoleen, periaatteessa et WordPress-alustalla tarvitse koodaustaitoja sivujen tekemiseen. Tarjolla on satoja erilaisia valmiiksi luotuja ja muokattavissa olevia ulkoasuteemoja WordPressille. Osa teemoista on maksullisia, mutta tarjolla on myös ilmaisia ja avoimesti lisensoituja teemoja, joiden muokkaaminen itselle sopivaksi on sallittua.

Teemalla tarkoitetaan kokoelmaa tyylitiedostoja, grafiikkaa ja skriptejä, jotka määrittävät sivuston rakenteen, ulkoasun ja toiminnallisuuden. Teeman valinnassa kannattaa ensisijaisesti kiinnittää huomiota teeman käyttäjämääriin ja sen saamiin arvioihin.

Teeman valinta

Teeman valintaan vaikuttaa luonnollisesti eniten se, mihin käyttötarkoitukseen sivustosi luot. Eri tyyppisille sivustoille on olemassa eri rakenteisia teemoja. Blogeilla, keskustelufoorumeilla ja yrityssivustoilla on erilaiset lähtökohdat, joita teeman tulee mahdollisimman hyvin palvella. Jos sinulla on jo käytössä WordPress, voit tarkastella eri teemoja WordPressin hallinnasta kohdasta Ulkoasu > Teemat.

WordPress kuvankaappaus
Teeman lisääminen WordPressin hallinnasta

Kannattaa valita teema, joka on lähiaikoina päivitetty. Päivitykset varmistavat, että teema kehittyy WordPressin mukana, sillä WordPressiä päivitetään aktiivisesti. Päivittämättömät versiot ovat alttiita tietoturvahyökkäyksille.

Oma CSS

Kun olet ottanut valitsemasi teeman käyttöön, voit helposti muokata valitsemaasi teemaa WordPress-hallinnan kohdasta Ulkoasu > Teemat > Mukauta > Oma CSS.

Käytettäessä Oma CSS -työkalua kaikkia muutokset voidaan tarkkailla reaaliajassa, vaikkakaan muutokset eivät varsinaisesti tule voimaan ennen kuin sivu tallennetaan. Tällä muokkaimella tehdyt muutokset säilyvät, vaikka alkuperäinen teema päivitettäisiin.

Oma CSS -muokkaimen käyttäminen ei ole suositeltavaa jos koodia täytyy kirjoittaa satoja rivejä. Laajemmat CSS-koodaukstarpeet puoltavat oman teeman tai lapsiteeman tekemistä.

Oheisessa kuvassa on muutama esimerkki muutamasta räätälöidystä CSS-säännöstä.

Jos et löydä teemoista mieluista ja haluat tehdä teemaan paljon omia muutoksia, tarvitset jo hieman enemmän koodaustaitoja. Tällöin lapsiteeman luominen voi olla helpoin tapa luoda omaperäinen verkkosivusto turvallisesti ja suhteellisen helposti.

Lapsiteema

Jos teet muutoksia suoraan WordPress-sivustollasi käytössä olevan, kolmannen osapuolen tekemän teeman koodiin (esim tiedostoon wp-content/themes/twentytwentyone/style.css), tekemäsi muutokset pyyhkiytyvät kun kyseinen teema seuraavan kerran päivitetään. Tekemällä lapsiteeman voit estää muutostesi katoamisen. Näin alkuperäisen teeman voi pitää ajan tasalla samalla ja hyödyntää myös lapsiteemassa päivitysten tarjoamia uusimpia ominaisuuksia.

Lapsiteema koostuu minimissään kansiosta, jossa on style.css ja index.php -tiedostot. Näiden sisältöön liittyy tiettyjä vaatimuksia. Helpoiten lapsiteeman saa aikaisesti WP-CLI -komentorivityökalun avulla menemällä teeman hakemistoon ja käyttämällä komentoa wp scaffold child-theme. Esimerkiksi jos lapsiteeman isäntäteemaksi haluaa TwentySixteen -teeman, ajettaisiin komento seuraavaan tapaan:

wp scaffold child-theme sample-theme --parent_theme=twentysixteen

Yllä näkyvä komento luo lapsiteeman nimeltä sample-theme teeman Twenty Sixteen päälle. Muista muokata käskyä sen mukaan, minkä teeman pohjalta haluat teeman luoda.

Tämän jälkeen voit tehdä haluamasi tyylilliset muokkaukset suoraan tiedostoon style.css. Tiedostossa functions.php sen sijaan voit muokata teeman toiminnallisuutta. Näin siis yksinkertaisimmillaan, vähääkään monimutkaisemmat rakennelmat on jo syytä hajauttaa useampaan tiedostoon.

Muista myös muokata teeman nimi, tekijän tiedot, sekä muut tiedot oikeiksi style.css -tiedostossa.

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:	http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:   	John Doe
 Author URI:   http://example.com
 Template: 	twentyfifteen
 Version:  	1.0.0
 License:  	GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:     	light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

Jos teeman haluaa asentaa vapaasti mille tahansa sivustolle, pitää teemakansiosta tehdä zip-paketti, jonka jälkeen zip-tiedoston voi ottaa käyttöön WordPress sivuilla kohdasta Ulkoasu > Teemat > Lisää uusi teema > Lataa teema > Choose File.

Lapsiteeman muokkaaminen suoraan palvelimella

Muokkauksia lapsiteemaan voi tehdä suoraan SSH-yhteyden avulla palvelimella. Ota ensin SSH-yhteys palvelimelle ja siirry teemakansioon komennolla cd /data/wordpress/htdocs/wp-content/themes. Komennolla ls näet mitä teemoja palvelimella on ja jatka edelleen komennolla cd oikean teeman kansioon. Jos haluat esimerkiksi avata tyylitiedoston yksinkertaisella tekstieditorilla, aja komento nano style.css. Tee muokkauksesi ja poistu valitsemalla Ctrl+X.

Erään teeman style.css avattuna nano-tekstiedistorissa komentorivitilassa.

Varmistaaksesi että muutokset näkyy heti, voit tyhjentää välimuistin komennolla wp-purge-cache tai päivittää selaimessa sivun uudestaan ns. syvällä sivunlatauksella painamalla Ctrl+F5.

Toivottavasti artikkelista oli sinulle hyötyä. Ei muuta kuin perehtymään CSS -maailmaan!

Kommentoi

Lue lisää

Kategoriassa: WordPress

Työkaluja WordPress-sivuston nopeuden testaukseen ja optimointiin

Nopeus on valttia – ainakin silloin, kun on kyse verkkosivuston kävijäkokemuksesta. Oliko sivustoa mukava selata, vai joutuiko kaikkia pieniäkin toimintoja odottamaan sekuntikaupalla? Lue, miten testaat sivustosi nopeutta!

31 maaliskuun, 2021

WordPress 5.7 Esperanza – mitä uutta?

WordPress 5.7 tuo mukanaan uudistuksia Gutenbergiin, laajasti päivittyneen jQueryn, uudet väripaletit sekä apuja esimerkiksi suojaamiseen ja hakukonehallintaan. Tutustu Esperanzaan!

10 maaliskuun, 2021

Seravon lisäpalvelut WordPress-sivustoille

Kaipaatko varmuutta sivustosi toimintaan myös kävijäpiikkien ja tietoturvauhkien varalta? Ensiluokkaisen ylläpidon lisäksi Seravo tarjoaa erillisinä asiantuntijapalveluina WordPress-sivustosi nopeusoptimointia, tietoturvakovennusta sekä korotetun valmiuden tapahtumien ajaksi.

17 helmikuun, 2021

WooCommerce 5.0 on julkaistu

Helmikuussa 2021 julkaistiin WooCommercen versio 5.0. Mitä päivitys tarkoittaa? Miten verkkokauppa tulisi päivittää uusimpaan versioon? Muutostyössä on monia asioita, jotka tulisi huomioida.

12 helmikuun, 2021

Suojaa WordPress-käyttäjätilisi kaksivaiheisella tunnistautumisella

Seravon uusissa tilauksissa on esiasennettuna lisäosa kaksivaiheista tunnistautumista varten. Tämä parantaa sivuston tietoturvaa merkittävästi. Autentikoi kirjautumisesi näillä ohjeilla!

11 helmikuun, 2021

Seravon WordPress-palvelimet ovat maailman nopeimmat

Tiesitkö, että Seravo on listattu maailman nopeimpana WordPress-palveluntarjoajana sivustolla ismyhostfastyet.com?

4 helmikuun, 2021