Teme: blok teme i klasične teme

Modul 5: Teme i dodaci · Vrijeme čitanja: 9 minuta

Cilj učenja: Nakon ove lekcije moći ćete objasniti razliku između blok tema i klasičnih tema te razumno odabrati temu.

Ključni pojmovi: tema, hijerarhija predložaka (template hierarchy), blok tema, predložak (template), dio predloška (template part), theme.json, Uređivač stranice, klasična tema, PHP predlošci, Prilagodnik (Customizer), widgeti, alat za izradu stranica (page builder), zaključanost na dobavljača (lock-in), mapa teme

Što tema radi

Tema određuje kako Vaša web-stranica izgleda i kako su stranice strukturirane: zaglavlje s logotipom i izbornikom, širinu sadržaja, fontove i boje, podnožje, izgled popisa objava ili rezultata pretrage. Sam sadržaj (Vaši tekstovi, stranice, slike) nalazi se u bazi podataka i ostaje sačuvan prilikom promjene teme.

Svaka tema nalazi se u vlastitoj mapi unutar wp-content/themes/, na primjer wp-content/themes/twentytwentyfive/. U toj mapi uvijek se nalazi style.css s zaglavljem na vrhu koje opisuje temu (naziv, verzija, autor). To ćete vidjeti u lekciji 5.2.

Od WordPressa 5.9 (početak 2022.) postoje dvije vrste tema i one stvarno rade drugačije.

Klasične teme

Jedna klasična tema sastoji se od PHP datoteka: header.php, footer.php, single.php, page.php, index.php i tako dalje. Koja se datoteka koristi za koju stranicu, određuje hijerarhija predložaka (lekcija 1.2). Prilagodbu obavljate:

• u Prilagodniku (Izgled > Prilagodi): logotip, boje, opcije koje tema nudi;
• pomoću widgeta (Izgled > Widgeti): blokovi u bočnoj traci ili podnožju;
• pomoću izbornika (Izgled > Izbornici, lekcija 4.3);
• u kodu, pomoću podređene teme (child theme) (lekcija 5.2).

Mnoge poznate teme (još) su klasične ili hibridne. Rade besprijekorno i bit će podržane još godinama.

Blok teme

Jedna blok tema sastavljena je od istih blokova kao i Vaš sadržaj. Tema sadrži:

• predloške (templates) kao HTML datoteke s blokovima, u mapi templates/: index.html, single.html, page.html, 404.html;
• dijelove predložaka (template parts) u mapi parts/: header.html, footer.html;
• theme.json s postavkama stila: paleta boja, fontovi, veličine fonta, širina sadržaja, razmak između blokova.

Mali isječak theme.json datoteke:

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

Prilagodbu obavljate u Uređivaču stranice (Izgled > Uređivač): uređujete zaglavlje, podnožje i predloške pomoću blokova, a pod Stilovi birate boje, fontove i razmake za cijelu web-stranicu.

Važna razlika koju morate znati: ono što prilagodite u Uređivaču stranice sprema se u bazu podataka, a ne u datoteke teme. Nadogradnja teme stoga ne prepisuje Vaše prilagodbe. No to također znači: prilagođeni predložak u bazi podataka ima prednost nad predloškom u temi. Ako autor objavi poboljšani predložak, nećete ga vidjeti dok postoji Vaša prilagođena verzija. U Uređivaču stranice možete "vratiti" predložak na verziju iz teme.

Alati za izradu stranica

Jedan alat za izradu stranica (page builder, poput Elementora, Divija ili WPBakeryja) je dodatak ili tema s vlastitim uređivačem u kojem stranice oblikujete povlačenjem elemenata. Popularni su jer nude mnogo mogućnosti bez pisanja koda. Budite svjesni nedostataka:

• Zaključanost na dobavljača (lock-in): oblikovanje se pohranjuje u vlastitom formatu (često shortcodes ili vlastiti podaci u wp_postmeta). Ako isključite taj alat, od Vaših stranica obično ostaje gomila kodova. Prelazak na drugo rješenje obično znači da morate sve ponovno izgraditi.
• Veće opterećenje: mnogi alati za izradu stranica učitavaju dodatne skripte i stilske datoteke na svakoj stranici. To može usporiti Vašu web-stranicu (modul 6).
• Još jedan element za održavanje, s vlastitim nadogradnjama i vlastitim sigurnosnim propustima.

Alat za izradu stranica nije pogrešan izbor, ali ga koristite svjesno. Za mnoge web-stranice ono što želite moguće je postići i blok temom i obrascima (patterns).

Odabir teme

Na što obratiti pažnju, ovim redoslijedom:

1. Podrijetlo: direktorij tema na wordpress.org (provjeren od strane volontera) ili poznati autor s vlastitom web-stranicom. Nikada "besplatna" kopija plaćene teme s neke stranice za preuzimanje: ona često sadrži stražnja vrata (backdoor) (lekcija 5.3).
2. Održavanje: kada je tema zadnji put ažurirana? Tema bez nadogradnji u posljednjoj godini postaje rizik.
3. Blok ili klasična: odgovara li Vašem načinu rada? Blok tema ako želite prilagođavati putem Uređivača stranice, klasična tema ako želite nastaviti postojeću web-stranicu na isti način.
4. Što tema nosi sa sobom: tema koja "sve može" (slider, portfolio, kontaktni obrazac, SEO) veže Vaše funkcije uz temu. Ako kasnije promijenite temu, izgubit ćete ih. Funkcije pripadaju u dodatke, oblikovanje u temu.
5. Pristupačnost i brzina: u direktoriju tema na wordpress.org možete filtrirati prema oznaci "Accessibility Ready" (spremno za pristupačnost). Pregledajte demo teme u PageSpeed Insights alatu (lekcija 6.1).
6. Jezik: je li tema prevedena na Vaš jezik, ili možete sami prilagoditi tekstove?

Promjena teme

Prilikom promjene teme Vaš sadržaj ostaje sačuvan, ali sve oko njega se mijenja. Nikada to ne radite nasumično na svojoj aktivnoj web-stranici:

• Isprobajte novu temu najprije pomoću Pretpregleda uživo (pod Izgled > Teme), ili još bolje u testnom okruženju (staging) (lekcija 8.3).
• Nakon toga provjerite izbornike (lekcija 4.3), widgete, logotip, naslovnu stranicu i vrste objava koje je stara tema koristila (lekcija 4.2).
• Shortcodes stare teme pojavit će se kao obični tekst ([slider id="3"]) na Vašim stranicama.

Sažetak

• Tema određuje oblikovanje i strukturu; sadržaj je odvojen i nalazi se u bazi podataka.
• Klasične teme su PHP predlošci, prilagođeni putem Prilagodnika, widgeta i izbornika.
• Blok teme su sastavljene od blokova i theme.json datoteke, a prilagođavaju se u Uređivaču stranice; te se prilagodbe spremaju u bazu podataka.
• Alati za izradu stranica nude mnogo, ali Vas vežu uz sebe i mogu usporiti Vašu web-stranicu.
• Birajte temu prema podrijetlu, održavanju i jednostavnosti; funkcije pripadaju u dodatke, a ne u temu.

Kviz

Zadatak

Zadatak A5.1: Koju temu koristi Vaša web-stranica? Potražite u izvornom kodu svoje naslovne stranice (Ctrl+U) /wp-content/themes/ i unesite naziv mape teme koja se najčešće pojavljuje. Ako koristite podređenu temu (child theme) (lekcija 5.2), unesite mapu podređene teme i mapu nadređene teme (parent theme). Unesite i je li riječ o blok temi ili klasičnoj temi, te kako ste to utvrdili. Program će pročitati naslovnu stranicu i style.css navedene teme te izvršiti usporedbu.

Dodatno čitanje

Za rad unutar samog WordPressa još nemamo vlastite članke; službena dokumentacija WordPressa vrlo je opsežna.

• Što je tema? (developer.wordpress.org, engleski): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
• Teme na wordpress.org: https://wordpress.org/themes/
• Uređivač stranice (wordpress.org, engleski): https://wordpress.org/documentation/article/site-editor/
• theme.json (developer.wordpress.org, engleski): https://developer.wordpress.org/themes/global-settings-and-styles/