Najbardziej popularnym, wśród darmowych systemów CMS jest Joomla. Dzięki niej możemy bez przeszkód zarządzać treścią naszej strony, bez znajomości jakiegokolwiek języka, czy to xHTML, czy PHP. W internecie można znaleźć niezliczoną liczbę darmowych modułów, dodatków oraz szablonów. Te ostatnie często jednak nie zachwycają, więc warto pomyśleć nad własnym, niepowtarzalnym.
W tym artykule pokrótce przedstawię kolejne procesy tworzenia takiego szablonu. Do naszych testów polecam zainstalowanie gotowego pakietu Joomla, do zainstalowania na lokalnym komputerze. Można go pobrać TUTAJ.
Do przygotowania w pełni sprawnej paczki instalacyjnej naszego szablonu potrzebować będziemy łącznie 5 plików: index.php, templateDetails.xml, arkusz.css, favicon.ico oraz template_thumbnail.png (jako miniaturka szablonu). Najważniejsze z nich są pierwsze trzy. To w nich będziemy wprowadzać wszystkie zmiany.
Na pierwszy ogień idzie plik index.php. Tworzymy go na podstawie zwykłego xHTMLa. Pamiętajmy aby dokładnie przemyśleć miejsca, w których mają znaleźć się poszczególne odwołania dla wybranych modułów, menu, nagłówka i stopki. Nie będę zamieszczał całego listingu, lecz pokażę tylko gdzie i jak wstawić potrzebny nam kod. Zastąpmy więc całe HEAD naszej strony następującą treścią:
<?php // dostęp bezpośredni jest niedozwolony 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> <jdoc:include type="head" /> <link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="/templates/<?php echo $this->template ?>/arkusz.css" type="text/css" /> </head>
W miejscu gdzie wpisaliśmy:
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/arkusz.css" type="text/css" />
musimy podać nazwę naszego arkusza CSS, w tym przypadku nazywa się on po prostu arkusz.css.
Zajmijmy się teraz wstawianiem poszczególnych modułów. Załóżmy, że potrzebujemy tylko 3 miejsca:menu, left i footer. Aby Joomla mogła wstawić w nie potrzebne moduły powinniśmy użyć takiego kodu:
<jdoc:include type="modules" name="NAZWA" style="xhtml" />
W miejscu NAZWA wpisujemy odpowiedni tytuł naszej lokalizacji, np: left. Powinniśmy utworzyć jeszcze dwa takie kody, w miejscach na stopkę (footer) i nasze menu (menu). Frazy podane w nawiasach wpisujemy w miejsce NAZWA.
Najważniejszym elementem jest jednak miejsce na treść generowaną przez Joomla. Definiujemy je kodem:
<jdoc:include type="component" />
Index.php został już utworzony. W kolejnym kroku zajmiemy się plikiem templateDetails.xml
TemplateDetails.xml jest plikiem instalacyjnym. Powinniśmy zwrócić szczególną uwagę przy jego uzupełnianiu, ponieważ jakikolwiek błąd spowoduje brak możliwości zainstalowania szablonu. Zanim zaczniemy uzupełniać go treścią, utwórzmy sobie dodatkowy folder na obrazki, np. o nazwie images. W nim umieśćmy wszystkie pliki z grafikami. Nazwa tego folderu może być oczywiści inna. Jeżeli mieliście utworzonego go wcześniej, możecie przejść do kolejnego kroku. Przedstawiam listing kodu:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd"> <install version="1.5" type="template"> <name>english</name> <creationDate>19.05.2010</creationDate> <author>Michał Kortas</author> <authorEmail>michal@kortas.info</authorEmail> <authorUrl>http://www.kortas.info</authorUrl> <copyright>copyright ? www.kortas.info</copyright> <license>GPL</license> <version>1.0.0</version> <description>Nasz szablon Joomla</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename> <filename>favicon.ico</filename> <filename>design/top.jpg</filename> <filename>design/menu.jpg</filename> <filename>design/logo.jpg</filename> <filename>arkusz.css</filename> </files> <positions> <position>menu</position> <position>footer</position> <position>left</position> </positions> </install>
Omówię teraz poszczególne fragmenty. Na początku deklarujemy kodowanie, nazwę szablonu, datę powstania, autora, e-mail, stronę www, prawa autorskie, rodzaj licencji, wersję szablonu i opis. Pola te nie są obowiązkowe ale dobrym zwyczajem jest ich uzupełnienie.
Pomiędzy znacznikami:
<files></files>
musimy wpisać nazwy wszystkich plików wchodzących w skład naszego szablonu. Będą to pliki graficzne, arkusze CSS, itp.
Natomiast pomiędzy znacznikami:
<positions></positions>
deklarujemy nazwy pozycji w naszym szablonie. My ustaliliśmy tylko trzy: left, menu i footer, ale oczywiście może być ich więcej. Należy pamiętać, że muszą mieć takie same nazwy jakie podaliśmy w pliku index.php.
Dodatkowo powinniśmy się zająć uzupełnieniem pliku arkusz.css. Jednak nie będę przedstawiał tu żadnego kodu, ponieważ to od Was zależy jak sformatujecie stronę. Po wykonaniu szablonu Joomla generować będzie swoje klasy i identyfikatory więc powinniśmy przyjrzeć się kodu źródłowemu i wprowadzić odpowiednie dane do naszego arkusza CSS. Przy pierwszym szablonie będzie to metoda prób i błędów, jednak z czasem będziemy coraz lepiej wiedzieli za co odpowiada dane "id" lub "class".
Na sam koniec utwórzmy miniaturkę szablonu o wymiarach 200[px] x 200[px]. Dobrym zwyczajem jest również dodanie do strony tzw. faviconu, czyli miniaturowego loga o wymiarach 32x32[px] lub 16x16[px]. Obrazek ten musi mieć rozszerzenie .ico. Niektóre programy graficzne mają możliwość do zapisywania w tym formacie, jednak my możemy użyć generatora ikon online. Należy przygotować sobie obrazek z rozszerzeniem .jpg i odwiedzić stronę www.converticon.com. Jest to narzędzie do konwertowania plików graficznych. Jest ono proste w obsłudze i nikt nie powinien mieć z nim problemu.
Aby utworzyć gotowy szablon do instalacji, wszystkie pliki powinniśmy spakować w jedno archiwum ZIP. Dzięki temu będziemy mogli zainstalować go poprzez panel administracyjny, na każdej kopii Joomla.
Właściwie to już wszystko. Pozostaje nam tylko odpowiednie sformatowanie elementów strony i możemy ją wstawić do sieci. Najważniejszą rzeczą jest własne eksperymentowanie - metoda prób i błędów!