Stwórz sobie potomka

Stwórz sobie potomka

Jak wykorzystać motywy nadrzędne i potomne aby ułatwić sobie tworzenie witryn?

Wykorzystując system WordPress przy budowaniu stron internetowych wcześniej czy później, zetkniesz się z mechanizmem motywów potomnych.

Motyw i motyw potomny

Motyw WordPressa to inaczej zbiór plików, które odpowiedzialne są za wygląd oraz funkcje strony internetowej. Gdybyś chciał zmodyfikować funkcje witryny lub jej wygląd, mógłbyś wprowadzić odpowiednie zmiany w plikach używanego motywu.
Wszystko byłoby wspaniale, gdyby nie fakt, że podczas aktualizacji pobranego z internetu motywu wszystkie nasze modyfikacje zostaną utracone, nadpisane zmianami, które wprowadził autor motywu. I tutaj z pomocą przychodzą motywy potomne.

Motyw potomny to inaczej motyw, który bazuje na wcześniej utworzonym motywie. W praktyce wygląda to tak, że mamy dwa katalogi z motywami. Pierwszy to katalog z motywem, na którym bazujemy (motyw nadrzędnym) a drugi to katalog z naszymi modyfikacjami (motyw podrzędny, potomny).

Tworzymy motyw potomny

Na potrzeby wpisu pokaże Ci jak wykorzystać dostępny w WordPressie motyw twentyfifteen aby utworzyć motyw potomny. Następnie wprowadzimy kilka drobnych zmian abyś dobrze zrozumiał zasadę tworzenia motywów potomnych.

struktura_katalogow

W katalogu wp-content/themes tworzymy nowy folder o wybranej przez nas nazwie. Jak zauważyłeś na powyższym zrzucie ekranu, utworzyłem katalog twentyfifteen_child. Przechodzimy do katalogu i dodajemy w nim wymagany przez motyw potomny plik style.css. Umieszczamy w nim odpowiednią deklaracją, która informuje system WordPress, że tworzony motyw jest motywem potomnym.

Za template_name podstawiamy nazwę katalogu szablonu, na którym chcemy bazować, czyli twentyfifteen, natomiast za theme_name wymyśloną przez siebie nazwę szablonu potomnego – twentyfifteen_child. Od tego momentu mamy sprawny motyw potomny, wystarczy teraz przejść do kokpitu i zmienić używany motyw.

wp_kokpit

Ale jak to? Włączyłem w kokpicie utworzony w taki sposób motyw i cała moja witryna straciła na wcześniejszym wyglądzie!

Dzieje się tak, ponieważ motyw potomny domyślnie nie wczytuje pliku arkusza stylów motywu nadrzędnego. Jest to celowe działanie WordPressa i jeżeli chcemy aby nasz motyw potomny zaczął wyglądać dokładnie tak jak bazowy, musimy załadować style.css motywu nadrzędnego. Możemy to zrobić tak jak poniżej, dodając odpowiednią regułę importującą do pliku style.css.

Możemy również załadować style.css motywu nadrzędnego używając pliku functions.php zamiast include w CSS.

Wprowadzamy modyfikacje

Gdybyśmy teraz dla przykładu chcieli zmodyfikować content.php aby wprowadzić inną strukturę elementów, wystarczy content.php z motywu nadrzędnego skopiować do katalogu motywu podrzędnego. Od teraz możemy swobodnie edytować content.php w motywie podrzędnym. Podczas aktualizacji szablonu bazowego nie utracimy żadnych zmian, które wprowadziliśmy.

Poniżej kawałek zmodyfikowanego kodu content.php i style.css. Aby nie komplikować artykułu w content.php przeniosłem jedynie część footer pod tytuł oraz zmniejszyłem padding i margines w CSS.

 

I zrzut ekranu po minimalistycznych modyfikacjach. Domyślnie w szablonie twentyfifty data, komentarze i edytuj znajdują się pod wpisem.  Zaznaczyłem obramowaniem element, który został przeniesiony pomiędzy tytułem a zawartością wpisu.

twentyfifteen_child

Kolejność wczytywania plików

Przy pracy z motywami potomnymi bardzo ważna jest kolejność, w jakiej wczytywane są pliki. Najpierw zawsze wczytywane są pliki motywu potomnego. Jeżeli plik zostanie znaleziony, to on zostanie użyty do wygenerowania strony. Gdyby pliku nie było, sprawdzany jest motyw nadrzędny. Jeżeli w motywie nadrzędnym plik również nie zostanie znaleziony, to zostanie użyty plik o ogólniejszym przeznaczeniu. Dla przykładu, jeżeli author.php w motywie potomnym nie zostanie odnaleziony to WordPress spróbuje odnaleźć go w katalogu motywu nadrzędnego. Gdy to się nie powiedzie, WordPress przeszuka katalog motywu potomnego w poszukiwaniu archive.php i jeżeli pliku nie znajdzie, przeszuka katalog motywu nadrzędnego. Gdy wszystkie operacje zawiodą, zostanie użyty index.php z motywu potomnego.

Zgodnie z powiedzeniem, że jeden obrazek wart jest tysiąca słów zapraszam Ciebie do zapoznania się z hierarchią wczytywania plików wphierarchy.com.
Na stronie w formie graficznej zaprezentowana jest informacja, kiedy i który plik jest wczytywany przez WordPressa. Idąc za przykładem z WordPress Codex:

single-{post-type}-{slug}.php – WordPress najpierw poszukuje szablonu dla specyficznego wpisu. Dla przykładu, jeżeli {post-type} to produkt a {slug} to dmc-12, WordPress będzie poszukiwał single-produkt-dmc-12.php. Następnie jeżeli plik nie zostanie odnaleziony w motywie potomnym, sprawdzi motyw bazowy. Jeżeli i to zawiedzie to WordPress zacznie szukać w katalogu potomnym single-{post-type}.php. Jeśli {post-type} to produkt, WordPress będzie szukać pliku single-produkt.php w motywie podrzędnym a gdy to zawiedzie – w nadrzędnym. Idąc skrótowo dalej, jeżeli i to zawiedzie, najpierw sprawdzi single.php, następnie singular.php aż do index.php kiedy wszystko powyższe zawiedzie.

To, co musimy wiedzieć, to że w pierwszej kolejności wczytywane są pliki z motywu potomnego. Nadpisują one swoich zachowaniem pliku motywu bazowego. Jeżeli pliki w motywie potomnym nie zostaną odnalezione, to wczytywane są pliki katalogu nadrzędnego. A gdy w nadrzędnym również nie zostaną odnalezione, wracamy do motywu potomnego w poszukiwaniach. I tak cały czas.

Mały wyjątek.. functions.php

W przypadku pliku functions.php najpierw wczytywany jest plik z szablonu potomnego, a następnie również ładowany jest plik z szablonu bazowego. Tak więc w przeciwieństwie do pozostałych plików szablonowych, functions.php jest wczytywany zarówno z motywu potomnego jak bazowego.

Podsumowanie

Z artykułu dowiedziałeś się, jak utworzyć szablon potomny. Jak przywrócić ostylowanie na stronę za pomocą import CSS lub functions.php. Oprócz tego dowiedziałeś się, w jakiej kolejności ładowane są pliki szablonów.

A jaki jest twój ulubiony sposób dodawania lub zmieniania funkcjonalności na stronie? Szablon potomny a może inne rozwiązanie? Podziel się swoimi uwagami w komentarzu.

Kamil Laskowski

Sympatyk systemów otwartoźródłowych. Człowiek z zapałem, doskonale wiedzący, czego chce od życia. W wolnych chwilach uwielbia tańczyć oraz grać na gitarze.