Teme: teme z bloki in klasične teme

Modul 5: Teme in vtičniki · Čas branja: 9 minut

Učni cilj: Po tej lekciji boste znali razložiti razliko med temami z bloki in klasičnimi temami ter boste znali smiselno izbrati temo.

Ključni pojmi: tema, hierarhija predlog, tema z bloki, predloga (template), del predloge (template part), theme.json, Urejevalnik spletišča, klasična tema, PHP-predloge, Prilagojevalnik, gradniki, orodje za izdelavo strani, lock-in, mapa teme

Kaj počne tema

Tema določa, kako je videti Vaše spletno mesto in kako so sestavljene strani: glava z logotipom in menijem, širina vsebine, pisave in barve, noga strani, videz pregleda prispevkov ali rezultatov iskanja. Vsebina sama (Vaša besedila, strani, slike) je shranjena v podatkovni bazi in ostane nespremenjena pri menjavi teme.

Vsaka tema je v svoji mapi pod wp-content/themes/, na primer wp-content/themes/twentytwentyfive/. V tej mapi je vedno datoteka style.css, na vrhu katere je glava, ki opisuje temo (ime, različica, avtor). To si boste ogledali v lekciji 5.2.

Od WordPressa 5.9 (začetek leta 2022) obstajata dve vrsti tem, ki delujeta resnično drugače.

Klasične teme

Ena klasična tema je sestavljena iz datotek PHP: header.php, footer.php, single.php, page.php, index.php in tako naprej. Katera datoteka se uporabi za katero stran, določa hierarhija predlog (lekcija 1.2). Prilagajate jo:

• v Prilagojevalniku (Videz > Prilagodi): logotip, barve, možnosti, ki jih ponuja tema;
• z gradniki (Videz > Gradniki): bloki v stranski vrstici ali nogi strani;
• z meniji (Videz > Meniji, lekcija 4.3);
• v kodi, s podrejeno temo (child theme) (lekcija 5.2).

Veliko znanih tem je (še vedno) klasičnih ali hibridnih. Delujejo odlično in bodo podprte še vrsto let.

Teme z bloki

Ena tema z bloki je sestavljena iz enakih blokov kot Vaša vsebina. Tema ima:

• predloge (templates) kot datoteke HTML z bloki, v mapi templates/: index.html, single.html, page.html, 404.html;
• dele predlog (template parts) v parts/: header.html, footer.html;
• datoteko theme.json z nastavitvami sloga: barvna paleta, pisave, velikosti pisav, širina vsebine, prostor med bloki.

Majhen delček theme.json:

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

Prilagajate jo v Urejevalniku spletišča (Videz > Urejevalnik): urejate glavo, nogo strani in predloge z bloki, pri Slogih pa izberete barve, pisave in prostor za celotno spletno mesto.

Pomembna razlika, ki jo morate poznati: kar prilagodite v Urejevalniku spletišča, se shrani v podatkovno bazo, ne v datoteke teme. Posodobitev teme torej ne prepiše Vaših prilagoditev. Vendar to pomeni tudi: prilagojena predloga v podatkovni bazi ima prednost pred predlogo v temi. Če avtor izda izboljšano predlogo, je ne boste videli, dokler obstaja Vaša prilagojena različica. V Urejevalniku spletišča lahko predlogo »ponastavite« na različico iz teme.

Orodja za izdelavo strani

Eno orodje za izdelavo strani (kot Elementor, Divi ali WPBakery) je vtičnik ali tema z lastnim urejevalnikom, v katerem s potegom oblikujete strani. Priljubljena so, ker ponujajo veliko možnosti brez kode. Zavedajte se slabosti:

• Lock-in: oblikovanje je shranjeno v lastni obliki (pogosto kratke kode ali lastni podatki v wp_postmeta). Če izklopite orodje, pogosto ostane od Vaših strani le zmešnjava kod. Prehod na drugo orodje običajno pomeni, da morate vse zgraditi znova.
• Večja obremenitev: veliko orodij naloži dodatne skripte in slogovne datoteke na vsako stran. To lahko upočasni Vaše spletno mesto (modul 6).
• Še en del, ki ga je treba vzdrževati, z lastnimi posodobitvami in lastnimi ranljivostmi.

Orodje za izdelavo strani ni napačna izbira, vendar jo naredite premišljeno. Za veliko spletnih mest je mogoče enako doseči s temo z bloki in vzorci.

Izbira teme

Na kaj bodite pozorni, v tem vrstnem redu:

1. Izvor: mapa tem na wordpress.org (preverjajo jo prostovoljci) ali znan avtor z lastnim spletnim mestom. Nikoli »brezplačna« kopija plačljive teme s spletnega mesta za prenose: ta pogosto vsebuje stranska vrata (lekcija 5.3).
2. Vzdrževanje: kdaj je bila tema nazadnje posodobljena? Tema brez posodobitev v zadnjem letu postane tveganje.
3. Bloki ali klasična: ali ustreza Vašemu načinu dela? Tema z bloki, če želite prilagajati v Urejevalniku spletišča, klasična tema, če želite obstoječe spletno mesto nadaljevati na enak način.
4. Kaj vse vključuje: tema, ki »zna vse« (drsnik, portfelj, kontaktni obrazec, SEO), veže funkcije na temo. Če kasneje zamenjate temo, jih izgubite. Funkcije sodijo v vtičnike, oblikovanje v temo.
5. Dostopnost in hitrost: v mapi tem na wordpress.org lahko filtrirate po lastnosti »Dostopnost pripravljena« (accessibility-ready). Oglejte si predstavitev teme v orodju PageSpeed Insights (lekcija 6.1).
6. Jezik: je tema prevedena v slovenščino, ali lahko besedila prilagodite sami?

Menjava teme

Pri menjavi teme vsebina ostane, spremeni pa se vse okoli nje. Tega nikoli ne počnite kar tako na svojem delujočem spletnem mestu:

• Novo temo najprej preizkusite s Predogledom v živo (pri Videz > Teme), ali še bolje v testnem okolju (staging) (lekcija 8.3).
• Nato preverite menije (lekcija 4.3), gradnike, logotip, domačo stran in vrste prispevkov, ki jih je ponujala stara tema (lekcija 4.2).
• Kratke kode stare teme se bodo na Vaših straneh prikazale kot navadno besedilo ([slider id="3"]).

Povzetek

• Tema določa oblikovanje in zgradbo; vsebina je shranjena ločeno v podatkovni bazi.
• Klasične teme so PHP-predloge, prilagajate jih s Prilagojevalnikom, gradniki in meniji.
• Teme z bloki so sestavljene iz blokov in theme.json, prilagajate jih v Urejevalniku spletišča; te prilagoditve so shranjene v podatkovni bazi.
• Orodja za izdelavo strani ponujajo veliko, vendar Vas vežejo nase in lahko upočasnijo Vaše spletno mesto.
• Temo izberite glede na izvor, vzdrževanje in preprostost; funkcije sodijo v vtičnike, ne v temo.

Kviz

Naloga

Naloga A5.1: Katero temo uporablja Vaše spletno mesto? V izvorni kodi domače strani (Ctrl+U) poiščite /wp-content/themes/ in vnesite ime mape teme, ki se pojavlja največkrat. Če uporabljate podrejeno temo (child theme) (lekcija 5.2), vnesite mapo podrejene teme in mapo nadrejene teme. Vnesite tudi, ali gre za temo z bloki ali klasično temo, in kako ste to ugotovili. Program prebere domačo stran in style.css navedene teme ter primerja.

Dodatno branje

Za delo v samem WordPressu nimamo še lastnih člankov; uradna dokumentacija WordPressa je obsežna.

• Kaj je tema? (developer.wordpress.org, v angleščini): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
• Teme na wordpress.org: https://wordpress.org/themes/
• Urejevalnik spletišča (wordpress.org, v angleščini): https://wordpress.org/documentation/article/site-editor/
• theme.json (developer.wordpress.org, v angleščini): https://developer.wordpress.org/themes/global-settings-and-styles/