Budowa motywu do WordPressa, wycieczka w świat szablonów

Wordpress własny motyw od podstaw - budowa motywu Odcinek o numerze 03

Zanim zaczniemy kodować własny motyw, dobrze dowiedzieć się jaka jest budowa motywu do WordPressa. Motyw jest jak żywy organizm – składa się z mniejszych elementów, które współpracują ze sobą, żeby stworzyć całość. 

Przypomnienie: w poprzedniej części skonfigurowaliśmy środowisko lokalne, założyliśmy bazę danych i przeszliśmy przez proces instalacyjny WordPressa. W tym momencie WordPress jest zainstalowany na naszym lokalnym serwerze i czeka aż zaczniemy budować na nim stronę.

W tym artykule robię krótką rozgrzewkę przed kodowaniem i rozbieram motyw na części składowe. Pokazuję też gdzie umieszczać nowe motywy oraz tłumaczę podstawowe zasady jakie panują w szablonach.


[tl;dr]

  • motyw (theme) jest kolekcją plików szablonów (template files)
  • tworząc motyw można go zakodować od zera lub stworzyć motyw potomny, bazujący na innym motywie
  • nowy motyw wrzucamy do wp-content/themes/[folder z nazwą motywu]
  • w szablonie znajduje się na ogół kod PHP, HTML i napisane w PHP tagi szablonu (template tags)
  • tagi szablonu to WordPress’owe funkcje, wczytujące informacje z bazy danych i dynamiczne wyświetlające je na stronie
  • szablony są wczytywane, zgodnie z hierarchiąindex.php jest wczytywany, gdy WordPress nie znajdzie żadnego odpowiedniego pliku szablonu.

Motyw

Każdy WordPressowy motyw składa się z mniejszych części – szablonów. Współpracujące ze sobą szablony, budują to, co widzi użytkownik odwiedzający naszą stronę. Zabawę z robieniem motywów można zacząć na parę sposobów:

Nanoszenie zmian bezpośrednio na gotowy motyw

Możemy aktywować któryś z motywów automatycznie dołączonych do naszej instalacji lub znaleźć motyw w oficjalnym katalogu z motywami. Taki motyw pewnie nie będzie nam odpowiadał w 100%, więc będziemy chcieli nanieść jakieś drobne poprawki w kolorystyce, układzie czy funkcjonalności i zrobimy to w oryginalnych plikach.

To jest szybkie i proste rozwiązanie, ale problem pojawi się podczas aktualizacji motywu (która może być ważna – łatająca luki w bezpieczeństwie). Po zainstalowaniu aktualizacji może się okazać, że wszystkie pliki, które nadpisaliśmy zostały zastąpione oryginalnymi a naniesione zmiany wykasowały się.

Stworzenie motywu potomnego

Z pobranego motywu można też utworzyć motyw potomny, który będzie bazował na swoim rodzicu. W takim przypadku możemy spokojnie zaktualizować motyw nadrzędny, ponieważ nasze modyfikacja są bezpieczne w motywie-dziecku. Tworzenie motywów potomnych to dobra droga do zapoznania się z tworzeniem motywów.

Stworzenie motywu od zera

No i oczywiście można też zrobić własny motyw od zera. Za tym rozwiązaniem stoi najwięcej pracy, ale w nagrodę otrzymujemy całkowicie dopasowany motyw, unikalny i dostosowany do nas – kolorystyką, układem i funkcjonalnością. Z tego sposobu będę korzystać w tej serii.

Katalog z motywami w instalacji WordPressa

Na początek – przegląd katalogów z folderu cloudy w htdocs, w którym jest zainstalowany nasz WordPress:

Przegląd katalogu z zainstalowanym WordPressem

Mamy tu 3 główne katalogi: wp-admin (panel administracyjny), wp-content (zawartość strony), wp-includes (kod rdzenny WP) i trochę osobnych plików, które nas na tym etapie nie interesują i których lepiej nie dotykać, jeśli się do końca nie wie po co. 😉 Tak samo lepiej nie ruszać niczego w wp-admin  i wp-includes. W kolejnych odcinkach jeszcze wrócę na chwilę do wp-config.php, w którym  można robić parę przydatnych rzeczy.

Wszystkie motywy (oraz wtyczki i inne rzeczy, które dokładamy do naszej strony po instalacji – np. uploadowane pliki) znajdują się w katalogu wp-content w odpowiednich folderach:

  • motywy : wp-content/themes
  • wtyczki : wp-content/plugins
  • uploadowane pliki: wp-content/uploads

Poszczególne motywy znajdują się w osobnych katalogach w folderze themes.  Nasz motyw ma nazwę Cloudy Blog, więc wchodzę do folderu, w którym mam zainstalowanego WordPressa, idę do wp-content/themes – tam tworzę nowy folder i nazywam go cloudyblog. Ostatecznie wygląda to tak:

wp-content
|-- themes
|   |-- cloudyblog
|       |--
|   |-- twentyseventeen
|   ..
|   |-- index.php

Szablony

Tak jak napisałam na początku – motyw jest kolekcją współpracujących ze sobą plików szablonów (template files). Typowe pliki szablonów, które znajdziemy w folderze z nazwą motywu to:

  • index.php (główny plik motywu)
  • style.css (arkusz stylów dla motywu)
  • header.php (nagłówek motywu)
  • footer.php (stopka motywu)
  • sidebar.php (sidebar)
  • front-page.php (szablon dla strony lądowania)
  • home.php (szablon dla wpisów blogowych)
  • single.php (szablon strony wpisu)
  • page.php (szablon statycznej strony)
  • category.php (szablon dla archiwum kategorii)
  • archive.php (szablon widoku archiwum)
  • 404.php (szablon strony błędu)
  • search.php (szablon dla wyników wyszukiwania)
  • comments.php (szablon dla komentarzy pod wpisem)
  • attachment.php (strona załącznika)

Żeby motyw działał, musi mieć przynajmniej 2 pliki: index.php jako fall-back i style.css z zakomentowanymi meta-danymi w nagłówku.

#Wskazówka! #CCdr

Między plikami szablonów można znaleźć functions.php – jest to plik, do którego wrzucamy całą funkcjonalność dla naszego motywu. Generalnie jest to coś podobnego do wtyczki, ale ze znacznymi różnicami – więcej w tym temacie, gdy będziemy tworzyć plik functions.php.

Budowa szablonu

Infografika - WordPress budowa szablonu

 

(5) – obowiązkowy w każdym motywie szablon index.php, może składać się z:

(1) – szablonu zawierającego rozpoczęcie kodu HTML i sekcji body, sekcję head i kod nagłówka strony
(2) – wpisów blogowych, które są wyrzucane przez pętle z bazy danych
(3) – szablonu zawierajacego panel boczny z widgetami
(4) – szablonu stopki strony, w której kończy się sekcję body i kod html

Pliki szablonu mają rozszerzenie .php – jest to informacja dla interpretera, że w środku może znaleźć kod w języku PHP, który trzeba zinterpretować. Oprócz kodu PHP, w szablonach między innymi znajdziemy też dobrze nam znany HTML i wordpressowe funkcje napisane w PHP – tagi szablonu (template tags).

Kod HTML, który jest w szablonach generalnie nie różni się niczym od tego, którego używa się do zrobienia zwykłej strony. Jedyną istotną różnicą, jest przeplatanie kodu HTML kodem PHP (przeważnie z tagami szablonu) – w miejscach w które mają być załadowane dynamiczne informacje np.

<a href="<?php the_permalink(); ?>">Czytaj dalej</a>
Tag szablonu do dynamicznego podlinkowania wpisu wyświetlanego w pętli

Tagi szablonu to funkcje napisane w PHP, które mówią WordPressowi, żeby wyciągnął jakąś informację z bazy danych (np. szablon czy tytuł wpisu) i dynamicznie ją zaprezentował. Tutaj można znaleźć listę wszystkich tagów, z których można korzystać w plikach motywu.

Przykładowo, tag pobierający szablon sidebar’a, może wyglądać w taki sposób:

<?php get_sidebar('top'); ?>

Używając tego tagu, możemy dynamicznie wywołać sidebar z pliku sidebar-top.php w wielu różnych szablonach. Przykładowa zawartość pliku sidebar-top.php to znacznik HTML dla aside i funkcja PHP zwracająca widgety zarejestrowane w panelu administracyjnym dla danego panelu bocznego:

<aside>
  <?php dynamic_sidebar('sidebar-top'); ?>
</aside>

Szablon (np. sidebar-top.php), który załączyliśmy w innym szablonie, nazywa się szablonem częściowym (template partial). Szablony częściowe ułatwiają i przyspieszają tworzenie motywu, więc często się z nich korzysta. Kolejny z szablonów częściowych to np. header.php , który zawiera kod nagłówka strony – załącza się go poprzez tag get_header().

#Wskazówka! #CCdr

Hierarchia wczytywania szablonów

Kiedy użytkownik korzysta z naszej strony i wygeneruje jakieś żądanie – np. kliknie w link z kategorią – pliki szablonu są wczytywane zgodnie z tą hierarchią. Następnie kod PHP w szablonach jest parsowany i użytkownikowi jest zwracany kod HTML z zawartością strony.

Warto zapoznać się z hierarchią ładowania plików chociażby po to, żeby:

  • dowiedzieć się jakie szablony można stworzyć  – np. można dodać osobny szablon do danej kategorii, zeby wyświetlała się inaczej niż pozostałe
  • wiedzieć, że plik index.php znajduje się na końcu tej hierarchii, więc gdy wordpress nie znajdzie odpowiedniego szablonu, pokaże użytkownikowi plik index.php

Przykładowo, po kliknięciu w kategorię przy artykule, przenosi nas na stronę archiwum kategorii. WordPress w pierwszej kolejności będzie szukał szablonu nazwanego category-$slug.php, potem category-$id, potem category.php, potem archive.php, a jeśli nic nie znajdzie – wczyta index.php.

W miejsce $slug i $id są dynamiczne wczytywane zmienne powiązane z zapytaniem – kolejno slug danej kategorii i jej numer ID – obydwie zmienne można poznać m.in. na stronach panelu admina.

#Wskazówka! #CCdr

Myślę, że tyle wystarczy w temacie budowy motywu. Standardowo chętnie odpowiem na pytania w komentarzach, mam nadzieję, że nie skomplikowałam sprawy i w miarę można to wszystko zrozumieć. 😉

Na koniec, ponieważ pojawiło się parę nowych słów, dodaję mały słowniczek:

  • Theme – motyw
  • Template files – pliki szablonu
  • Template tags – znaczniki/tagi szablonu
  • Template partial – szablon częściowy
  • Fall-back – „wyjście awaryjne” – coś co zadziała, gdy reszta zawiedzie