Odvodená šablóna: bezpečný spôsob úprav šablóny

Úprava vzhľadu webu často začína nenápadne. Zmeníte farbu hlavičky, doplníte vlastné CSS alebo upravíte rozloženie článku. Problém nastane pri aktualizácii šablóny – aktualizačný balík môže prepísať zmenené súbory a hodiny práce sú preč.

Riešením je odvodená šablóna, v anglickej dokumentácii označovaná ako child template. Umožňuje upravovať vzhľad a štruktúru Joomla webu bez priameho zásahu do súborov pôvodnej šablóny.

Odvodené šablóny boli zavedené v Joomla 4.1 a zostávajú súčasťou súčasných verzií Joomla. Oficiálna dokumentácia ich odporúča na uchovanie vlastných zmien mimo súborov rodičovskej šablóny.

Čo je odvodená šablóna

Odvodená šablóna je samostatná Joomla šablóna, ktorá využíva súbory inej – rodičovskej šablóny.

Po vytvorení nemusí obsahovať kompletnú kópiu všetkých súborov. Joomla automaticky načíta potrebné PHP, CSS, JavaScript a ďalšie súbory z rodičovskej šablóny. Do odvodenej šablóny sa ukladajú iba tie súbory, ktoré chcete doplniť alebo zmeniť.

Princíp fungovania je jednoduchý:

1. Joomla najskôr hľadá požadovaný súbor v odvodenej šablóne.
2. Ak ho nájde, použije túto upravenú verziu.
3. Ak v odvodenej šablóne nie je, načíta pôvodný súbor z rodičovskej šablóny.

Odvodená šablóna teda používa všetko z rodiča okrem súborov s rovnakým názvom, ktoré sa nachádzajú v jej vlastných priečinkoch. Súbory odvodenej šablóny nie sú pri bežnej aktualizácii Joomla prepísané.

Odborná literatúra k Joomla opisuje rovnaký princíp: základná odvodená šablóna môže na začiatku obsahovať iba súbor templateDetails.xml, zatiaľ čo všetky ostatné časti preberá z rodiča.

Prečo neupravovať pôvodnú šablónu

Priama úprava súborov rodičovskej šablóny je síce rýchla, ale z dlhodobého hľadiska riziková.

Aktualizácia môže prepísať napríklad:

• súbor index.php,
• hlavný CSS súbor,
• JavaScriptové súbory,
• rozloženia komponentov a modulov,
• súbory v priečinku html,
• nastavenia v súbore templateDetails.xml.

Po aktualizácii sa tak môže web vrátiť k pôvodnému vzhľadu alebo prestať správne fungovať. Správca potom musí zisťovať, ktoré zmeny zmizli, a opakovane ich vkladať do novej verzie šablóny.

Odvodená šablóna oddeľuje:

• originálny kód dodávateľa, ktorý možno aktualizovať,
• vlastné úpravy webu, ktoré zostávajú v samostatných súboroch.

Práve ochrana vlastných úprav pred aktualizáciami je hlavným dôvodom používania odvodených šablón.

Čo možno v odvodenej šablóne upraviť

Odvodená šablóna nie je určená iba na zmenu farieb. Môže obsahovať jednoduché vizuálne úpravy aj rozsiahlejšie zásahy do rozloženia webu.

Vlastné CSS štýly

Najčastejším použitím je vytvorenie súboru user.css alebo iného vlastného CSS súboru. Môžete v ňom upraviť:

• farby,
• písmo,
• veľkosti nadpisov,
• medzery medzi prvkami,
• vzhľad tlačidiel,
• hlavičku a pätičku,
• zobrazenie na mobilných zariadeniach.

Napríklad:

.container-header {
    background-color: #174f78;
    background-image: none;
}

h1,
h2,
h3 {
    color: #174f78;
}

.btn-primary {
    border-radius: 4px;
    font-weight: 600;
}

Oficiálny návod pre Cassiopeiu používa práve samostatný súbor user.css v odvodenej šablóne ako príklad vytvorenia vlastnej farebnej verzie webu.

Hlavná štruktúra stránky

Skopírovaním súboru index.php z rodičovskej šablóny do odvodenej šablóny možno meniť základnú štruktúru stránky.

Takto môžete:

• pridať novú oblasť webu,
• premiestniť hlavičku alebo pätičku,
• zmeniť poradie blokov,
• doplniť nové pozície modulov,
• upraviť načítanie CSS a JavaScriptu.

V odvodenej šablóne sa dá zmeniť aj zoznam pozícií modulov definovaný v súbore templateDetails.xml.

Vzhľad komponentov a modulov

Do priečinka html možno ukladať vlastné prepisy výstupu, teda template overrides.

Pomocou nich môžete upraviť napríklad:

• detail článku,
• blog kategórie,
• prihlasovací formulár,
• navigáciu medzi článkami,
• modul najnovších článkov,
• kontaktný formulár,
• stránkovanie alebo informačné hlášky.

Výhodou odvodenej šablóny je, že vlastný override zostáva oddelený aj v prípade, keď už rodičovská šablóna obsahuje svoj vlastný override. Odborné zdroje preto odporúčajú kombinovať odvodené šablóny s prepismi komponentov, modulov, pluginov a rozložení.

Vlastné obrázky, skripty a ďalšie súbory

Odvodená šablóna môže obsahovať aj:

• logá a ikony,
• obrázky pozadia,
• vlastný JavaScript,
• SCSS súbory,
• jazykové súbory,
• vlastné parametre šablóny,
• alternatívnu chybovú stránku.

Do nej však treba kopírovať iba súbory, ktoré skutočne meníte. Zbytočné kopírovanie celej šablóny by odstránilo jednu z jej hlavných výhod – jednoduchú údržbu.

Ako vytvoriť odvodenú šablónu v Joomla

Nasledujúci postup možno použiť napríklad pri predvolenej šablóne Cassiopeia.

1. Vytvorte zálohu

Pred úpravami vytvorte úplnú zálohu súborov a databázy. Pri dôležitom alebo už navštevovanom webe je vhodné postup najskôr vyskúšať na testovacej kópii.

2. Otvorte správu šablón

V administrácii Joomla prejdite do časti:

Systém → Šablóny webu

Názvy položiek sa môžu mierne líšiť podľa použitého jazykového balíka a verzie Joomla.

3. Otvorte rodičovskú šablónu

Kliknite na názov šablóny alebo na položku Detaily a súbory. Pri Cassiopeii pôjde o obrazovku s názvom podobným:

Cassiopeia – Detaily a súbory

4. Vyberte možnosť vytvorenia odvodenej šablóny

Na paneli nástrojov kliknite na tlačidlo:

Vytvoriť odvodenú šablónu
alebo
Create Child Template

Zadajte jej krátky názov, napríklad:

mojcms

Joomla môže výslednú šablónu pomenovať napríklad:

cassiopeia_mojcms

V poli doplnkových štýlov môžete pri jednoduchom vytvorení novej šablóny ponechať výber prázdny. Tento postup zodpovedá aktuálnemu návodu v oficiálnej používateľskej dokumentácii Joomla.

5. Skontrolujte vytvorené súbory

Nová odvodená šablóna bude spočiatku veľmi jednoduchá. Základom je súbor:

templateDetails.xml

V ňom sa nachádza aj odkaz na rodičovskú šablónu, napríklad:

<parent>cassiopeia</parent>

Ostatné súbory sa pridávajú až podľa potreby.

6. Vytvorte vlastný CSS súbor

V editore súborov šablóny vyberte možnosť vytvorenia nového súboru:

1. otvorte priečinok css,
2. ako názov zadajte user,
3. príponu nevpisujte do názvu,
4. ako typ vyberte .css,
5. súbor vytvorte a vložte doň vlastné štýly.

Výsledkom bude súbor:

media/templates/site/cassiopeia_mojcms/css/user.css

Presná cesta závisí od názvu rodičovskej a odvodenej šablóny.

7. Aktivujte vytvorený štýl

Odvodená šablóna môže byť:

• predvolenou šablónou celého webu,
• priradená iba vybraným položkám menu,
• použitá pre konkrétnu jazykovú verziu,
• použitá ako alternatívny dizajn určitej sekcie.

Vďaka tomu možno na jednej Joomla stránke vytvoriť viac vizuálnych variantov bez inštalácie viacerých úplných šablón.

Podporuje každá Joomla šablóna odvodené šablóny?

Nie. Rodičovská šablóna musí túto funkciu podporovať.

V jej súbore templateDetails.xml sa zvyčajne nachádza zápis:

<inheritable>1</inheritable>

Statické súbory, ako sú CSS, JavaScript, obrázky alebo SCSS, musia byť zároveň pripravené v štruktúre kompatibilnej s dedením. Cassiopeia túto podmienku spĺňa, ale pri šablónach tretích strán treba podporu overiť v dokumentácii výrobcu.

Niektoré komerčné šablóny a frameworky používajú vlastný systém:

• vlastné CSS alebo SCSS súbory,
• priečinok na používateľské úpravy,
• vlastný mechanizmus child template,
• administračné pole pre vlastný kód,
• export a import nastavení.

V takom prípade je vhodné dodržať odporúčaný postup autora šablóny a nekombinovať viac rôznych mechanizmov bez predchádzajúceho otestovania.

Odvodená šablóna, štýl šablóny alebo override?

Tieto pojmy sa často zamieňajú, ale každý označuje inú funkciu.

Pri menšej úprave farby môže stačiť vlastný CSS súbor. Pri zmenách štruktúry, module positions alebo väčšom množstve overrides je vhodnejšia odvodená šablóna.

Odvodená šablóna alebo úplná kópia šablóny

Pred zavedením odvodených šablón sa často vytvorila úplná kópia pôvodnej šablóny. Tento postup mal viac nevýhod:

• všetky súbory existovali dvakrát,
• kópia nedostávala opravy rodičovskej šablóny,
• bolo potrebné ručne porovnávať zmeny,
• údržba bola zložitejšia,
• starý kód mohol predstavovať bezpečnostné alebo kompatibilné riziko.

Odvodená šablóna uchováva iba zmenené súbory a ostatné preberá z aktualizovaného rodiča. Znižuje tak množstvo kódu, ktorý treba dlhodobo sledovať a udržiavať.

Najčastejšie chyby pri práci s odvodenou šablónou

Úprava nesprávnej šablóny

Po vytvorení odvodenej šablóny treba skontrolovať, či upravujete jej súbory, nie súbory rodiča.

Skopírovanie všetkých súborov

Kopírujte iba súbory, ktoré meníte. Každá skopírovaná položka prestáva používať aktualizovanú verziu z rodičovskej šablóny.

Zabudnuté priradenie štýlu

Odvodená šablóna môže byť vytvorená správne, ale na stránke sa neprejaví, pokiaľ jej štýl nenastavíte ako predvolený alebo ho nepriradíte k položke menu.

Úpravy priamo na ostrom webe

Chyba v index.php, PHP override alebo v konfigurácii assets môže znefunkčniť frontend. Väčšie úpravy preto robte na testovacej kópii.

Nekontrolované aktualizácie rodiča

Súbory odvodenej šablóny sa síce neprepíšu, ale rodičovská šablóna sa môže vývojom zmeniť. Starší override potom nemusí zodpovedať novému kódu.

Po každej väčšej aktualizácii preto skontrolujte:

• frontend webu,
• responzívne zobrazenie,
• formuláre,
• menu a moduly,
• konzolu prehliadača,
• PHP chybový protokol,
• zastarané overrides.

Bezpečný pracovný postup

Pri úpravách Joomla šablóny sa oplatí dodržať nasledujúce poradie:

1. vytvoriť zálohu,
2. pripraviť testovaciu kópiu webu,
3. overiť podporu odvodených šablón,
4. vytvoriť odvodenú šablónu,
5. upravovať iba jej súbory,
6. zaznamenať vykonané zmeny,
7. otestovať desktop aj mobil,
8. aktualizovať rodičovskú šablónu najskôr v testovacom prostredí,
9. porovnať staršie overrides s novými verziami súborov.

Záver

Odvodená šablóna je jeden z najbezpečnejších spôsobov, ako upravovať vzhľad Joomla webu. Umožňuje používať aktualizovanú rodičovskú šablónu a zároveň uchovať vlastné CSS, overrides, pozície modulov a ďalšie zmeny v samostatnej vrstve.

Nie je to iba ochrana pred prepísaním súborov. Odvodená šablóna zlepšuje prehľadnosť projektu, zjednodušuje údržbu a umožňuje presne rozlíšiť pôvodný kód od úprav vytvorených pre konkrétny web.

Platí však dôležité pravidlo: bezpečná pred aktualizáciou neznamená bezúdržbová. Po aktualizácii rodičovskej šablóny treba web otestovať a skontrolovať, či vlastné overrides zostávajú kompatibilné.