W ten sposób dodane zostały kontenery dla pozycji lewej kolumny, dokumentu głównego (dla komponentów), pozycji prawej kolumny i pozycji stopki. Tworzenie szablonu dla systemu Joomla nie różni się zbytnio od tworzenia dowolnego standardowego projektu WWW; jedyna różnica polega na tym, gdzie i jak użyć funkcji PHP, aby system Joomla mógł poprawnie wygenerować witrynę (rysunek 9.10).
253
Rozdział I.
4. Dodaj pozostały kod, co przedstawia rysunek 9.11, lub pobierz uzupełniony plik index.php z witryny stanowiącej uzupełnienie książki.
< ? p h p echo Smainframe->gezcfgi
42 43
41
Wskazówka
' s i tenarae ' ) ; ? > < b r
1d«"wrapper">
45 46 47 4S 49 »o si
5. Zapisz plik.
• Na razie nie różni się to niczym od standardowego układu CSS strony WWW. W tym momencie warto utworzyć oddzielny plik layout.css, aby strona działała poprawnie. Na tym etapie szablon nie może komunikować się bezpośrednio z systemem Joomla, ale nie chcesz chyba zmagać się z układem, rozwiązując problemy z funkcjami PH P. Bez paniki, na obecnym etapie są to bardzo łatwe i proste funkcje. Jeśli masz już działający projekt, możesz przystąpić do dodania instrukcji nagłówkowych j :doc. W każdym momencie możesz wprowadzać ulepszenia w układzie.
39 40
ich"header ">
" t o p .> < d i v i d~= ! 'user 1 " x / d i v > <,-" d i v>
§ [I i : | | f K es S9 ro 71 ?2 75 | fis®®; 75 7s . 7 S 79 SO f
i d = " l e f t _ c o l "
c l a s s = ' c 1 e a r f i
x">
/>
81 82
< d i v
83
1 d = " m a i n _ c o n t e n t "
c l a s s - " c l e a r f i x " >
c j d o c : i n c l u d e type="comporient"
84
/>
< / d i v >
ss ee 87 ss
i d = " u s e r 4 " >
< j d o c : i n c l u d e type="modules" name="user4" s t y l e = " x h t r a l "
§ [I i : | | f K es S9 ro 71 ?2 75 | fis®®; 75 7s . 7 S 79 SO f
< d i v i d»«"' u s a r S " > < / d i v>
;
< / d i V> S2 83
Rysunek 9.14. Dodawanie instrukcji jdocńnclude do kontenerów div
259
Rozdział
I.
?6
< d i v
i d = " m a i n c o n t e n t w r a p " >
77 78
< d i v
79 so
c j d o c : i n c l u d e type="modul es" n a m e = " l e f t " s t y l e = " x h t r a l "
<
d
i
v id="right_col">
d
i
v id="right_col">
;
< / d i V> S2 83
84::;:
65 d - " u s s r 2 ">•
doc:include
€S 69 70
71 72 74
'"user
3">
'di v >
S5
ex n
56 57
58 53
id="breadcrumb! < j d o c : i n c l u d e
<
!
c l a s s -
'c1earf1x">
type="modules"
name="breadcrumbs"
style="xbtml"
/> o
d i V>
60
61
id=:'top"
62
63
class = "cleari'ix"> i d = " u s e r l " >
< j d o c : i n c l u d e
64
type="«odul es"
nan?e="userl"
style="rounded"
/>
type="modules"
na«e="user2"
style="rounded"
/>
type="n»dules"
name="user3"
style="rounded"
/>
ss
Rysunek 9.11. Pozostałe kontenery div dla szablonu Joomla
254
Tworzenie szablonów dla systemu Joomla
Dodawanie instrukcji jdoc:indude do pliku index.php Bez instrukcji jdoc: incl ude szablon nie będzie działać. Metoda jdoc informuje system Joomla 0 tym, jakie elementy należy umieścić na pozycjach używanych w Twoim szablonie. Rysunek 9.12 przedstawia przykład używanych pozycji. Jak widać, między kontenerami div a pozycjami powinna zachodzić korelacja typu jeden do jednego. Dobrym zwyczajem jest nadawanie takich samych nazw pozycjom 1 identyfikatorom kontenerów di v, dzięki czemu podczas wybierania pozycji dla swoich menu i modułów łatwo znajdziesz tę właściwą.
O 0 o .
tJ 1 w
3
r i
ET
o. n CL
o " O
Sc
Rysunek 9.12.
Projekt w układzie szkieletowym przedstawiający pozycje szablonu Joomla
255
Rozdział I.
• j doc ¡include: Funkcja obiekt:metoda, która nakazuje systemowi Joomla wyświetlanie wywoływanego typu. • type="modul e": Informuje system Joomla 0 typie dołączanego obiektu. Istnieją trzy typy: head (nagłówek), modules (moduł) 1 component (komponent). • name="location": Nagłówek i komponent nie mają lokalizacji, jest to definiowane przez system. Nagłówek to dynamicznie generowane metadane, które będą wyświetlane na każdej stronie. Komponent może zostać wywołany tylko do głównej części strony. Moduł może zostać umieszczony w dowolnie wybranej lokalizacji, np. left, right, top, bottom, userl itd. • style="optional": Użycie stylu jest opcjonalne i dotyczy tylko modułów. Można zastosować następujące style: A tabl e: Wyświetla moduły przy użyciu układu tabel; jest to domyślny sposób wyświetlania, jeśli nie zadeklarujesz żadnego stylu. A horz: Wyświetla moduł horyzontalnie z wykorzystaniem formatu tabeli. A xhtml: Wyświetla moduł przy użyciu prostego elementu di v, a nie tabeli. A rounded: Umożliwia wyświetlenie modułu z zaokrąglonymi rogami za pomocą stylizacji CSS z użyciem zagnieżdżonych elementów di v. Zostanie to omówione w dalszej części rozdziału w części dotyczącej CSS. A outl ine: Nadaje modułowi obramowanie. A none: Wyświetla moduł w czystej postaci, bez formatowania. Tekst w dalszym ciągu będzie korzystał ze stylów z pliku template.css.
256
Tworzenie szablonów dla systemu Joomla
Większość szablonów używa opcji formatowania x h t m l i r o u n d e d . Daje to czysty kod i pozbawiony tabel układ dla modułów. Umożliwia to również wykorzystanie bardziej zaawansowanych technik CSS. Rysunek 9.13 przedstawia projekt w układzie szkieletowym określający szczegółowe położenie instrukcji j d o c .
Wskazówka •
Instrukcje jdoc:include
type="component"
i j d o c : i n c l ude type="head" to j e d y n e instrukcje, które nie m a j ą atrybutu nazwy ani stylu.
div id="wrapper"
Rysunek 9.13. Projekt w układzie szkieletowym
wyświetlający
położenie
instrukcji
jdoc
2S7
Rozdział 9.
Aby dodać wymagane instrukcje jdoc:indude: 1. Otwórz plik index, php w dowolnym edytorze tekstu. 2. Wstaw pusty wiersz między znacznikiem a znacznikiem zamykającym , a następnie wpisz następujący kod: < j d o c : i n c l u d e type="modules" style="xhtml" />
name="toolbar"
3. Wstaw pusty wiersz między znacznikiem a znacznikiem zamykającym , a następnie wpisz następujący kod: < j d o c : i n c l u d e type="component"
/>
Ponieważ komponentów można używać tylko w głównej części strony, instrukcja ta nie zawiera atrybutów styl e= ani name=. Aby uzyskać komponent niekorzystający z tabel lub nadać mu inny wygląd, musisz nadpisać podstawowe dane wyjściowe systemu Joomla. Będzie to omawiane na końcu tego rozdziału.
2S8
Tworzenie szablonów dla systemu Joomla
4. Aby dodać pozostałe instrukcje jdoc: i ncl ude, skorzystaj z rysunków 9.14 i 9.15. Pamiętaj, że instrukcje te muszą znajdować się między otwierającym i zamykającym znacznikiem di v danego elementu. Wskazówka • Uważaj na literówki; to najczęstszy powód niepoprawnego działania kodu. 34 35
36 37 38
id=' ..'"apper
39 40
">
id»"toolbc'
">
« j d o c : i n c l u d e <
type="modules"
name-"toolbar"
s t y l e = " x h t m l "
0
/>
a.
P>
div>
1
41 42
id»"header">
43 44
id="1nser':>
45
type="modu1es"
name="inset"
type="modules"
name="search"
s t y l e = " x h t m l "
l'
/>
46 47
43
i d - - " s e a r en'
>
< j d o c : i n c l u d e
49
s t y l e = " x h t m l "
/>
< / d i v >
50 51
52 53
54 55
id="mainnav">
type="modules"
rtame="mainnav"
s t y l e = " x h t m l "
3
/>
n
| s?
: ss- V ss : ; : v # ' ';'i
31 92 < div> 33 S4 Rysunek 9.11. Pozostałe kontenery div dla szablonu Joomla
254
Tworzenie szablonów dla systemu Joomla
Dodawanie instrukcji jdoc:indude do pliku index.php Bez instrukcji jdoc: incl ude szablon nie będzie działać. Metoda jdoc informuje system Joomla 0 tym, jakie elementy należy umieścić na pozycjach używanych w Twoim szablonie. Rysunek 9.12 przedstawia przykład używanych pozycji. Jak widać, między kontenerami div a pozycjami powinna zachodzić korelacja typu jeden do jednego. Dobrym zwyczajem jest nadawanie takich samych nazw pozycjom 1 identyfikatorom kontenerów di v, dzięki czemu podczas wybierania pozycji dla swoich menu i modułów łatwo znajdziesz tę właściwą.
O 0 o .
tJ 1 w
3
r i
ET
o. n CL
o " O
Sc
Rysunek 9.12.
Projekt w układzie szkieletowym przedstawiający pozycje szablonu Joomla
255
Rozdział I.
• j doc ¡include: Funkcja obiekt:metoda, która nakazuje systemowi Joomla wyświetlanie wywoływanego typu. • type="modul e": Informuje system Joomla 0 typie dołączanego obiektu. Istnieją trzy typy: head (nagłówek), modules (moduł) 1 component (komponent). • name="location": Nagłówek i komponent nie mają lokalizacji, jest to definiowane przez system. Nagłówek to dynamicznie generowane metadane, które będą wyświetlane na każdej stronie. Komponent może zostać wywołany tylko do głównej części strony. Moduł może zostać umieszczony w dowolnie wybranej lokalizacji, np. left, right, top, bottom, userl itd. • style="optional": Użycie stylu jest opcjonalne i dotyczy tylko modułów. Można zastosować następujące style: A tabl e: Wyświetla moduły przy użyciu układu tabel; jest to domyślny sposób wyświetlania, jeśli nie zadeklarujesz żadnego stylu. A horz: Wyświetla moduł horyzontalnie z wykorzystaniem formatu tabeli. A xhtml: Wyświetla moduł przy użyciu prostego elementu di v, a nie tabeli. A rounded: Umożliwia wyświetlenie modułu z zaokrąglonymi rogami za pomocą stylizacji CSS z użyciem zagnieżdżonych elementów di v. Zostanie to omówione w dalszej części rozdziału w części dotyczącej CSS. A outl ine: Nadaje modułowi obramowanie. A none: Wyświetla moduł w czystej postaci, bez formatowania. Tekst w dalszym ciągu będzie korzystał ze stylów z pliku template.css.
256
Tworzenie szablonów dla systemu Joomla
Większość szablonów używa opcji formatowania x h t m l i r o u n d e d . Daje to czysty kod i pozbawiony tabel układ dla modułów. Umożliwia to również wykorzystanie bardziej zaawansowanych technik CSS. Rysunek 9.13 przedstawia projekt w układzie szkieletowym określający szczegółowe położenie instrukcji j d o c .
Wskazówka •
Instrukcje jdoc:include
type="component"
i j d o c : i n c l ude type="head" to j e d y n e instrukcje, które nie m a j ą atrybutu nazwy ani stylu.
div id="wrapper"
Rysunek 9.13. Projekt w układzie szkieletowym
wyświetlający
położenie
instrukcji
jdoc
2S7
Rozdział 9.
Aby dodać wymagane instrukcje jdoc:indude: 1. Otwórz plik index, php w dowolnym edytorze tekstu. 2. Wstaw pusty wiersz między znacznikiem
name="toolbar"
3. Wstaw pusty wiersz między znacznikiem
/>
Ponieważ komponentów można używać tylko w głównej części strony, instrukcja ta nie zawiera atrybutów styl e= ani name=. Aby uzyskać komponent niekorzystający z tabel lub nadać mu inny wygląd, musisz nadpisać podstawowe dane wyjściowe systemu Joomla. Będzie to omawiane na końcu tego rozdziału.
2S8
Tworzenie szablonów dla systemu Joomla
4. Aby dodać pozostałe instrukcje jdoc: i ncl ude, skorzystaj z rysunków 9.14 i 9.15. Pamiętaj, że instrukcje te muszą znajdować się między otwierającym i zamykającym znacznikiem di v danego elementu. Wskazówka • Uważaj na literówki; to najczęstszy powód niepoprawnego działania kodu. 34 35
36 37 38
id=' ..'"apper
39 40
">
id»"toolbc'
">
« j d o c : i n c l u d e <
type="modules"
name-"toolbar"
s t y l e = " x h t m l "
0
/>
a.
P>
div>
1
41 42
id»"header">
43 44
id="1nser':>
45
type="modu1es"
name="inset"
type="modules"
name="search"
s t y l e = " x h t m l "
l'
/>
46 47
43
i d - - " s e a r en'
>
< j d o c : i n c l u d e
49
s t y l e = " x h t m l "
/>
< / d i v >
50 51
52 53
54 55
id="mainnav">
type="modules"
rtame="mainnav"
s t y l e = " x h t m l "
3
/>
n
ex n
56 57
58 53
id="breadcrumb! < j d o c : i n c l u d e
<
!
c l a s s -
'c1earf1x">
type="modules"
name="breadcrumbs"
style="xbtml"
/> o
d i V>
60
61
id=:'top"
62
63
class = "cleari'ix"> i d = " u s e r l " >
< j d o c : i n c l u d e
64
type="«odul es"
nan?e="userl"
style="rounded"
/>
type="modules"
na«e="user2"
style="rounded"
/>
type="n»dules"
name="user3"
style="rounded"
/>
65 d - " u s s r 2 ">•
doc:include
€S 69 70
71 72 74
'"user
3">
Rysunek 9.14. Dodawanie instrukcji jdocńnclude do kontenerów div
259
Rozdział
I.
?6
< d i v
i d = " m a i n c o n t e n t w r a p " >
77 78
< d i v
79 so
c j d o c : i n c l u d e type="modul es" n a m e = " l e f t " s t y l e = " x h t r a l "
i d = " l e f t _ c o l "
c l a s s = ' c 1 e a r f i
x">
/>
81 82
< d i v
83
1 d = " m a i n _ c o n t e n t "
c l a s s - " c l e a r f i x " >
c j d o c : i n c l u d e type="comporient"
84
/>
< / d i v >
ss ee 87 ss
i d = " u s e r 4 " >
< j d o c : i n c l u d e type="modules" name="user4" s t y l e = " x h t r a l "
/
89
9Q
92
id="user5"> < j d o c : i n c l u d e type="modules" name="user5"
style="xhtml"
< / d i v >
33
94 95
i d = " u s e r 6 " ?
c j d o c : i n c l u d e type="n»dules" name="user6"
96
style="xhtml"
< / d i v >
97 98
< d i v
99
i d = " r i g h t _ c o l "
cl a s s = " c l e a r f i
x " >
c j d o c ; i n c l u d e type="raodules" name="right" s t y l e="xhtrol" / >
100
< / d i v >
101 102
103
< d i v
i d = " b o t t o m " >
104
los X06
i d = " u s e r ? " >
c j d o c : i n c l u d e type="rłsodules" name="user7" style="rounded"
107
/>
< / d i v >
108
109 no
i d = " u s e r 8 " >
c j d o c : i n c l u d e type="modules" name="user8" s t y l e = " r o u n d e d "
111
/>
< / d i v >
112
lis 114 lis lie
id="user9"> < j d o c : i n c l u d e type="modules" name="user9" s t y l e = " r o u n d e d " />