CMS

Edycja pliku index.php – własny szablon Joomla! 1.7 i 2.5

Na poprzedniej lekcji przygotowaliśmy sobie środowisko, w którym bez przeszkód będziemy mogli stworzyć nas własny szablon dla Joomla! 1.7. Nadszedł czas na wkroczenie w świat kodowania. Wszystkich przerażonych informuję, że jeśli mamy już szkielet nowej witryny, w postaci HTML, przerobienie go na postać szablonu nie będzie niczym wymagającym. W dzisiejszym poradniku pokażę Wam, jak poprawnie skonfigurować plik index.php.

Jak wspomniałem, do wykonania szablonu wykorzystamy szkielet witryny w postaci HTML. Jeśli aktualnie nie posiadasz nic pod ręką, zamieszczam pliki użyte w tej lekcji na końcu artykułu. Przypuśćmy, że nasza strona nie będzie skomplikowana. Jej elementami będą: nagłówek, kolumny – lewa i prawa, po środku część główna, czyli content, a na samym dole stopka. Zakładam oczywiście, że każda z w/w pozycji jest również odpowiednio sformatowana przez Ciebie w arkuszu CSS. Ogólny schemat naszego projektu będzie wyglądał tak:

Jak wiemy, taki plik do zmiany treści, musi być pobrany z serwera, a następnie edytowany i podmieniony. Przy bardzo prostych projektach, które wymagają naszej ingerencji raz na dłuższy okres czasu, nie ma problemu. Po to jednak istnieje Joomla!, aby robić to za nasz w sposób dynamiczny, z wykorzystaniem języka skryptowego, jakim jest PHP.

W tym momencie powinniśmy zadać sobie pytanie, w jaki sposób wskazać naszemu CMS’owi, w którym miejscu wstawić wybraną przez nas treść? To jednak nic trudnego. Joomla! ma przygotowane specjalne instrukcje, informujące system, na jakich obszarach witryny ma „pracować”. Jak to działa w praktyce? Każdy obszar na stronie, w którym docelowo chcemy umieścić jakiekolwiek dane, to tzw. pozycja. W utworzonych przez nas pozycjach możemy umieszczać moduły, czyli małe skrypty, wyświetlające pożądane przez nas elementy (tekst, grafika itp.). Aby były one „widziane” przez Joomla! musimy je odpowiednio zadeklarować, czym zajmiemy się własnie w tym momencie.

Dla przykładu zajmę się obszarem strony, który nazwałem „lewa” (lewa, szara kolumna na schemacie). Kod odpowiedzialny za utworzenie jej jest następujący:

<div id="lewa">Ręcznie wprowadzony tekst</div>

Aby „zmusić” system Joomla! do dynamicznego wprowadzania danych w tym miejscu, musimy pomiędzy znacznikami DIV wpisać instrukcję, która zadeklaruje naszą nową pozycję. Całość wyglądać będzie w ten sposób:

<div id="lewa">
<jdoc:include type="modules" name="lewa" style="xhtml" />
</div>

W powyższym listingu, w parametrze NAME, podajemy unikalną nazwę pozycji (nie mogą się one powtarzać w budowanym przez nas projekcie!). Pozostałe mogą zostać bez zmian. Analogicznie wstawiamy podobne kody w każde miejsce, które przeznaczymy na pozycje, widziane przez Joomla!. W naszym projekcie powinno więc wyglądać tak:

<div id="naglowek">
    <jdoc:include type="modules" name="naglowek" style="xhtml" />
</div>
<div>
    <div id="lewa">
    <jdoc:include type="modules" name="lewa" style="xhtml" />
    </div>
    <div id="content"> Pozostawiamy miejsce puste </div>
    <div id="prawa">
    <jdoc:include type="modules" name="prawa" style="xhtml" />
    </div>
</div>

<div id="stopka">
    <jdoc:include type="modules" name="stopka" style="xhtml" />
</div>

W miejscu na treść główną naszej witryny – czyli CONTENT – celowo pozostawiłem puste miejsce. Dla jego zadeklarowania użyjemy innej instrukcji:

<div id="content">
<jdoc:include type="component" />
</div>

Kolejnym, ważnym elementem jest umieszczenie deklaracji do skryptu, który będzie informował użytkownika o wykonanych czynnościach – zalogowaniu, wylogowaniu, błędach, wskazówkach itp. – jest to system wiadomości. Powinniśmy zadeklarować go tuż nad główną treścią, jednak gdzie to zrobimy, zależy tylko i wyłącznie od nas.

<jdoc:include type="message" />

Pierwszą część pliku index.php mamy już wykonaną. Ostatnim punktem, który wykonamy, jest przygotowanie sekcji HEAD. Joomla! oddaje nam do dyspozycji gotowy kod, który wystarczy skopiować i wkleić.

<?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>

Skrypt na samej górze zabezpiecza szablon przez bezpośrednim uruchomieniem, poprzez wpisanie ścieżki dostępu w pasku adresu. W miejscach, gdzie importowane są arkusze CSS, oprócz dwóch pierwszych – dołączanych przez system Joomla! dodajemy także nasz własny, który odpowiedzialny jest za formatowanie naszej witryny. Jak widać, umieszczony będzie on w folderze CSS, znajdującym się w katalogu, który przygotowaliśmy w poprzedniej lekcji, w którym przechowujemy wszystkie pliki składowe szablonu.

Na sam koniec przedstawię jeszcze kompletny listing kodu, dotyczący omawianej przez nas struktury. Zadeklarowane pozycje, czyli naglowek, lewa, prawa i stopka warto zapisać dokładnie, gdzieś na kartce, aby nie pomylić siew ich pisowni. Poprawność nazewnictwa będzie szczególnie wymagana, ponieważ tworzyć będziemy plik konfiguracyjny templateDetails.xml. Wystarczy w nim jedna, mała literówka, a szablon po prostu się nie zainstaluje, lub po prostu nie będzie działać poprawnie.

<?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>

<body>

<div id="naglowek"> 
<jdoc:include type="modules" name="naglowek" style="xhtml" /> 
</div> 
<div> 
<div id="lewa"> 
<jdoc:include type="modules" name="lewa" style="xhtml" /> 
</div> 
<div id="content"> 
<jdoc:include type="message" /> 
<jdoc:include type="component" /> 
</div> 
<div id="prawa"> 
<jdoc:include type="modules" name="prawa" style="xhtml" /> 
</div> 
</div>

<div id="stopka"> 
<jdoc:include type="modules" name="stopka" style="xhtml" /> 
</div>

</body>

</html>

komentarze 2

Zostaw odpowiedź