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:

|-- my_template
| |-- css
| | |-- index.html
| |-- html
| | |-- index.html
| |-- images
| | |-- index.html
| |-- js
| | |-- index.html
| |-- index.php
| |-- templateDetails.xml
| |-- template_thumbnail.png
| |-- template_preview.png
| |-- favicon.ico

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:

<html><head></head><body></body></html>

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:

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>My template</title>
    </head>
    <body>
        <h1>My template</h1>
        <h2>It works!</h2>
    </body>
</html>

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.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" " https://www.joomla.org/xml/dtd/2.5/template-install.dtd ">
<extension version="3.0" type="template" method="upgrade" client="site">

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:

<name>My template </name>
<version>1.0</version>
<creationDate>26/11/2017</creationDate>
<author>Empressia</author>
<authorEmail>Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript.</authorEmail>
<copyright>Copyright (C) 2017 Empressia</copyright>
<description>Mój własny szablon do Joomli!</description>

Manifest powinien zawierać również informacje o plikach znajdujących się w folderze.

<files>
    <folder>css</folder>
    <folder>html</folder>
    <folder>images</folder>
    <folder>js</folder>
    <filename>index.php</filename>
    <filename>favicon.ico</filename>
    <filename>template_thumbnail.png</filename>
    <filename>template_preview.png</filename>
    <filename>templateDetails.xml</filename>
</files>

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.

<positions>
    <position>menu</position>
    <position>jumbotron</position>
    <position>top</position>
    <position>left</position>
    <position>right</position>
</positions>

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.

<config>
    <fields name="params">
      <fieldset name="settings" label="Ustawienia">
        <field name="text_logo " type="text" label="Tekst logo" description="Wpisz tekst logo" />
        <field name="text_copy" type="text" label="Tekst w stopce" description="Wpisz tekst, który znajdzie się w stopce" />
      </fieldset>
    </fields>
</config>

Na koniec zamknij tag </extension>.

Cały plik templateDetails.xml prezentuje się następująco:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "  https://www.joomla.org/xml/dtd/2.5/template-install.dtd  ">
<extension version="3.0" type="template" method="upgrade" client="site">
    <name>My template </name>
    <version>1.0</version>
    <creationDate>26/11/2017</creationDate>
    <author>Empressia</author>
    <authorEmail>Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript.</authorEmail>
    <copyright>Copyright (C) 2017 Empressia</copyright>
    <description>Mój własny szablon do Joomli!</description>
    <files>
        <folder>css</folder>
        <folder>html</folder>
        <folder>images</folder>
        <folder>js</folder>
        <filename>index.php</filename>
        <filename>favicon.ico</filename>
        <filename>template_thumbnail.png</filename>
        <filename>template_preview.png</filename>
        <filename>templateDetails.xml</filename>
    </files>
    <positions>
        <position>menu</position>
        <position>jumbotron</position>
        <position>top</position>
        <position>left</position>
        <position>right</position>
    </positions>
    <config>
        <fields name="params">
            <fieldset name="settings" label="Ustawienia">
                <field name="text_logo " type="text" label="Tekst logo" description="Wpisz tekst logo" />
                <field name="text_copy" type="text" label="Tekst w stopce" description="Wpisz tekst, który znajdzie się w stopce" />
             </fieldset>
        </fields>
    </config>
</extension>

Twój folder powinien w tym momencie wyglądać jak na poniższym screenie:

struktura

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:

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.

szablon

Teraz jeśli przejdziesz na stronę główną Twoim oczom powinien się ukazać taki widok:

wynik

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.