Systemy zarządzania treścią
Laboratorium 4
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.
Strona 1
dr inż. Piotr Czapiewski
Systemy zarządzania treścią
Laboratorium 4
• 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.
Strona 2
Systemy zarządzania treścią
Laboratorium 4
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)
Strona 3