Modul 5 · 5.1
Slovenčina
Témy: blokové témy a klasické témy
Modul 5: Témy a pluginy · Čas čítania: 9 minút
Cieľ lekcie: Po tejto lekcii dokážete vysvetliť rozdiel medzi blokovými témami a klasickými témami a vedome si vybrať tému.
Kľúčové pojmy: téma, hierarchia šablón (template-hiërarchie), bloková téma, šablóna (template), sjabloondeel (template part), theme.json, Editor stránky, klasická téma, PHP šablóny, Prispôsobenie (Customizer), widgety, nástroj na tvorbu stránok (paginabouwer), lock-in, priečinok témy
Čo robí téma
Téma určuje, ako vaša webová stránka vyzerá a ako sú zostavené stránky: hlavička s logom a ponukou, šírka obsahu, písma a farby, päta stránky, ako vyzerá prehľad článkov alebo výsledok vyhľadávania. Samotný obsah (vaše texty, stránky, obrázky) je uložený v databáze a pri zmene témy zostáva zachovaný.
Každá téma má svoj vlastný priečinok pod wp-content/themes/, napríklad wp-content/themes/twentytwentyfive/. V tomto priečinku sa vždy nachádza súbor style.css, ktorý má na začiatku hlavičku popisujúcu tému (názov, verzia, autor). To uvidíte aj v lekcii 5.2.
Od WordPressu 5.9 (začiatok roka 2022) existujú dva druhy tém a fungujú skutočne odlišne.
Klasické témy
Klasická téma pozostáva z PHP súborov: header.php, footer.php, single.php, page.php, index.php a podobne. Ktorý súbor sa použije pre ktorú stránku, určuje hierarchia šablón (lekcia 1.2). Úpravy robíte:
- v nástroji Prispôsobenie (Vzhľad > Prispôsobiť): logo, farby, možnosti, ktoré téma ponúka;
- pomocou widgetov (Vzhľad > Widgety): bloky v bočnom paneli alebo v päte stránky;
- pomocou ponúk (Vzhľad > Ponuky, lekcia 4.3);
- v kóde, pomocou podradenej témy (child theme, lekcia 5.2).
Mnohé známe témy sú (zatiaľ) klasické alebo hybridné. Fungujú spoľahlivo a budú podporované ešte roky.
Blokové témy
Bloková téma je zostavená z tých istých blokov ako váš obsah. Téma obsahuje:
- šablóny (templates) ako HTML súbory s blokmi, v priečinku
templates/:index.html,single.html,page.html,404.html; - časti šablón (template parts) v priečinku
parts/:header.html,footer.html; - súbor theme.json so štýlovými nastaveniami: farebná paleta, písma, veľkosti písma, šírka obsahu, odstupy medzi blokmi.
Malá ukážka theme.json:
{
"version": 3,
"settings": {
"color": {
"palette": [
{ "slug": "primair", "color": "#1e3a5f", "name": "Primair" },
{ "slug": "accent", "color": "#e8a33d", "name": "Accent" }
]
},
"layout": { "contentSize": "720px", "wideSize": "1200px" }
}
}Úpravy robíte v Editore stránky (Vzhľad > Editor): upravujete hlavičku, pätu a šablóny pomocou blokov, a v sekcii Štýly si vyberáte farby, písma a odstupy pre celú stránku.
Dôležitý rozdiel, ktorý by ste mali poznať: to, čo upravíte v Editore stránky, sa ukladá do databázy, nie do súborov témy. Aktualizácia témy teda vaše úpravy neprepíše. Znamená to však aj, že upravená šablóna v databáze má prednosť pred šablónou v téme. Ak autor vydá vylepšenú šablónu, neuvidíte ju, pokiaľ existuje vaša upravená verzia. V Editore stránky môžete šablónu „vrátiť“ na verziu z témy.
Nástroje na tvorbu stránok
Nástroj na tvorbu stránok (ako Elementor, Divi alebo WPBakery) je plugin alebo téma s vlastným editorom, v ktorom stránky skladáte presúvaním prvkov a vizuálne ich upravujete. Sú populárne, pretože ponúkajú veľa možností bez nutnosti písať kód. Uvedomte si však ich nevýhody:
- Lock-in: formátovanie je uložené vo vlastnom formáte (často shortcody alebo vlastné údaje v
wp_postmeta). Ak nástroj vypnete, z vašich stránok často zostane len neprehľadná zmes kódov. Prechod na iné riešenie zvyčajne znamená, že musíte všetko postaviť odznova. - Vyššia záťaž: mnohé nástroje načítavajú na každej stránke ďalšie skripty a štýly. To môže vašu stránku spomaliť (modul 6).
- Ďalšia súčasť, ktorú treba udržiavať, s vlastnými aktualizáciami a vlastnými bezpečnostnými rizikami.
Nástroj na tvorbu stránok nie je zlá voľba, ale vyberte si ho vedome. Pre mnohé webové stránky sa dá to, čo potrebujete, dosiahnuť aj pomocou blokovej témy a vzorov (patterns).
Výber témy
Na čo sa zamerať, v tomto poradí:
- Pôvod: priečinok tém na wordpress.org (kontrolovaný dobrovoľníkmi) alebo známy autor s vlastnou webovou stránkou. Nikdy nepoužívajte „bezplatnú“ kópiu platenej témy zo sťahovacej stránky: často obsahuje zadné vrátka (backdoor) (lekcia 5.3).
- Údržba: kedy bola téma naposledy aktualizovaná? Téma bez aktualizácií za posledný rok predstavuje riziko.
- Bloková alebo klasická: hodí sa k spôsobu, akým chcete pracovať? Blokovú tému zvoľte, ak chcete upravovať v Editore stránky, klasickú tému, ak chcete pokračovať v existujúcej webovej stránke rovnakým spôsobom ako doteraz.
- Čo so sebou prináša: téma, ktorá „zvládne všetko“ (slider, portfólio, kontaktný formulár, SEO), viaže funkcie na tému. Keď neskôr tému zmeníte, o tieto funkcie prídete. Funkcie patria do pluginov, vizuál do témy.
- Prístupnosť a rýchlosť: v priečinku tém na wordpress.org môžete filtrovať podľa vlastnosti „Prístupnosť pripravená“ (accessibility-ready). Pozrite si ukážku témy v PageSpeed Insights (lekcia 6.1).
- Jazyk: je téma preložená do vášho jazyka, alebo si texty môžete upraviť sami?
Zmena témy
Pri zmene témy zostáva obsah zachovaný, ale všetko okolo neho sa zmení. Nikdy to nerobte len tak na ostrej (živej) webovej stránke:
- Novú tému si najprv vyskúšajte pomocou Živého náhľadu (v sekcii Vzhľad > Témy), alebo ešte lepšie v testovacom prostredí (staging, lekcia 8.3).
- Následne skontrolujte ponuky (lekcia 4.3), widgety, logo, domovskú stránku a typy článkov, ktoré poskytovala stará téma (lekcia 4.2).
- Shortcody zo starej témy sa na vašich stránkach zobrazia ako samostatný text (
[slider id="3"]).
Zhrnutie
- Téma určuje vizuál a štruktúru; obsah je uložený samostatne v databáze.
- Klasické témy sú PHP šablóny, upravované pomocou Prispôsobenia, widgetov a ponúk.
- Blokové témy sú zostavené z blokov a súboru theme.json a upravujú sa v Editore stránky; tieto úpravy sa ukladajú do databázy.
- Nástroje na tvorbu stránok ponúkajú veľa možností, ale viažu vás na seba a môžu vašu stránku spomaliť.
- Tému vyberajte podľa pôvodu, údržby a jednoduchosti; funkcie patria do pluginov, nie do témy.
Kvíz
Úloha
Úloha A5.1: Je základ správne nastavený? V zdrojovom kóde svojej domovskej stránky (Ctrl+U) vyhľadajte reťazec /wp-content/themes/ a vyplňte názov priečinka témy, ktorý sa vyskytuje najčastejšie. Ak používate podradenú tému (child theme, lekcia 5.2), vyplňte priečinok podradenej témy aj priečinok nadradenej témy. Vyplňte tiež, či ide o blokovú alebo klasickú tému a ako ste to zistili. Program prečíta domovskú stránku a súbor style.css uvedenej témy a porovná ich.
Čítajte ďalej
Pre prácu priamo vo WordPresse zatiaľ nemáme vlastné články; oficiálna dokumentácia WordPressu je však rozsiahla.
- Čo je téma? (developer.wordpress.org, anglicky): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
- Témy na wordpress.org: https://wordpress.org/themes/
- Editor stránky (wordpress.org, anglicky): https://wordpress.org/documentation/article/site-editor/
- theme.json (developer.wordpress.org, anglicky): https://developer.wordpress.org/themes/global-settings-and-styles/