Teemat: lohkoteemat ja perinteiset teemat

Moduuli 5: Teemat ja lisäosat · Lukuaika: 9 minuuttia

Oppimistavoite: Tämän oppitunnin jälkeen osaat selittää eron lohkoteemojen ja perinteisten teemojen välillä ja valita teeman harkiten.

Keskeiset käsitteet: teema, template-hierarkia, lohkoteema, sjabloni (template), sjablonin osa (template part), theme.json, Sivustoeditori, perinteinen teema, PHP-sjablonit, Mukautin, vimpaimet, sivubouwer, lock-in, teemakansio

Mitä teema tekee

Teema määrittää, miltä sivustosi näyttää ja miten sivut rakentuvat: yläosa logoineen ja menuineen, sisällön leveys, fontit ja värit, alatunniste, miten artikkelilista tai hakutulos näyttää. Itse sisältö (tekstisi, sivut, kuvat) on tietokannassa ja säilyy, vaikka vaihdat teemaa.

Jokainen teema sijaitsee omassa kansiossaan hakemiston wp-content/themes/ alla, esimerkiksi wp-content/themes/twentytwentyfive/. Tässä kansiossa on aina tiedosto style.css, jonka yläosassa on otsake, joka kuvaa teeman (nimi, versio, tekijä). Tämän näet myös oppitunnilla 5.2.

WordPress 5.9:stä lähtien (vuoden 2022 alusta) on olemassa kaksi teematyyppiä, ja ne toimivat aidosti eri tavalla.

Perinteiset teemat

Perinteinen teema koostuu PHP-tiedostoista: header.php, footer.php, single.php, page.php, index.php, ja niin edelleen. Se, mitä tiedostoa käytetään millekin sivulle, seuraa template-hierarkiaa (oppitunti 1.2). Muokkaaminen tapahtuu:

• Mukautimessa (Ulkoasu > Mukautin): logo, värit, teeman tarjoamat asetukset;
• vimpaimilla (Ulkoasu > Vimpaimet): lohkot sivupalkissa tai alatunnisteessa;
• menuilla (Ulkoasu > Menu, oppitunti 4.3);
• koodissa, lapsiteeman avulla (oppitunti 5.2).

Monet tunnetut teemat ovat (vielä) perinteisiä tai hybridejä. Ne toimivat hyvin ja niitä tuetaan vielä vuosia.

Lohkoteemat

Lohkoteema rakentuu samoista lohkoista kuin sisältösi. Teemassa on:

• sjablonit (templates) HTML-tiedostoina, joissa on lohkoja, kansiossa templates/: index.html, single.html, page.html, 404.html;
• sjablonin osat (template parts) kansiossa parts/: header.html, footer.html;
• tiedosto theme.json, jossa on tyyliasetukset: väripaletti, fontit, fonttikoot, sisällön leveys, lohkojen väliset tilat.

Pieni pätkä theme.jsonia:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primair", "color": "#1e3a5f", "name": "Primair" },
        { "slug": "accent", "color": "#e8a33d", "name": "Accent" }
      ]
    },
    "layout": { "contentSize": "720px", "wideSize": "1200px" }
  }
}

Muokkaaminen tapahtuu Sivustoeditorissa (Ulkoasu > Editori): muokkaat yläosaa, alatunnistetta ja sjabloneja lohkoilla, ja kohdassa Tyylit valitset värit, fontit ja tilat koko sivustolle.

Tärkeä ero, joka kannattaa tietää: se, mitä muokkaat Sivustoeditorissa, tallentuu tietokantaan, ei teematiedostoihin. Teeman päivitys ei siis ylikirjoita muokkauksiasi. Mutta se tarkoittaa myös: tietokannassa oleva muokattu sjabloni menee aina teeman sjablonin edelle. Jos tekijä julkaisee parannellun sjablonin, et näe sitä niin kauan kuin oma muokattu versiosi on olemassa. Sivustoeditorissa voit "palauttaa" sjablonin takaisin teeman versioon.

Sivubouwerit

Sivubouweri (kuten Elementor, Divi tai WPBakery) on lisäosa tai teema, jossa on oma editori, jossa raahaat ja muotoilet sivuja. Ne ovat suosittuja, koska ne tarjoavat paljon mahdollisuuksia ilman koodia. Ole tietoinen haitoista:

• Lock-in: muotoilu tallentuu omaan muotoon (usein shortcodeina tai omana tietona kentässä wp_postmeta). Jos poistat bouwerin käytöstä, sivuistasi jää usein jäljelle koodisekamelska. Vaihtaminen tarkoittaa yleensä kaiken rakentamista uudelleen.
• Raskaampi: monet bouwerit lataavat ylimääräisiä skriptejä ja tyylitiedostoja jokaiselle sivulle. Tämä voi hidastaa sivustoasi (moduuli 6).
• Vielä yksi osa pidettäväksi ajan tasalla, jolla on omat päivitykset ja omat haavoittuvuudet.

Sivubouweri ei ole väärä valinta, mutta tee se tietoisesti. Monilla sivustoilla saman tuloksen saavuttaa myös lohkoteeman ja kuvioiden (patterns) avulla.

Teeman valitseminen

Näihin kannattaa kiinnittää huomiota, tässä järjestyksessä:

1. Alkuperä: wordpress.org:n teemahakemisto (vapaaehtoisten tarkistama) tai tunnettu tekijä omalla sivustollaan. Älä koskaan käytä "ilmaista" kopiota maksullisesta teemasta latauspalvelusta: siinä on usein takaportti (oppitunti 5.3).
2. Ylläpito: milloin teema on viimeksi päivitetty? Teema, jota ei ole päivitetty viimeisen vuoden aikana, muodostaa riskin.
3. Lohko vai perinteinen: sopiiko se työskentelytapaasi? Lohkoteema, jos haluat pystyä muokkaamaan Sivustoeditorissa, perinteinen teema, jos haluat jatkaa olemassa olevaa sivustoa samalla tavalla.
4. Mitä se tuo mukanaan: teema, joka "osaa kaiken" (slider, portfolio, yhteydenottolomake, SEO) sitoo toiminnot teemaan. Kun vaihdat myöhemmin teemaa, menetät ne. Toiminnot kuuluvat lisäosiin, ulkoasu teemaan.
5. Saavutettavuus ja nopeus: wordpress.org:n teemahakemistossa voit suodattaa ominaisuuden "Toegankelijkheid gereed" (accessibility-ready) mukaan. Tarkista teeman demo PageSpeed Insightsilla (oppitunti 6.1).
6. Kieli: onko teema käännetty suomeksi, vai voitko muokata tekstejä itse?

Teeman vaihtaminen

Teemanvaihdossa sisältösi säilyy, mutta kaikki sen ympärillä muuttuu. Älä koskaan tee sitä suoraan live-sivustollasi:

• Kokeile uutta teemaa ensin Esikatselulla (kohdassa Ulkoasu > Teemat), tai vielä parempi, testiympäristössä (oppitunti 8.3).
• Tarkista sen jälkeen menut (oppitunti 4.3), vimpaimet, logo, etusivu ja artikkelityypit, joita vanha teema tarjosi (oppitunti 4.2).
• Vanhan teeman shortcodet näkyvät irrallisena tekstinä ([slider id="3"]) sivuillasi.

Yhteenveto

• Teema määrittää ulkoasun ja rakenteen; sisältö on erillään tietokannassa.
• Perinteiset teemat ovat PHP-sjabloneja, joita muokataan Mukautimella, vimpaimilla ja menuilla.
• Lohkoteemat rakentuvat lohkoista ja theme.jsonista, ja niitä muokataan Sivustoeditorissa; nämä muokkaukset tallentuvat tietokantaan.
• Sivubouwerit tarjoavat paljon, mutta sitovat sinut ja voivat tehdä sivustostasi raskaamman.
• Valitse teema alkuperän, ylläpidon ja yksinkertaisuuden perusteella; toiminnot kuuluvat lisäosiin, ei teemaan.

Tietovisa

Tehtävä

Tehtävä A5.1: Mitä teemaa sivustosi käyttää? Etsi etusivusi lähdekoodista (Ctrl+U) merkintää /wp-content/themes/ ja täytä sen teemakansion nimi, joka esiintyy useimmin. Jos käytät lapsiteemaa (oppitunti 5.2), täytä lapsiteeman kansio ja myös pääteeman kansio. Merkitse myös, onko kyseessä lohkoteema vai perinteinen teema, ja miten päättelit sen. Ohjelma lukee etusivun ja mainitun teeman style.css-tiedoston ja vertailee niitä.

Lue lisää

WordPressin omasta työskentelystä emme ole vielä kirjoittaneet omia artikkeleita; WordPressin viralliset dokumentaatiot ovat kattavat.

• Mikä on teema? (developer.wordpress.org, englanniksi): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
• Teemat wordpress.org:ssa: https://wordpress.org/themes/
• Sivustoeditori (wordpress.org, englanniksi): https://wordpress.org/documentation/article/site-editor/
• theme.json (developer.wordpress.org, englanniksi): https://developer.wordpress.org/themes/global-settings-and-styles/