Teemasta sivuston ulkonäkö
Teema on WordPress‑sivuston perusta – se määrittää ulkoasun, rakenteen ja sen, miten joustavasti sivustoa voi muokata. Kun ymmärtää, miten teemat toimivat ja millaisia vaihtoehtoja on tarjolla, oman sivuston rakentaminen helpottuu huomattavasti. Tässä osiossa käydään läpi teemojen valintaan liittyviä käytännön juttuja ja pohditaan, millaiset ratkaisut toimivat eri käyttötarkoituksissa, jotta löydät juuri sinun projektiisi sopivan pohjan.
Mikä on WordPress teema?
WordPress-teema on valmiiksi koodattu sivupohja, joka määrittää sivuston ulkoasun, rakenteen ja perustoiminnot. Teeman voi tehdä itse alusta asti, mutta useimmiten käytetään valmista teemaa, jotta kaikkea ei tarvitse rakentaa uudelleen. Teema sisältää kehittäjän luoman tiedostorakenteen, muotoilut ja joskus myös joukon lisäosia, ja sitä voi muokata oman osaamisen puitteissa haluttuun suuntaan.
Jos teema vastaa sellaisenaan sivuston toivottua ilmettä, sivujen rakentaminen voi olla hyvin suoraviivaista: lisätään vain omat sisällöt ja navigaatio. Käytännössä teemoja kuitenkin muokataan lähes aina, joten on tärkeää ymmärtää, miten valittu teema toimii ja mitä se mahdollistaa.
Jokainen teema on ominaisuuksiltaan erilainen!
WordPress-teemoja on valtava määrä, ja niiden toiminnot, asetukset ja muokattavuus vaihtelevat suuresti. Valmiissa teemassa voi olla myös ominaisuuksia, joita ei omalle sivustolle tarvita, ja jokainen ylimääräinen toiminto lisää sivuston raskautta ja voi hidastaa latausaikoja sekä heikentää hakukoneoptimointia.
Saatavilla on myös kevyitä, niin sanottuja “tyhjiä” teemoja, joissa on vain välttämättömät perustoiminnot. Ne tarjoavat nopean ja kevyen pohjan, mutta vaativat enemmän omaa rakentamista ja teknistä osaamista. Mitä vähemmän teemassa on valmista, sitä enemmän sivuston ulkoasu ja toiminnallisuudet täytyy toteuttaa itse.
Mistä löytää teemoja?
WordPress‑teemoja on tarjolla valtava määrä. Ne myös vaihtelevat ominaisuuksiltaan, laadultaan ja hinnoiltaan. Valikoima ulottuu täysin ilmaisista teemoista premium‑ratkaisuihin, joiden hinnat voivat nousta kymmenistä euroista satoihin tai jopa tuhansiin euroihin. Teemoja löytyy useista eri lähteistä, ja jokaisella palvelulla on omat vahvuutensa.
Suositut teema‑ ja markkinapaikat
Envato ThemeForest on yksi maailman tunnetuimmista teema‑kaupoista. Valikoimassa on yli 10 000 teemaa, ja tarjonta kattaa lähes kaikki sivustotyypit portfolioista verkkokauppoihin ja yrityssivuihin. ThemeForestin etuna on valtava valikoima ja käyttäjäarvostelut, jotka auttavat valinnassa.
TemplateMonster tarjoaa myös laajan valikoiman teemoja eri käyttötarkoituksiin. Palvelu on erityisen suosittu yritys‑ ja verkkokauppateemojen osalta, ja sen teemat ovat usein visuaalisesti näyttäviä ja valmiiksi monipuolisilla ominaisuuksilla varustettuja.
Envato Elements on kuukausimaksullinen palvelu, joka tarjoaa rajattoman latausoikeuden laajaan materiaalikirjastoon: WordPress‑teemoja, lisäosia, grafiikkaa, fontteja ja paljon muuta. Elements on edullinen ja monipuolinen lähde, mutta sen teemoissa ei yleensä ole automaattisia päivityksiä – päivitykset täytyy ladata manuaalisesti.
Muita hyödyllisiä lähteitä
WordPress.org Theme Directory on virallinen teema‑arkisto, josta löytyy tuhansia ilmaisia teemoja. Kaikki arkiston teemat käyvät läpi tarkistusprosessin, joten ne ovat turvallisia ja yhteensopivia WordPressin kanssa. Tämä on hyvä paikka aloittaa, jos haluaa kevyen ja luotettavan teeman.
Teemakehittäjien omat sivustot
Teeman kehittäjillä on omia sivustoja, jotka ovat erinomainen vaihtoehto silloin, kun halutaan laadukas, kevyt ja hyvin tuettu teema.
Suosittuja kehittäjiä ovat esimerkiksi:
Näiden kehittäjien teemat ovat usein suorituskykyisiä, hyvin dokumentoituja ja pitkäikäisiä – hyviä valintoja erityisesti silloin, kun sivustoa rakennetaan ammattimaisesti tai pitkällä aikavälillä.
| Lähde | Plussat | Miinukset | Sopii erityisesti |
|---|---|---|---|
| ThemeForest | Laaja valikoima, käyttäjäarvostelut, paljon valmiita kokonaisuuksia | Osa teemoista raskaita, laatu vaihtelee | Käyttäjälle, joka haluaa visuaalisesti näyttävän teeman nopeasti |
| TemplateMonster | Paljon yritys‑ ja verkkokauppateemoja, valmiita ratkaisuja | Osa teemoista monimutkaisia ja raskaita | Yrityssivustoihin ja verkkokauppoihin |
| Envato Elements | Edullinen kuukausihinta, rajattomat lataukset, paljon materiaalia | Ei automaattisia päivityksiä teemoihin! | Käyttäjälle, joka tarvitsee paljon materiaalia (teemat, grafiikka, fontit) |
| WordPress.org Theme Directory | Ilmainen, turvallinen, kevyet teemat | Vähemmän visuaalisesti näyttäviä vaihtoehtoja | Kevyisiin sivustoihin ja aloittelijoille |
| Kehittäjien omat teemat | Laadukkaita, nopeita, hyvin tuettuja | Usein maksullisia, vaativat hieman enemmän osaamista | Ammattilaisille ja pitkäikäisiin projekteihin |
WordPressin omat oletusteemat
Jokaisen WordPress‑asennuksen mukana tulee uusin WordPressin oma oletusteema (kirjoitushetkellä Twenty Twenty‑Five). WordPressissä täytyy aina olla vähintään yksi teema asennettuna, ja monet rakentavat sivustonsa suoraan tämän oletusteeman pohjalle. Oletusteemat ovat kevyitä ja selkeitä, ja ne toimivat hyvin perusrunkona silloin, kun halutaan yksinkertainen ja suorituskykyinen sivusto.
WordPressin oletusteemat ovat viime vuosina siirtyneet yhä vahvemmin kohti Gutenberg‑ eli lohkoeditoriin perustuvaa rakennetta. Tämä ei tarkoita, etteikö niitä voisi käyttää klassisen editorin kanssa, mutta niiden täysi potentiaali ja suunniteltu käyttötapa toteutuvat vain Gutenbergissä.
Oletusteemojen ”rajoituksia”
- Twenty Seventeen
- Twenty Nineteen
- Twenty Twenty
Ennen vuotta 2022 julkaistut WordPressin omat teemat toimivat hyvin sekä Classic Editorin että Gutenbergin kanssa. Ne eivät kuitenkaan ole täysin lohkoperustaisia – Gutenbergin lohkoja voi käyttää sisällössä, mutta sivun perusrakenne ei ole lohkoperusteinen. Nämä teemat eivät vaadi Gutenberg-editoria toimiakseen.
- Twenty Twenty‑Two
- Twenty Twenty‑Three
- Twenty Twenty‑Four
- Twenty Twenty‑Five
Vuoden 2022 jälkeen julkaistut WordPressin omat teemat ovat ns. Full Site Editing (FSE) Full Site Editing (FSE) tarkoittaa WordPressin toimintoa, jossa koko sivuston ulkoasu – kuten header, footer ja sivupohjat – voidaan muokata Gutenberg‑lohkoeditorilla ilman erillistä koodausta. ‑teemoja
Näitä teemoja ei käytännössä voi hyödyntää ilman Gutenberg‑editoria. Classic Editor ja muut editorit (Elementor jne.) toimivat edelleen sisältöjen kirjoittamiseen, mutta teeman muokkausmahdollisuutta ei juurikaan ole.
Teeman asentaminen
WordPress‑teemat asennetaan aina Ulkoasu → Teemat (Appearance → Themes) ‑paneelin kautta. Teeman voi ottaa käyttöön kahdella tavalla joko valitsemalla sen suoraan WordPressin omasta teema‑kirjastosta tai lataamalla teeman omalta tietokoneelta Lisää uusi ‑painikkeen kautta.
Jos teema hankitaan muualta kuin WordPressin omasta valikoimasta, se toimitetaan yleensä pakattuna zip‑tiedostona. Tällöin teema asennetaan valitsemalla Lataa teema ja tuomalla zip‑tiedosto sellaisenaan WordPressiin.
Esimerkiksi ThemeForestista ostettu teema ladataan palvelusta zip‑pakettina. Usein tämä paketti sisältää myös ohjeita, lisäaineistoa tai esimerkkisisältöä, jotka eivät kuulu varsinaiseen asennustiedostoon. Siksi paketti kannattaa purkaa ensin omalle koneelle ja etsiä sen sisältä varsinainen teeman asennustiedosto, joka on yleensä nimetty muotoon teeman-nimi.zip. Juuri tämä tiedosto ladataan WordPressiin.
Kun teema on ladattu ja asennettu, se voidaan aktivoida suoraan Teemat‑paneelista. Aktivoinnin jälkeen teema on heti käytettävissä ja sen asetuksia voi alkaa muokkaamaan.
Lapsiteema – Child Theme
Vaikka WordPress‑teemoja on tarjolla valtava määrä, lähes jokaiseen niistä halutaan lopulta tehdä omia muokkauksia. Jotta muutokset eivät häviä teeman päivitysten yhteydessä, ne kannattaa aina tehdä lapsiteemaan. Lapsiteema (Child Theme) toimii eräänlaisena suojakerroksena tai ylimääräisenä tasona varsinaisen teeman päällä. Sen avulla voit muokata ulkoasua, asetuksia tai jopa ohjelmakoodia ilman riskiä, että teeman päivittäminen ylikirjoittaa muutokset myöhemmin. Siksi lapsiteeman käyttöönotto on suositeltavaa jos aiot muokata teeman tiedostoja.
Miksi käyttää lapsiteemaa?
Lapsiteema toimii eräänlaisena muokkauskerroksena varsinaisen teeman edessä. Se sisältää vain ne tiedostot ja asetukset, joita halutaan muuttaa pääteemasta – esimerkiksi omia CSS‑muotoiluja tai yksittäisiä mallipohjia. Kaikki muu ladataan edelleen pääteemasta.
Kun sivu latautuu, WordPress lukee ensin lapsiteeman tiedostot ja sen jälkeen pääteeman. Tämä tarkoittaa, että lapsiteemassa tehdyt muutokset ohittavat pääteeman vastaavat kohdat, mutta kaikki muu pääteeman toiminnallisuus säilyy ennallaan. Lapsiteema ei siis korvaa koko teemaa, vaan ainoastaan ne osat, joita halutaan muokata.
Teeman päivitykset koskevat aina vain pääteemaa. Jos muokkaukset on tehty suoraan pääteeman tiedostoihin, päivitys ylikirjoittaa ne ja muutokset katoavat. Lapsiteeman avulla omat muokkaukset pysyvät turvassa, koska päivitykset eivät koske lapsiteemaa lainkaan.
Lapsiteemaa ei ole pakko tehdä, jos kaikki tarvittavat muutokset onnistuvat teeman omilla asetuksilla tai Customizerin kautta. Mutta jos teet pienikin koodimuutoksia – CSS:ää, PHP‑mallipohjia, funktioita tai skriptejä – lapsiteeman käyttö on erittäin suositeltavaa.
Kuinka lapsiteema otetaan käyttöön?
Lapsiteeman voi luoda kahdella tavalla:
- Manuaalisesti FTP/SFTP‑yhteydellä
- Luo palvelimelle uusi kansio polkuun
wp-content/themes. Kansion nimi voi olla esimerkiksi teeman-nimi-child. - Luo kansioon vähintään kaksi tiedostoa:
- style.css – sisältää lapsiteeman tunnistetiedot ja mahdolliset CSS‑muutokset
- functions.php – lataa pääteeman tyylit ja mahdollistaa omat funktiot
- Jos haluat muokata jotakin pääteeman mallipohjaa (esim.
header.php), kopioi kyseinen tiedosto pääteemasta lapsiteeman kansioon. Tiedoston tulee sijaita täsmälleen samassa hakemistorakenteessa. - Lapsiteemaan ei tarvitse kopioida mitään, mitä et aio muuttaa.
- WordPress‑lisäosan avulla (Child Theme Configurator)
- Tämä on helpoin ja virheettömin tapa aloittelijoille. Lisäosa luo lapsiteeman automaattisesti ja kopioi tarvittavat asetukset puolestasi.
style.css-koodaus lapsiteemalle
/*
Theme Name: Kadence Child Theme
URI: https://esimerkki.fi
Description: Lapsiteema Kadence-teemalle
Author: Oma nimi
Template: kadence
Version: 1.0.0
*/
/* Omat CSS-muokkaukset tähän */
functions.php-koodaus lapsiteemalle
<?php
/**
* Lataa pääteeman tyylit lapsiteemaan
*/
function kadence_child_enqueue_styles() {
wp_enqueue_style( 'kadence-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'kadence-child-style',
get_stylesheet_directory_uri() . '/style.css',
array( 'kadence-style' )
);
}
add_action( 'wp_enqueue_scripts', 'kadence_child_enqueue_styles' );
Jos haluat kokeilla manuaalista tapaa luoda lapsiteema:
- Siirry Local-käyttöliittymän Site folder-linkin kautta sivuston asennuksen tiedostoihin ja navigoi osoitteeseen
app\public\wp-content\themes\, josta löydät teeman kansion nimeltä kadence. - Tee kadence-kansion lisäksi uusi kansio nimeltä kadence-child (HUOM!: Ei välilyöntiä)
- Avaa kansio.
- Luo kansioon kaksi tiedostoa
style.cssjafunction.phpja liitä oheiset koodit tiedostoihin. - Siirry takaisin WordPress-ohjausnäkymään
- Päivitä selaimen välilehti ja tarkista onko Ulkoasu/Teemat asennettuihin teemoihin ilmestynyt uusi teema nimeltä Kadence Child Theme
- Aktivoi teema ja testaa näkyykö sivusto entiseen tapaan.
Child Theme Configurator
Kurssilla käytämme lapsiteeman luomiseen lisäosaa nimeltä Child Theme Configurator. Se on yksi suosituimmista työkaluista lapsiteemojen luomiseen ja hallintaan, ja se sopii hyvin myös silloin, kun teema on monimutkainen tai sisältää paljon asetuksia.
Asenna lisäosa Lisäosat → Lisää uusi ‑valikosta ja ota se käyttöön. Tämän jälkeen löydät työkalun kohdasta Työkalut → Child Themes. Lisäosa ohjaa sinut vaihe vaiheelta lapsiteeman luomisessa ja varmistaa, että kaikki tarvittavat tiedostot ja asetukset tulevat mukaan.
Lisäosan ensimmäisellä välilehdellä on Create a new Child Theme -valinta, joka täyty olla aktiivisena ja Select a Parent Theme -pudotusvalikosta valitaan teema, johon lapsiteema tehdään. Kun olet tehnyt toimenpiteet paina Analyze-painiketta.
Lisäosa tutkii onko valittu teema sopiva lapsiteeman luontiin ja tulostaa vastaukseksi analyysin tuloksen. Jos tuloksena on vihreää voimme aloittaa määrittelemään asennettavan lapsiteemamme asetuksia.
Selvitys lisäosan asetuksista
1. Select an Action – Valitse toiminto
- CREATE a new Child Theme: Luo uusi lapsiteema valitsemalla jokin jo asennettu teema pohjaksi.
2. Select a Parent Theme – Valitse pääteema
- Valitse alasvetovalikosta teema, jonka pohjalta haluat luoda lapsiteeman (esim. Kadence).
3. Analyze Parent Theme – Analysoi pääteema
- Paina Analyze siirtyäksesi seuraavaan vaiheeseen, joka tarkistaa voiko valittu teema toimia lapsiteeman pohjana. Jos kaikki on kunnossa, saat vihreät ✔‑merkinnät ja voit jatkaa.
4 Name the New theme directory – Nimeä uuden teeman hakemisto
- Anna lapsiteemalle hakemistonimi (esim.
kadence-child). - Tässä kohdassa asetetaan teemalle URL-ystävällinen nimi. Tämä EI siis ole kohta, jossa teema nimetään. Nimeäminen tehdään kohdassa 7 tarvittaessa.
5. Select where to save styles – Valitse mihin uudet tyylit tallennetaan
- Primary Stylesheet (style.css): Tallentaa omat CSS‑muokkaukset lapsiteeman päätyylitiedostoon eli
style.css-tiedostoon. - Separate Stylesheet: Luo erillisen tyylitiedoston, jos haluat säilyttää vanhat lapsiteeman tyylit tai hallita latausjärjestystä tarkemmin.
6. Select Parent Theme stylesheet handling – Valitse pääteeman tyylitiedoston käsittely
- Use the WordPress style queue: Lisäosa hoitaa tyylien latauksen automaattisesti oikein lisäämällä
functions.php-tiedostoon koodin, joka huolehtii pääteeman tyylien lataamisesta. Tämä on yleisesti suositeltu vaihtoehto useimmille teemoille.
Käytännössä: Sivusto näyttää täsmälleen samalta kuin ennen lapsiteemaa. Omat CSS-muokkaukset yliajavat pääteeman tyylejä. - Use @import: Vanhentunut tapa, ei suositella.
- Do not add any parent stylesheet handling Käytetään, jos pääteema ei käytä
style.css‑tiedostoa ulkoasun määrittelyyn. Asian voi tarkistaa avaamalla teeman tiedostoistastyle.css-tiedoston esimerkiksi Ulkoasu/Teeman tiedostoeditori (Appearance/Theme File Editor) ja tarkistaa onko tiedostossa CSS-muotoiluja. Kadence-teema ei käytä tyylejä style.css-tiedostossa, joten tämä kohta tulee asettaa valituksi asennettaessa lapsiteemaa. - (Advanced handling options) Ignore parent theme stylesheets: Ei lataa pääteeman tyylejä lainkaan (vain erityistapauksissa). Asetusta käytetään vain tapauksissa, kuten Genesis, jossa lapsiteema sisältää kaiken.
- (Advanced handling options) Do not force dependency: Voit poistaa riippuvuuksia tietyistä tyylitiedostoista, jos ne eivät ole tarpeen. Toiminto tarkoitettu lähinnä edistyneeseen teeman mukauttamiseen kehittäjille.
7. Customize the Child Theme Name, Description… – Mukauta lapsiteeman nimi ja tiedot
- Voit mukauttaa luotavan lapsiteeman näkyvää nimeä, kuvausta, tekijää ja versiota.
- Asetetut tiedot näkyvät WordPressin Teemat‑näkymässä.
8. Copy Menus, Widgets and other… – Kopioi valinnat pääteemasta
- Voit kopioida valikot, widgetit ja ulkoasuasetukset pääteemasta lapsiteemaan.
- Lapsiteema saa täsmälleen samat asetukset kuin pääteema ja sivusto näyttää heti samalta, kuin ennen lapsiteeman käyttöönottoa
- Jos tätä asetusta ei oteta käyttöön; osa ulkoaskuasetuksista voi palautua oletusasetuksiin ja joudut asettamaan ne uudelleen, valikot ja widgetit voivat kadota.
- Huom: jotkin premium‑teemat eivät tue tätä ominaisuutta ilmaisversiossa. Esimerkiksi Theme Forest-pavelusta ostetussa maksullisessa teemassa on usein oma lapsiteeman .zip-tiedosto, joka asennetaan kuten normaali teema eikä siihen tarvita tätä lisäosaa.
9. Click to run the Configurator – Luo lapsiteema
- Paina Create New Child Theme kun kaikki asetukset on tehty.
- Lapsiteema luodaan ja aktivoidaan käyttöön.
Kadence-teeman valinnat
Luotaessa Kadence-teemalle lapsiteemaa, asetetaan käytännössä oletusasetuksista kaksi pakollista valintaa, jotta lisäosan asentaminen onnistuu oikein:
- Kohta 6: Aseta valinnaksi Do not add any parent stylesheet handling, sillä Kadence-teema ei käytä style.css-tiedostoa CSS-muotoiluihin.
- Kohta 8: Ota käyttöön asetus This option replaces Child Theme’s existing Menus, Widgets…, jotta asetetut muotoilut teeman mukauttamisessa säilyvät.
Kaikki muut asetukset voidaan jättää oletusten mukaiseksi ja niihin ei tarvitse koske. Jos haluat, voit toki nimetä luotavan teeman kohdassa 7 klikkaamalla sinistä linkkipainiketta mutta se ei ole välttämätöntä.
