Pomoc - Główny plik szablonu

Start

Programowanie

Szablony - techniki zaawansowane

Główny plik szablonu

Podstawowy plik szablonu nazywa się index.php. W zdecydowanej części zbudowany jest z kodu HTML, mimo że jest to skrypt PHP.

Nie musisz jednak znać PHP, aby stworzyć ten plik. Wystarczy, że zastosujesz podane w tym podręczniku instrukcje dokładnie w takim kształcie, jak zostały opisane i umieścisz je w odpowiednich miejscach. Ich głównym zadaniem jest włączenie do kodu HTML instrukcji wyświetlających zawartość strony - statyczną i dynamicznie się zmieniającą.

Aby wszystkie istotne szczegóły, objaśnić dokładnie podzielimy tworzenie pliku index.php na kilka etapów:

założenie pliku, wprowadzenie instrukcji wstępnych,
umieszczenie w szablonie głównej zawartości witryny,
umieszczenie w szablonie zawartości generowanej przez moduły Joomla!,
umieszczenie instrukcji wyświetlających inne elementy (data, nazwa witryny, wyszukiwarka,
umieszczenie winiety i stopki.

Zastrzeżenie

Artykuł omawia budowę szablonu wykorzystującego do rozmieszczania elementów treści tabele. To częste, ale niezalecane rozwiązanie.

Tabele nie są elementem przeznaczonym do formatowania układu strony. Służą przedstawianiu zestawień. Ale problem nie tkwi w wykorzystaniu tabel niezgodnym z ich przeznaczeniem. Istotniejsze jest, że zastosowanie tabel:

wymaga dodatkowego, niepotrzebnie obciążąjącego serwery i łącza kodu,
utrudnia kodowanie zgodne ze znaczeniem elementów treści i ich miejscem w strukturze dokumentu,
zaciemnia czytelność - miesza treść i kod wskazujacy na znaczenie z kodem służącym prezentacji,

W rezultacie:

wydłuża czas wczytywania i wyświetlania stron, przeciąża łącza,
czyni kod trudnym do penetracji przez wyszukiwarki internetowe,
utrudnia sensowną prezentacją treści przez czytniki dla osób niewidomych i niedowidzących,
ogranicza dostępność stron korzystającym z urządzeń przenośnych (telefony komórkowe, PDA),

A ponadto powoduje znaczne zwiększenie kosztów utrzymania, przechowywania na serwerach, transmisji.

Przedstawiamy jednak przykład takiego rozwiązania, ponieważ ciągle jest jeszcze bardzo często stosowane, spotkać się z nim można w wielu szablonach udostępnianych w Sieci.

Założenie pliku index.php, instrukcje wstępne

Aby założyć plik szablonu index.php:

Otwórz plik index.php (lub inaczej nazwany), np. wygenerowany podczas eksportu projektu graficznego z Photoshopa. Możesz użyć dowolnego edytora tekstu, np. Notatnika, a jeszcze lepiej edytora HTML typu Pajączek. Zapisz kopię pliku pod nazwą index.php.
Wprowadź najpierw następujące linie kodu tak, jak poniżej, pomijając ich numery:

  1: <?php
  2: /** Twoja nazwa szablonu - Joomla 1.0 an higher template
  3: *  @version 1.0
  4: *  @package TwojaNazwaSzablonu
  5: *  @copyright (C) 2005 by Twoja Nazwa
  6: *  @license Nazwa licencji, jeśli publikujesz szablon 
  7: */
 
  8: /** konieczne, aby wyodrębnić numer ISO ze stałej _ISO 
     z pliku etykiet i komunikatów językowych  */  
  9: $iso = explode( '=', _ISO ); 
 10: echo '<?xml version="1.0" encoding="'. $iso[1] . "\"?> \n";
 11: /** zapewnia, że ten plik zostanie włączony do nadrzędnego pliku */
 12: defined( '_VALID_MOS' ) or die( 'Nie masz uprawnień, by przeglądać ten zasób.' );
 13: ?>   
 14: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
 15: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo _LANGUAGE; ?>" 
   lang="<?php echo _LANGUAGE; ?> "> 
 16: <head>
 17: <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?> " />     
     
 18: <?php if ( $my->id ) { initEditor(); } ?>
 19: <?php mosShowHead(); ?>
 
 
 20: <link rel="stylesheet" type="text/css" 
    href="<?php echo $GLOBALS['mosConfig_live_site'];    
    ?>/templates/twoja_nazwa_szablonu/css/template_css.css" />
 21: <script language="JavaScript" type="text/javascript">
 22: <!--
 23: function MM_reloadPage(init) {
 24:  if (init==true) with (navigator) {
 25.    if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
 26:     document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; 
         onresize=MM_reloadPage; }}
 27:     else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
         location.reload();
 28:     }
 29:   MM_reloadPage(true);
 30: //-->
 31: </script>
 32: </head>

Zapisz plik.

Objaśnienia

Zadaniem pliku index.php jest przesłanie do przeglądarki internetowej kodu HTML wyświetlającego stronę internetową z całą jej zawartością. Ponieważ plik jest skryptem pisanym w PHP, stąd często powtarzające się instrukcje:

<?php echo "jakis tekst"; ?>

które można by przetłumaczyć jako "Napisz w kodzie HTML następujący tekst: jakiś tekst".

Zakładam, że masz pewną wiedzę na temat HTML, wiesz, że dokument HTML składa się z części nagłówkowej [<head>] i części głównej [<body>], że znasz podstawowe przynajmniej znaczniki, zwłaszcza służące do konstruowania tabeli. W objaśnieniach skupimy się więc na głównych cechach, charakterystycznych dla Joomla!

Linia 1: znacznik rozpoczynający kod PHP.

Linie 2-7: linie nagłówka. Objęte są znakami komentarza. Zawierają informacje o nazwie szablonu, autorstwie, licencji, itp. Możesz je pominąć, nie są interpretowane przez przeglądarkę.

Linie 8-11: wpisują tekst definiujący standard, w jakim jest napisany plik. Wskazują, że plik korzysta ze standardu XML w wersji 1.0. Oznaczenie kodowania ISO wyodrębniane jest ze stałej _ISO umieszczonej w pliku komunikatów językowych.

Linia 12: uniemożliwia nieuprawniony dostęp do tego pliku. W przypadku próby odczytania wyświetla stosowny komunikat - ze względów bezpieczeństwa ważne, aby tej linii nie pominąć.

Linia 13: zamyka znacznik kodu PHP.

Linie 14-15: definiują typ dokumentu HTML i odsyłają do źródła standardu XHTML. Zwróć uwagę na określenie podstawowego języka strony wymagane przez standard szablonu - tutaj stała _LANGUAGE.

Linia 16: rozpoczyna sekcję head (nagłówka) dokumentu HTML.

Linia 17: definiuje stronę kodową dla zawartości, _ISO - stała definiująca zastosowany standard kodowania znaków, określona w pliku językowym (polskie witryny Joomla! korzystają zwykle ze standardu ISO-8859-2).

Linia 18: $my->id to zmienna, która przyjmuje wartość niezerową, jeżeli zarejestrowany użytkownik jest zalogowany. W takim przypadku przeglądarka pobiera z serwera dość obszerny kod edytora tekstu, który może być potrzebny uprawnionemu użytkownikowi, gdy zechce dodawać zawartość do witryny. Anonimowy internauta nie potrzebuje edytora. Zmienna $my->id w jego przypadku = 0. W efekcie strona ładuje się do przeglądarki o wiele szybciej.

Linia 19: funkcja mosShowHead() zdefiniowana w pliku /includes/fronted.php wczytuje do nagłowka znaczniki metadanych: TITLE [<meta name="title" ...>], AUTHOR, DESCRIPTION, KEYWORDS, GENERATOR, ROBOTS. W starszych szablonach dla Mambo rolę tę spełniała powodująca wczytanie pliku /includes/metadata.php linia:

<?php include ("includes/metadata.php"); ?>

Jeśli wpiszesz ją w takim brzmieniu, znaczniki META zostaną wczytane, bowiem plik /includes/metadata.php wywołuje funkcję mosShowHead().

W Joomla! dzięki innej funkcji - setPageTitle() - do sekcji HEAD kodu HTML przesyłane są również informacje o tytule i autorze aktualnie przeglądanej strony - o ile dokonasz odpowiedniego ustawienia w konfiguracji witryny.

 Linia 20: wczytuje plik arkusza stylów css/template_css.css. Zawarta w instrukcji PHP stała $GLOBALS['mosConfig_live_site'] określa ścieżkę absolutną URL do katalogu Joomla!.
Dawniej nieco inaczej zapisywano tę stałą:
<link href="<?php echo $mosConfig_live_site;?>
   /templates/twoj_szablon/css/template_css.css" 
    rel="stylesheet" type="text/css" />         
        Linie 20-31: fragment w formacie javascript eliminuje kłopotliwy błąd przeglądarki Navigator - jeśli się pojawi taki błąd, to zmiana wielkości okna przeglądarki powoduje, że znikną wszystkie style i pozostanie jedynie "czysty", niesformatowany tekst.
Linia 32: kończy sekcję HEAD dokumentu HTML.
Umieszczenie w index.php głównej zawartości witryny
W naszym przykładowym kodzie HTML miejsce na  umieszczenie głównej zawartości witryny zaplanowaliśmy w  obszarze 5, przeznaczając na ten cel jedną komórkę tabeli w kolumnie centralnej:
71: <td width="100%" valign="top">Obszar_5: Tu treść główna</td>
W dawniejszych szablonach do włączania w kod zawartości innych plików wykorzystano instrukcję PHP include_once. Instrukcja ta dołącza zawartość pliku. Jej argumentem jest właśnie nazwa pliku. Linia 71 wyglądała wówczas następująco:
71: <td width="100%" valign="top" /><?php include_once(mainbody.php); ?></td>
Ten sposób dołączania pliku mainbody.php został zastąpiony funkcją mosMainBody {} . Wprawdzie wykorzystanie instrukcji include_once przyniesie ten sam efekt, ale bezpieczniej i ekonomiczniej skorzystać z nowej funkcji. 

Linia 71 naszego kodu w szatce dla Joomla 1.0 i wyższych będzie więc wyglądać tak:
71: <td width="100%" valign="top" /><?php mosMainBody(); ?>
Gotowe! Dzięki tej jednej linii Joomla! umieści w  centralnej komórce szablonu strony wiadomości i inne informacje stworzone w sekcjach oraz zawartość generowaną  przez komponenty.
Umieszczenie w index.php modułów
Umieszczenie modułów jest równie proste, jak umieszczenie głównej zawartości, choć nieco się różni.
do umieszczenie modułów wykorzystywana jest funkcja Joomla! mosLoadModules('nazwa_pozycji',[styl])
moduły umieszczamy w kilku komórkach szablonu,
szablon powinien przewidywać sytuacje, że na niektórych stronach witryny zechcemy zrezygnować z wyświetlania modułów, aby dysponować szerszym obszarem na wyświetlanie głównej zawartości witryny.
Instrukcja PHP włączająca moduły wygląda następująco:
<?php mosLoadModules( 'okreslenie_polozenia',[styl] ); ?>
W Joomla! zaprojektowano wstępnie około 20 obszarów na moduły. Sa one zdefiniowane w bazie danych w tabeli: #__template_positions.
O umieszczeniu modułu w konkretnym obszarze, decydujesz w panelu  administracyjnym. Natomiast w szablonie - w miejscach, w których moduły mają być wyświetlane - trzeba umieścić przynajmniej następujące instrukcje:
<?php mosLoadModules( 'left' ); ?>
<?php mosLoadModules( 'right' ); ?>
<?php mosLoadModules( 'top' ); ?>
<?php mosLoadModules( 'bottom' ); ?>
<?php mosLoadModules( 'user1' );?>;
<?php mosLoadModules( 'user2' ); ?>
<?php mosLoadModules( 'inset' ); ?>
UWAGA: Możesz wprawdzie pominąć któryś z obszarów, np.  inset, user1, user2, ale w takim przypadku - jeśli  zapomnisz, że ich nie umieściłeś - może się zdarzyć, że polecisz opublikowanie modułu w pozycji, która fizycznie nie istnieje. Pamiętaj o tym, gdy korzystasz z szablonów  udostępnionych w Internecie. Jeśli np. opublikujesz jakiś moduł w pozycji user1, a na stronie nie ma żadnego efektu, przenieś moduł np. do obszaru left. Gdy się pokaże, oznaczać to będzie, że w szablonie nie został zdefiniowany obszar user1 łatwo to zresztą sprawdzić, korzystając z podglądu pozycji modułów w menu Site ⇒ Preview].
Aby włączyć do szablonu moduły:
Przejdź w pliku index.php do kolejnych linii kodu, gdzie zaplanowałeś obszary na moduły. To linie z komórkami w lewej i prawej kolumnie głównego wiersza zawartości. Poniżej linie z naszego przykładu:
 
55: <td width="100%" valign="top">Obszar4:  Tu wstawisz np. menu</td>
58: <td width="100%" valign="top">Obszar4a: Tu wstawisz dodatkowe moduły</td>
61: <td width="100%" valign="top">Obszar4b: Tu wstawisz dodatkowe moduły </td>
81: <td width="100%" valign="top">Obszar6:  Tu wstawisz dodatkowe moduły </td>
84: <td width="100%" valign="top">Obszar6a: Tu wstawisz dodatkowe moduły</td>
87: <td width="100%" valign="top">Obszar6b: Tu wstawisz dodatkowe moduły </td>
Wpisz między znaczniki otwierające i zamykające komórki tabeli instrukcje włączające moduły. W efekcie powinieneś otrzymać np. taki kod:
55: <td width="180" valign="top"><?php loadModules( 'left',-2 ); ?></td>
58: <td width="100%" valign="top"><?php loadModules( 'user1',-2 ); ?></td>
61: <td width="100%" valign="top"><?php loadModules( 'info1',-2 ); ?></td>
81: <td width="100%" valign="top"><?php loadModules( 'right',-2 ); ?></td>
84: <td width="100%" valign="top"><?php loadModules( 'user2',-2 ); ?></td>
87: <td width="100%" valign="top"><?php loadModules( 'info2',-2 ); ?></td>
Zapisz plik index.php, aby nie utracić przypadkiem wyników swej pracy.
Zauważ, że włączyliśmy dodatkowe moduły w obszarach info1 i info2, których nie przewiduje wykaz pozycji modułów we wspomnianej tabeli. Nie jest to może najlepszy pomysł, by dodawać kolejne pozycje, nie wykorzystując istniejących, ale uczyniliśmy to umyślnie. Jeśli dodasz nowe nazwy pozycji modułów, musisz także dodać je w menu administratora Site ⇒  Templates ⇒ Module Position].
Umieszczenie banerów
W dawniejszych szablonach spotkasz się z odwołaniem się do funkcji wczytującej komponent Banery:
<?php mosLoadComponent( 'banners' ); ?></php>
W Joomla! prezentacja banerów nie wymaga już bezpośredniego dostępu do komponentu. Wczytywane są do szablonu za pomocą funkcji mosLoadModules.
Aby wczytać do szablonu banery:
odszukaj w naszym przykładowym kodzie linię 74:
74: <td width="100%" valign="top">
      Obszar_5b: Tu wstawisz np. baner lub dodatkowy moduł</td>
i zmień ją na następującą:
74: <td width="100%" valign="top">
      <?php mosLoadModules( 'banner', -1 ); ?></td>
Pamiętaj o drugim z argumentów funkcji - decydującym o formacie wyświetlanego modułu - -1 oznacza, że zostanie wyświetlony tylko wynik kodu modułu, a więc sam baner.
Umieszczenie aktualnej ścieżki powrotu
Standardowo ścieżka nawigacji bywa wyświetlana w jednym miejscu strony, nad przeglądaną przez użytkownika zawartością, może jednak być umieszczona w szablonie wielokrotnie, w różnych miejscach (np. i na górze, i na dole).
Aby umieścić w szablonie aktualną  ścieżkę powrotu:
Przejdź w pliku index.php do linii zawierającej komórkę, w której ścieżka ma być wyświetlana. W naszym kodzie zaplanowaliśmy ją w linii 42:
42: <td>Obszar3: Tu wstawisz np. ścieżkę nawigacji, bieżącą datę </td>
Wywołaj funkcję:
42: <td><?php mosPathWay(); ?></td>
Umieszczenie nazwy witryny
Możesz chcieć umieścić w nagłówku lub innym miejscu szablonu nazwę witryny. W dawniejszych szablonach instrukcja ta wyglądała następująco:
<?php echo $mosConfig_sitename; ?>
W szablonach dla Joomla! użyj nowego zapisu stałej globalnej:
<?php echo $GLOBALS['mosConfig_sitename']; ?>
Możesz umieścić tę instrukcję w dowolnym miejscu części nagłówkowej. Dodamy do naszej tabeli jeden wiersz  z dwiema komórkami na samym szczycie strony (przed linią  37).
Aby wyświetlić nazwę witryny :
W komórce tabeli, w której chcesz wyświetlać nazwę, wpisz:
36a: <tr>
36b: <td width="600" valign="top"><?php echo $GLOBALS['mosConfig_sitename']; ?></td>
36c: <td width="180" valign="top"><!-- Tu wstawimy za chwile biezącą datę --></td>
36d: </tr>
Możesz uzupełnić ten wiersz jakimś tekstem, np.: 
36b: <td width="600" valign="top">
        Witamy w serwisie <?php echo $GLOBALS['mosConfig_sitename']; ?>. 
        życzymy przyjemnego odbioru</td>
 Ta instrukcja nie zawiera kodu formatującego wygląd napisu.
Umieszczenie bieżącej daty
Instrukcja wyświetlająca bieżącą datę jest nieco bardziej złożona. Faktyczny format daty jest ustawiany w zdefiniowanej w pliku językowym stałej: _DATE_FORMAT_LC. Ta deklaracja wyświetla datę w odpowiednim formacie narodowym (lokalizuje datę, używając m.in. polskich nazw dni, miesięcy).
Ponadto Twój serwer może być umieszczony w innej lokalizacji, niż przeglądający witrynę goście. Stąd konieczne jest czasem wzbogacenie instrukcji  wyświetlającej datę poleceniem określającym przesunięcie czasowe. Dodania czasu dokonuje się poleceniem $mosConfig_offset. Ponieważ polecenie PHP time() używa sekund, a Joomla! godzin, musimy dokonać przekonwertowania, mnożąc minuty przez 60 sekund i godziny przez 60 minut. W rezultacie otrzymujemy potrzebną instrukcję.
Aby umieścić w szablonie bieżącą datę :
W komórce tabeli, w której chcesz wyświetlać datę, wpisz tekst znajdujący się między znacznikami komórki w wierszu 36c : 
36a: <tr>
36b: <td width="600" valign="top">
      Witamy w serwisie <?php echo $GLOBALS['mosConfig_sitename'] ; ?>. 
     życzymy przyjemnego odbioru</td>
36c: <td width="180" valign="top">
       <?php echo (strftime(_DATE_FORMAT_LC,time() 
       + ($mosConfig_offset*60*60)));?></td>
36d: </tr>
Możesz uzupełnić ten wiersz jakimś tekstem, np.: 
36c: <td width="180" valign="top">
       Dzisiaj jest: <?php echo (strftime(_DATE_FORMAT_LC,time() 
      + ($mosConfig_offset*60*60)));?></td>
 Ta instrukcja również nie zawiera kodu formatującego wygląd napisu. 
 Umieszczanie okna wyszukiwarki
W Joomla! dysponujesz modułem Szukaj [Search]. Najprostszym sposobem włączenia do szablonu okienka wyszukiwarki będzie więc zaprojektowanie pozycji np. o nazwie Szukaj i skorzystanie z instrukcji wczytującej do oznaczonego obszaru moduł:
<?php mosLoadModules( 'search', -1 ); ?>
Pamiętaj o drugim z argumentów funkcji - decydującym o formacie wyświetlanego modułu - -1 oznacza, że zostanie wyświetlany tylko wynik kodu modułu.
Aby formularz pojawił się na stronie, konieczne jest dodanie w wykazie pozycji w menu administratora Site ⇒  Templates ⇒ Module Position]. nowej pozycji nazwanej search.
Możesz także umieścić w pliku index.php kod HTML wyświetlający wyszukiwarkę.
Zobacz, jak to uczynić. To ciekawy przykład zamieszczania bardziej rozwiniętego kodu. Trzeba bowiem wyświetlić formularz z jednym polem do wprowadzenia wyszukiwanego słowa, sygnalizujący, np. napisem Szukaj, do czego służy to pole, wprowadzić instrukcje oczyszczające pole z tego słowa, gdy użytkownik wstawi tam kursor myszki. Ponadto musimy wprowadzić ukryte pole, zlecające systemowi przeszukanie bazy danych.
Aby wyświetlić okno wyszukiwarki:
Przejdź w pliku index.php do linii zawierającej komórkę, w której chcesz wyświetlić formularz Szukaj, np. 
39: <td width="180" valign="top"> 
      Obszar2: Tu wstawisz formularz wyszukiwarki, ew. inne elementy</td>
Wprowadź następujący kod: 

39: <td width="180" valign="top"><form action="index.php" method="post">
   <div align="right">
      <input class="inputbox" type="text" name="searchword" size="15"
      value="<?php echo _SEARCH_BOX; ?>" onblur="if(this.value=='')
      this.value='<?php echo _SEARCH_BOX; ?>';" 
      onfocus="if(this.value=='<?php
      echo _SEARCH_BOX; ?>') this.value='';" />
      <input type="hidden" name="option" value="search" />
   </div>
</form></td> 
40: </tr>
41: <tr colspan="2">
43: </tr>
Zapisz plik.
  Uwaga: Ta instrukcja, w przeciwieństwie do dwóch poprzednich przykładów, zawiera kod formatujący wygląd, mianowicie znacznik <div align="right"> umieszczający pole formularza po prawej stronie komórki oraz klasę stylu .inputbox, określającą wygląd pola formularza - jej właściwości są zdefiniowane w pliku template_css.css.
Umieszczenie stopki
Joomla!, niestety, nie posiada jeszcze dobrego rozwiązania dla stopki. Jej kod jest umieszczony  w pliku /includes/footer.php, który zawiera notkę o prawach autorskich. Możesz  ten plik zastąpić własnym. Licencja Joomla! nie wymaga  umieszczania w zawartości Twojej witryny informacji o  prawach autorskich do Joomla!, choć wypada okazać twórcom tego wspaniałego systemu wdzięczność.
Aby umieścić w szablonie stopkę:
Przejdź w pliku index.php do linii zawierającej komórkę, w której ścieżka ma być wyświetlana. W naszym kodzie zaplanowaliśmy ją w linii 97: 

97: <td width="100%" valign="top"> Obszar7: 
      Tu wstawisz stopke i ewentualnie inne elementy</td>
Wpisz kod instrukcji wczytującej plik footer.php. Kod powinien wyglądać następująco: 

97: <td width="100%" valign="top"> 
   <?php include_once( $GLOBALS['mosConfig_absolute_path'] 
   . '/includes/footer.php' ); ?></td>
Zachowaj plik
  Umieszczenie w index.php winiety
Tą samą metodą można włączyć do szablonu plik definiujący wygląd nagłówka witryny, winiety. Oczywiście, należałoby wcześniej taki plik przygotować.

Zmieniony ( 20.06.2007. )