Tworzenie szablonu Drupal 7

2016-07-04 16:02

Gapper agencja - projektowanie stron www, marketing online

Drupal 7 daje szereg możliwości w dziedzinie tworzenia własnych szablonów. Tworzenie szablonu strony internetowej w Drupalu 7 może odbyć się na kilka sposobów.

Edycja szablonów podstawowych

Początkującym użytkownikom Drupala polecamy edycję jednego ze standardowych szablonów dostępnych w raz z rdzeniem Drupala, np. Bartik. Zagłębiając się w jego poszczególne katalogi możemy powoli poznawać całą strukturę szablonu.

Tworzenie szablonu na podstawie szablonu bazowego

Tworzenie nowego szablonu od zera może zająć zbyt dużo czasu, szczególnie jeżeli potrzebujemy go stworzyć w krótkim czasie. Aby oszczędzić sobie pracy możemy utworzyć nowy szablon rozszerzając go o szablon bazowy. Utworzony przez nas szablon dziedziczy wszystkie pliki szablonu bazowego, które nadpisujemy lub zastępujemy własnymi w naszym szablonie. W Internecie możemy znaleźć wiele szablonów bazowych oferujących m.in. gotową siatkę, zadeklarowane najczęściej używane szablony na stronie, rozbudowane klasy css oraz skrypty js opisujące wygląd i zachowanie podstawowych elementów html jak np. nagłówki, akapity, przyciski czy formularze. Listę najpopularniejszych szablonów bazowych można znaleźć tutaj. Stosując tę metodę nie tylko zyskujemy na czasie, ale też zachowujemy większy porządek poprzez oddzielenie plików szablonu bazowego od naszych.

Tworzenie nowego szablonu od zera

Aby tworzyć szablon do strony internetowej na Drupalu 7 tworzymy folder o nazwie naszego szablonu (np. newtheme) w katalogu sites/all/themes. Najważniejszym krokiem jest utworzenie w nim pierwszego i jedynego wymaganego pliku szablonu z rozszerzeniem .info (w tym przypadku newtheme.info). Wpisujemy do niego poniższy kod:

name = New theme

core = 7.x

engine = phptemplate

Te trzy linijki wystarczą, aby utworzyć nowy szablon. Po zapisaniu pliku możemy ustawić nasz szablon z poziomu panelu administracyjnego. Wygenerowany szablon zdecydowanie będzie wymagać dalszej pracy.

*W przypadku tworzenia szablonu w oparciu o szablon bazowy dopisujemy deklarację szablonu bazowego, np:

base theme = bartik

Kolejnym krokiem będzie deklaracja arkuszy styli i skryptów js. Arkusze styli deklarujemy następująco:

stylesheets[all][] = css/main.css

W nawiasie kwadratowym definiujemy media, w tym przypadku arkusz będzie dotyczyć wszystkich mediów.

Pliki skryptów deklarujemy podobnie:

scripts[] = js/main.js

Należy pamiętać, aby po zadeklarowaniu plików (oraz innych zmianach w pliku *.info) wyczyścić cache.

Jeżeli używaliśmy już innych szablonów na Drupala 7, np. dostępnych w raz z rdzeniem, z pewnością zauważyliśmy różną ilość dostępnych regionów na stronie, w których możemy umieszczać np. bloki. Wszystkie regiony dostępne na stronie muszą być zadeklarowane w pliku *.info. Dla przykładu utworzymy dwa regiony:

regions[slider] = Slider

regions[column] = Column

Następnie musimy je także zadeklarować w pliku page.tpl.php oraz innych plikach określających sekcję <body> dokumentu html, jeżeli chcemy aby zostały w nich wyrenderowane. Przykładowo do pliku page.tpl.php dodajemy następujący kod:

<div id=”slider”>

<?php print render($page[‘slider’]); ?>

</div>

<div id=”column”>

<?php print render($page[‘column’]); ?>

</div>

Od tej pory w zakładce Blocks w panelu administracyjnym możemy umieszczać w naszych regionach przygotowane bloki.

*W każdym szablonie należy zadeklarować regiony content, help, page_bottom oraz page_top. Regiony te są wymagane przez rdzeń Drupala.

Plik page.tpl.php jest jednym z podstawowych plików struktury szablonu w Drupalu 7. Każdy plik dostępny w raz z rdzeniem możemy nadpisać własnym.

Struktura plików

Ilość plików naszego szablonu może się różnić w zależności od ilości modyfikacji podstawowych struktur zapisanych w rdzeniu Drupala. Poza wymaganym plikiem *.info oraz ewentualnymi arkuszami styli i skryptami js, każdy szablon możemy dowolnie rozbudowywać poprzez nadpisywanie poszczególnych struktur. Ogólny zarys plików dostępnych w szablonie przedstawia się następująco:

html.tpl.php – w tym pliku zawarta jest sekcja <head> dokumentu HTML. Jest to nadrzędny plik całego szablonu.

page.tpl.php – najczęściej edytowany plik podczas tworzenia/edycji szablonu. Zawiera sekcję <body> dokumentu HTML. To w nim umieszczamy poszczególne regiony, które chcemy umieścić na stronie.

region.tpl.php – za pomocą tego pliku możemy określić sposób renderowania struktur wewnątrz każdego regionu.

block.tpl.php – określa sposób renderowania i ułożenia bloków

node.tpl.php – określa sposób renderowania i ułożenia contentu.

field.tpl.php – każde pole użyte w poszczególnych contentach możemy określić w tym pliku.

Dzięki tym plikom możemy definiować po swojemu każdą strukturę strony w Drupalu 7. Używając pliku o nazwie region.tpl.php nadpisujemy sposób renderowania i ułożenie wszystkich regionów. Jeżeli chcemy wprowadzić zmiany w jednym konkretnym regionie, np. w zadeklarowanym wcześniej regionie Slider używamy nazwy pliku: region—footer.tpl.php. To samo dotyczy innych plików struktur. Sposoby nazewnictwa plików możemy znaleźć tutaj.

Zmienne dostępne w poszczególnych plikach możemy znaleźć w oficjalnej dokumentacji Drupala 7 lub poprzez moduł Theme Developer dostępny tutaj.

Własne pliki opisujące poszczególne struktury zapisujemy w katalogu naszego szablonu najczęściej w podkatalogu templates. Pamiętajmy, aby przy dodawaniu kolejnych plików rozszerzających nasz szablon zapisywać je do odpowiednich folderów zachowując porządek.

Przykładowa struktura podkatalogów:

- newtheme
-- css (arkusze styli)
-- img (pliki graficzne użyte w naszym szablonie)
-- js (skrypty)
-- templates (pliki opisujące struktury szablonu)

Opisane podstawy oraz wiedza z zakresu css/html/php w zupełności wystarczą do utworzenia pierwszego szablonu strony internetowej na Drupalu 7. Od tej pory możemy tworzyć własne szablony, rozbudowując je o dowolne elementy, lecz nie należy poprzestać na tym artykule. Zalecamy dalsze poszerzanie swojej wiedzy za pomocą oficjalnej dokumentacji Drupala oraz dostępnej literatury.

CMS