Podstawy tworzenia szablonu

Z Joomla!WikiPL

Spis treści

Wprowadzenie

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

Mergefrom.png
Zasugerowano, aby z tym artykułem zintegrować 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:

  • moj_nowy_szablon/
    • css/
      • style.css
    • images/
    • index.php
    • templateDetails.xml


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:

Nvu.jpg
  • Nvu: kompletny choć nierozwijany już program do tworzenia stron WWW, dostępny w wersjach dla Windows, Mac OS X, Linux, FreeBSD. Oferuje graficzny podgląd projektowanych stron, graficzny tryb podglądu kodu i tryb pracy z kodem źródłowym. Ma wbudowany edytor kaskadowych arkuszy stylów CSS oraz moduł synchronizacji z serwerem internetowym. Współdziała z walidatorem W3C. Dostępny jest w polskiej wersji językowej (http://www.nvu.pl). Czyż można marzyć o doskonalszym narzędziu za darmo? Zwłaszcza, że dodatkowo możesz pobrać z repozytorium specjalne rozszerzenie, samodzielnie tworzące pliki templateDetails.xml, template_css.css oraz foldery images i css. Dodatki w wersji polskiej dostępne są na stronie http://www.nvu.pl, a w wersji angielskiej, ale za to najnowszej, na stronie producenta pod adresem www.open4g.com (Download -> Mambo Template Builder i Joomla Template Builder).
  • Kompozer icon.png
    Kompozer: nieoficjalny następca edytora nierozwijanego od 2006 roku Nvu. Doskonały do pracy z plikami HTML i CSS. Możliwa jest edycja wielu dokumentów. Wbudowana obsługa FTP umożliwia edytowanie stron "w locie". Program można pobrać na stronie projektu.
  • Notepad++ opracowany dla programistów. Pozwala w jednym oknie wczytać wiele dokumentów. Koloruje składnię. Wyświetla prowadnicę wcięć i numery wierszy. Dostępny jest również w polskiej wersji językowej. Jest w porównaniu z Nvu uboższy, ale również posiada wszystko, czego potrzebujesz. Skrypt pobierzesz ze strony projektu (http://notepad-plus.sourceforge.net/uk/site.htm).
  • PSPad: rozbudowany, bogaty w możliwości konfiguracji edytor autorstwa czeskiego programisty Jana Fiały, przeznaczony do programowania w różnych językach - HTML, PHP, Pascal, JScript, VBScript, SQL, Perl. Ułatwia pracę nad projektami (grupowanie plików kodu źródłowego, równoczesna praca z wieloma plikami dowolnych rozmiarów, zapisywanie całej sesji i automatyczne otwieranie wszystkich plików redagowanych w ostatniej sesji). Oferuje szereg użytecznych funkcji, m.in. rejestrowanie sekwencji operacji jako makropoleceń, porównywanie plików z kolorowanym raportem wyników, możliwość wywoływania programów zewnętrznych, wbudowana obsługa FTP, wbudowana przeglądarka internetowa, sprawdzanie poprawności kodu HTML, CSS, eksportowanie z podświetlaniem w formacie RTF, HTML, TeX do pliku lub schowka, wyszukiwanie i zastępowanie, automatyczne korygowanie błędów, konwersja między różnymi kodowaniami.
  • Amaya: jest równocześnie wizualnym edytorem stron internetowych i przeglądarką. Stworzona przez W3C w 1996 jest aktualnie rozwijana także przez projekt WAM (Web, Adaptation and Multimedia ) w INRIA. Obsługuje XML i różne apliakcje XML-a, takie jak XHTML, MathML oraz SVG. Pozwala ona na jednoczesne edytowanie ich wszystkich w dokumentach złożonych. Jest dostępna na platformy Unix, Windows i Mac OS X. Niestety, wśród kilkunastu wersji językowych nie ma polskiej. Tłumaczenie dokumentu W3C o Amaya znajdziesz tutaj, a pakiet instalacyjny można pobrać na stronie projektu.
  • PHP Designer 2006 to kompletne studio programisty. Prostotą i wygodą przekonać może do siebie każdego. Wspomaga tworzenie dokumentów PHP, HTML, XHTML, PERL, JavaScript. Obsługuje CSS (CSS1 i CSS2), a także bazę danych MySQL. Sporym atutem programu jest wbudowany klient FTP. Umożliwia wybór znaczników PHP, HTML i CSS z podręcznej listy. Koloruje składnię. Posiada funkcję autouzupełniania i wiele innych przydatnych narzędzi. Możesz go pobrać z witryny projektu MPSoftware (http://www.mpsoftware.dk).

I propozycja walidatora CSS:

  • CSE HTML Validator pomoże ci sprawdzić zgodność z HTML, xHTML, CSS, a także – np. odnośniki w działającym serwisie. Pełna profesjonalna wersja kosztuje ok. 130$, ale możesz skorzystać z bezpłatnej wersji CSE HTML Validator-Lite dostępnej na stronie projektu pod adresem http://htmlvalidator.com.

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.

Zobacz też

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ż

Plik templateDetails.xml

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>


Podsumowanie

Na tej podstawie możemy stworzyć działający szablon. Oczywiście, nie będzie ani ładny, ani atrakcyjny. Najlepsze, co można teraz zrobić, to poeksperymentować z projektem układu.