Przed rozpoczęciem prac nad własnym szablonem przejrzałem sporo materiałów na temat szablonów Joomla oraz próbowałem wgryźć się w kod kilku szablonów
Celem tego poradnika jest wprowadzenie do projektowania szablonów dla Joomla! Przygotujemy niezbędne pliki z kodem potrzebne do stworzenia podstawowego szablonu. Kod zostanie zaprezentowany tak, że będzie można go skopiować i wkleić do własnego szablonu, a następnie wprowadzić potrzebne, ale nieznaczne modyfikacje.
Aby opracować najprostszy, podstawowy szablon, stwórz nowy katalog w katalogu "templates". Nazwij ten katalog tak, jak planujesz nazwać swój szablon, np. "moj_nowy_szablon".
Korzystając z ulubionego edytora tekstu (albo edytora html/php/xml/css takiego jak nVu czy Dreamweaver), stwórz pliki "index.php" oraz "templateDetails.xml".
Aby utrzymać pewien ład, załóż 2 nowe katalogi, nazywając je "images" oraz "css". W katalogu "css" stwórz plik nazwany "css.css".
To jest najbardziej podstawowa praktyczna struktura. Teoretycznie, można by jeszcze zrezygnować z katalogu i pliku arkusza stylów, ale osadzenie go wewnątrz pliku "index.php" powodowałoby niepotrzebnie nadmierną wielkość tego pliku, a tym samym przykre doświadczenia dla użytkowników.
Zarys struktury folderów i plików:
Dokumenty PHP, CSS czy JavaScript wykorzystywane w szablonach są plikami tekstowymi - mogą więc być tworzone i korygowane w dowolnym edytorze tekstowym nawet w Windowsowym programie Notatnik czy Linuksowym Editor. Ale edytory te nie są wygodne, nie wspomagają projektantów w żaden sposób, a ponadto - jak np. Notatnik mogą czasem powodować problemy zaskakujące niedoświadczonych użytkowników (w niektórych wersjach Notatnik wykrywa kodowanie utf-8 i - podczas zapisywania pliku - dodaje znacznik wykrytego kodowania, powodujący nieprawidłową interpretację skryptów, np. PHP że niektóre skrypty przeczytaj o wskaźniku BOM).
Dlatego bezpieczniej, a przede wszystkim wygodniej jest posługiwać się edytorami opracowanymi specjalnie dla projektantów stron internetowych czy programistów. Może to być jeden z programów komercyjnych, takich jak Adobe Dreamweaver (dawniej Macromedia Dreamweaver) - http://www.adobe.com/products/dreamweaver/, czy też nie tak drogi, a bogaty w możliwości polski Pajączek - http://www.pajaczek.pl/index.php. Profesjonalne oprogramowanie jednak kosztuje. A nie jest to jedyny wybór. Istnieją wyśmienite programy wolnodostępne. Oto kilka propozycji:
I propozycja walidatora CSS:
Osobom zasobniejszym czy profesjonalnym firmom warto polecić bardzo dobry edytor Style Master CSS Editor dostępny także w wersji demonstracyjnej na stronie http://westciv.com.
Plik templateDetails.xml jest niezbędny. Bez niego Twój szablon nie będzie widziany przez Joomla!. Plik ten zawiera metadane o szablonie.
Spójrz na przykład:
<?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>mynewtemplate</name> <creationDate>2008-05-01</creationDate> <author>John Doe</author> <authorEmail>john@example.com</authorEmail> <authorUrl>http://www.example.com</authorUrl> <copyright>John Doe 2008</copyright> <license>GNU/GPL</license> <version>1.0.2</version> <description>My New Template</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename> <filename>images/background.png</filename> <filename>css/css.css</filename> </files> <positions> <position>breadcrumb</position> <position>left</position> <position>right</position> <position>top</position> <position>user1</position> <position>user2</position> <position>user3</position> <position>user4</position> <position>footer</position> </positions> </install>
Jak widzisz mamy tutaj zbiór informacji dotyczących szablonu zawartych między znacznikami ( <files>, <positions>... ). Możesz skopiować to i wkleić do Twojego pliku "templateDetails.xml", a następnie pozmieniać odpowiednie informacje (takie jak <name> <author> ).
Część <files> powinna zawierać listę wszystkich plików, z jakich korzysta szablon - prawdopodobnie jeszcze nie wiesz jak się one nazywają - bez obaw, uaktualnisz to później.
Pozostaw wyszczególniony tu zestaw pozycji - to powszechnie stosowany zestaw pozycji w szablonach, dzięki któremu łatwo przełączać się między różnymi szablonami.
Plik index.php jest trzonem każdej strony generowanej przez Joomla! Zasadniczo tworzymy ten plik tak, jakbyśmy kodowali stronę w HTML, ale w miejscach, w których mają się znaleźć treści witryny umieszczamy nim kod PHP. Tutaj zamieszczamy podstawę pliku index.php do skopiowania i wklejenia w swoim projekcie szablonu.
Rozpocznijmy od początku:
<?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; ?>" >
Pierwsza linia powstrzymuje niegrzecznych ludzi od podpatrywania twojego kodu i realizacji innych nieprzyjaznych zamiarów. Linia druga mówi przeglądarce oraz serwisom wyszukiwawczym i indeksującym, z jakim rodzajem dokumentu mają do czynienia. Linia trzecia określa, w jakim języku napisano stronę.
Teraz rzeczywisty nagłówek:
<head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/moj_nowy_szablon/css/css.css" type="text/css" /> </head>
Pierwsza linia powoduje umieszczenie w nagłówku dokumentu poprawne informacje o dokumencie. Zawierają one tytuł strony, metadane oraz połączenia z systemowym arkuszem stylów i skryptami JavaScript. Druga linia tworzy łącze do arkusza stylów strony. Wymaga modyfikacji dostosowującej nazwę, która ustalisz dla swego szablonu.
Teraz kod części głównej:
<body> <jdoc:include type="modules" name="top" /> <jdoc:include type="component" /> <jdoc:include type="modules" name="bottom" /> </body>
Niesamowite, ale tyle wystarczy. To jest podstawowy, bardzo prosty kod, ale wykona całą niezbędną pracę, by witryna ujrzała światło dzienne. Wszystko inne wykona Joomla! Zwróć jedynie uwagę, że w pozycji nazwanej "top" trzeba będzie umieścić moduł głównego menu. module position
Na zakończenie - ostatni fragment:
</html>
A oto pełny kod źródłowy przykładowego szablonu:
<?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> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mojnowyszablon/css/css.css" type="text/css" /> </head> <body> <jdoc:include type="modules" name="top" /> <jdoc:include type="component" /> <jdoc:include type="modules" name="bottom" /> </body> </html>
<?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> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mojnowyszablon/css/css.css" type="text/css" /> </head> <body> <jdoc:include type="modules" name="top" /> <jdoc:include type="component" /> <jdoc:include type="modules" name="bottom" /> </body> </html>