Gantry 5 - tworzenie szablonów dla Joomla!

Tworzysz witryny w oparciu o Joomla i nie możesz znaleźć szablonu, który spełniałby Twoje oczekiwania? Być może nie wiesz od czego zacząć! A może po prostu czujesz, że Twoje umiejętności programowania nie są na takim poziomie, aby to było możliwe?

Stworzenie całkowicie od podstaw profesjonalnego szablonu dla witryny opartej o Joomla! wymaga sporych umiejętności programistycznych. Dzisiejsze szablony, to kilkadziesiąt, a nawet kilkaset plików napisanych w różnych językach programowania, takich jak HTML, XML, CSS, LESS, JavaScript, PHP.

Dzisiaj nawet wyspecjalizowane firmy tworzące szablony korzystają z narzędzi ułatwiających i automatyzujących im pracę. Ilość czasu potrzebna do utworzenia szablonu zupełnie od podstaw może okazać się nieadekwatna do czasu, jaki będzie trzeba poświęcić i budżetu jakim dysponujesz Ty lub Twój klient.

Na szczęście obecne technologie pozwalają utworzyć własny szablon! Mogą je tworzyć także osoby, które na kodowaniu nie znają się prawie wcale! Często wystarczy do projektowanego układu szablonu za pomocą metody przeciągnij i upuść (drag & drop) dodać poszczególne elementy układając je niemal jak puzzle ;-) Jeszcze kilka lat temu trudno było znaleźć jakieś sensowne narzędzie, dzięki któremu można tworzyć własne szablony do Joomla! Dzisiaj jest ich tak dużo, że trzeba poświęcić sporą ilość czasu na zapoznanie się przy najmniej z kilkoma, aby wybrać ten, który jest dla Nas najbardziej odpowiedni.

W tym artykule pokażę Ci jedno z takich narzędzi! Tym razem pod lupę biorę znany na całym świecie framework Gantry, którego producentem jest zespół z RocketTheme. To firma z siedzibą w Denver w stanie Colorado w USA, która wykonuje szablony i rozszerzenia zarówno dla Joomla!, jak i Wordpressa. Obecnie dostępne są dwie wersje tego framework-a: Gantry 4 i Gantry 5. Tego pierwszego opisywałem jakiś czas temu w serii artykułów, którą rozpoczyna artykuł: Własny szablon dla Joomla!? Z Gantry to proste! - cz. 1.

Jednym ze sposobów na przetestowanie możliwości wybranego narzędzia, jest instalacja tzw. pakietu quickstart. To instalator Joomla! razem z zaimplementowanymi dodatkowymi rozszerzeniami, szablonami i treściami. Po instalacji powstanie gotowa, witryna z przykładowymi treściami oraz modułami rozmieszonymi w określonych pozycjach szablonu bazującego na framework-u Gantry 5.

Krok 1. Pobierz pakiet Helium RocketLauncher

Pliki pakietu Helium RocketLauncher pobierzesz pod adresem: www.gantry.org/download. Przewiń stronę do sekcji Joomla 3.4+, kliknij przycisk Helium RocketLauncher, a następnie zapisz plik w dowolnej lokalizacji na Twoim komputerze.

Krok 2. Zainstaluj pakiet Helium RocketLauncher

Zakładam, że masz już jakieś doświadczenie w pracy z CMS Joomla! i znasz przy najmniej w podstawowym zakresie jego panel administracyjny (tzw. zaplecze). Jeżeli jednak dopiero zaczynasz swoją przygodę z Joomla! sięgnij po książkę Joomla! 3.x. Praktyczny kurs.

Do testowania znakomicie nadaje się własne środowisko lokalne: serwer WWW, serwer baz danych i interpreter PHP. Możesz skorzystać z dowolnych rozwiązań, np. XAMPP lub JAMP. Osobiście od kilku lat korzystam z tego drugiego i na dzień dzisiejszy nie chcę niczego innego! Dlaczego? Ponieważ, to aplikacja stworzona specjalnie dla Joomla!. Spełnia wszystkie wymagania techniczne Joomla!, jest ciągle rozwijana i na bieżąco aktualizowana. Dzięki JAMP praca nad kolejnymi projektami witryn staje się prosta i szybka. Twórcą JAMP-a jest Michał Trzepizur, wiceprezes fundacji PCJ Otwarte Źródła. Misją tej fundacji jest wspieranie polskiej społeczności Joomla!

Jeżeli korzystasz z innego środowiska testowego na swoim komputerze, to jedyna różnica może polegać na lokalizacji folderu, do którego należy rozpakować pobrany wcześniej plik Helium RocketLauncher. Proponuję, aby pliki witryny testowej opartej o framework Gantry 5 umieścić w nowym folderze o nazwie: test-gantry5. W przypadku JAMP-a będzie to lokalizacja: twój_Dysk:\Folder_z_programem_JAMP\mnt\var\www, natomiast w przypadku XAMP: twój_dysk:\xampp\htdocs.

Uruchom swój lokalny serwer WWW, a następnie w przeglądarce wpisz adres: localhost/test-gantry. Jeżeli utworzyłeś własny folder, to zamiast test-gantry, wpisz nazwę własnego folderu! Na pewno zauważysz znajome opcje instalacyjne Joomla!. Jeżeli po raz pierwszy instalujesz Joomla!, to zerknij np. do artykułu: Joomla! 3.2 - instalacjia i konfiguracja, aby dowiedzieć się więcej szczegółów dotyczących procesu instalacji.

Po zakończeniu procesu instalacji od razu masz gotową, profesjonalnie wyglądającą witrynę testową. 

Style szablonu

Opcje konfiguracyjne każdego szablonu zainstalowanego w Twojej witrynie, znajdziesz w menadżerze szablonów, do którego dostęp także możesz uzyskać na dwa sposoby. Możesz kliknąć odsyłacz Szablony znajdujący się w menu pionowym na pulpicie zaplecza administracyjnego lub możesz kliknąć pozycję Rozszerzenia a następnie pozycję Szablony w menu nawigacyjnym znajdującym się w górnym obszarze zaplecza administracyjnego. Dostęp do ustawień wybranego szablonu uzyskasz klikając w oknie menadżera szablonów nazwę wybranego szablonu. Możesz także kliknąć pole wyboru obok nazwy szablonu, a następnie kliknąć przycisk Dostosuj.  

Domyślnie, aktywnym menu jest pozycja Styles zawierająca opcje konfiguracyjne związane z wyglądem poszczególnych elementów szablonu, takich jak np. kolory, rodzaj czcionki itp. W sekcji Styles znajdziesz sześć predefiniowanych stylów, dzięki którym możesz szybko zmienić ustawienia konfiguracyjne, w tym kolorystykę szablonu. Wystarczy, że klikniesz wybrany styl, a następnie klikniesz przycisk Save Style, aby zapisać te ustawienia. 

Poniżej sekcji Styles znajdują się ustawienia związane z wyglądem poszczególnych elementów szablonu. 

W sekcji Core Styles dostępne są opcje pozwalające zmienić podstawowe kolory witryny oraz rodzaj czcionki. Aby zmienić kolor wybranego elementu możesz wpisać jego wartość posługując się kodem heksadecymalnym lub kliknąć w obszarze pola i skorzystać z okienka color picker. Aby zmienić czcionkę możesz wpisać nazwę czcionki ręcznie, lub kliknąć przycisk znajdujący się po prawej stronie pola, aby za pomocą okna modalnego wybrać właściwą czcionkę.

W sekcji Section Styles dostępne są opcje pozwalające na zmianę tła oraz kolorów czcionek poszczególnych elementów witryny, takich jak system nawigacji, nagłówek i stopka strony. 

Układ szablonu

Dla każdego szablonu opartego na framework-u Gantry 5 możesz dowolnie zmieniać jego układ. Możesz na przykład zmieniać kolejność poszczególnych bloków oraz kolejność kolumn. Możesz przypisywać własne pozycje modułów oraz dodawać inne elementy do układu strony;

Typowy szablon do Joomla! składa się z różnych bloków (pozycji), w których umieszcza się moduły lub inne elementy strony. Każdy blok może zawierać jeden lub więcej modułów. Za pomocą opcji dostępnych w szablonie opartym o framework Gantry 5 możesz na przykład:

• zmieniać kolejność poszczególnych bloków;
• zmieniać kolejność kolumn;
• umieszczać dowolną ilość modułów;
• przypisywać własne pozycje modułów;
• dowolnie definiować szerokość modułów;
• tworzyć dowolną ilość układów i przypisać je do wybranych pozycji menu;

Okno konfiguracji układu szablonu podzielone jest na dwie części. Po lewej stronie znajduje się lista elementów (particles), które możesz dodać do układu. Natomiast po prawej stronie znajduje się główny obszar roboczy projektowanego układu.

Do każdej sekcji możesz dodać dowolną ilość dodatkowych elementów, które możesz przeciągnąć z paska bocznego Particles, znajdującego się po lewej stronie okna Layout. Jest tego na prawdę sporo, więc masz niemal nieograniczone możliwości rozbudowy układu szablonu!

Aby dokonać zmian w rozmieszczeniu poszczególnych bloków wystarczy, że wskażesz wybrany blok i korzystając z mechanizmu przeciągnij i upuść przesuniesz myszką w miejsce, w którym chcesz, aby ten blok się znajdował. Szerokość poszczególnych bloków możesz definiować wskazując krawędź pomiędzy wybranymi blokami i przeciągając myszką w lewo lub w prawo, aż do uzyskania odpowiedniej wartości procentowej. 

Aby usunąć wybrany blok z bieżącego układu, wystarczy przeciągnąć go do górnego obszaru okna do obszaru z napisem Drop here to delete.

Aby zapisać wprowadzone w wybranym układzie zmiany wystarczy kliknąć przycisk Save Layout znajdujący się w prawym górnym roku głównego obszaru roboczego układu. Poniżej tego przycisku dostępny jest także przycisk Undo umożliwiający cofnięcie wprowadzonych przez Ciebie zmian oraz przycisk Redo za pomocą którego możesz ponownie dokonać poprzednio wprowadzone zmiany.
Za pomocą przycisku Clear możesz usunąć wszystkie bloki (particles) z projektowanego układu. Do dyspozycji masz dwie opcje: Full Layout i Keep Inheritance. Kliknięcie pierwszej powoduje usunięcie wszystkich bloków, natomiast druga pozostawia bloki, których ustawienia dziedziczone są z innego układu.

Zobacz, jakie bloki reprezentowane są w układzie strony głównej witryny testowej:

W tym artykule pokazałem tylko niewielką część możliwości frameworka Gantry 5. Szczegółowy opis wszystkich poszczególnych opcji konfiguracyjnych wraz z konkretnymi przykładami ich zastosowania znajdziesz w mojej książce: Gantry. Tworzenie szablonów dla Joomla!. 

Pełną dokumentację na temat framework-a Gantry 5 znajdziesz pod adresem: docs.gantry.org. Jeżeli podczas pracy nad tworzeniem własnych szabloów napotkasz na problemy, których nie potrafisz rozwiązać samodzielnie, na pewno znajdzie się ktoś, kto jest w stanie Ci pomóc. Gorąco polecam forum, które znajdziesz pod adresem: www.rockettheme.com/forum/gantry-framework a także forum polskiej społeczności Joomla!: forum.joomla.pl. Pamiętaj jednak, aby zanim zadasz pytanie sprawdzić, czy przypadkiem ktoś już wcześniej nie zgłosił się z podobnym problemem. Dzięki temu zaoszczędzisz czas zarówno swój, jak i osób zaangażowanych w pomoc na forum. I jeszcze jedna bardzo ważna uwaga! Nie oczekuj, że na Twój palący problem natychmiast ktoś powinien odpowiedzieć. Wszyscy uczestnicy forum robią to dobrowolnie i w czasie, kiedy mogą sobie na to pozwolić.

Ogrom wiedzy, której często nigdzie indziej nie znajdziesz, otrzymasz na różnego typu spotkaniach z innymi użytkownikami systemu Joomla! Sprawdź, czy w Twojej okolicy odbywają się lokalne spotkania Joomla! User Group (tzw. JUG-i). Na stronie Fundacji PCJ Otwarte Źródła, znajdziesz adresy stron poszczególnych grup z całej Polski. Raz w roku organizowane jest ogólnopolskie spotkanie JoomlaDay Poland. Sprawdź, w jakim mieście odbywa się w tym roku i nawet przez chwilę nie zastanawiaj się, czy warto być na tym spotkaniu! WARTO!

Zobacz moją prelekcję na temat Gantry 5 podczas spotkania Joomla! User Group Małopolska:

Pamiętaj, że ta branża rozwija się niezwykle szybko i jeżeli chcesz być na bieżąco, musisz się ciągle doskonalić! Być może trafisz na ten artykuł, kiedy dostępna będzie nowsza wersja framerowka Gantry 5. Być może pojawią się nowe funkcje, których teraz nie ma. Miej to na uwadze i nie irytuj się, kiedy coś Ci się nie zgadza ;-)

Jeżeli jesteś osobą mocno zmotywowaną i poświęcisz na naukę kilka godzin w tygodniu, to jestem pewien, że bardzo szybko zaczniesz tworzyć własne piękne szablony do projektowanych przez siebie witryn.

Chcesz otrzymywać powiadomienia o moich kolejnych wpisach lub projektach?

Zapisz się do newslettera!