Posiadając już podstawową wiedzę na temat konfigurowania systemu Joomla! 1.6 na serwerze lokalnym, oraz znając zastosowanie Template Managera możemy śmiało rozpocząć swoją przygodę w sieci. Jeśli prowadzimy witrynę hobbystycznie nic nie stoi na przeszkodzie aby użyć gotowego szablonu, o których mówiliśmy w poprzedniej lekcji naszego Kursu Joomla 1.6.
Co jednak zrobić kiedy nasza strona ma się przebić w gąszczu innych?
Mamy dwa wyjścia, zależne głównie od naszych możliwości graficznych. Pierwszym z nich będzie wynajęcie grafika, który odpowiednio przygotuje nam cały design, a my będziemy mogli już zakodować go sami, lub pokusić się o wykonanie własnego layout'u, który odpowiednio potniemy i skleimy z niego zwykły szablon xHTML/CSS.
Jeśli będziemy posiadać już sporządzony szkielet witryny, będziemy mogli przerobić go na szablon poprawnie obsługiwany przez Joomla! 1.6. Praca nad odpowiednim zakodowaniem nie jest trudna, może trochę bardziej skomplikowana niż było budowanie szablonu dla Joomla 1.5, jednak w dzisiejszej części postaramy się przeprowadzić przez ten proces bezboleśnie. Zabierzmy się więc do pracy.
Co będzie nam potrzebne?
Na początku przygotujmy sobie podstawowe pliki, te niezbędne, oraz te nie wymagane, lecz zalecane, które umożliwią nam poprawne rozpoznawanie budowanego szablonu.
Kiedy wszystko z powyższej listy mamy przygotowane, przejdźmy do kolejnego kroku.
Edycja pliku index.htm
Podstawowe zmiany
Pierwszą czynnością będzie zmiana rozszerzenia pliku z index.htm na index.php. Tylko tak szablon będzie poprawnie działać.
Przejdźmy teraz do szczegółowej edycji. Musimy wymienić całą sekcję <head>. Kasujemy ją po prostu, a na jej miejsce wklejamy poniższy listing kodu:
<?php defined('_JEXEC') or die; $app = JFactory::getApplication(); ?> <!DOCTYPE HTML> <html> <head> <jdoc:include type="head" /> <link rel="stylesheet" href="templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> </head>
Pierwszy skrypt, wywołany zaraz na początku pliku index.php blokuje nam bezpośredni dostęp do witryny. Dalej ustalamy swoje DOCTYPE, czyli wersję html'a, w której szablon został zakodowany. Jak widzicie, my użyliśmy HTML5. Następnie otwieramy sekcję <html> oraz <head>. Kolejna linia będzie importować nasze meta dane (element do zmiany w konfiguracji globalnej, w panelu administracyjnym zaplecza).
Trzy kolejne wersy na pewno są Wam w jakiś sposób znajome. Deklarujemy tu arkusze stylów. Pierwsze 2 to rdzenne pliki Joomla! 1.6. Muszą zostać koniecznie umieszczone. Trzeci natomiast jest naszym plikiem o nazwie template.css, który umieściliśmy w folderze css/. Jak zostało wspomniane wcześniej, nazwy naszych plików mogą być różne, dlatego każdy powinien dostosować je do swoich potrzeb.
O zmiennych, które wywoływane są w ścieżkach plików CSS mówić będziemy w dalszych krokach.
Deklaracja pozycji modułów
Jak dobrze wiemy, Joomla, aby umieszczać teksty, dodatki, banery itp. korzysta z tzw. modułów, czyli instalowanych przez nas rozszerzeń, które wzbogacają cały system o nowe funkcje. My, projektując swoją witrynę, musimy przewidzieć, w których miejscach umieszczać będziemy wspomniane elementy. Dla ułatwienia i pewnego zobrazowania, przyjmijmy, ze planujemy na stronie umieścić menu, stopkę, kolumnę po lewej stronie i miejsce na reklamy.
Miejsca te powinny zostać przygotowane w szkielecie naszej witryny, tak samo, ja byśmy mieli je wstawić ręcznie. Jednak zamiast ręcznego wpisywania, umieścimy w danych miejscach odwołania do pozycji modułu. Robimy to w następujący sposób:
<jdoc:include type="modules" name="nazwa-pozycji" style="xhtml" />
W parametrze name podajemy wybraną przez nas nazwę dla danego miejsca na stronie. Atrybut style informuje system Joomla o tym jak mają być wstawiane moduły (czy to w tabelkach, czy elementach blokowych <div>). Pozostawmy tą pozycję bez zmian. W nazwie nie powinniśmy podawać polskich znaków, oraz spacji - zamiast tego użyjmy łącznika lub podkreślenia.
W naszym przypadku, nazwy pozycji to: menu, stopka, lewa, baner. W odpowiednich miejscach wstawiamy poniższe, odpowiednie, wersy kodu:
<jdoc:include type="modules" name="menu" style="xhtml" /> <jdoc:include type="modules" name="stopka" style="xhtml" /> <jdoc:include type="modules" name="lewa" style="xhtml" /> <jdoc:include type="modules" name="baner" style="xhtml" />
Na budowanej przez nas stronie musimy również wyznaczyć miejsce na główną treść, generowaną przez Joomla. Tam wyświetlać się będą artykuły, oraz główny content witryny. W tym miejscu wklejamy taki listing:
<jdoc:include type="component" />
Na tym kroku możemy zakończyć edycję pliku index.php. Dzięki wprowadzonym zmianom Joomla będzie wiedziała co i gdzie może umieszczać.
Edycja pliku templateDetails.xml
Jest to jeden z najważniejszych elementów szablonu. Bez niego nie będzie możliwe przeprowadzenie jego instalacji, dlatego dołóżmy wszelkich starań, aby pozbawiony był błędów, literówek etc.
Na samej górze umieśćmy te 3 linijki kodu:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd"> <extension version="1.6" type="template" client="site">
Pierwszy wers mówi o wersji xml'a oraz kodowaniu całego pliku. W naszym przypadku, zalecany UTF-8. Drugi informuje natomiast o DOCTYPE tworzonego szablonu. Kolejna przekazuje wersję Joomla, na której pracować ma cały szablon - oczywiście jest to wersja 1.6.
Następny blok kodu, który wstawiamy, zawiera kilka podstawowych informacji.
<name>WEBroad.pl</name> <creationDate>04-07-2011</creationDate> <author>Michał Kortas</author> <authorEmail>vortal@webroad.pl</authorEmail> <authorUrl>http://webroad.pl</authorUrl> <copyright>(C) WEBroad.pl - 2011</copyright> <license>Free</license> <version>1.0.0</version> <description>Szablon Kursu Joomla 1.6</description>
Są nimi: nazwa szablonu, data utworzenia, autor, e-mail autora, adres www, prawa autorskie, licencja, wersja, oraz opis. W porównaniu do systemu Joomla 1.5 nic się tutaj nie zmieniło.
Kolejna sekcja zawiera spis wszystkich plików zawartych w naszym budowanym projekcie. Nie musimy podawać nazw plików, znajdujących się w folderach.
<files> <folder>css</folder> <folder>design</folder> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_preview.png</filename> <filename>template_thumbnail.png</filename> <filename>favicon.ico</filename> </files>
Nazwy plików umieszczamy w tagu <filename>, natomiast nazwy folderów w tagu <folder>.
Ostatnią z podstawowych części templateDetails.xml jest deklaracja, wcześniej umieszczonych w pliku index.php, pozycji, w których wywoływane będą moduły. Robimy to w poniższy sposób.
<positions> <position>menu</position> <position>stopka</position> <position>left</position> <position>baner</position> </positions>
Za tę czynność odpowiadają tagi <position>.
Na samym końcu pliku zamykamy wcześniej otwartą strukturę.
</extension>
Gotowy plik templateDetails.xml wyglądać powinien w ten sposób:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd"> <extension version="1.6" type="template" client="site"> <name>WEBroad.pl</name> <creationDate>04-07-2011</creationDate> <author>Michał Kortas</author> <authorEmail>vortal@webroad.pl</authorEmail> <authorUrl>http://webroad.pl</authorUrl> <copyright>(C) WEBroad.pl - 2011</copyright> <license>Free</license> <version>1.0.0</version> <description>Szablon Kursu Joomla 1.6</description> <files> <folder>css</folder> <folder>design</folder> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_preview.png</filename> <filename>template_thumbnail.png</filename> <filename>favicon.ico</filename> </files> <positions> <position>menu</position> <position>stopka</position> <position>left</position> <position>baner</position> </positions> </extension>
Na tym zakończyliśmy konfiguracje podstawowych, niezbędnych elementów nowego szablonu.
Tworzenie pliku favicon.ico
Ten krok nie jest konieczny, plik nie musi się znajdować w naszym projekcie. Jeśli jednak chcemy zostać potraktowani za profesjonalistów, umieszczanie go jest bardzo dobrym zwyczajem. Po co Joomla ma go zastąpić swoim logiem?
Przygotujmy sobie plik o nazwie favicon.png, o proporcjonalnych rozmiarach, np. 32x32 [px].
W przeglądarce wpiszmy adres www.converticon.com.
W oknie, które się pojawi, naciśnijmy button Get Started.
Z dysku wybieramy plik favicon.png, a następnie włączamy Export.
W kolejnym oknie dialogowym ustalamy rozmiar dla naszego favcon'u. Najlepiej niech to będzie domyślny, czyli 32x32 [px].
Wciskamy przycisk Save As i zapisujemy favicon.ico na dysku twardym komputera.
Tworzenie paczki instalacyjnej
Szablon mamy już skończony. Co zrobić aby Joomla 1.6 mogła z niego korzystać? Należy przygotować specjalną paczkę instalacyjną. Może brzmi groźnie, jednak to nic trudnego. Po prostu pakujemy wszystko do archiwum ZIP. Nadajemy mu nazwę, najlepiej bez polskich znaków i odstępów. Powiedzmy, że dla przykładu będzie to webroad.zip.
Teraz nie pozostaje nam nic innego jak instalacja szablonu w systemie. Przechodzimy do zaplecza, a następnie do instalatora. Wybieramy archiwum z dysku i instalujemy. Na koniec zmieniamy szablon domyślny na nasz, wgrany przed chwilą. Od tej pory wszystko powinno działać poprawnie.
Przydatne zmienne
Tworząc szablony dla Joomla! CMS pamiętajmy, że system oferuje nam szereg zmiennych, poprzez które możemy pobrać ważne elementy naszej witryny. Oto te najbardziej potrzebne.
<?php echo $this->baseurl ?> // przekazuje bezpośredni adres naszej strony głównej <?php echo $this->template ?> // przekazuje nazwę aktualnie używanego szablonu $this->countModules('nazwa-pozycji-modułu'); // przekazuje ilość aktualnie wyświetlanych modułów w danej pozycji
Zakończenie
W tej części naszego kursu Joomla 1.6 to już wszystko. Mamy nadzieję, że opisane powyżej czynności są dla Was zrozumiałe.
Powodzenia we wdrażaniu własnych projektów!
Witajcie w kolejnym kursie wideo na portalu WEBroad.pl. Nazywam się Michał Kortas i w kolejnych...
|
soczewki kontaktowe Internetowy salon optyczny, w ktorym znajdizesz oryginalne szkła kontaktowe. soczewki.kontaktowe.com |
Odwiedza nas 238 gości oraz 0 użytkowników.
E-mail: kontakt@webroad.pl
Formularz: webroad.pl/kontakt
Do rozwiązywania problemów związanych z artykułami służą tylko i wyłącznie komentarze!
