Tvorba vlastních šablon a modulů v CMS: Rozšíření

CMS systémy (WordPress, Drupal, Joomla)
P. Varga
Tvorba vlastních šablon a modulů v CMS: Rozšíření

Proč vytvářet vlastní šablony a moduly v CMS

Vlastní šablony a moduly umožňují přizpůsobit CMS (WordPress, Drupal, Joomla) konkrétním potřebám bez kompromisů v použitelnosti, výkonu a bezpečnosti. Správný přístup spočívá v dodržování architektonických principů platformy (hooky, události, hierarchie šablon), zachování možnosti aktualizovat jádro a rozšíření a současném vytváření opakovaně použitelných komponent.

Architektonické rozdíly mezi WordPress, Drupalem a Joomlou

Oblast WordPress Drupal Joomla
Model šablon Hierarchie šablon, soubory php s get_template_part() Šablony Twig, theme hooky, .html.twig Override layoutů v templates/, JLayout
Rozšíření Pluginy (hooky, akce, filtry) Moduly (vlastní modul), pluginy (v Drupalu „module“), služby a routy Rozšíření: komponenty, moduly, pluginy
Konfigurace functions.php, Customizer, theme.json Správa konfigurace, YAML (info.yml, routing.yml) Manifest templateDetails.xml a manifest.xml u rozšíření
Datový model Typy příspěvků, taxonomie, metadata Entity/pole/balíčky, Views Články, K2 (rozšíření), kategorie, vlastní tabulky

Zásady tvorby šablon napříč platformami

  • Oddělení logiky od prezentace: v šablonách používejte minimum PHP; ve WordPressu využívejte krátké helpery, v Drupalu předávejte data přes preprocess, v Joomle pracujte s override layouty.
  • Komponentový přístup: vytvářejte opakovaně použitelné dílčí šablony (např. content-card, media, pagination).
  • Bezpečnost: důsledně escapujte výstupy (esc_html(), {{ variable|escape }}, JHtml::_()) a používejte nonce/CSRF tokeny ve formulářích.
  • Přístupnost (a11y): sémantické HTML, atributy role, dostatečný kontrast, stavy focus a přehledné pořadí prvků v DOM.
  • Výkon: kritické CSS v hlavičce, líné načítání médií, správná práce s cache a assety.

WordPress: tvorba šablony a child theme

  1. Struktura: minimálně style.css (hlavička s metadaty), index.php, případně functions.php a theme.json pro nastavení editoru bloků.
  2. Hierarchie šablon: specifické soubory pro typy obsahu (single-{post_type}.php), taxonomie (taxonomy-{taxonomy}.php), stránkování (archive.php), stránku 404 atd.
  3. Child theme: použijte pro úpravy šablony třetí strany. V style.css nastavte Template: na nadřazenou šablonu; v functions.php správně zařaďte do fronty styl nadřazené šablony.
  4. Blokový editor (Gutenberg): definujte barevné palety, rozestupy a typografii v theme.json; vlastní bloky publikujte jako plugin (odděleně od šablony).
  5. Hooky: používejte filtry a akce (např. pre_get_posts, the_content) k úpravě chování bez zásahů do jádra.

WordPress: tvorba pluginu (modulu)

  • Bootstrap: soubor s hlavičkou pluginu, registrace autoloaderu (PSR-4), register_activation_hook(), register_deactivation_hook().
  • CPT a taxonomie: registrujte pomocí register_post_type() a register_taxonomy(); dbejte na schéma REST API.
  • Bezpečnost: nonce ve formulářích (wp_verify_nonce), oprávnění (current_user_can), escapování výstupů.
  • Internacionalizace: __(), _e(), text domain a soubory .pot.
  • Nastavení: Settings API, vlastní stránky v administraci, sanitizace vstupů.

Drupal: tvorba tématu (theme)

  1. Manifest: soubor THEME_NAME.info.yml s knihovnami, regiony a závislostmi; assety deklarujte v .libraries.yml.
  2. Šablony: soubory .html.twig (např. node.html.twig, page.html.twig) s filtry Twig a bezpečným escapováním.
  3. Preprocess: v souboru .theme přidejte preprocess hooky (hook_preprocess_node()) pro přípravu proměnných do šablon.
  4. Regiony a bloky: definujte regiony v tématu; bloky umisťujte pomocí uživatelského rozhraní nebo synchronizace konfigurace.
  5. Podtéma: dědění od základního tématu (např. Stable, Classy) pro rychlý začátek.

Drupal: tvorba modulu

  • Struktura: MODULE_NAME.info.yml, MODULE_NAME.routing.yml, MODULE_NAME.permissions.yml, kontrolery v src/Controller, služby v MODULE_NAME.services.yml.
  • Hooky a události: implementace hook_form_alter(), hook_entity_view(), odběratel událostí pro události Symfony.
  • Entity a pole: definujte vlastní entity nebo rozšiřte existující; respektujte metadata cache (#cache – kontexty, tagy, maximální stáří).
  • Bezpečnost: Access Control Handlers, kontrola oprávnění v routách (_permission), CSRF tokeny ve formulářích.
  • Konfigurace: Configuration API, config schema pro validaci a export/import.

Joomla: tvorba šablony a override

  1. Struktura: adresář templates/THEME/ se soubory index.php, templateDetails.xml, adresáři css/js a jazykovými soubory.
  2. Override layoutu: kopírujte soubory view rozšíření do templates/THEME/html/com_component/view/ a upravujte je bez zásahu do rozšíření.
  3. Pozice modulů: definujte je v templateDetails.xml a používejte v layoutu; mapujte je na modulární obsah.
  4. JLayout: vytvářejte opakovaně použitelné layouty v layouts/ a vkládejte je pomocí JLayoutHelper::render().
  5. Joomla 4/5: využijte moderní Web Asset Manager pro registraci a správu závislostí JS/CSS.

Joomla: vlastní modul/komponenta

  • Modul: jednoduchý výstup tvořený souborem mod_modulename.php, třídou helper a layoutem; konfigurace v mod_modulename.xml.
  • Komponenta (MVC): modely, view a controllery; směrování přes router.php, ACL přes access.xml.
  • Plugin: reakce na systémové události (např. onContentPrepare), konfigurace v XML, priorita zásahů.

Styly, designový systém a práce s assety

  • Designové tokeny: barvy, typografii, rozestupy a stavy komponent definujte centrálně (JSON/YAML) a generujte je do proměnných CSS.
  • Build pipeline: Vite/webpack pro bundling, Autoprefixer, moderní moduly; ve WordPressu respektujte wp_enqueue_*(), v Drupalu libraries.yml, v Joomle Web Asset Manager.
  • Critical CSS a defer pro nepotřebné skripty; líné načítání obrázků a iframe prvků.

Vícejazyčná podpora (i18n) a lokalizace

  • WordPress: funkce __(), _x(), text domain, generujte .pot a distribuujte soubory .po/.mo.
  • Drupal: t() a překlady konfiguračních entit; Translation UI / Locale.
  • Joomla: jazykové soubory INI v language/, Text::_() v kódu.

Bezpečnostní zásady pro šablony a moduly

  • Escapování: ve WordPressu esc_html(), esc_attr(), v Drupalu Twig escapuje ve výchozím nastavení, v Joomle htmlspecialchars a helpery.
  • Nonce/CSRF: wp_nonce_field(), v Drupalu tokeny formulářového API, v Joomle JSession::checkToken().
  • Validace vstupů: sanitizace, typové kontroly, filtry; žádné přímé SQL (používejte ORM/DB API).
  • Oprávnění: capabilities ve WordPressu, oprávnění/role v Drupalu, Joomla ACL – kontrolujte před provedením akce.

Výkon a cache

  • Fragmentová cache: ukládejte části šablon do cache (WordPress transients, metadata Drupal #cache, pluginy cache v Joomle).
  • Stránková cache: reverzní proxy (Varnish/Nginx), CDN; zohledňujte varianty podle jazyka, role a cookies.
  • Efektivita databáze: omezte počet dotazů, načítejte data po dávkách, přidávejte indexy pro vlastní tabulky.

API a integrace

  • WordPress REST: registrujte vlastní endpointy (register_rest_route), kontrolujte permission callback.
  • Drupal JSON:API: standardní poskytování entit; případně vlastní controllery s access policies.
  • Joomla: od verze 4 REST API jádra; rozšiřte jej vlastními routami a ověřováním.

Testování, kvalita a CI/CD

  • Statická analýza: PHPStan/Psalm, ESLint/Stylelint, PHPCS se standardy WordPress/Drupal/Joomla.
  • Jednotkové a integrační testy: PHPUnit, v Drupalu Kernel/Functional tests, ve WordPressu testovací sada WP-CLI.
  • Vizuální regrese: nástroje typu BackstopJS pro porovnání vykreslení komponent.
  • CI/CD: sestavení, lintery, testy, zabalení do ZIP a nasazení; verzování šablon a modulů.

Distribuce a balení

  • WordPress: šablony jako ZIP archivy theme (bez zbytečně objemných závislostí vendor), pluginy se soubory readme.txt a assets pro repozitáře.
  • Drupal: moduly/témata se správnými soubory .info.yml, .libraries.yml, composer.json; respektujte schémata konfigurace.
  • Joomla: instalační balíčky se souborem manifest.xml; zachovávejte zpětnou kompatibilitu layoutů.

UX a přístupnost ve vlastních šablonách

  • Sémantika: používejte hierarchii nadpisů, atributy aria-*, popisky a texty sr-only pro čtečky obrazovky.
  • Ovládání klávesnicí: focus trap v modálních oknech, viditelný focus, odkazy pro přeskočení obsahu.
  • Barvy a kontrast: dodržujte WCAG 2.1 AA; definujte systémové odstíny pro různé stavy (hover/active/error).

Migrace a kompatibilita

  • WordPress: kompatibilita s blokovým editorem a klasickým editorem; připravte záložní styly a deklarace theme-support.
  • Drupal: mapování hooků mezi verzemi, cesta upgradu konfigurací, náhrady za zastaralé API.
  • Joomla: přechod z verze 3 na 4/5 (Web Asset Manager, jmenné prostory), kontrola starých událostí pluginů.

Licencování a právní aspekty

  • Licence open source: respektujte licenci GPL (WordPress/Joomla) a kompatibilitu závislostí.
  • Třetí strany: ověřte práva k fontům, ikonám a obrázkům; přiložte licence k balíčku.
  • GDPR: minimalizujte osobní údaje v šablonách a modulech, cookie banner používejte jen tehdy, když je skutečně potřeba.

Kontrolní seznam před uvedením do provozu

  • Žádné přímé úpravy jádra ani cizích rozšíření; vše řešte přes child theme/override/hooky.
  • Escapování všech proměnných, ochrana formulářů pomocí nonce/CSRF.
  • Optimalizované assety (minifikace, kombinování, lazy load), správná registrace v systému.
  • Cache a varianty podle jazyka/role; otestujte chování při vypnuté cache.
  • Pokrytí i18n, jazykové soubory a záložní varianty.
  • Automatizované testy a CI pipeline; verzování a changelog.

Závěr

Tvorba vlastních šablon a modulů v CMS vyžaduje pochopení architektury konkrétní platformy, důsledné zabezpečení a disciplínu při oddělování odpovědností. Dodržováním principů komponentového návrhu, správné práce s assety, přístupnosti a testování dosáhnete řešení, která jsou výkonná, udržitelná a snadno rozšiřitelná – a zároveň plně kompatibilní s aktualizacemi jádra i ekosystému rozšíření.