Oto trzeci wpis dotyczący nauki programowania szablonów WordPress. Po przedstawieniu projektu i wprowadzeniu do programowania struktury strony w poprzednich częściach, przyszła pora na mały krok w kierunku jej integracji z WordPress. Tym oraz przedstawieniem roli języka PHP w tworzeniu kodu dla WordPress zajmiemy się w tej części. Zapraszam do lektury!
~ Rafał, Learn2Code
Jak WordPress buduje strony internetowe?
Proces wyświetlania strony WordPress polega na zbudowaniu jej z plików reprezentujących różne sekcje (nagłówek, stopka, menu; tzw. partiale), wypełnieniu treścią pobraną z bazy danych (np. pozycje menu, treść posta) przez skrypty działające na serwerze, a następnie wyrenderowanie i przekazanie jej w postaci dokumentu HTML przeglądarce. Jest to zdecydowanie bardziej złożony proces niż po prostu wysłanie statycznego, przygotowanego przez programistę pliku HTML, z którym pracowaliśmy do tej pory. Co więcej, mechanizm taki dotyczy większości aplikacji internetowych; począwszy od blogów z sekcją komentarzy, poprzez sklepy internetowe. Statyczna strona napisana w HTML nie daje takich możliwości. Aby wyświetlać dynamiczną treść należy napisać odpowiedni kod działający po stronie serwera (tzw. backend). Tak właśnie jest w aplikacjach WordPress.
WordPress posiada swój mechanizm wyświetlania stron, opierający się na tzw. Template Files (pl: plikach szablonu). Czyli faktycznie plikach PHP, w których programista stosuje funkcje WordPress`a (np. funkcja wyświetlająca listę wszystkich wpisów na bloga strony), uzupełniając kod HTML. Wypełnia to podstawową rolę szablonu: wyświetlanie w odpowiedni, uporządkowany sposób danych pochodzących z bazy danych.
Każdej sekcji strony odpowiada jeden plik. Taki zabieg pozwala nam tworzyć modularny kod. Modularny, czyli taki gdzie większe fragmenty strony składają się z mniejszych plików częściowych (partial`i) , z których każdy z nich ma zdefiniowane przeznaczenie.
Na mockupie z rysunku 3.1 widać projekt strony z propozycją podzielenia strony na sekcje. Pod nazwą sekcji znajduje się informacja o tym, że jej kod znajduje się w osobnym pliku o wskazanej nazwie. Wszystkie funkcje ładujące poszczególne sekcje znajdują się w jednym pliku głównym index.php.
Jest to preferowane rozwiązanie wobec alternatywy, która polega na tym, że w jednym pliku jest zawarta logika wszystkich możliwych widoków. Podział projektu na mniejsze fragmenty wpływa na zwiększenie czytelności kodu i łatwość w jego utrzymaniu. Najważniejsze jednak, że ten sposób jest wspierany przez mechanizm WordPress i stanowi podstawę programowania szablonów, a następnie budowania na ich podstawie strony, którą widzi użytkownik.
WP jako CMS posiada zaprogramowane mechanizmy odszukiwania i ładowania plików zawierających kod potrzebny do generowania widoków. Mechanizm ten wyszukuje odpowiednich plików wg schematu nazewnictwa. W związku z tym nie może być ono przypadkowe. Jest narzucone przez dokumentację i należy się go sztywno trzymać. Pliki, które WP potrafi samodzielnie zidentyfikować to przede wszystkim:
index.php– główny plik szablonu. Musi się znaleźć w każdym projekcie!style.css– główny plik ze stylami wykorzystywanymi w szablonie. Również musi się znaleźć w każdym projekcie!
Na rys. 3.1 podałem również prawdopodobne nazwy plików zawierających odpowiednie fragmenty strony. Są one tylko częściowo przypadkowe. Otóż WP potrafi również zidentyfikować po nazwie niektóre pliki zawierające część modularnego kodu:
header.php– plik zawierający najczęściej metadane strony, ładujący zewnętrzne style i skrypty JavaScript,-
footer.php– plik zawierający kod stopki strony.
Niestety jumbotron.php i lista.php nie zostaną autmatycznie rozpoznane! Jeśli zaś będziemy przechowywać fragment strony odpowiadającej za stopkę w pliku footer-final-version-fix.php, to nie zostanie on po prostu załadowany i nasza strona zostanie pozbawiona stopki!
Pierwszy kod PHP
Dopasujmy teraz nasz kod, tak aby odpowiadał wymaganiom WordPress`a. Bazowy plik podzielimy na razie wg planu:
- sekcja zawierająca metadane zostanie przeniesiona do nowego pliku nazwanego
header.php, - sekcja zawierająca stopkę do nowego pliku
footer.php
Należy zwrócić uwagę na dwie ważne rzeczy:
- Należy zmienić rozszerzenie plików z *.HTML na *.PHP . Do ładowania zawartości innych plików musimy użyć języka PHP, który daje możliwość wskazania pliku do załadowania, dzięki czemu można użyć metod get_header() i get_footer().
- Strona po powyższej zmianie przestanie działać. Jest to efekt spodziewany. Są dwie przyczyny: po pierwsze, aby uruchomić plik i otrzymać zbudowaną w odpowiedzi stronę, musimy mieć włączony serwer lokalny. Co więcej, funkcje
get_footer()iget_header()są funkcjami dostępnymi w WordPress, nie znajdują się w zbiorze podstawowych funkcji PHP. Żeby móc z nich korzystać należy załadować nasz szablon jako nowy motyw.
Prezentacja kodu
Poniżej przedstawiamy zaktualizowany kod. Struktura strony została podzielona na 3 nowe pliki: index.php, header.php i footer.php.
index.php
header.php
footer.php
Edycja podstawowych treści na stronie
Wcześniej szablon był w całości wypełniony przykładową treścią Lorem ipsum... . Gdyby nie zależało nam na możliwości jej wygodnej edycji z panelu administratora, tak mogło by zostać. My chcemy jednak mieć w pełni funkcjonalny szablon, a zatem chcemy dać użytkownikom możliwość zmiany tekstu lub obrazków.
Treści wyświetlane na stronie (niezależnie od tego czy jako tekst wpisu na blogu, czy jako tekst statyczny na stronie “o nas”), noszą nazwę Post Types
i wszystkie znajdują się w jednym miejscu: w bazie danych, w tabeli o nazwie post_type, a każdy z nich posiada przypisany identyfikator, określający jego przeznaczenie czy to “Wpis”, czy “Strona”. Różnice pomiędzy postami i wpisami to:
Posty
Posty dosłownie reprezentują treści w postaci wpisów na blogu. Dodawane są z poziomu panelu administratora. Pojedyncze posty będą z kolei wyświetlane jako lista na naszej stronie.
Strony
Strony służą do wyświetlania treści, ale nie postów. Nie posiadają kategorii. Reprezentują np. stronę z informacjami kontaktowymi lub podstronę zawierającą ofertę sklepu internetowego.
WordPress wyraźnie zaleca, aby kod stron i postów znajdował się w przeznaczonych do tego plikach; odpowiednio: page.php i single.php. Gdyby ich jednak zabrakło, WP spróbuje zrealizować plan awaryjny i użyć pliku index.php do ich wyświetlania . Jest to zasługa hierarchicznego systemu ładowania plików, działającego wg specyficzności. Oznacza to, że patrząc na stronę kontakt (contact), system w pierwszej kolejności będzie szukał pliku o nazwie page-contact.php, a jeśli go nie znajdzie to ostatecznie skorzysta z podstawowego pliku index.php do wyrenderowania naszej strony. Podobnie zachowa się dla pozostałych stron. Gdy mamy ustawioną statyczną stronę główną to WP będzie chciał ją wyświetlić poprzez wywołanie pliku home.php, a gdy go nie znajdzie wykorzystać index.php. Na szczęście nasz szablon jest bardzo prosty i nie uwzględnia listy postów, ani innych specyficznych stron, więc nie musimy się martwić o zachowanie takiej specyfiki.
To właśnie po to, aby dać sobie możliwość dodawania nowych treści i ich edycji na stronie głównej szablonu, w kodzie pliku index.php z listingu 3.1, w linijce 9.3 znalazł się poniższy fragment.
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title( '<h1>', '</h1>' );
the_content();
endwhile;
endif;
?>Jego przeznaczeniem jest we wskazanym miejscu wyświetlić jedna po drugiej zapisane treści.
Wyjaśnienie powyższego kodu i więcej informacji na temat dodawania treści na stronę znajduje się w kolejnym wpisie. Pokażemy w nim też, jak załadować nowo powstały szablon do WordPress na lokalnym środowisku. Do zobaczenia!
