Motyw potomny jest bardzo przydatny, gdy chcemy dodać lub zmienić jakąś funkcjonalność motywu nadrzędnego, z którego korzystamy aktualnie. Czasami jest tak, że nasz Theme daje nam możliwość wyświetlania pewnych danych w sposób, który nam nie do końca odpowiada i chcielibyśmy to zmienić. Do wprowadzania takich zmian świetnym rozwiązaniem jest właśnie Child Theme.
Co to jest motyw potomny — child theme?
Krótko mówiąc, motywem potomnym (z ang. Child Theme) nazywamy motyw, który dziedziczy wygląd i funkcjonalności motywu nadrzędnego. Czyli Child Theme to motyw, który swoje działanie opiera na innym motywie, a w swoich plikach zawiera tylko i wyłącznie pliki zmodyfikowane motywu rodzica lub nowo utworzone przez użytkownika.
Przykłady wykorzystania motywu potomnego
Pierwszym przykładem może być sytuacja, którą już opisywałem na swoim blogu. Zobacz wpis, w którym opisuję jak usunąć liczbę produktów przy nazwie kategorii na stronie sklepu i archiwum. Jest to idealny przykład, w którym dobrą praktyką jest wykorzystanie do tego motywu potomnego.
Drugą sytuacją, którą również opisywałem na swoim blogu, to sytuacja, w której musiałem w jednym z realizowanych projektów dodać liczbę produktów znajdujących się w koszyku w motywie Divi. To kolejny idealny przykład wykorzystania Child Theme.
Motyw potomny umożliwia nam rozszerzenie motywu nadrzędnego o dodatkowe funkcjonalności lub ich modyfikowanie. Pozwala nam również kontrolować wygląd poszczególnych elementów motywu głównego. Oznacza to, że za pomocą własnego kodu CSS możemy zmieniać wygląd np. przycisków, list, odnośników, przypisać własne kolory do zmiennych i wiele innych rzeczy związanych z wyglądem.
Kiedy jest sens tworzyć motyw potomny?
Tworzenie motywu potomnego nie zawsze jest najlepszym rozwiązaniem. Kiedy zatem tworzyć motyw potomny, a kiedy tego nie robić?
Sprawa jest w zasadzie dosyć prosta. Jeśli chcemy zmienić lub rozszerzyć jakąś funkcjonalność, do której mamy dostęp tylko i wyłącznie z danym motywem, to w takiej sytuacji wykorzystujemy Child Theme do modyfikacji. Robimy tak, ponieważ to dzięki motywowi dana funkcjonalność istnieje na naszej stronie.
Inny przykład. Za wygląd wszystkich elementów na naszej stronie odpowiada kod CSS. Plik ze stylami naszej strony pobierany jest z plików motywu, z którego obecnie korzystamy. Jeśli chcemy znacznie zmienić wygląd elementów naszej strony za pomocą własnego kodu CSS, warto w takiej sytuacji również użyć do tego motywu potomnego.
W innym przypadku, gdzie chcemy dodać zupełnie nową funkcjonalność, która powinna działać niezależnie od motywu, z którego korzystamy, powinniśmy to zrobić w inny sposób. Najlepiej dodać taką funkcjonalność jako dodatkowy plugin.
Jak działa i przed czym chroni motyw potomny?
Jak już napisałem wcześniej, motyw potomny działa na podstawie swojego nadrzędnego motywu i zawiera tylko te pliki, które zostały przez nas zmodyfikowane lub nowo utworzone.
Działanie motywu potomnego dobrze jest sobie zobrazować na przykładzie: mamy motyw nadrzędny, który nazywa się MHS. W katalogu motywu MHS znajdują się plik header.php, który odpowiada za wyświetlanie całego nagłówka na stronie internetowej. Mamy również nasz motyw potomny, który jest w folderze MHS-Child, w nim znajdują się tylko pliki functions.php oraz style.css — te pliki są wymagane (o tym nieco później). W tej chwili mamy aktywowany nasz motyw potomny, czyli MHS-Child.
Nasza przeglądarka pokaże wynik wczytania następujących plików motywu przez WordPressa:
W przypadku gdy chcielibyśmy zmienić coś w pliku header.php, np. sposób wyświetlania jakiegoś elementu nagłówka lub coś z niego usunąć, kopiujemy plik header.php z folderu z motywem nadrzędnym od katalogu z motywem potomnym. W tym przypadku z folderu MHS do folderu MHS-Child.
Skopiowaliśmy plik header.php do naszego Child Theme, więc teraz zobacz które pliki zostaną wczytane przez WordPressa:
Taka jest właśnie zasada działania motywu potomnego. WordPress widząc, że używasz motywu potomnego, wczytuje w pierwszej kolejności pliki z Child Theme, a dopiero później pozostałe pliki z motywu rodzica.
Przed czym chroni motyw potomny?
Można zapytać, po co ta cała zabawa z tworzeniem motywu potomnego i kopiowaniem plików, skoro można podmienić to, co niezbędne bezpośrednio w pliku znajdującym się w katalogu motywu nadrzędnego. To prawda, lecz jest w tym rozwiązaniu jedna bardzo poważna wada. Kiedy zaktualizujesz swój motyw do nowszej wersji, wszystkie zmiany, jakie zostały wprowadzone w plikach motywu będą utracone i powrócą do pierwotnej wersji. Dzieje się tak, ponieważ podczas aktualizacji, wszystkie pliki zostają usuwane i w ich miejsce kopiowane są nowe, aktualne pliki danego motywu. W ten sposób Twoja cała praca poszła na marne.
Motyw potomny zachowa zmienione przez Ciebie pliki oryginalnego motywu nawet po aktualizacji nadrzędnego motywu.
Jak stworzyć motyw potomny?
Na stworzenie/dodanie motywu potomnego do swojego WordPressa istnieje 3 sposoby. Możemy skorzystać z gotowca przygotowanego przez autora danego motywu. Innym sposobem jest skorzystanie z wtyczki. Opcją dla zaawansowanych jest stworzenie Child Theme samodzielnie. Ale wszystko po kolei, sposób pierwszy.
Wgranie gotowego motywu potomnego
Bardzo często jest tak, że autorzy motywów udostępniają na jego oficjalnej stronie także motyw potomny. Są też przygotowane generatory takich motywów, gdzie możemy nadać mu np. własną nazwę. Wystarczy taki motyw pobrać, zainstalować na swojej wersji WordPressa i aktywować. To wszystko, tylko tyle. Jeśli korzystasz np. z motywu komercyjnego, który zakupiłeś gdzieś w internecie z dużym prawdopodobieństwem jest tak, że Child Theme jest w jednej paczce razem z Twoim kupionym motywem. Ten sposób jest zdecydowanie najbezpieczniejszym z możliwych sposobów. Kto inny, jak nie sam autor przygotuje motyw potomny w najlepszy sposób.
Samodzielne stworzenie motywu potomnego
Do samodzielnego stworzenia motywu potomnego będziemy potrzebować dostępu do serwera, najlepiej przez FTP. Przechodzimy do katalogu z motywami WordPressa: wp-content/themes/. W tym katalogu tworzymy nowy folder, który nazywamy podobnie jak nasz aktywny motyw, dla którego chcemy stworzyć Child Theme. Np. jeśli folder motywu nadrzędnego ma nazwę mhs, to nasz katalog z motywem potomnym nazwijmy mhs-child. Nie jest to wymagana forma nazewnictwa, ale jest to po prostu dobra praktyka, dzięki której zachowamy porządek.
W naszym katalogu z motywem potomnym mhs-child tworzymy dwa pliki, które są wymagane, aby móc aktywować nasz child theme w kokpicie WordPressa. Pierwszy z nich, to plik functions.php, a drugi style.css. Edytujemy plik functions.php i wklejamy do niego poniższy kod:
<?php
/*
* Add Parent theme styles and Child theme styles
*/
function mhs_enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); // Add parent theme stylesheet
wp_enqueue_style( 'child-style', get_stylesheet_uri().'/style.css' ); // Add child theme stylesheet
}
add_action( 'wp_enqueue_scripts', 'mhs_enqueue_parent_styles' );
?>Powyższy kod zaimportuje nam wszystkie style z naszego motywu rodzica oraz dodatkowo wczyta arkusz styli motywu potomnego.
Powyższy kod określiłbym jako uniwersalny. Dlaczego? To, czy musimy załadować style motywu rodzica w naszym motywie potomnym, zależy głównie od tego, jakiej funkcji używa motyw rodzica do załadowania styli na stronie. Jeśli jest to funkcja, która zaczyna się od get_template, np. get_template_directory_uri(), to motyw potomny powinien załadować tylko swoje arkusze styli. Natomiast w przypadku gdy motyw nadrzędny ładuje swoje style za pomocą funkcji zaczynającej się od get_stylesheet, np get_stylesheet_uri(), w takim przypadku musimy w motywie potomnym załadować style motywu rodzica funkcją get_template_directory_uri() oraz style potomne za pomocą funkcji get_stylesheet_uri().
Nasuwa się pytanie, co stanie się w przypadku, gdy użyjemy powyższego kodu, a motyw nadrzędny używa tej samej funkcji do ładowania swoich styli na stronie? Czy style wczytają się podwójnie? To zależy.
Jeśli wczytujemy arkusz styli motywu nadrzędnego w naszym motywie potomnym i jego nazwa będzie identyczna jak w motywie rodzica, to w takim przypadku style motywu nadrzędnego wczytają się tylko raz. Dzieje się tak, ponieważ najpierw wczytywane są funkcje z motywu potomnego i tylko pierwsze wywołanie funkcji wp_enqueue_style dla danej nazwy stylu będzie wczytana, kolejne takie same wywołanie funkcji dla takiej samej nazwy będzie pominięte. W innych przypadkach style będą dodane raz jeszcze. W powyższym kodzie nazwą styli motywu nadrzędnego jest parent-style. Dlatego tworząc motyw potomny danego Theme warto jest poczytać jego dokumentację, w której powinno być opisane, jak stworzyć motyw potomny.
Pozostało nam jeszcze wkleić poniższy kod do pliku style.css i odpowiednio zmienić w nim nazwę szablonu. Wyjaśnię wszystko za chwilę.
/*
Theme Name: MHS-Child
Template: mhs
*/Theme Name – jest to po prostu nazwa naszego motywu, która będzie się wyświetlać w panelu administracyjnym WordPressa.
Template – jest to nazwa folderu, w którym znajduje się nasz motyw nadrzędny.
Struktura naszego katalogu z motywem potomnym powinna wyglądać następująco:
Dobrą praktyką jest pisanie nazw folderów małymi literami, nie tak jak na obrazkach powyżej 🙂
Teraz przechodzimy do panelu administracyjnego i możemy aktywować swój motyw potomny.
Stworzenie motywu potomnego za pomocą wtyczki
Trzecim sposobem na stworzenie motywu potomnego jest użycie wtyczki, która praktycznie zrobi wszystko za nas. Wyszukujemy wtyczkę Child Theme Configurator, instalujemy plugin i aktywujemy go.
Przechodzimy teraz do Narzędzia -> Child Themes.
Zaznaczamy opcję CREATE a new Child Theme, a następnie wybieramy poniżej motyw, do którego chcemy stworzyć motyw potomny i klikamy w Analyze.
Wtyczka przeanalizuje motyw rodzica i wyświetli odpowiednie komunikaty. Nadaj odpowiednią nazwę katalogowi, w którym będą przechowywane pliki motywu potomnego. Resztę opcji dostosuj do własnych potrzeb. W punkcie 7. możesz dostosować nazwę motywu potomnego, jego opis itp. Na końcu kliknij w Create New Child Theme.
Nowy motyw potomny powinien zostać prawidłowo dodany do Twoich motywów. Możesz go teraz aktywować.
Po stworzeniu swojego motywu potomnego za pomocą wtyczki pamiętaj, aby ją dezaktywować oraz usunąć. Nie będzie już do niczego potrzebna.
