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:
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.
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
(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.
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()
.
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.
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
Świetny poradnik! Wszystko proste i jasne. 😉