„Zróbmy szablon do Joomli!” cz.1 – templateDetails.xml i struktura projektu
Korzystałeś dotychczas z gotowych szablonów? Znasz system CMS Joomla ze strony zaplecza administracyjnego, a od dłuższego czasu zastanawiałeś się czy nie spróbować swoich sił w tworzeniu własnego templata pod ten system? A może chcesz mieć większą kontrolę nad swoją stroną i zrozumieć co się dzieje „od kuchni”? Dobrze trafiłeś! W tej serii wpisów zajmiemy się tworzeniem prostego szablonu, który bez trudu będzie można zainstalować na swoim serwerze i dostosować do własnych potrzeb. W tej części stworzymy strukturę projektu, napiszemy manifest i zainstalujemy pusty (póki co) motyw
Czego będziemy potrzebować i co musisz już wiedzieć?
Jeśli interesuje Ciebie temat tworzenia szablonów do Joomla przypuszczam, że masz już przynajmniej minimalne pojęcie o tworzeniu stron www, ponieważ przyda się ono podczas wykonywania poszczególnych kroków tego poradnika. Ale też nie przesadzajmy, nie musisz być w tym niewiadomo jak dobry. Podstawowa znajomość HTML i CSS powinna w zupełności wystarczyć.
W tym poradniku zajmiemy się stricte tworzeniem szablonu, więc zakładam, że lokalny serwer masz już skonfigurowany, a Joomle zainstalowaną. Jeśli nie, odsyłam Ciebie do JoomlaWiki.
Podczas naszej przygody będziemy korzystać z frameworku Bootstrap (użyjemy go do kodowania wyglądu i struktury strony), więc podstawowa jego znajomość na pewno ułatwi zrozumienie poradnika, ale nie musisz się martwić jeśli jest to dla Ciebie coś zupełnie nowego, wszystko będzie na bieżąco tłumaczone.
Zaczynamy!
Stwórz folder, w którym będzie się znajdował docelowo cały szablon. Nazwa jest dowolna (u mnie „my_template”). Następnie należy stworzyć całą strukturę folderów i plików według schematu poniżej:
W folderze css umieścimy style naszej strony, w js pliki javascriptowe, a w images obrazki. Z kolei folder html odpowiedzialny będzie za przechowywanie tzw. overwrites czyli plików, które nadpisują domyślną strukturę komponentów lub modułów joomlowych (np. kiedy chcemy stworzyć unikalny układ strony, który nie wpisuje się w domyślny schemat tegoż cmsa).
W każdym podfolderze tworzymy plik index.html o następującej zawartości:
Prawdę mówiąc zawartość może być dowolna, ale najlepiej sprawdza się pusta struktura dokumentu html. Dzięki takiemu zabiegowi żadna niepowołana osoba nie będzie w stanie zobaczyć listy plików na naszym serwerze (w przypadku braku pliku index.html domyślną reakcją Apacha jest wylistowanie wszystkich plików znajdujących się w folderze).
W folderze znajdują się trzy grafiki. Są nimi favicona, miniaturka szablonu [206x150px] oraz podgląd szablonu [640x388px]. Możesz póki co skopiować te obrazki z domyślnego szablonu lub wstawić w nie cokolwiek innego. Ostanie dwa obrazki widoczne będą tylko w panelu administratora.
Kolejnym etapem jest stworzenie pliku index.php, który będzie zajmować się generowaniem strony głównej i wszystkich innych podstron. Jego zawartość póki co jest następująca:
My template
It works!
„`Widzimy tutaj najbardziej podstawowy dokument html, którego składnia nie powinna być Ci obca. Do tego pliku wrócimy w następnym wpisie z serii.
Nadszedł czas na najważniejszy plik, którym jest templateDetails.xml. Jest to tzw. manifest, w którym zawarte będą wszystkie informacje na temat naszego szablonu.
Wpierw wstawiamy deklarację języka XML oraz <!DOCTYPE>. Otwieramy znacznik <extension> z atrybutami odpowiedzialne za następujące kwestie:
- version – minimalna wersja Joomli, na której będzie się dało zainstalować nasz template
- type – Tworzymy szablon, więc „template”
- method – „upgrade” umożliwia w późniejszym czasie zainstalowanie ponownie nowszej wersji szablonu na istniejącej już instancji
- client – tworzymy szablon strony, a nie panelu administracyjnego, stąd „site”
Następnie podajemy informacje o naszym szablonie:
Manifest powinien zawierać również informacje o plikach znajdujących się w folderze.
Jak można zauważyć wystarczy podać pliki i foldery najwyższego poziomu, nie musimy opisywać plików z podfolderów.
Kolejną rzecz, o którą należy zadbać to tzw. pozycje. Szablony w Joomli mają z góry narzucone i nazwane miejsca, w których można wstawaić tworzone przez nas moduły. Nazwy tych pozycji zapisane są właśnie w pliku templateDetails.xml.
Przy nazwach pozycji najlepiej zastosować konkretną konwencję. Nazwy powinny wskazywać na położenie danego modułu, nie na jego przeznaczenie. Nasza strona będzie stosunkowo prosta, więc nie będzie nam potrzebna większa ilość pozycji.
W manifeście możemy również zamieścić znacznik <config>. Służy on do umieszczania pól i opcji, które będą oddziaływać na stronę globalnie. Przykładowo mógłby to być przełącznik koloru tła strony. W naszym przypadku damy możliwość zmiany tekstu logo oraz tekstu o prawach autorskich w stopce.
Na koniec zamknij tag </extension>.
Cały plik templateDetails.xml prezentuje się następująco:
Twój folder powinien w tym momencie wyglądać jak na poniższym screenie:
Jeśli tak w istocie jest, możemy zabrać się za instalację naszego templata.
Instalacja szablonu
Żeby zainstalować nasz motyw, musimy wpierw zapakować wszystkie pliki do archiwum w formacie .zip. Możesz to zrobić z pomocą WinRARa lub 7-zipa. Pamiętaj żeby pliki znajdowały się bezpośrednio w paczce, czyli nie miały żadnego nadrzędnego folderu.
Zaloguj się teraz do panelu administracyjnego Joomli. Przejdź do Rozszerzenia -> Instalacje -> Instalowanie. Przeciągnij i upuść swoją paczkę w wyznaczonym do tego miejscu.
Jeśli instalacja przebiegnie z sukcesem powinieneś otrzymać taki monit:
W innym przypadku upewnij się, że nie masz żadnego błędu w pliku .xml. Nawet drobna różnica będzie powodować błędy.
Żeby aktywować nasz szablon należy przejść do Rozszerzenia -> Szablony i kliknąć gwiazdkę przy pozycji z naszym motywem.
Teraz jeśli przejdziesz na stronę główną Twoim oczom powinien się ukazać taki widok:
Nie jestę koderę – gotowe szablony stron internetowych
Koderem jestem ja, ale nie każdy musi mieć ochotę na zabawę w kodowanie. To proces bardzo czasochłonny, wielowymiarowy, wymaga skupienia. Jeśli na plecach czujemy oddech dedline’u, świetny support stanowią platformy oferujące gotowe szablony stron internetowych.
W sieci można trafić na strony zarówno z darmowymi, jak i płatnymi szablonami. Oprócz Template Monster warto zajrzeć na Theme Forest lub Bowwe – szablony, które znajdziesz na pewno spełnią wszystko to, czego oczekuje Twój klient. W zależności od stopnia zaawansowania witryny i przewidywanych funkcjonalności na stronie, jesteś w stanie wybrać ten jeden właściwy spośród tysięcy dostępnych i dopasować go do potrzeb rozpisanych w briefie.