środa, 15 sierpnia 2012

WordPress: Projektowanie własnego tematu WordPress, część 1

Zanim przystąpimy do budowy własnych skórek WordPressa musimy zrozumieć zasady ich funkcjonowania. Rozpocznijmy jednak od nazewnictwa. W oryginalnej dokumentacji WordPress mówi się o tematach (Wordpress Themes) natomiast w języku polskim tematy WodPressa nazywa się częściej motywami lub skórkami. W swoim artykule będę używać terminów temat, motyw bądź skórka zamiennie jedynie z powodów "gramatycznych", zaś znaczenie wszystkich terminów będzie zawsze identyczne. W artykułach które można znaleźć w polskim internecie można się spotkać także z określeniem szablon (template) które autorzy rozumieją także jako temat. Jest to błędna konwencja, o tym co to jest template napiszemy za chwilę.

Temat WordPressa składa się z kilkunastu (lub więcej) plików, które wspólnie definiują wygląd i funkcjonalność każdej strony CMS'a. Każdy motyw może być zupełnie inny, może też oferować unikalną funkcjonalność która w znacznej mierze zależy jedynie od fantazji projektanta. Poprawnie zapisany motyw może być dynamicznie, w dowolnym momencie zaaplikowany lub zastąpiony innym przez administratora systemu.

Pliki wchodzące w skład tematu to przede wszystkim:
  • szablony (template) - pliki szablonów są podstawowym składnikiem każdej strony WordPressa. Jak elementy puzzli poszczególne szablony składane są dynamicznie przez silnik systemu w całą stronę w odpowiedzi na żądanie wyświetlenia jej wysłane przez klienta. Niektóre szablonów (na przykład nagłówka i stopki) są wykorzystywane na wszystkich stronach, podczas gdy inne są używane tylko w specyficznych warunkach.
  • arkusze stylów
  • opcjonalny plik funkcji functions.php
  • pliki definiujące podstawowe typy stron (szablony stron)
  • grafiki, pliki javascript itp. 
Po zainstalowaniu każdy temat jest zamieszczany w osobnym katalogu wp-content/themes/<nazwa-tematu>.

 Rys. Temat składa się z szablonów kontrolujących konkretne fragmenty strony

Podstawowe szablony przewijające się przez większość tematów WordPressa to:
  • header.php - globalny szablon odpowiadający za wygląd nagłówka i nawigacji na wszystkich stronach systemu. Plik zawiera/generuje także podstawowe HTML strony począwszy od tagu <html> poprzez <head></head> i <body>
  • sidebar.php - kolumna boczna (pasek boczny) stron. Jeśli potrzebujemy wielu pasków bocznych, sposób ich generacji definiujemy w functions.php. Zawartość pasków bocznych definiujemy z panelu administracyjnego Wordpress dodając odpowiednie widgety.
  • footer.php - szablon stopki zawierający końcowe tagi </body></html>
  • loop - tak zwana pętla odpowiada za prezentację elementów generowanych "w pętli". Typowa pętla to lista postów na blogu.  

Rys. Temat może zawierać też pliki definiujące wygląd pewnych kategorii stron

Jak wspomnieliśmy poza definiowaniem wyglądu fragmentów stron istnieją szablony definiujące wygląd kategorii całych stron. Zawierają one instrukcje grupujące szablony fragmentów w większą całość. Podstawowe szablony tego typu to:
  • index.php - podstawowy plik skórki WordPress. Odpowiada za domyślny wygląd strony i jest wymagany gdy motyw definiuje własne (kastomowe) szablony. Jeśli nie zdefiniowano home.php, to odpowiada także za wygląd strony startowej.
  • home.php - plik indeksu definiuje startową stronę z motywu WordPress. Domyślnie zawiera pętlę wyświetlającą najnowsze posty na blogu. Konfiguracja zwartości strony home.php możliwa jest poprzez panel administracyjny, opcja wp-admin -> Ustawienia->Czytanie. Można tam też wskazać alternatywną, statyczną stronę startową.
    Jeśli używamy statycznej pierwszej strony to szablon definiuję wygląd strony prezentującej najnowsze posty.
  • single.php - odpowiada za wygląd pojedynczych postów. Technicznie single. php zawiera zwykle pętlę, która generuje kwerendy zwracające tylko jeden post i wyświetla je
  • single-<rodzaj-postu>.php - niestandardowy szablon przeznaczony dla pojedynczych postów określonego typu.
  • page.php - odpowiada za wygląd pojedynczych typowych stron
  • inne kategorie stron - w razie potrzeby można zdefiniować szablony dla poszczególnych typów stron w ramach motywu. Wystarczy wtedy skopiować plik page.php pod inną nazwą i dokonać odpowiednich zmian w jego treści zaś na początku pliku należy dodać wpis:
    <?php
    /* Nazwa Motywu: Nazwa (Kategorii) Strony */
    ?>
  • archive.php - szablon przeznaczony do wyświetlania tzw. archiwów, czyli elementów takich jak tagi, kategorie itp.
  • 404.php -  używany gdy WordPress nie może znaleźć postu lub strony i próbuje wyświetlić odpowiednią informację na ten temat.
Dodatkowo temat może zawierać szablony takie jak:
  • comments.php - szablon komentarzy,
  • front-page.php - szablon strony startowej, jest on używany tylko w przypadku korzystania ze statycznej strony startowej,
  • category.php - szablon kategorii,
  • tag.php - szablon tag,
  • taxonomy.php - szablon terminu,
  • author.php - szablon strony autor,
  • date.php - szablon data / czasu,
  • search.php - szablon z wynikami wyszukiwania. Używany gdy jest przeprowadzane wyszukiwanie,
  • attachment.php - szablon załącznika. Używany podczas oglądania jednego załącznika,
  • image.php - szablon obrazu załącznika. Używany podczas wyświetlania pojedynczego obrazu załącznika.

Jak to działa?

Na przykład, jeśli wyświetlany ma być pojedynczy post, wywoływana jest funkcja is_single () która sprawdza czy istnieje plik single.php. Jeśli zwraca ona 'true' treść posta wyświetlana jest za pomocą szablonu single.php, jeśli zaś 'false' do wyświetlenia posta wykorzystany zostanie domyślny szablon index.php
Za zbudowanie samego HTMLa strony odpowiada kod znajdujący się w pliku szablonu (u nas single.php) który wywołuje z kolei między innymi szablony definiujące sposób budowy fragmentów stron takich jak header.php czy footer.php.

Oryginalna treść artykułu

Ciąg dalszy cyklu ...

Brak komentarzy:

Prześlij komentarz