Šablony: blokové šablony a klasické šablony

Modul 5: Šablony a pluginy · Doba čtení: 9 minut

Cíl lekce: Po této lekci dokážete vysvětlit rozdíl mezi blokovými a klasickými šablonami a vybrat šablonu s rozmyslem.

Klíčové pojmy: šablona, hierarchie šablon (template hierarchy), bloková šablona, sjabloon (template), sjabloondeel (template part), theme.json, Úprava webu (Site-editor), klasická šablona, PHP šablony, Přizpůsobit (Customizer), widgety, paginabouwer, lock-in, adresář šablony

Co šablona dělá

Šablona určuje, jak Váš web vypadá a jak jsou stránky sestavené: hlavička s logem a nabídkou, šířka obsahu, písma a barvy, patička, jak vypadá přehled příspěvků nebo výsledek vyhledávání. Samotný obsah (Vaše texty, stránky, obrázky) je uložen v databázi a při výměně šablony zůstává zachován.

Každá šablona je uložena ve vlastním adresáři pod wp-content/themes/, například wp-content/themes/twentytwentyfive/. V tomto adresáři je vždy soubor style.css, který má nahoře hlavičku popisující šablonu (název, verze, autor). To uvidíte v lekci 5.2.

Od verze WordPress 5.9 (začátek roku 2022) existují dva druhy šablon a fungují skutečně odlišně.

Klasické šablony

Takzvaná klasická šablona se skládá z PHP souborů: header.php, footer.php, single.php, page.php, index.php a dalších. To, který soubor se použije pro kterou stránku, se řídí hierarchií šablon (lekce 1.2). Úpravy provádíte:

v nástroji Přizpůsobit (Vzhled > Přizpůsobit): logo, barvy, možnosti, které šablona nabízí;
pomocí widgetů (Vzhled > Widgety): bloky v postranním panelu nebo v patičce;
pomocí nabídek (Vzhled > Nabídky, lekce 4.3);
v kódu, pomocí podřazené šablony (child theme, lekce 5.2).

Mnoho známých šablon je (stále ještě) klasických nebo hybridních. Fungují bez problémů a ještě řadu let budou podporovány.

Blokové šablony

Takzvaná bloková šablona je sestavena ze stejných bloků jako Váš obsah. Šablona obsahuje:

sjablony (templates) jako HTML soubory s bloky, v adresáři templates/: index.html, single.html, page.html, 404.html;
sjabloondely (template parts) v adresáři parts/: header.html, footer.html;
soubor theme.json s nastavením stylu: barevná paleta, písma, velikosti písma, šířka obsahu, mezery mezi bloky.

Malá ukázka souboru 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 provádíte v nástroji Úprava webu (Vzhled > Editor): upravujete hlavičku, patičku a šablony pomocí bloků, a v nabídce Styly vybíráte barvy, písma a mezery pro celý web.

Důležitý rozdíl, který byste měli znát: co upravíte v nástroji Úprava webu, se ukládá do databáze, nikoli do souborů šablony. Aktualizace šablony tedy Vaše úpravy nepřepíše. Znamená to ale také: upravená šablona v databázi má přednost před šablonou obsaženou v šabloně webu. Pokud autor vydá vylepšenou šablonu, neuvidíte ji, dokud existuje Vaše upravená verze. V nástroji Úprava webu můžete šablonu „obnovit“ na verzi z šablony.

Paginabouwer (nástroje pro stavbu stránek)

Takzvaný paginabouwer (například Elementor, Divi nebo WPBakery) je plugin nebo šablona s vlastním editorem, ve kterém stránky skládáte přetahováním a graficky upravujete. Jsou oblíbené, protože nabízejí mnoho možností bez nutnosti psát kód. Uvědomte si ale jejich nevýhody:

Lock-in: formátování je uloženo ve vlastním formátu (často jde o shortcody nebo vlastní data v wp_postmeta). Pokud nástroj vypnete, z Vašich stránek obvykle zbude změť kódů. Přechod na jiné řešení obvykle znamená vše sestavit znovu.
Větší zátěž: mnoho těchto nástrojů načítá na každé stránce další skripty a styly. To může Váš web zpomalit (modul 6).
Další součást, o kterou se musíte starat, s vlastními aktualizacemi a vlastními zranitelnostmi.

Paginabouwer není špatná volba, ale měli byste ji zvolit vědomě. U mnoha webů lze toho, co chcete, dosáhnout i pomocí blokové šablony a vzorů (patterns).

Jak vybrat šablonu

Na co se zaměřit, v tomto pořadí:

Původ: adresář šablon na wordpress.org (kontrolovaný dobrovolníky) nebo známý autor s vlastním webem. Nikdy „zdarma“ kopie placené šablony ze stahovacího webu: ta často obsahuje zadní vrátka (lekce 5.3).
Údržba: kdy byla šablona naposledy aktualizována? Šablona bez aktualizace za poslední rok představuje riziko.
Bloková nebo klasická: odpovídá to způsobu, jakým chcete pracovat? Blokovou šablonu zvolte, pokud chcete upravovat v nástroji Úprava webu, klasickou šablonu, pokud chcete pokračovat ve stejném stylu jako u existujícího webu.
Co šablona obsahuje navíc: šablona, která „umí vše“ (slider, portfolio, kontaktní formulář, SEO), váže funkce na šablonu. Při výměně o ně přijdete. Funkce patří do pluginů, vzhled do šablony.
Přístupnost a rychlost: v adresáři šablon na wordpress.org můžete filtrovat podle vlastnosti „Přístupnost připravena“ (accessibility-ready). Podívejte se na ukázku šablony v nástroji PageSpeed Insights (lekce 6.1).
Jazyk: je šablona přeložená do Vašeho jazyka, nebo si můžete texty upravit sami?

Výměna šablony

Při výměně šablony zůstává Váš obsah zachován, ale vše kolem něj se mění. Nikdy to neprovádějte bez rozmyslu přímo na ostrém webu:

Vyzkoušejte novou šablonu nejprve pomocí funkce Aktuální náhled (u Vzhled > Šablony), nebo ještě lépe v testovacím prostředí (staging, lekce 8.3).
Poté zkontrolujte nabídky (lekce 4.3), widgety, logo, domovskou stránku a typy příspěvků, které poskytovala stará šablona (lekce 4.2).
Shortcody staré šablony se na stránkách zobrazí jako obyčejný text ([slider id="3"]).

Shrnutí

Šablona určuje vzhled a strukturu; obsah je uložen odděleně v databázi.
Klasické šablony jsou PHP šablony, upravované pomocí Přizpůsobit, widgetů a nabídek.
Blokové šablony jsou sestaveny z bloků a souboru theme.json a upravují se v nástroji Úprava webu; tyto úpravy se ukládají do databáze.
Paginabouwer nabízí mnoho možností, ale váže Vás a může Váš web zpomalit.
Šablonu vybírejte podle původu, údržby a jednoduchosti; funkce patří do pluginů, ne do šablony.

Kvíz

Úkol

Úkol A5.1: Jakou šablonu Váš web používá? Vyhledejte ve zdrojovém kódu Vaší domovské stránky (Ctrl+U) řetězec /wp-content/themes/ a vyplňte název adresáře šablony, který se vyskytuje nejčastěji. Pokud používáte podřazenou šablonu (child theme, lekce 5.2), vyplňte adresář podřazené šablony i adresář nadřazené šablony. Uveďte také, zda jde o blokovou nebo klasickou šablonu a jak jste to zjistili. Program načte domovskou stránku a soubor style.css uvedené šablony a provede porovnání.

Další čtení

Pro práci přímo ve WordPressu zatím nemáme vlastní články; oficiální dokumentace WordPressu je ale obsáhlá.

Co je šablona (theme)? (developer.wordpress.org, anglicky): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
Šablony na wordpress.org: https://wordpress.org/themes/
Úprava webu (Site-editor) (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/

Cookies na webu WebOké

Nastavení cookies

Nezbytné

Marketing