Teemad: plokiteemad ja klassikalised teemad

Moodul 5: Teemad ja pluginad · Lugemisaeg: 9 minutit

Õpieesmärk: Pärast seda õppetundi oskad selgitada vahet plokiteemade ja klassikaliste teemade vahel ning valida teadlikult sobiva teema.

Põhimõisted: teema, mallihierarhia, plokiteema, mall (template), malliosa (template part), theme.json, Saidiredaktor, klassikaline teema, PHP-mallid, Kohandaja, moodulid, leheehitaja, lock-in, teemakaust

Mida teema teeb

Teema määrab, milline su veebisait välja näeb ja kuidas lehed on üles ehitatud: päis koos logo ja menüüga, sisu laius, fondid ja värvid, jalus, kuidas postituste loend või otsingutulemus välja näeb. Sisu ise (sinu tekstid, lehed, pildid) asub andmebaasis ja säilib teema vahetamisel.

Iga teema asub oma kaustas kausta wp-content/themes/ all, näiteks wp-content/themes/twentytwentyfive/. Selles kaustas on alati fail style.css, mille alguses on päis, mis kirjeldab teemat (nimi, versioon, autor). Seda näed lähemalt õppetunnis 5.2.

Alates WordPress 5.9-st (2022. aasta algus) on olemas kaks teemaliiki, ja need toimivad tõeliselt erinevalt.

Klassikalised teemad

Klassikaline teema koosneb PHP-failidest: header.php, footer.php, single.php, page.php, index.php ja nii edasi. Milline fail millise lehe jaoks kasutusele võetakse, määrab mallihierarhia (õppetund 1.2). Kohandamine toimub:

• Kohandajas (Välimus > Kohanda): logo, värvid, teema pakutavad valikud;
• moodulitega (Välimus > Moodulid): plokid külgribal või jaluses;
• menüüdega (Välimus > Menüüd, õppetund 4.3);
• koodis, alamteema (child theme) abil (õppetund 5.2).

Paljud tuntud teemad on (veel) klassikalised või hübriidsed. Need toimivad hästi ja neid toetatakse veel aastaid.

Plokiteemad

Plokiteema on üles ehitatud samadest plokkidest kui su sisu. Teemal on:

• mallid (templates) HTML-failidena koos plokkidega, kaustas templates/: index.html, single.html, page.html, 404.html;
• malliosad (template parts) kaustas parts/: header.html, footer.html;
• theme.json, mis sisaldab stiilisätteid: värvipalett, fondid, kirjasuurused, sisu laius, plokkidevaheline ruum.

Väike katke failist theme.json:

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

Kohandamine toimub Saidiredaktoris (Välimus > Redaktor): sa muudad päist, jalust ja malle plokkidega, ja valiku Stiilid all valid värvid, fondid ja ruumi kogu saidi jaoks.

Oluline erinevus, mida pead teadma: see, mida sa Saidiredaktoris muudad, salvestatakse andmebaasi, mitte teemafailidesse. Teema uuendus ei kirjuta seega su muudatusi üle. Kuid see tähendab ka seda, et andmebaasis olev kohandatud mall läheb teemas oleva malli ees. Kui autor avaldab täiustatud malli, siis sa ei näe seda, kuni sinu kohandatud versioon olemas on. Saidiredaktoris saad malli "taastada" teema versiooni juurde.

Leheehitajad

Leheehitaja (nagu Elementor, Divi või WPBakery) on plugin või teema, millel on oma redaktor, kus sa lehti lohistad ja kujundad. Need on populaarsed, kuna pakuvad palju võimalusi ilma koodita. Ole teadlik puudustest:

• Lock-in: vormindus on salvestatud oma vormingus (sageli lühikoodidena (shortcodes) või teemaspetsiifiliste andmetena väljas wp_postmeta). Kui lülitad ehitaja välja, jääb su lehtedest sageli järele koodide segadik. Üleminek tähendab tavaliselt kõige uuesti ülesehitamist.
• Raskem: paljud ehitajad laadivad igal lehel lisaskripte ja stiilifaile. See võib muuta su saidi aeglasemaks (moodul 6).
• Veel üks osa, mida tuleb jälgida, oma uuenduste ja omaette turvaaukudega.

Leheehitaja ei ole vale valik, aga tee see valik teadlikult. Paljude saitide jaoks saab sama tulemuse saavutada ka plokiteema ja mustrite abil.

Teema valimine

Millele tähelepanu pöörata, selles järjekorras:

1. Päritolu: wordpress.org teemakaust (vabatahtlike poolt kontrollitud) või tuntud autor, kellel on oma veebisait. Mitte kunagi "tasuta" koopiat tasulisest teemast allalaadimislehelt: see sisaldab sageli tagaukse (õppetund 5.3).
2. Hooldus: millal teemat viimati uuendati? Teema, mida pole viimase aasta jooksul uuendatud, muutub riskiks.
3. Plokk või klassikaline: kas see sobib sinu töötamisviisiga? Plokiteema, kui soovid kohandada Saidiredaktoris, klassikaline teema, kui soovid olemasolevat saiti samal viisil jätkata.
4. Mida see kaasa toob: teema, mis "teeb kõike" (slaider, portfoolio, kontaktivorm, SEO) seob su funktsioonid teemaga. Kui vahetad hiljem teemat, kaotad need. Funktsioonid kuuluvad pluginatesse, kujundus teemasse.
5. Ligipääsetavus ja kiirus: wordpress.org teemakaustas saad filtreerida omaduse "Ligipääsetavus valmis" (accessibility-ready) järgi. Vaata teema demot PageSpeed Insightsis (õppetund 6.1).
6. Keel: kas teema on tõlgitud sinu keelde või saad tekste ise kohandada?

Teema vahetamine

Teema vahetamisel jääb sisu alles, kuid kõik selle ümber muutub. Ära tee seda kunagi lihtsalt oma elavas saidil:

• Proovi uut teemat kõigepealt valikuga Eelvaade (Välimus > Teemad juures), või veel parem, testkeskkonnas (staging) (õppetund 8.3).
• Kontrolli seejärel menüüsid (õppetund 4.3), mooduleid, logo, avalehte ja postitustüüpe, mida vana teema pakkus (õppetund 4.2).
• Vana teema lühikoodid (shortcodes) ilmuvad su lehtedel lahtise tekstina ([slider id="3"]).

Kokkuvõte

• Teema määrab kujunduse ja ülesehituse; sisu asub eraldi andmebaasis.
• Klassikalised teemad on PHP-mallid, mida kohandatakse Kohandaja, moodulite ja menüüdega.
• Plokiteemad on üles ehitatud plokkidest ja failist theme.json ning neid kohandatakse Saidiredaktoris; need kohandused salvestatakse andmebaasi.
• Leheehitajad pakuvad palju, kuid seovad sind ja võivad muuta su saidi raskemaks.
• Vali teema päritolu, hoolduse ja lihtsuse põhjal; funktsioonid kuuluvad pluginatesse, mitte teemasse.

Test

Ülesanne

Ülesanne A5.1: Millist teemat sinu sait kasutab? Otsi oma avalehe lähtekoodist (Ctrl+U) stringi /wp-content/themes/ ja sisesta kõige sagedamini esineva teemakausta nimi. Kui kasutad alamteemat (child theme) (õppetund 5.2), sisesta alamteema kaust ja lapsikteema (parentteema) kaust. Märgi ka, kas tegemist on plokiteema või klassikalise teemaga ning kuidas sa selle kindlaks tegid. Programm loeb avalehe ja mainitud teema faili style.css ning võrdleb neid.

Lisalugemist

WordPressis endas töötamise kohta pole meil veel oma artikleid; WordPressi ametlik dokumentatsioon on põhjalik.

• Mis on teema? (developer.wordpress.org, inglise keeles): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
• Teemad wordpress.org-is: https://wordpress.org/themes/
• Saidiredaktor (wordpress.org, inglise keeles): https://wordpress.org/documentation/article/site-editor/
• theme.json (developer.wordpress.org, inglise keeles): https://developer.wordpress.org/themes/global-settings-and-styles/