Ćwiczenie 7 Instalacja gotowych szablonów. Podstawy budowania własnego szablonu dla CMS Joomla! Dr inż. Robert Banasiak

Ćwiczenie 7 Instalacja gotowych szablonów. Podstawy budowania własnego szablonu dla CMS Joomla! Dr inż. Robert Banasiak 1

Część A. Instalacja szablonu gotowego Nasza witryna powinna mieć niepowtarzalny wygląd. W Joomla! możemy uzyskać taki efekt dzięki szablonom. Możemy dobrać taki szablon, który odpowiadać będzie najlepiej założeniom witryny. Możemy, jak w przypadku komponentów czy modułów skorzystać z instalatora Joomla! albo z metody ręcznej instalacji, znacznie prostszej niż w przypadku komponentów czy modułów. Jedyną czynnością wykonywaną przez instalatora Joomla! podczas instalacji szablonów, jest utworzenie katalogu szablonu i umieszczenie w nim plików szablonu. Instalator nie dokonuje żadnych wpisów w bazie danych. Możemy skorzystać z dwóch metod instalacji: za pomocą instalatora Joomla. za pomocą FTP. Prawo do zarządzania szablonami ma tylko główny administrator. Pozostali administratorzy i operatorzy nie mogą ani instalować, ani usuwać szablonów. Dostęp do listy zainstalowanych szablonów umożliwia menu Rozszerzenia Instalator Szablony. Instalator oferuje trzy sposoby instalacji Rozszerzeń: z pakietu instalacyjnego na komputerze lokalnym Instaluj z pakietu, z katalogu na serwerze - z rozpakowanego wcześniej archiwum Instaluj z katalogu. bezpośrednio z Internetu Instaluj z sieci. 2

Z pierwszej metody korzystamy wówczas, gdy konfiguracja serwera jest zgodna z wymaganiami Joomla!, tzn. gdy serwer obsługuje spakowane archiwa (zainstalowano bibliotekę archwizatora zlib) oraz pod warunkiem, że nie włączono bezpiecznego trybu pracy (Safe Mode). Spełnienie obu warunków można łatwo sprawdzić, korzystając z menu Pomoc Informacje o systemie Ustawienia PHP Istotne ustawienia PHP: Z drugiej metody korzystamy w przypadku, gdy na serwerze nie zainstalowno biblioteki zlib. Korzystanie z instalatora Joomla! jest wygodne i zalecane, jeśli instalujemy jeden czy dwa szablony. Ale gdy chcemy umieścić na serwerze kilkanaście szablonów, by je przetestować, metodą wygodniejszą jest skorzystanie z FTP. My dziś skupimy się jedynie na tej pierwszej metodzie tj. skorzystamy z pojedynczych pakietów. Przykładowe pobranie szablonu z Internetu. Aby pobrać pakiet instalacyjny szablonu: 1. Utwórzmy na dysku lokalnym w swoim katalogu plików Joomla! (../xamp/htdocs/joomla15) folder /templates (w przypadku, gdy istnieje pomińmy ten krok). 2. Otwórzmy przeglądarkę internetową i przejdźmy na jedną ze stron oferujących pakiety szablonów, np. do JoomlaOs.de. 3. Wybierzmy flagę brytyjską w celu zmiany języka witryny z niemieckiego na angielski (Google Translate nam przetłumaczy tę witrynę) 3

4. Poszukajmy w menu odnośnika [Downloads], a następnie [Joomla 1.5.x Downloads]. Potem wybierzmy [Joomla 1.5 Templates]. Ukaże się wykaz dostępnych pakietów szablonów do pobrania. 5. Wybierzmy szablon, który chcemy pobrać, np. Ocean Air. Jeżeli nie widzą go Państwo od razu, można skorzystać z filtra wyszukiwania -> Filter. 6. Kliknijmy najpierw w nazwę szablonu Ocean Air a potem w odnośnik: [Download Ocean Air], a następnie ponownie [Download]. 7. W oknie dialogowym wybierzmy opcję Zapisz, aby wczytać plik do katalogu na dysku swojego komputera. Otworzy się menedżer plików w Państwa komputerze. 8. Odszukajmy i wskażmy, zaznaczając myszką, utworzony w swoim komputerze katalog /templates, 9. Naciśnijmy przycisk Zapisz lub OK. Nazwa pakietu na stronach z szablonami jest zwykle odnośnikiem wywołującym uruchamiającym pobieranie pakietu lub przekierowującym do następnej strony na której znajduje się końcowy odnośnik Pobierz [Download]. Ponadto często znajdziecie Państwo dodatkowe informacje o wielkości pliku, dacie przesłania na serwer, formacie pliku, stronie WWW autora. Niekiedy także komentarze użytkowników. Możecie Państwo oczywiście pobrać od razu kilka pakietów. Wybrane pakiety zainstalujecie w swojej witrynie (albo na lokalnym serwerze testowym) i obejrzycie przy pomocy modułu Rozszerzenia Szablony. Szablony do wyboru Kilka szablonów włączonych jest domyślnie do pakietu źródłowego Joomla! 1.5.x (beez, JA_Purity, rhuk_milkyway). Można stworzyć własny szablon (o czym będzie dalej), albo znaleźć odpowiedni do wymagań witryny w licznych repozytoriach plików dla Joomla!. Oto przykładowe z nich: MamboHut: kilkaset, łatwe przeglądanie, miniatury. Design for Joomla: kilkadziesiąt, łatwe przeglądanie, miniatury. Free Joomla Templates: niewielki, ale ciekawy zestaw, miniatury. Joomla-templates.com: kilkanaście, łatwo przeglądać, pełny podgląd. Polskie Centrum Joomla: kilkadziesiąt, łatwo przeglądać, miniatury. Instalacja z pakietu instalacyjnego Aby zainstalować szablon z pakietu instalacyjnego: 1. Przejdźmy w panelu administracyjnym Joomla! do menu Rozszerzenia Instalator. 2. Przejdźmy do pozycji Instaluj z pakietu 3. Kliknijmy przycisk Przeglądaj. 4. W oknie dialogowym wskażmy plik pakietu instalacyjnego. 5. Kliknijmy przycisk Wczytaj plik & Zainstaluj. Po chwili otrzymamy komunikat, że instalacja zakończyła się pomyślnie. 4

6. Kliknijmy przycisk. Przejdźmy do wykazu szablonów Rozszerzenia Szablony. 7. Ustawmy zainstalowany szablon jako domyślny. Odinstalowanie szablonu Aby odinstalować szablon: 1. Przejdźmy w panelu administracyjnym do menu Rozszerzenia i zakładka Szablony. 2. Zaznaczmy w wykazie szablonów pole wyboru przy szablonie przeznaczonym do usunięcia. 3. Kliknijmy przycisk Odinstaluj w pasku narzędzi (Operację można wykonać tylko na szablonach, które można usunąć. Bieżący szablon nie może być usunięty) 4. Powinniśmy uzyskać komunikat: Odinstaluj Szablon: (Powodzenie). Uwaga: Plik szablonu zostanie nieodwracalnie usunięty z serwera. Jeśli będzie nam jednak potrzebny, musimy go ponownie zainstalować. Dlatego zawsze rozważmy, czy rzeczywiście konieczne jest odinstalowanie szablonu. 5

Część B. Przygotowanie szablonu własnego Proces przygotowania własnego szablonu jest dość złożony. Wymaga zrealizowania minimum 5 zadań. Są to: 1. Przygotowanie szaty graficznej; 2. Zaprojektowanie kodu (X)HTML; 3. Zaprojektowanie kodu CSS; 4. Zagnieżdżenie kodu PHP; 5. Przygotowanie pliku instalacyjnego; Wszystkie te zadania wymagają dużych nakładów pracy (zwłaszcza punkt 1,2,3). W związku z tym w niniejszej instrukcji postaram się Państwu naświetlić podstawowe i najważniejsze etapy budowy własnego szablonu. 1. Przygotowanie szaty graficznej. Pierwsze zadanie jakie musimy zrealizować to przygotowanie szaty graficznej dla strony. W tym celu idealnie nadają się programy typu: Adobe Photoshop. Poniżej przygotowałem dla Państwa przykładowy projekt graficzny prostej witryny, który wykonałem w programie Adobe Photoshop: Generalnie zasada jest następująca: projektujemy graficznie wygląd witryny w taki sposób by jej elementy graficzne reprezentowały późniejszy układ kontenerów <div> w projektowanym kodzie HTML. Proszę zwrócić uwagę, iż celowo w układzie graficznym pojawiły się wąskie czarne paski, które mają ułatwić skorzystanie w Photoshopie z mechanizmu Cięcia na plasterki (Odcięcia w starszych wersjach Photoshopa) w celu pocięcia wyglądu strony na poszczególne grafiki. W procesie projektowania strony w Adobe Photoshop bardzo przydatny (a napisałbym wręcz, że niezbędny) jest system linii pomocniczych, którymi można się posługiwać uruchamiając Miarki (Ctrl+R). Przykładowy proces cięcia przedstawiony jest na poniższej ilustracji: 6

W procesie cięcia warto zadbać od razy o właściwe nazwy dla pociętych grafik zaznaczamy poszczególne odcięte grafiki i prawym przyciskiem edytujemy odcięcie nadają mu nazwę np. grafika_naglowek, albo grafika_lewypanel, itp. Pocięte obrazy zapisujemy na dysk korzystając z opcji Plik Zapisz dla Internetu i Urządzeń Można tam ustawić również format graficznych zapisywanych elementów strony oraz ustawić opcje ich optymalizacji. Po zapisaniu uzyskujemy na dysku katalog Images, w którym znajdują się fragmenty strony WWW, a nazwy zawartych w nim plików graficznych odpowiadają nazwom odcięć. Wykonujemy również zrzut ekranu naszego graficznego projektu strony WWW i zapisujemy go pod nazwą: template_thumbnail.png w rozdzielczości około 200px x 150px. Ważnym elementem tego zadania jest zanotowanie sobie głównych wymiarów witryny WWW oraz, jeżeli to możliwe, wymiarów poszczególnych grafiki tworzących ogólny wygląd witryny WWW. Będzie to nam potrzebne w celu ustalenia wymiarów poszczególnych kontenerów <div> 7

2. Budowanie kodu PHP Ten etap budowania szablonu jest ważny, gdyż pozwala on zintegrować szablon z bazą danych SQL. Podstawowym elementem strony WWW dla mechanizmu PHP jest plik index.php. Plik index.php jest skryptem zapisywanym w języku PHP, na co wskazuje trzyliterowe rozszerzenie jego nazwy. Językiem PHP posługujemy się po to, aby określić czynności, które zostaną wykonane na serwerze, zanim powstanie dokument HTML wysyłany do przeglądarki użytkownika. Skrótowo mówiąc, instrukcje języka PHP generują wynikowy dokument HTML. Instrukcje PHP mogą posłużyć nam do: 1. uruchomienia skryptów Joomla!, które dostarczą treści dokumentu HTML 2. odczytania niezbędnych informacji z plików konfiguracyjnych, 3. wpisania tych treści do dokumentu HTML, 4. włączenia do dokumentu HTML zawartości innych plików, 5. komentowania treści dokumentu HTML, W pierwszym punkcie posługujemy się funkcjami Joomla! przeznaczonymi do wykorzystania w szablonach. W drugim punkcie korzystamy z instrukcji PHP odczytujących potrzebne dane. W trzecim punkcie korzystamy z funkcji echo() języka PHP. W punkcie czwartym korzystamy z funkcji include() lub funkcji include_once() języka PHP. W ostatnim piątym punkcie korzystamy ze sposobów oznaczania komentarzy w skryptach PHP. Zawartość PHP owa pliku index.php dla szablonu Joomla! <?php?> /* Szkielet pliku index.php */ defined( '_VALID_MOS' ) or die( 'Zasób zastrzeżony' ); /* konieczne, wyodrębnia kod ISO ze stałej _ISO z pliku etykiet i komunikatów językowych */ $iso = explode( '=', _ISO ); /* xml prolog - skomentowany, aby wymusić tryb zgodności */ // echo '<?xml version="1.0" encoding="'. $iso[1].'"?'.'>'; <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo _LANGUAGE;?>" lang="<?php echo _LANGUAGE;?>"> <head> <meta http-equiv="content-type" content="text/html; <?php echo _ISO;?> " /> <?php mosshowhead(); if ($my->id) {initeditor(); }?> <script type="text/javascript"></script> <link rel="stylesheet" type="text/css" title="standardowy" href="<?php echo $GLOBALS['mosConfig_live_site'];?>/templates/<?php echo $mainframe->gettemplate();?>/css/template_css.css" media="screen" /> <link rel="shortcut icon" href="<?php echo $mosconfig_live_site;?>/images/favicon.ico" /> </head> <body> <div id="header"> <!-- nagłówek --> <h1><?php echo $GLOBALS['mosConfig_sitename'];?></h1> 8

</div> <div id="content_main"> <!-- treść główna --> <?php mosmainbody();?> </div> <div id="left_bar"> <!-- pasek nawigacyjny --> <?php mosloadmodules( 'left' );?> </div> <div id="right_bar"> <!-- różne inne treści --> <?php mosloadmodules( 'right' );?> </div> <div id="footer"> <?php include_once( $GLOBALS['mosConfig_absolute_path']. '/includes/footer.php' );?> <div> </body> Głównym zadaniem pliku index.php jest generowanie dokumentów HTML przesyłanych do przeglądarek internetowych. Toteż skrypt ten ma budową podobną do dokumentu HTML, a dokładniej XHTML, bo tą wersją języka znakowania stron internetowych będziemy się tutaj posługiwać. Patrzmy zatem na zawartość tego skryptu, jak na dokument XHTML poszerzony o fragmenty napisane w PHP. Skrypt rozpoczyna się od nagłówka. 1 <?php 2 /* 00_podstawa.php. Szkielet pliku index.php */ 3 defined( '_VALID_MOS' ) or die( 'Zasób zastrzeżony' ); 4 /* konieczne, wyodrębnia kod ISO ze stałej _ISO z pliku etykiet i komunikatów językowych */ 5 $iso = explode( '=', _ISO ); 6 /* prolog XML - skomentowany, aby wymusić tryb zgodności */ 7 // echo '<?xml version="1.0" encoding="'. $iso[1].'"?'.'>'; 8?> Gdzie: Linia 1: znacznik rozpoczynający <?php, sygnalizuje on serwerowi, że rozpoczyna się fragment kodu napisany w PHP. Linia 2: komentarz: zapisaliśmy w nim nazwę pliku PHP i określiliśmy jego rolę. Linia 3: uniemożliwia bezpośrednie uruchomienie skryptu. Zawarta tu instrukcja powoduje, że serwer sprawdza, czy wcześniej została zdefiniowana stała globalna _VALID_MOS. Jej definicję zawiera plik index.php umieszczony w głównym katalogu serwisu, uruchamiany każdorazowo, gdy serwer otrzyma żądanie pokazania strony. Linia 4: komentarz objaśniający instrukcję w następnej linii. Linia 5: została objaśniona w komentarzu. Kod ISO będzie potrzebny do określenia w nagłówku dokumentu HTML systemu kodowania znaków. Linia 6: komentarz dotyczący linii 7. Informuje, że w kolejnej znajduje się - skomentowany, a więc wyłączony, prolog XML. Linia 7: skomentowany prolog XML. Więcej na ten temat dowiemy się z opracowania w aneksie - Prolog XML Linia 8: znacznik kończący fragment w PHP. Tuż za nagłówkiem i prologiem XML umieszczona została wymagana w dokumentach HTML deklaracja rodzaju dokumentu, a następnie znacznik <html> wskazuje, że w tym miejscu rozpoczyna się element główny dokumentu HTML. Jak w każdym dokumencie HTML, mamy w nim dwie sekcje <head> i <body>. Przyjmijmy, że kod HTML w sekcji <head> jest Państwu znany i zrozumiały. Zobacz jednakże element HTML i element HEAD. Tu zwróćmy uwagę na kolejny fragment zapisany w PHP: <?php mosshowhead(); 9

if ($my->id) {initeditor(); }?> Mamy tutaj dwa polecenia: Polecenie mosshowhead(), to wywołanie jednej z funkcji Joomla!. Jej zadaniem jest wygenerowanie zestawu charakterystycznych dla sekcji <head> meta-znaczników. Instrukcja warunkowa: if ($my->id) {initeditor(); powoduje sprawdzenie, czy przeglądający stronę użytkownik zalogował się. Jeśli tak, to do pamięci jego komputera zostanie wczytany kod edytora WYSIWYG, by mógł z niego skorzystać w razie potrzeby. Umieszczenie tej instrukcji powoduje zauważalne przyspieszenie wczytywania stron Joomla! w przeglądarkach. W elemencie body znalazł się zestaw znaczników HTML oraz instrukcji PHP wywołujących funkcje Joomla! i generujących treści strony. Każdy element obejmujemy (jak Państwo już zapewne wiedzą) znacznkiem <div> z selektorem identyfikatora, wskazującym na jego funkcję w strukturze treści. #header - nagłówek strony, nazwa zostanie odczytana ze zmiennej $mosconfig_sitename, zapisanej w konfiguracji witryny, #content_main - treść główna, którą wygeneruje instrukcja <?php mosmainbody();?>, #left_bar - pasek nawigacyjny, jego treść wygeneruje instrukcja <?php mosloadmodules('left');?> #right_bar - pasek z różnościami, jego treść wygeneruje instrukcja <?php mosloadmodules('right');?> #footer - stopka, która zostanie wczytana z pliku /includes/footer.php 3. i 4. Budowanie kodu (X)HTML i CSS Tu wskaże jedynie Państwu, iż należy teraz zaprojektować szablon strony odpowiadający strukturze graficznej witryny zaprojektowanej w punkcie 1. W kolejnym kroku należy podłączyć grafiki pod odpowiadające im kontenery <div>. Ostatnim zabiegiem będzie tu konfiguracja styli kaskadowych w celu dopasowania struktury HTML i CSS do opracowanego systemu grafik. Strukturę witryny należy zagnieździć w sekcji <body> przygotowanego w punkcie 2 pliku index.php. Oczywiście w poszczególnych kontenerach należy zastosować kod PHP zgodny z opisem w punkcie 2. 5. Przygotowanie pliku instalacyjnego XML (templatedetails.xml) Plik templatedetails.xml jest jednym z trzech niezbędnych elementów szablonu. Joomla! potrafi zainstalować szablon i korzystać z niego tylko wówczas, gdy plik templatedetails.xml zostanie stworzony zgodnie z regułami języka XML. Skrypt templatedetails.xml spełnia trzy funkcje: integruje szablon z Joomla!, instruuje instalatora, gdzie i jakie pliki umieścić podczas instalacji. udostępnia w panelu administracyjnym informacje o szablonie. Skrypt składa się z dwóch elementów - nagłówka oraz elementu głównego: mosinstall, w którym można wyodrębnić dwie części: informacyjną - zawiera dane szablonu, konfiguracyjną - określa rozmieszczenie plików szablonu 10

Przykładowy plik templatedetails.xml dla szablonu o nazwie Ocean Waves: <?xml version="1.0" encoding="utf-8"?> <mosinstall version="1.5" type="template"> <name>ocean Waves</name> <creationdate>january 2008</creationDate> <author>free CMS Templates</author> <authoremail>webmaster@freecmstemplates.com</authoremail> <authorurl>http://www.freecmstemplates.com</authorurl> <version>1.0</version> <description>ocean Waves - Joomla 1.5 Template</description> <files> <filename>index.php</filename> <filename>templatedetails.xml</filename> <filename>css/template.css</filename> <filename>images/bbg.jpg</filename> <filename>images/bbgo.jpg</filename> <filename>images/bg-header.jpg</filename> <filename>images/botround.jpg</filename> <filename>images/modtop.jpg</filename> <filename>images/top-header.jpg</filename> <filename>images/topround.jpg</filename> <filename>images/logo.png</filename> <filename>template_thumbnail.png</filename> </files> <positions> <position>breadcrumbs</position> <position>user3</position> <position>user4</position> <position>top</position> <position>left</position> <position>right</position> <position>bottom</position> <position>footer</position> </positions> </mosinstall> Omówienie pliku templatedetails.xml Skrypt instalacyjny napisany jest w języku XML. Każdy znacznik musi więc być zamknięty. Poniżej znajdziecie Państwo szczegółowe objaśnienie poszczególnych elementów. Część informacyjna: W nagłówku skryptu umieszczona jest instrukcja dla programu przetwarzającego: <?xml version="1.0" encoding="utf-8"?> Informuje ona procesor, że plik został napisany zgodnie ze specyfikacją XML w wersji 1.0, oraz że kodowany jest zgodnie ze standardem UTF-8. Jeżeli tej instrukcji nie ma, program przetwarzający i tak przyjmuje, że zostało zastosowane uniwersalne domyślne kodowanie - właśnie UTF-8. 11

Element główny rozpoczyna linia druga, a kończy ostatnia: <mosinstall version="1.5" type="template"> </mosinstall> Znacznik mosinstall poleca zainstalować szablon. Argument template wskazuje instalatorowi, że jest to właśnie szablon, a nie moduł czy komponent. Argument version określa numer minimalnej wersji Joomla!, dla której szablon został stworzony. W praktyce nie ma to większego znaczenia, bowiem od kilku lat koncepcja szablonów dla tych systemów nie uległa zmianie. Kończąca instrukcję ostatnia linia kodu zawiera jedynie słowo kluczowe mosinstall poprzedzone ukośnikiem i ujęte, jak wszystkie instrukcje w ostre nawiasy. <name>ocean Waves</name> Trzecia linia określa nazwę szablonu, a równocześnie nazwę katalogu, w którym instalator ma umieścić pliki. Na podstawie tej instrukcji zakładany jest katalog główny szablonu. W gruncie rzeczy jest to więc nie tylko informacja, ale i instrukcja konfiguracyjna. Instalator zakłada poprawnie nazwany katalog także wówczas, gdy nazwa szablonu składa się z więcej niż jednego wyrazu. Łączy wtedy słowa tworzące nazwę w jedno za pomocą dolnych łączników. Jeśli instalujemy szablony "ręcznie", zwróćmy uwagę, aby nazwa katalogu odpowiadała nazwie szablonu. W przeciwnym przypadku Joomla! zgłosi komunikat, że szablon nie został znaleziony lub wybrany. <name>ocean Waves</name> <creationdate>january 2008</creationDate> <author>free CMS Templates</author> <authoremail>webmaster@freecmstemplates.com</authoremail> <authorurl>http://www.freecmstemplates.com</authorurl> <version>1.0</version> <description>ocean Waves - Joomla 1.5 Template</description> Kolejnych siedem linii zawiera dane szablonu. Nie są one konieczne, by z szablonu korzystać. Prezentowane są w panelu administracyjnym. Mogą być również wykorzystane przez składniki Joomla! lub programy zewnętrzne. Część konfiguracyjna: <files> <filename>index.php</filename> <filename>templatedetails.xml</filename> <filename>css/template.css</filename> <filename>images/bbg.jpg</filename> <filename>images/bbgo.jpg</filename> <filename>images/bg-header.jpg</filename> <filename>images/botround.jpg</filename> <filename>images/modtop.jpg</filename> <filename>images/top-header.jpg</filename> <filename>images/topround.jpg</filename> <filename>images/logo.png</filename> <filename>template_thumbnail.png</filename> </files> <positions> <position>breadcrumbs</position> 12

</positions> <position>user3</position> <position>user4</position> <position>top</position> <position>left</position> <position>right</position> <position>bottom</position> <position>footer</position> Linie te wskazują na pliki składowe i ich lokalizację w katalogu szablonu. Nazwy plików ujęte są w znacznik rozpoczynający <filename> i w znacznik kończący </filename> (różnią się ukośnikiem). Plik template_thumbnail.png to miniatura zrzutu ekranu prezentująca szablon. Umieszczamy ją również w głównym katalogu szablonu. Nie wyszczególniamy tu skryptu templatedetails.xml. Instalator umieszcza bowiem ten właśnie plik jako pierwszy. 13