Ilość dostępnych szablonów dla WordPressa jest wręcz przytłaczająca i każdy z pewnością znajdzie coś dla siebie. Najczęściej jednak zachodzi konieczność wprowadzenia jakichś mniejszych lub większych modyfikacji – na przykład zmiany kolorów, rozmiaru nagłówków czy wielkości marginesów. Motywy potomne (child themes) pozwalają na (teoretycznie) bezproblemowe dostosowywanie gotowych szablonów do naszych potrzeb, bez konieczności dotykania ich oryginalnych plików. Postaram się przybliżyć nieco temat ich tworzenia, omówić ich najważniejsze zalety i wady, wyjaśnić dlaczego nie należy grzebać w plikach szablonu, a także kiedy nie ma sensu korzystać z motywów potomnych.
Dlaczego nie wolno modyfikować oryginalnych plików szablonu?
Motywy, niezależnie od tego czy są darmowe czy płatne, są zwykle rozwijane i aktualizowane przez swoich autorów. Kolejne wersje mogą zawierać nowe funkcje czy różnego rodzaju poprawki (w tym związane z bezpieczeństwem), które chcielibyśmy, lub wręcz nawet powinniśmy, wprowadzić również na naszej stronie. Problem w tym, że w trakcie aktualizacji szablonu wszystkie jego pliki są usuwane, a na ich miejsce są kopiowane nowe – tak więc jeśli zmieniliśmy któryś z oryginalnych plików, to nasza praca zostanie bezpowrotnie utracona.
Jak działają motywy potomne?
Mechanizm motywów potomnych został stworzony po to, aby można było dostosowywać szablony do swoich potrzeb bez konieczności modyfikowania oryginalnych plików. Dzięki temu możemy spokojnie aktualizować motyw bez obawy, że któraś z naszych modyfikacji zostanie usunięta. Działa to całkiem sprawnie, o ile nie potrzebujemy niczego więcej poza własnym arkuszem stylów CSS oraz plikiem functions.php, w którym możemy umieszczać swój kod PHP. Ale o tym za chwilę.
Motyw potomny to motyw, który jest oparty na innym motywie (rodzicu) i korzysta z wszystkich jego plików (szablonów stron, grafik, arkuszy stylów czy skryptów JavaScript). Arkusz stylów motywu potomnego jest ładowany po arkuszu motywu nadrzędnego, tak więc zawarte w nim reguły zastąpią reguły oryginalne (w ten sposób łatwo zmienimy na przykład kolory). Gdy WordPress potrzebuje jakiegoś pliku szablonu, to najpierw sprawdza czy nie istnieje on przypadkiem w motywie potomnym, a jeśli go tam nie znajdzie, to korzysta z pliku oryginalnego.
Motywy potomne mogą zawierać kopie dowolnych plików występujących w motywie nadrzędnym, mogą również zawierać pliki dodatkowe. I tak na przykład, jeśli chcemy zmodyfikować plik page.php (szablon statycznej strony), to możemy skopiować go do motywu potomnego, a WordPress od tej chwili będzie ładował tę kopie zamiast pliku oryginalnego. Możemy również dodać do motywu potomnego plik page-kontakt.php (szablon statycznej strony o skrócie „kontakt”), który nie istnieje w motywie nadrzędnym (gdybyśmy dodali go do motywu-rodzica, to zostałby on usunięty przy kolejnej aktualizacji szablonu).
Jak stworzyć motyw potomny?
Aby stworzyć motyw potomny nie jest potrzebna żadna specjalistyczna wiedza – cała operacja sprowadza się do utworzenia nowego katalogu w folderze szablonów (domyślnie jest to wp-content/themes) i umieszczenia w nim nowego pliku style.css. Plik ten musi zawierać poprawny nagłówek szablonu, który może wyglądać na przykład tak:
/* Theme Name: WPzen Theme URI: https://wpzen.pl Description: Motyw potomny szablonu Twenty Twelve Author: Bartosz Romanowski Author URI: https://wpzen.pl Template: twentytwelve Version: 1.0 */
Do czego służą poszczególne linie nagłówka?
- Theme Name – nazwa naszego motywu potomnego (wymagana)
- Template – nazwa katalogu, w którym znajduje się motyw nadrzędny (wymagana); my skorzystamy z domyślnego motywu Twenty Twelve
- Theme URI – adres strony naszego szablonu
- Description – krótki opis naszego szablonu
- Author – nazwa autora
- Author URI – adres strony autora
- Version – numer wersji naszego szablonu
Jak widać, wymagane są tylko linie Theme Name i Template. Kolejność linii w nagłówku nie ma znaczenia.
Teraz musimy zapisać nasz nowy nagłówek do pliku style.css i umieścić go w nowym katalogu wp-content/themes/wpzen. Po wykonaniu tej czynności na stronie zarządzania szablonami (Wygląd -> Motywy) w panelu administracyjnym WordPressa pojawi się nasz motyw potomny. Gdy klikniemy link Szczegóły, pojawi się między innymi informacja o motywie narzędnym, który jest wymagany przez nasz szablon.
Po aktywacji naszego motywu potomnego nie wszystko jednak działa tak jak powinno. Strona wygląda tak jakby nie został załadowany arkusz stylów – i tak też się stało. Domyślnie WordPress nie ładuje głównego arkusza stylów motywu nadrzędnego, na przykład na wypadek, gdybyśmy chcieli go stworzyć od zera w motywie potomnym. Musimy więc dodać do naszego pliku style.css jedną linię, która go zaimportuje – najlepiej dodać ją zaraz za nagłówkiem.
@import url("../twentytwelve/style.css");
Jeśli po odświeżeniu strony naszym oczom ukaże się szablon wyglądający identycznie jak Twenty Twelve, to znaczy że cała operacja przebiegła pomyślnie.
Możemy również w katalogu naszego motywu potomnego utworzyć plik functions.php, w którym będziemy umieszczać własny kod PHP. Warto jednak zastanowić się czy na pewno nasze modyfikacje powinny trafić do szablonu – w podjęciu decyzji pomoże ten tekst.
Wady motywów potomnych
Motywy potomne mają jedną wadę, która w mojej ocenie dyskwalifikuje je w przypadku, gdy chcemy wykonać nieco bardziej zaawansowane modyfikacje szablonu. Załóżmy, że musimy zmienić jakąś drobnostkę w kodzie każdego z plików używanych przez WordPressa do wyświetlania treści – nie ma w tym nic nietypowego, bo to dość powszechna sytuacja. Zgodnie z teorią, powinniśmy każdy z tych plików skopiować do naszego motywu potomnego i pracować na tych kopiach. Co jednak gdy autor oryginalnego szablonu zaktualizuje wszystkie te pliki? Nasze kopie przestaną być aktualne – nie będą bowiem zawierały zmian wprowadzonych przez autora. Tak więc będziemy musieli ręcznie wyszukać co się zmieniło i przenosić te zmiany do naszych plików. Jest to zadanie nie tyle trudne, co niezbyt przyjemne i dość czasochłonne.
Niestety, wada ta nie jest możliwa do wyeliminowania – przynajmniej dopóki WordPress nie doczeka się mechanizmu scalającego nasze zmiany w szablonie ze zmianami wykonanymi przez autora (tak jak ma to miejsce na przykład w phpBB). Na dzień dzisiejszy w takim przypadku lepiej jest po prostu skopiować cały szablon, nadać mu inną nazwę i pracować na tak przygotowanym klonie, darując sobie zabawę z motywami potomnymi.
Kiedy nie trzeba używać motywów potomnych?
Jeśli nasze zmiany w szablonie mają polegać tylko i wyłącznie na dodaniu kilku reguł CSS, to zamiast tworzyć motyw potomny możemy skorzystać z jakiejś wtyczki umożliwiającej wprowadzania własnego kodu CSS. Taką możliwość oferuje między innymi wtyczka Jetpack (moduł Custom CSS) lub znacznie prostsza Custom CSS Manager.
Tworzenie motywów potomnych za pomocą wtyczki Child Themify
Stworzenie motywu potomnego wymaga dostępu do serwera przez FTP lub w inny umożliwiający przesłanie plików sposób. Gdy nie mamy takiej możliwości lub po prostu czujemy, że cała operacja nas przerasta, możemy utworzyć szablon potomny za pomocą darmowej wtyczki Child Themify. Jest to proste do bólu narzędzie, które pozwala dwoma kliknięciami stworzyć całą potrzebną strukturę (katalog i pliki).
Po aktywacji wtyczki obok każdego z zainstalowanych szablonów pojawi się link Utwórz motyw potomny. Po jego kliknięciu zostaniemy przeniesieni do prostego formularza, w którym możemy wpisać nazwę naszego motywu potomnego. Po kliknięciu przycisku Dalej zostanie utworzony nowy katalog oraz plik style.css (możemy w razie potrzeby zmodyfikować jego nagłówek używając wbudowanego w WordPressa edytora – Wygląd -> Edytor).
Zdecydowaną wadą tego rozwiązania jest brak możliwości edycji nagłówka nowego arkusza stylów oraz brak pliku functions.php w utworzonym za pomocą tej wtyczki motywie potomnym (taką funkcję posiada wtyczka One-Click Child Theme, która jednak potrafi tworzyć motywy potomne tylko dla aktualnie aktywnego szablonu).
Polskie tłumaczenie wtyczki Child Themify można pobrać tutaj (nie jest ono dostępne w oficjalnym repozytorium WordPressa).