UWAGA: Strona zawiera materiały archiwalne. Większość artykułów dotyczy Joomla! 1.0
Start arrow Programowanie arrow Podstawy szablonów arrow Główny plik szablonu
Główny plik szablonu Drukuj Email
Redaktor: Stefan Wajda   
18.06.2005.
Mimo że główny plik szablonu - index.php - jest plikiem PHP, to składa się głównie z kodu HTML z małymi wstawkami w PHP. Nie musisz być mistrzem PHP, aby stworzyć plik główny szablonu szaty graficznej. Jedyne co powinieneś wiedzieć, to jak i gdzie wstawić odpowiednie znaczniki silnika szablonów szat graficznych Joomla!.

Zastrzeżenie

Artykuł omawia budowę szablonu wykorzystującego do rozmieszczania elementów treści tabele. To częste, ale niezalecane rozwiązanie. Przedstawiamy jednak przykład takiego rozwiązania, z dwóch względów. Po pierwsze, jest wciąż stosowane. Po drugie - ułatwia zrozumienie struktury szablonu.

Rozmieszczenie treści na stronie

Szablon składa sie głównie z kodu HTML. Wewnątrz ram stworzonych w HTML wstawia się okna, w których wyświetlane są treści witryny, pochodzące zwykle z bazy danych. Często używa się kilku mniejszych okien, zwanych modułami i jedno główne okno - przestrzeń, odpowiedzialną za wyświetlanie treści komponentów.

Standard xHTML

Zachęcamy do pisania kodu szablonów w xHTML. Pomimo trwających debat, czy xHTML jest rozwiązaniem przyszłościowym, ciągle pozostaje on dobrym standardem XML, podczas gdy standard HTML odchodzi w przeszłość. Przyszłe wersje Joomla! będą polegały na XML-u w w coraz większym stopniu, więc warto się przyzwyczaić do tego modelu .

Szkielet pliku szablonu

Szkielet pliku index.php dla typowego szablonu składającego się z 3 kolumn, wygląda następująco:

 
 1: <?php
 2: defined( '_VALID_MOS' ) or die( 'Zasób zastrzeżony.' );
 2: $iso = explode( '=', _ISO );
 3: echo '<?xml version="1.0" encoding="' . $iso[1] . "\">\n";
 5: /** ensure this file is being included by a parent file */
 6: ?>
 7: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 8: <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE; ?>">
 9: <head>
10:   <title><?php echo $mosConfig_sitename; ?></title>
11:   <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
12: <?php
13: if ($my -> id) {
14:   initEditor();
15: }
16: ?>
17: <?php mosShowHead(); ?>
18: <link href="<?php echo $mosConfig_live_site;?>
     /templates/basic_template/css/template_css.css"
     rel="stylesheet" type="text/css" /> /* w jednej linii!!!! */
19: </head>
20: <body>
21: <table cellspacing="0" cellpadding="5" border="0">
22:   <tr>
23:     <td colspan="3">
24:       <?php echo $mosConfig_sitename; ?>
25:     </td>
26:   </tr>
27:   <tr>
28:     <td colspan="3">
29:       <?php mosLoadModules ( 'top', 1 ); ?>
30:     </td>
31:   </tr>
32:   <tr>
33:     <td width="20%" valign="top">
34:       <?php mosLoadModules ( 'left' ); ?>
35:     </td>
36:     <td width="60%" valign="top">
37:        <?php mosMainBody(); ?>
38:     </td>
39:     <td width="20%" valign="top">
40:       <?php mosLoadModules ( 'right' ); ?>
41:     </td>
42:   </tr>
43:   <tr>
44:    <td colspan="3" valign="top">
45:      <?php mosLoadModules ( 'bottom' ); ?>
46:    </td>
47:  </tr>
48: </table>
49: </body>
50: </html>

Objaśnienia

Spójrzmy na kwestie główne. Zakładamy, że wiecie już co nieco o stronach HTML, więc kwestie podstawowych znaczników: HEAD, BODY, TABLE, zostaną pominięte.

  • Linia 2: Zapobiega bezpośredniemu dostępowi do tego pliku. Włączenie tej linii do szablonu jest sprawą kluczową.
  • Linie 3-4: Definiują zawartość jako poprawny plik XML (szablon napisany jest w xHTML).
  • Linie 5-6: Ustalają standard xHTML dla strony.
  • Linia 10: Wpisuje nazwę strony w tagi tytułowe. Nazwa jest pobierana ze zmiennej definiowanej w konfiguracji strony.
  • Linia 11: Definiuje standard kodowania znaków. Stała _ISO jest zdefiniowana w pliku językowym.
  • Linie 13-15: Wczytują graficzny edytor tekstu [WYSIWYG]. Wczytanie edytora uzależnione jest od zmiennej $my -> id, która przyjmuje wartość niezerową (true) tylko wtedy, gdy użytkownik jest zarejestrowany i zalogowany. Jeżeli chcesz, możesz zawsze ładować edytor, ale zwykle anonimowi użytkownicy nie mają prawa modyfikacji zawartości witryny. Dlatego to rozwiązanie odgórnie oszczędza trochę pracy skryptom podczas standardowego przeglądania witryny przez użytkowników niezarejestrowanych.
  • Linia 17: Wstawia blok kilku metadanych.
  • Linia 18: Ładuje arkusz stylów CSS. $mosConfig_live_site to zmienna konfiguracyjna, która przechowuje dokładną ścieżkę lokalizującą pliki na serwerze.
  • Line 23: Wypisuje nazwę witryny (w trzech połączonych komórkach tabeli).
  • Linia 29: Definiuje położenie pozycji modułów top i wyświetla publikowane tam moduły. Wartość stylu: 1 ustala poziome rozmieszczenie modułów.
  • Linia 34: Definiuje pozycję left modułów i wczytuje wszystkie opublikowane tam moduły, które będą ulokowane w jednej kolumnie.
  • Linia 37: Ładuje na stronę treść główną - komponent definiowany przez adres URL, przykładowo index.php?option=com_content wyświetli w tym obszarze treść komponentu Materiały [content].
  • Linia 40: Podobnie jak przy prawej kolumnie tym razem definiuje się położenie pozycji modułów right i ładowane są tam wszystkie moduły ulokowane w tej pozycji. Zajmie to pojedynczą prawą kolumnę.

Uwagi, źródła

Jeżeli masz sugestie odnośnie treści lub chcesz zgłosić poprawki do tego rozdziału, skomentuj go albo umieść wiadomość na forum: Dokumentacja - Propozycje, zmiany, poprawki

Dziękujemy!

Stefan Wajda - Zespół Dokumentacji PCJ

Na podstawie: http://help.joomla.org/content/view/18/125/
Zmieniony ( 20.06.2007. )
 
« poprzedni artykuł   następny artykuł »
Wstecz
© 2005 – 2021 Pomoc