dr inż. Piotr Czapiewski
Systemy zarządzania treścią
Laboratorium 4
Strona 1
Joomla! – tworzenie szablonów
Cel ćwiczenia:
Opanowanie podstaw tworzenia szablonów dla systemu Joomla!
Przebieg ćwiczenia:
1.
Instalacja systemu Joomla!
•
Zainstaluj Joomla! ze standardowymi przykładowymi danymi lub wykorzystaj wcześniej
przygotowaną witrynę.
2.
Tworzenie szkieletu prostego szablonu
•
Utworzymy szablon o nazwie SzablonTestowy. Załóż na dysku katalog dla tego szablonu:
[joomla]\templates\SzablonTestowy\
•
W powyższym katalogu utwórz plik
index.php
zawierający podstawowy szkielet dokumentu
HTML – będzie to główny plik naszego szablonu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
Test
</body>
</html>
•
Aby Joomla! „zauważyła” nasz szablon, w katalogu szablonu musimy umieścić plik XML
z opisem –
templateDetails.xml
:
<?xml version="1.0" encoding="windows-1250"?>
<!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>SzablonTestowy</name>
<creationDate>04 June 2008</creationDate>
<author>Jan Kowalski</author>
<authorEmail>brak</authorEmail>
<authorUrl>brak</authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>Przykładowy szablon</description>
<files>
<filename>index.php</filename>
</files>
</install>
W pliku
templateDatils.xml
umieść właściwe dane: nazwę szablonu, autora, datę
utworzenia. W sekcji
<files>
muszą pojawić się odniesienia do wszystkich plików
wchodzących w skład szablonu – na razie jest to tylko jeden plik,
index.php
.
•
Przejdź do panelu administracyjnego Joomla!, do w menu Rozszerzenia->Szablony. Na liście
szablonów powinien być widoczny nasz nowoutworzony SzablonTestowy – ustaw go jako
domyślny.
dr inż. Piotr Czapiewski
Systemy zarządzania treścią
Laboratorium 4
Strona 2
•
Sprawdź wygląd strony frontowej.
•
W głównym pliku szablonu przygotuj tabelę HTML odpowiadającą następującemu układowi
strony:
<nagłówek>
<szukaj>
<ścieżka nawigacji>
<lewe menu>
<główna część strony>
<prawe menu>
<stopka>
•
W komórkach tabeli umieścimy odpowiednie elementy witryny. Określ szerokość każdej
kolumny (w %, np. 25%, 50% i 25%), nadaj komórkom atrybut id, odpowiednio o wartości:
naglowek, szukaj, nawigacja, lewe_menu, glowna, prawe_menu
•
Dla lepszego uwidocznienia układu strony wypełnij tymczasowo komórki tekstem (np. takim
samym jak
id
) oraz nadaj tabeli atrybuty:
border="1" width="80%"
•
Sprawdź wygląd strony frontowej.
dr inż. Piotr Czapiewski
Systemy zarządzania treścią
Laboratorium 4
Strona 3
3.
Dodawanie modułów do szablonu
•
Aby wyświetlić w wybranym miejscu część zawartości strony, umieszczamy w pliku szablonu
następujący znacznik:
<jdoc:include type="modules" name="top" style="none" />
gdzie atrybut
type
oznacza rodzaj wyświetlanej zawartości (w tym przypadku: moduł),
name
– jej identyfikator (w tym przypadku: wyświetlany będzie moduł o nazwie
top
),
a
style
– sposób wyświetlania (w tym przypadku: bez dodatkowego formatowania).
•
Umieść w odpowiednich komórkach tabeli znaczniki wyświetlające moduły: top, breadcrumb
(ścieżka nawigacji), user4 (pole wyszukiwania), left, right oraz footer.
•
Sprawdź wygląd strony frontowej.
4.
Dodawanie głównej treści do szablonu
•
Aby umieścić w szablonie zasadniczą treść strony, dodaj w odpowiednim miejscu znacznik:
<jdoc:include type="component" style="none" />
•
Sprawdź wygląd strony frontowej.
5.
Dodawanie arkusza CSS
•
W katalogu szablonu załóż podkatalog
css
, stwórz w nim plik
template.css
•
W arkuszu CSS umieść kilka prostych reguł, np.:
body {
font-family: Helvetica,Arial,sans-serif;
color: #333;
}
•
W pliku szablonu, w nagłówku, umieść odwołanie do arkusza CSS:
<link rel="stylesheet" href="templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="templates/SzablonTestowy/css/template.css"
type="text/css" />
•
Sprawdź wygląd strony frontowej.
•
Dodaj odwołanie do pliku arkusza
css/template.css
w pliku opisującym szablon
templateDetails.xml
•
Zamiast budować od podstaw arkusz CSS dla witryny, łatwiej jest zmodyfikować któryś z
gotowych arkuszy. Skopiuj zawartość pliku
template.css
z szablonu
rhuk_milkyway
i wklej do swojego pliku CSS. Sprawdź wygląd strony frontowej.
•
Zmodyfikuj kilka wybranych reguł lub dodaj nowe (np. dodaj reguły dla identyfikatorów
lewe_menu
,
prawe_menu
,
glowna
)