: Home / Joomla / spis treści / Artykuły / Jak stworzyć własny szablon dla Joomla 1.5? Tutorial!
Jak stworzyć własny szablon dla Joomla 1.5? Tutorial!
Ocena użytkowników: / 21
SłabyŚwietny 
Wpisany przez Paweł Kuptz   
sobota, 17 października 2009 14:18

Jak stworzyć własny szablon dla Joomla 1.5?

Na czym polega fenomen Joomli? Na prostocie i funkcjonalności. I te dwie cechy łączą się również przy projektowaniu własnych szablonów pod ten CMS. A więc do rzeczy…

Co nam będzie potrzebne do stworzenia własnej, autorskiej templatki? Jakie wymagania stawia Joomla? Otóż bardzo niewielkie – wystarczy znajomość HTML + CSS. Pisząc ten tutorial, zakładam iż właśnie minimum te dwa języki znasz, i biegle się nimi posługujesz.


A więc po kolei…
 
Struktura budowy szablonu dla Joomli 1.5 jest następująca:
    · folder „template” :Struktura Joomla
o index.php
o index.htm
o templateDetails.xml
o template_thumbnail.png
 
o podfolder „css” :
 
§ podfolder „images” 
§ template.css

 

 

 

Wyjaśnienia:
  • index.php – główny plik szablonu, zawiera całą strukturę strony (nasz kod HTML + wstawki PHP w miejscach, gdzie ma się pojawiać treść generowana przez Joomlę)
  • index.htm – plik opcjonalny, lecz zalecany ze względów bezpieczeństwa. Zawiera jedynie kilka linijek kodu.
  • templateDetails.xml – bardzo ważny element szablonu, zawiera wskazówki (i nie tylko) dla Joomli podczas instalacji szablonu.
  • template_thumbnail.png – miniaturka graficzna
  • template.css – deklaracje stylów w języku CSS, umieszczone w podfolderze „css”
Tła, bannery i inne pliki graficzne umieszczamy w folderze css/images.
W tutorialu skupimy się na dwóch najważniejszych plikach – index.php oraz templateDetails.xml

Budowa pliku index.php:

code_new.jpg
 
Ważna notka na samym początku: nazwy kontenerów DIV są nazwami własnymi, utworzonymi przeze mnie. Oczywiście TY masz nieograniczone pole manewru w nazewnictwie.

Na początku szablonu wymagany jest krótki kod PHP – służy on do nadzoru bezpieczeństwa strony. Następnie jest deklaracja DOCTYPE oraz języka strona (z elementami PHP). Są to wartości stałe, a więc wystarczy je… przekopiować alt
W sekcji HEAD widzimy deklarację jdoc:include type=”head” . Zastępuje ona standardowe znaczniki meta danych. Słowa kluczowe, opis i tytuł strony możemy ustawić w konfiguracji strony w Panelu Administracyjnym Joomli, już po instalacji szablonu.
Widzimy tam również łączę do naszego stylu CSS. Myślę, że nie trzeba tu wiele objaśniać – znając ten język, doskonale wiesz jakie ma możliwości.
 
 
Jak widać deklaracja modułów I komponentów (bo tak naprawdę wyłącznie na tym opiera się budowa szablonu Joomli) jest bardzo prosta – wszystko mieści się w 4-5 słowach!

 

Dla modułów:

 jdoc:include type=”modules” name=”top” /> 
Gdzie name oznacza nazwę modułu (jest ona dowolna – w tym przypadku moduł nazwałem “top”). Oczywiście liczba modułów na stronie może być różna – może ich nie być w ogóle, a jednocześnie nic nie stoi na przeszkodzie aby zadeklarować kilkanaście czy kilkadziesiąt różnych modułów (każdy musi mieć jednak unikalną nazwę!). W powyższym kodzie zadeklarowaliśmy 3 moduły (left, top i right).
Dla komponentów wszystko odbywa się analogicznie – z tą różnicą, iż możemy pominąć nazwę:

 

Dla komponentów:

 jdoc:include type=component /> 
 
I już mamy zadeklarowane miejsce na wyświetlanie wszelkich komponentów na stronie!
 
A co najlepsze - cała reszta to wyłącznie czysty kod HTML + CSS!

 

Plik index.php dostępny do pobrania - klik!

 


Budowa pliku templateDetails.xml

template.jpg
 
Plik templateDetails.xml generalnie rzecz biorąc, instruuje Joomlę jak zainstalować szablon. Jest plikiem wymaganym i umieszczamy go w folderze głównym szablonu, obok index.php.

 Plik templateDetails.xml dostępny do pobrania - klik!

 

Budowa opcjonalnego pliku index.htm

Dzięki plikowi index.htm dodatkowo zabezpieczymy naszą stronę przed niepowołanymi działaniami osób trzecich. Jego budowa jest niezwykle prosta, wszystko ogranicza się do stałych kilku linijek, dzięki czemu nie musimy za każdym razem na nowo go budować - wystarczy go skopiować. Jego kilkulinijkowy kod jest dostępny pod tym linkiem:

Plik index.htm dostępny do pobrania - klik!

 

Zakończenie

No dobrze, skończyłem budować szablon. Co teraz? Jak go zainstalować?
Otóż wystarczy go spakować w archiwum ZIP. Przyda się tu np. WinRAR, 7ZIP lub inny podobny program archiwizujący. Następnie wystarczy w panelu administracyjnym Joomli za pomocą domyślnego instalatora szablonów zainstalować nasz szablon, po czym ustawić go jako domyślny. Voila, koniec!
 
 

template.zip (pobierz)

 

Komentarze 

 
0 #13 Szymon 2012-09-27 21:46
No fajny opis.... ale dlaczego POZYCJE nazywasz MODUŁAMI???... modułuy to przecież w Joomli programy wyświetlające treść
Cytować
 
 
0 #12 2011-04-23 17:30
Super strona i opis. Jednak czy te same zasady obowiązują dla joomla 1.6?
Cytować
 
 
-1 #11 2010-07-16 20:04
Cytuję Damian:
Dlaczego nie mogę pobrać kodów źródłowych?

Nie doczytałem notki na dole. Sorki ;) Już jest wszystko w porządku.
Cytować
 
 
0 #10 2010-07-16 20:01
Dlaczego nie mogę pobrać kodów źródłowych?
Cytować
 
 
+1 #9 2010-04-22 12:18
super artykuł.Aż miło się czyta.
Cytować
 
 
+2 #8 Paweł Kuptz 2010-03-27 11:51
Drobny błąd, już naprawiony. Dzięki za info.
Cytować
 
 
0 #7 2010-03-22 19:51
Ja zainstalowałem na joomla plik z tym szablonem i wywala mi błąd czy ma ktoś podobnie? prosze o pomoc mój mail
Cytować
 
 
0 #6 2010-02-13 07:47
Witam!
Bardzo interesujący i czytelny artykuł. Korzystam od razu :)
Podziwiam i pozdrawiam
Cytować
 
 
+2 #5 2010-02-01 14:53
Nie wiem czy to tylko mnie spotkało, ale na wszelki wypadek daję znać. Jeżeli w pliku instalacyjnym użyjecie polskich znaków to przy instalacji szablonu powstają błędy. Podkreślę jednak, że plik instalacyjny jako jedyny element strony był napisany w notatniku więc możliwe, że rozchodzi się o stronę kodową lub coś podobnego. Pozdrawiam wszystkich zainteresowanyc h tematem!!!
Cytować
 
 
+1 #4 2010-02-01 14:15
Tak, to jest rzeczywiście bardzo przejrzyste. Nie jestem zawodowcem, ale zapoznałem się z joomlą, po zrobieniu kilku stron tradycyjnie, html + css.
Teraz tylko zachodzę w głowę, jak się ta strona będzie pozycjonować.
Na prawdę, jedna z lepszych stronek o joomla - w sensie zrozumienia idei...
Cytować
 

Dodaj komentarz


Kod antysapmowy
Odśwież

Najnowsze w CMS!


Warning: Creating default object from empty value in /var/www/old-yc/modules/mod_latestnews/helper.php on line 109

Warning: Creating default object from empty value in /var/www/old-yc/modules/mod_latestnews/helper.php on line 109

Warning: Creating default object from empty value in /var/www/old-yc/modules/mod_latestnews/helper.php on line 109

Warning: Creating default object from empty value in /var/www/old-yc/modules/mod_latestnews/helper.php on line 109

Warning: Creating default object from empty value in /var/www/old-yc/modules/mod_latestnews/helper.php on line 109

Warning: Creating default object from empty value in /var/www/old-yc/modules/mod_latestnews/helper.php on line 109

Warning: Creating default object from empty value in /var/www/old-yc/modules/mod_latestnews/helper.php on line 109

Warning: Creating default object from empty value in /var/www/old-yc/modules/mod_latestnews/helper.php on line 109

Najpopularniejsze w CMS!


Warning: Creating default object from empty value in /var/www/old-yc/modules/mod_mostread/helper.php on line 79

Warning: Creating default object from empty value in /var/www/old-yc/modules/mod_mostread/helper.php on line 79

Warning: Creating default object from empty value in /var/www/old-yc/modules/mod_mostread/helper.php on line 79

Warning: Creating default object from empty value in /var/www/old-yc/modules/mod_mostread/helper.php on line 79

Warning: Creating default object from empty value in /var/www/old-yc/modules/mod_mostread/helper.php on line 79

Warning: Creating default object from empty value in /var/www/old-yc/modules/mod_mostread/helper.php on line 79

Warning: Creating default object from empty value in /var/www/old-yc/modules/mod_mostread/helper.php on line 79

Warning: Creating default object from empty value in /var/www/old-yc/modules/mod_mostread/helper.php on line 79
5