Šablony pro Joomlu od A do Z

Úvodní strana \ Joomla \ Články \ Šablony pro Joomlu od A do Z

Úterý, 20 Leden 2009 21:24

Dnes si řekneme všechno o šablonách pro RS Joomla. Co to vlastně tamplate, nebo chcete-li šablona je? Je to php soubor a soubor s kaskádovými styly, které udávají vzhled naší stránky. Zapsán je v jazyku HTML, CSS a částečně php. Znalost php však není pro tvorbu šablony nijak důležitá.

Šablony pro Joomlu jsou dvojíhu druhu. Šablony pro frontend a backend, neboli pro administrátorské rozhraní a pro samotné stránky. Je zřejmé, že nás budou zajímat ty šablony, udávající vzhled stránky. Tvorba šablony pro administrátorské rozhraní se hodí například jen při tvorbě vlastní komponenty.

Šablony pro frontend

Na internetu existuje mnoho pěkných šablon ať už placené, nebo zadarmo. Chcete-li však mít Váš web originální, je lepší si vlastní šablonu vytvořit.

Instalace šablony

Začneme nejprve u šablon, které jsme si stáhli z internetu. Jejich instalace je velice snadná v administračním rozhraní zvolíme Extensions>Install/Uninstall (Rozšíření>Instalace/Odinstalce), kde zvolíme cestu k zabaléné šabloně ve formátu zip a klikneme na tlačítko Upload File & Install (Nahraj soubor a nainstaluj). Měla by se nám zobrazit informace o úspěšné, či neúspěšném nainstalování.

Odinstalování šablony

Pokud nějakou šablonu nechceme používat a zabírá nám zbytečně místo. Můžeme ji snadno odinstalovat. Opět zvolíme Extensions>Install/Uninstall (Rozšíření>Instalace/Odinstalce) a v menu Rozšíření zvolíme Templates (Šablony). Zvolíme naši šablonu, kterou chceme odinstalovat a klikneme na Uninstall (Odinstalování). Pokud je šablona šedá a nedá se na ni kliknout, je zřejmě zrovna nastavená jako základní a pro její odinstalování musíte nejřív zvolit jinou, o tom si povíme za chvíli. Nyní sme odebrali šablonu z databáze. Soubory ovšem stále zůstali na disku. Ty se nacházejí ve složce Templates>Název šablony kde je můžeme smazat.

Správce šablon

Po úspěšné instalaci, odinstalaci se můžeme vrhnout na správu šablon. Klikneme na Extensions>Template Manager (Rozšíření>Správce šablon). Zde vidíme všechny šablony pro stránky. Ta která se právě zobrazuje na stránkách má u sebe hvězdičku. Přiřazení jiné šablony provedeme označením šablony a kliknutím na hvězdičku vpravo nahoře s názvem Default. Ve správě šablon můžeme také samotnou šablonu editovat. Označíme si ji a klikneme na Edit (Editovat). Zobrazí se nám základní informace o šabloně. Název a popis a další údaje. Pokud chceme šablonu změnit, klikneme buďto na Edit CSS, nebo Edit HTML. Zde můžeme měnit strukturu, barvy, odsazení, řádkování atd. O tvorbě šablon si povíme za chvilku.

Instalace šablony pro Joomlu 1.0 do Joomly 1.5

Jak jistě víte Joomla má dvě základní verze, které se od sebe dost liší. Liší se natolik, že šablony pro Joomlu 1.0 "nefungují" v 1.5. Nefungují v uvozovkách. To se dá obejít. Musíme zapnout tkz. Legacy mód. Vždy je lepší mít ho vypnutý, ale pokud máme nějakou starší šablonu již koupenou, nebo navrhnutou a nechceme ji předělávat hodí se nám ho zapnout. Najedeme do Extensions>Plugin Manager (Rozšíření>Správce pluginů) kde vyhledáme tento řádek - System - Legacy, u tohoto řádku by mělo být červené kolečko s křížkem. Klikneme na něj a změní se nám na Zelené "zaškrtnuto". Nyní by nám měla jít šablona nainstalovat.

Tvorba vlastní šablony

Pokud chceme vytvářet vlastní šablonu a nikdy předtím jsme to nedělali, je nejlepší použít nějakou stávající nainstalovanou šablonu a upravovat ji. Tím nám odpadnou problémy s vytvářením celé struktury adresářů a XML souboru. HTML kód se vždy nachází v souboru index.php. Otevřeme si ho a pustíme se do toho.

Začneme hlavičkou. Nejprve praktická ukázka:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>

<meta name="author" content="Petr Klas" />                
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="3 days" />  

<?php
$headerstuff = $this->getHeadData();
$headerstuff['title'] = $headerstuff['title']." - Klas webdesign - tvorba www stránek, grafika, programování";
$this->setHeadData($headerstuff);
?>
<jdoc:include type="head" />

<link href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_css.css" rel="stylesheet" type="text/css" />
<link href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/editor.css" rel="stylesheet" type="text/css" />


</head>

Začínáme vždy definováním _JEXEC jako vždy. Tato část se musí vkládat vždy. Poté klasicky definujeme Doctype a napíšeme <html> tag, jak vidíte v definici jazyka používáme proměnou language, pro jednojazyčný web, ji můžeme vepsat ručně, pro vícejazyčný, nám Joomla ušetří práci a sama ho napíše za nás. Následují klasické metatagy autor a roboti. Dále vidíme kus php kódu, který běžně v šabloně nenajdeme. Způsobuje, že do title názvu přidá námi zvolený řetěze. $this->getHeadData(); vezme současný název hlavičky, $headerstuff['title'] = $headerstuff['title']." - Klas webdesign - tvorba www stránek, grafika, programování"; přidá náš požadovaný text. Pokud se kouknete do záhlaví této stránky uvidíte jak to funguje. Následuje tag přednastavený joomlou jdoc, tím vždy začínají funkce joomly. include type="head" nám říká že chcem vložit hlavičku. Do stránky se zapíše námi zvolený title, kódování, klíčová slova a popis stránky, které si volíme v administrátoru. Nyní ještě musíme přiřadit cestu k css souboru. Proměnná baseurl udává název domény, template název adresáře naší šablony. Vše můžeme samozřejmě vypisovat ručně. Všimněme si ještě jedné dost podstatné drobnosti. Udávám cestu ještě k jednomu css souboru (editor.css). Všechny třídy které zde nadefinujeme se nám zobrazí v TinyMCE editoru v administračním rozhraní při psaní článku. Nadefinujeme-li si tedy třídu .odsazeny a nastavýme ji padding, při psaní článku poté můžeme označit text, nahoře vedle zarovnání textu vybereme z roletového menu název naší třídy a text bude odsazený. Ještě bych chtěl upozornit že díky cachování se třída z editor.css může v administračním rozhraní objevit o něco později.

Nyní přejdeme k samotnému obsahu. Začneme opět ukázkou

<body>

<div id="header">
<div id="logo">
<h1><a href="/index.php" title="Klas design">Klas design</a></h1>

</div>
<div id="menu">
 <div id="menubtn"><img src="/templates/klasdesign/images/btnhome.gif" title="" id="btns" /></div>-->
    <div id="menutext">
<strong><jdoc:include type="modules" name="top" style="xhtml" /></strong>

      <br style="clear: right" />

</div>

</div>
<br class="clr" />

<div id="obsah">

<div id="hlavni">

<strong><jdoc:include type="component" /></strong>

</div>

<div id="pravy">

<div class="pravy-top">novinky</div>
<strong><jdoc:include type="modules" name="user4" style="xhtml" /></strong>

<strong><?php
if($this->countModules('user2')){
?>
<div class="pravy-top">kontakt</div>
<?php
}</strong>

 ?><strong>
<jdoc:include type="modules" name="user2" style="xhtml" /></strong>
</div>
<br class="clr" />

</div>

</body>
</html>

Kód začínáme klasickými HTML značkami. Důležité části jsou zvýrazněné. Jako první vidíme <jdoc:include type="modules" name="top" style="xhtml" /> To nám říká že na toto místo budeme vkládat nějaký modul. Pozice se nazývá top, v našem případě zde bude menu. <jdoc:include type="component" /> je hlavní částí a mozek kódu. Zde se budou nacházet všechny články a komponent. Dále vkládáme modul s pozicí user4, a nyní ještě další zajímavá věc. Podmínka v šabloně. Ta nám v našem případě říká, že pokud bude pozice user2 obsahovat nějaký modul, vloží se část HTML kódu. Pokud žádný modul nebude vložen, nic se nestane. To je dobré v případě, že máme modul zobrazený jen na určitých stránkách. V našem případě máme na pozici user2 kontaktní formulář, pokud ze zrovna zobrazen do kódu se navíc zapíše slovo "kontakt" který je nastylovaný třídou pravy-top.

Názvy pozic modulů udává XML soubor šablon.

A poslední rada pro dnešek. Joomla v obsahu článků stále používá tabulkového layoutu, pokud chceme celé stránky jen pomocí divů můžeme si opravit soubor v adresáři Components>com_content>views>article>tmpl>default.php

Doporučuji ovšem soubor předem zálohovat :)

Komentáře (7)

Ahoj,

za pokus to stojí, ale pochybuju, že ti někdo pomůže, rozhodně to není práce na 5 minut. Pokud to má aspoň trochu graficky vypadat je to práce na až desítky hodin.

Asi nejlepší bys měl stáhnout nějakou šablonu a předělat ji, aby to nikdo nepoznal.

"Na závěr ještě napíšu slova která jsou povolena pro pozice modulů:", neviem ako si to myslel. Ale pozicie si mozes vytvorit ake chces...

Trebars aj HorneMenu a pod.

Dobrý deň potreboval by som od Vás či by ste mi nepomohli so šablonou na joomlu 1.5.23 mam to ako zadanie na VŠ aby som dostal zápočet snažil som sa to robiť ale mi to stale nieako nejde preto by som Vás chcel poprosiť či by ste mi to nespravili pre Vás to bude hračka na 5 min.....potrebujem veľmi jednoduchu šablonu na ktorej sa bude nachadzať :
V redakčnom systéme Joomla vytvorte šablónu pre základnú alebo strednú školu. Čo by mala šablona obsahovať:

* hlavička - v hlavičke bude názov školy s jej logom. Rozmiestnenie a veľkosť ponechávam na vás.
* horené menu - v hornom menu sa môže nachádzať niekoľko odkazov. Ak by ste mali inú predstavu, vaša šablona nemusí obsaovať horné menu.
* ľavá strana - v ľavej strane stránky sa bude nachádzať hlavné menu. Aby ste si nemuseli lámať hlavu s jeho položkami, uvádzam príklad: Domov, Aktuality, Rozvrh, Zamestnanci, Školský klub, Fotogaléria, Kontakt, Profil školy, organizácia šk. roka, atď. Okrem hlavného menu sa tu môžu nachádzať napríklad logá inštitúcií, s ktorými škola spolupracuje, zaujímvé linky a pod.
* navigácia - alebo tiež nazývaná časť breadcrumbs, ktorá zobrazuje linky na predchádzajúce stránky sa bude nachádzať medzi a hlavičkou.
* pravá strana - na pravej strane sa môžu zobrazovať moduly ako napr. náhodný obrázok, aktuálne počasie a iné. Ak chcete ušetriť miesto, prípadne vám k vášmu návrhu nevyhovuje umiestnenie pravej strany do šablony, tak vaša šablona pravú stranu obsahovať nemusí.
* telo -v tele sa budú otvárať všetky stránky
* päta - mala by obsahovať informácie o poslednej aktualizácii a autoroch stránky

bohužial neviem si dať s tym radi ak by sa mi dalo pomôct bol by som velmi rad a už vopred Vám dakujem a nehnevajte sa že som s týmto otravoval

Ďakujem
michal

Samozrejme je to vec vlastniho nazoru, nekdo si muze vkladat primo nazev sablony, ale ja napriklad delam nekolik sablon mesicne, a hlavicku vzdy jen kopiruju, proto tam mam tu promenou, abych se s tim nemusel stale predelavat

NEchapem naco pouzivat tuto promennu. Ked robim sablonu, tak asi viem ako sa bude volat.

Tak myslim ze by stacilo aj ./template/mojasabona/css/styl.css

Akurat myslim ze je dobre pouzivat this->baseurl, ze ta promenna si domysli url. Napr. ked som na localhoste.

Ano, tady mam chybu, pozice jsou takove jake si definujes v XML souboru. Uz jsem to opravil

"Na závěr ještě napíšu slova která jsou povolena pro pozice modulů:", neviem ako si to myslel. Ale pozicie si mozes vytvorit ake chces...

Trebars aj HorneMenu a pod.