Szablon Joomla Wprowadzenie
(źródło Joomla Polskie Centrum)

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.

 

Struktura katalogu szablonu

Zasugerowano, aby z tym artykułem lub z tą sekcją został połączony artykuł Typowy katalog szablonu. (dyskusja)

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:


Jak edytować pliki szablonu?

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.

 

Tworzenie podstawowego pliku templateDetails.xml

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.

Zobacz też

Tworzenie podstawowego pliku index.php

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>

Pełny kod źródłowy szablonu

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>