Drupalowy system skórek (ang. themes) jest bardzo rozbudowany. Jego struktura zapewnia łatwe łączenie ze sobą poszczególnych komponentów: silników (w oparciu o które mogą powstawać skórki), szablonów, arkuszy stylów i skryptów PHP.
Skórka może być stworzona na różne sposoby, przy użyciu różnych narzędzi (więcej informacji na stronie Theming overview). Dostępnych jest kilka tzw. silników skórek, w tym XTemplate i PHPTemplate. Ten przewodnik skupi się jedynie na ostatnim.
PHPTemplate wykorzystuje szablony zawarte w plikach o rozszerzeniu .tpl.php oraz arkusze stylów .css.
Skórki i szablony umieszcza się w osobnych podkatalogach wewnątrz katalogu themes Drupala. Silniki przeskanują wszystkie podkatalogi w poszukiwaniu odpowiednich dla siebie szablonów. Jeśli odnajdą także plik style.css, będzie on również wykorzystywany.
Możesz takze stworzyć skórkę składającą się jedynie z arkusza stylów CSS, tworząc podkatalog w katalogu istniającej skórki i umieszczając tam plik style.css. Drupal połączy ów arkusz ze skórką, w której podkatalogu się on znajduje. W ten sposób zbudowana jest na przykład popularna skórka Marvin.
Jeśli w katalogu skórki znajdzie się plik screenshot.png, Drupal wyświetli jego zawartość na liście skórek w menu zarządzania stroną.
Jeśli chcesz stworzyć własną skórkę, możesz albo zmodyfikować istniejącą lub zacząć od podstaw.
By zmodyfikować istniejącą skórkę, po prostu skopiuj ją do nowego katalogu i nadaj jej inną nazwę (skórki nie powinny posiadać nazw istniających modułów). Następnie zmień skórkę tak jak Ci się podoba.
Jeśli zamierzasz zaprojektować skórkę od podstaw, możesz albo stworzyć ją bezpośrednio w PHP, albo wykorzystać jeden z dostępnych silników skórek. W Drupalu 4.7 standardowym silnikiem jest PHPTemplate i jest to narzędzie polecane - większość gotowych skryptów dodających nowe funkcje jest przygotowywana właśnie z myślą o PHPTemplate.
Od wersji 4.7 Drupal pozwala twórcom skórek na definiowanie i implementowanie dowolnej liczby tzw. "obszarów" (ang. regions) zawartości, pozwalających kontrolować rozmieszczenie elementów na stronie.
Obszary są bardzo interesującą funkcją Drupala, ponieważ pozwalają na prawie dowolne zaprojektowanie layoutu strony. Można je także wykorzystać do budowania odmiennych layoutów dla różnych działów witryny.
W skórkach nie opartych na silnikach, dostępne obszary definiowane są przez funkcję themename_regions() w pliku .theme. Skórki wykorzystujące silniki, korzystają z ich obszarów (zdefiniowanych w plikach .engine), ale także mogą definiować własne.
Zawartość jest umieszczana w obszarach poprzez system tzw. bloków (odpowiada za to moduł block) i wywołania drupal_set_content(). Na przykład kod drupal_set_content('left','Cześć wam.') sprawiłby, że tekst "Cześć wam" zostałby umieszczony w obszarze o nazwie "left" (zazwyczaj jest to tzw. lewy pasek boczny). Wszystkie dostępne obszary znajdują się na liście na stronie konfiguracji bloków w menu zarządzania.
Pierwszy obszar zdefiniowany w pliku .theme skórki lub pliku .engine silnika staje się obszarem "domyślnym".
Więcej praktycznych informacji, uwzględniających szablony PHPTemplate, znajduje się na stronie Obszary bloków i segmentów w PHPTemplate.
PHPTemplate to tzw. silnik skórek, napisany przez Adriana Rossouwa. Wykorzystuje on pliki o nazwach kończących się na .tpl.php do modyfikacji wbudowanych w Drupala funkcji theme_costam(). Listę dostępnych funkcji można znaleźć na stronie Development Plumbing. Każdy ze wspomianych plików zawiera szkielet HTML oraz jakiś prosty kod PHP służący do prezentowania dynamicznych danych. PHPTemplate jest więc świetnym wyborem jeśli znasz trochę PHP. Korzystając z prostych "ściągawek" możesz w łatwy sposób stworzyć rozbudowane skórki.
Jeśli natomiast nie znasz PHP, PHPTemplate i tak może być odpowiednim wyborem, ponieważ naprawdę niewielkie fragmenty kodu skórek wymagają jego użycia. Możesz po prostu skorzystać ze wspomianych już ściągawek, które użytkownicy umieszczają na drupal.org, i wkleić je do swojej skórki.
Jeśli posiadasz wersję 4.7 (lub późniejszą) Drupala, PHPTemplate jest już w nim zawarty. W przypadku starszych wersji, musisz go najpierw pobrać i zainstalować poprzez wysłanie na serwer, do podkatalogu /themes/engines.
Utwórz nowy podkatalog wewnątrz katalogu themes. Następnie utwórz w nim plik page.tpl.php. Jest to jedyny plik, który jest absolutnie wymagany. Jego zadanie polega na nadpisywaniu (zastępowaniu) funkcji theme('page') Drupala, która odpowiada za generowanie stron, wraz z takimi ich elementami jak nagłówek, stopka, karty czy paski boczne.
Możesz utworzyć pliki zastępujące następujące funkcje (kliknij w nazwę pliku by przejść do strony z jego objaśnieniem):
theme('page') - plik page.tpl.phptheme('block') - plik block.tpl.phptheme('box') - plik box.tpl.phptheme('node') - plik node.tpl.phptheme('comment') - plik comment.tpl.phpPHPTemplate zawiera przykładowe pliki szablonów - sprawdź w katalogu skórki box_grey. Możesz skopiować znajdujący się tam plik page.tpl.php do katalogu swojej skórki i tak zacząć jej tworzenie. Pamiętaj, że aby Drupal "dowiedział się" o istnieniu nowej skórki, będziesz musiał odwiedzić stronę zarządzaj » skórki.
Jeśli chcesz zastąpić jakieś inne, niewymienione tutaj funkcje, musisz postarać się o to sam.
Objaśnienie wszystkich standardowych zmiennych występujących w plikach szablonów oraz przykłady tych plików można znaleźć na stronie PHPTemplete theme engine na drupal.org.
Zanim przystąpisz do defniowania obszarów dla swojego szablonu PHPTemplate, być może będziesz chciał się zapoznać z ogólnymi informacjami na temat obszarów.
Poniżej znajdują się informacje na temat standardowych obszarów i dodawania własnych, ich wykorzystanie jednak daje o wiele szersze możliwości niż mógłbyś przypuszczać.
Domyślnie PHPTemplate definiuje pięć podstawowych obszarów: lewy, prawy, obszar zawartości, nagłówek oraz stopkę. Ich angielskie nazwy, używane w samym szablonie, to odpowiednio: left, right, content, header, oraz footer.
Definiowanie obszarów polega jedynie na wprowadzeniu w szablonie zmiennych odwołujących się do tychże obszarów. Zmienne te to: $sidebar_left, $sidebar_right, $content, $header oraz $footer. By wyświetlić na stronie zawartość danego obszaru, wpisalibyśmy w pliku szablonu taki na przykład kod:
<?php print $header; ?>No dobrze, dotychczas nie było zbyt ciekawie, ale przejdziemy do czegoś bardziej interesującego. Przypuśćmy, że chcę dodać nowy obszar ponad główną zawartością, by być na przykład w stanie umieścić bloki zarówno nad zawartością (np. artykułami), jak i pod nią. Muszę więc najpierw zdefiniować swoje obszary w pliku szablonu mojej skórki.
Definiowanie obszarów jest proste jak budowa cepa i odbywa się w pliku template.php w katalogu ze skórką. Jeśli jeszcze nie posiadasz tego pliku, utwórz go teraz. Następnie wprowadź do niego nową funkcję:
<?php
function moja-skórka_regions() {
return array(
'left' => t('left sidebar'), /* to lewy pasek boczny */
'right' => t('right sidebar'), /* a to prawy */
'header' => t('header'), /* to nagłówek strony */
'top' => t('góra'), /* a to nasz nowy obszar! */
'content' => t('content'), /* dalej zawartość */
'footer' => t('footer') /* i stopka */
);
}
?>Zwróć uwagę na komentarze objęte znakami /* */.
Wszystkie te obszary są standardowe, z jednym wyjątkiem – wprowadziliśmy nowy obszar o nazwie „top”, który nazwaliśmy „góra”. Reszcie obszarów nie musimy nadawać polskich nazw, ponieważ zostanie to automatycznie dokonane przez moduł obsługujący tłumaczenia.
Pamiętaj by zamienić tekst moja-skórka na nazwę swojej skórki. Inaczej funkcja nie będzie działać.
Mamy obszar, ale Drupal jeszcze nie wie, gdzie go umieścić. Musimy wprowadzić obszar do pliku szablonu strony. Otwieramy więc plik page.tpl.php i w wybranym miejscu (np. powyżej zawartości) wpisujemy:
<?php print $top; ?>W ten jakże nieskomplikowany sposób umieściliśmy obszar w naszej skórce. Możemy już umieścić w nim bloki.
Wyobraź sobie co można uzyskać dzięki tej funkcji w połączeniu z alternatywnymi szablonami dla różnych działów witryny. Tak, tak, dzięki temu możemy na przykład sprawić by główna strona nie wyświetlała nawet listy najnowszych segmentów, a wybrane przez nas bloki i zmodyfikowane listy tematyczne.
O tym jednak napiszę w specjalnym poradniku, w którym omówię wykorzystanie obszarów, alternatywnych szablonów oraz genialnego modułu Views.
Zawarte tu informacje dotyczą modyfikacji wyglądu segmentów i całej strony w zależności od typu wyświetlanego segmentu (artykuł, wątek, książka). Mogą być one przydatne np. gdy chcesz w inny sposób zaprezentować użytkownikom statyczne strony typu „o nas” czy „regulamin korzystania” (pozbyć się informacji o dacie dodania itp.).
Drupal i PHPTemplate oferują dwie podstawowe możliwości:
poprzez stworzenie alternatywnych szablonów PHPTemplate.
Skopiuj swój plik node.tpl.php, odpowiadający za wygląd segmentu i nadaj mu nową nazwę, zgodnie ze schematem node-rodzaj_zawartości.tpl.php, gdzie rodzaj_zawartości to np. page
czy story
.
Następnie zmodyfikuj zawartość tego pliku zgodnie z Twoimi wymaganiami. Możesz usunąć pewne fragmenty albo dodać nowe. Zwróć uwagę, że – korzystając z funkcji Clean URLs
– możesz zamieścić swoją stronę pod adresem typu /o-nas czy /pomoc.
Alternatywne szablony modyfikujące wygląd całej strony osiągnąć można na wiele sposobów. Tutaj przedstawiony zostanie jeden z najprostszych, a zarazem najbardziej wygodnych.
Mechanizm tego rozwiązania polega na wywołaniu z głównego pliku szablonu całej strony innych szablonów, w zależności od rodzaju segmentu.
Skopiuj swój plik page.tpl.php w bezpieczne miejsce oraz do pliku page-default.tpl.php. Zawartość page.tpl.php zastąp poniższym kodem, którego autorem jest PhilK:
<?php
switch ($node->type) {
case 'book': $inc = 'page-book.tpl.php'; break;
case 'blog': $inc = 'page-blog.tpl.php'; break;
case 'image': $inc = 'page-image.tpl.php'; break;
case 'forum': $inc = 'page-forum.tpl.php'; break;
default: $inc = 'page-default.tpl.php'; break;
}
include ($inc);
?>Działanie kodu:
Możesz usunąć wybrane linijki rozpoczynające się od case albo dodać własne, wywołujące szablony wyglądu innych rodzajów segmentów.
Następnie powinieneś oczywiście wyedytować każdy z potrzebnych plików .tpl.php i odpowiednio dostosować wygląd.
W ten sposób zmienić możesz nie tylko strukturę stron (HTML), ale i ich ostylowanie. W sekcji <head> danego szablonu umieść wywołanie alternatywnego arkusza stylów CSS, np. tak:
<style type="text/css" media="all">@import "/katalog_skórki/image.css";</style>Możesz także sprawić by pierwsza, główna strona witryny posiadała inny wygląd. W tym celu stwórz szablon page-front.tpl.php i dodaj następującą linijkę na początek kodu w pliku page.tpl.php:
if ($is_front) {include 'page-front.tpl.php'; return; }Jest wiele innych sposób na zmianę wyglądu w zależności od typu segmentu, włączają w to uzależnienie wyglądu od kategorii, w której umieszczony został dany segment. Więcej informacji znajdziesz na poniższych stronach:
Jeśli chciałbyś zastąpić (nadpisać) funkcję inną niż block, box, comment, node czy page, musisz poinformować o tym PHPTemplate.
By to uczynić, w katalogu swojej skórki musisz stworzyć plik template.php. Plik ten powinien rozpoczynać się znacznikiem <?php a kończyć znacznikiem ?>, a w jego treści winny się znajdować nadpisane funkcje. Decydują one o wykorzystaniu danego szablonu albo zmiennych.
Po pierwsze zacząć musisz od zlokalizowania funkcji, którą chcesz zastąpić. Ich lista znajduje się na stronie API documentation.
Przykładem takiego nadpisania funkcji jest zmiana sposobu wyświetlania odnośników nawigacyjnych na stronach książek, opisana w artykule Nawigacja w książkach po staremu.
Funkcje nadpisuje się poprzez stworzenie w pliku template.php nowej funkcji o takiej samej nazwie, jednak z tą różnicą, że przedrostek theme zamienia się na phptemplate. Na przykład funkcja odpowiadająca za wyświetlanie elementów list theme_item_list będzie teraz nosić nazwę phptemplate_item_list.
Najwygodniej jest po prostu skopiować oryginalną funkcję Drupala i zmodyfikować ją.