


Główny plik szablonu |
![]() |
![]() |
Podstawowy plik szablonu nazywa się 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
ZastrzeżenieArtykuł 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:
W rezultacie:
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ępneAby założyć plik szablonu
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>
ObjaśnieniaZadaniem pliku <?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 [ 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 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 Linia 16: rozpoczyna sekcję Linia 17: definiuje stronę kodową dla zawartości, Linia 18: Linia 19: funkcja <?php include ("includes/metadata.php"); ?> Jeśli wpiszesz ją w takim brzmieniu, znaczniki W Joomla! dzięki innej funkcji - Linia 20: wczytuje plik arkusza stylów 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ę Umieszczenie w index.php głównej zawartości witrynyW 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 71: <td width="100%" valign="top" /><?php include_once(mainbody.php); ?></td> Ten sposób dołączania pliku 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łówUmieszczenie modułów jest równie proste, jak umieszczenie głównej zawartości, choć nieco się różni.
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: 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. Aby włączyć do szablonu moduły:
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>
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>
Zauważ, że włączyliśmy dodatkowe moduły w obszarach Umieszczenie banerówW 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 Aby wczytać do szablonu banery:
74: <td width="100%" valign="top"> Obszar_5b: Tu wstawisz np. baner lub dodatkowy moduł</td>
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 powrotuStandardowo ś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:
42: <td>Obszar3: Tu wstawisz np. ścieżkę nawigacji, bieżącą datę </td>
42: <td><?php mosPathWay(); ?></td> Umieszczenie nazwy witrynyMoż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 :
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>
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 datyInstrukcja 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: 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 Aby umieścić w szablonie bieżącą datę :
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>
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 wyszukiwarkiW 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 Możesz także umieścić w pliku 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:
39: <td width="180" valign="top"> Obszar2: Tu wstawisz formularz wyszukiwarki, ew. inne elementy</td>
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>
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 Umieszczenie stopkiJoomla!, niestety, nie posiada jeszcze dobrego rozwiązania dla stopki. Jej kod jest umieszczony w pliku Aby umieścić w szablonie stopkę:
97: <td width="100%" valign="top"> Obszar7: Tu wstawisz stopke i ewentualnie inne elementy</td>
97: <td width="100%" valign="top"> <?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?></td>
Umieszczenie w index.php winietyTą 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. ) |
« poprzedni artykuł | następny artykuł » |
---|