Każdy, kto trochę poważniej zaczyna się zajmować tworzeniem stron w oparciu o WordPress – w pewnym momencie zaczyna mieć potrzebę trochę większych modyfikacji, niż są dostępne „out of the box”. Oczywiście – najlepszym sposobem byłoby stworzenie swojego motywu od podstaw… ale byłoby to mało efektywne jak potrzebujemy wprowadzić tylko parę modyfikacji do już istniejącej skórki, której używamy.
Dla osób leniwych – na samym końcu tego wpisu znajdziecie gotowy child theme do Divi – wystarczy go pobrać i zainstalować u siebie.
W jakim celu tworzymy child theme?
Kiedy chcemy dodać do istniejącego motywu dodatkowe funkcje, własny CSS… czy dodatkowe szablony stron – musimy pobawić się trochę bezpośrednio w kodzie. Dodajemy własny kod php, czy javascript, modyfikujemy istniejące CSSy… i jesteśmy zadowoleni z efektów.
Niestety – wszystkie nasze zamiany będą działały tylko do momentu, kiedy twórca naszego motywu nie postanowi zrobić aktualizacji. Po aktualizacji wszystko co zrobiliśmy pójdzie do śmieci.
Więc albo rezygnujemy z aktualizacji ryzykując bezpieczeństwo naszej strony, albo skrzętnie przywracamy nasze zmiany w świeżo zaktualizowanej wersji… albo tworzymy motyw potomny 🙂
Czym jest child theme?
W dużym uproszczeniu – child theme (czyli motyw potomny) jest właśnie zbiorem funkcji i plików, które rozszerzają funkcjonalność naszego głównego motywu. Samodzielnie nie jest w stanie działać – ale kiedy obok niego jest wgrany główny theme – wtedy „mówi mu”:
Hej – jak uruchamiasz swoje pliki – weź również pod uwagę to co tutaj podaję…. to jest ważniejsze i jeśli odwołuje się do tego samego co Twoje funkcje – zastąp je moimi 🙂
Co dla nas najważniejsze – w przypadku aktualizacji głównego motywu – nasze modyfikacje nie ulegną zmianie. Zmienia się główny „silnik” naszej strony…. ale to co zapisaliśmy w child theme nie ulegnie zmianom.
Jak zrobić child theme dla Divi?
Stworzenie motywu potomnego jest bardzo łatwe. Pokażę to na przykładzie Divi, którego najczęściej używam…. ale tak naprawdę metodologia jest taka sama w przypadku każdego innego motywu.
Trzeba przygotować 3 pliki jako podstawę (później możesz tam dogrywać kolejne pliki…. ale bez tych 3 nie będzie działać)… mianowicie:
- plik functions.php – tutaj będziemy wprowadzać większość kodu modyfikującego działanie motywu głównego
- plik style.css – tutaj będziemy zmieniać wygląd serwisu za pomocą css
- plik screenshot.png – żeby na stronie motywów w naszym kokpicie wszystko wyglądało jak należy 😉
Zacznijmy od najmniej istotnej rzeczy – czyli sam screenshot.png. To powinna być grafika ilustrująca nasz motyw potomny. Zawartość dowolna – grunt, żeby było łatwo zidentyfikować, który to nasz theme 😉 Rozdzielczość takiego pliku to 1200×600 px … i tak naprawdę to jedyny wymóg.
Plik style.css – tutaj poza naszymi stylami wpisujemy również rzeczy, które będą się wyświetlać w naszym WordPressie jak się wejdzie w szczegóły motywu. Dodatkowo – ostatnia linijka definiuje jakiego do jakiego motywu głównego odnosi się nasz child theme.
Wszystko co w kodzie napisałem dużymi literami trzeba zmienić wg swojego uznania.
/*====================================== Theme Name: NAZWA TWOJEGO MOTYWU POTOMNEGO Theme URI: ADRES INTERNETOWY MOTYWU/STRONY NA KTÓREJ JEST UŻYWANY Description: OPIS MOTYWU. EW NOTATKI DLA SIEBIE NA PRZYSZŁOŚĆ Version: NUMER WERSJI Author: TUTAJ SIĘ PRZEDSTAW ;) Author URI: ADRES AUTORA MOTYWU Template: Divi ======================================*/
Plik functions.php – najważniejszy plik w motywie potomnym. Tutaj definiujemy zmiany funkcjonalne względem motywu głównego. Podstawowa zawartość to:
<?php
function divichild_enqueue_scripts() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'divichild_enqueue_scripts' );
?>
teraz już nasz child theme wie, co ma robić i co wczytywać.
Jak zainstalować child theme?
Jak już stworzyłeś te pliki – najszybciej będzie je spakować w jeden plik zip… nazwać go wg uznania. Tak przygotowany plik instalujesz wchodząc w swój panel administracyjny WordPress w sekcję Wygląd -> Motywy . Tam klikamy „Dodaj” a następnie „Wyślij motyw na serwer” … Wybieramy przygotowany plik zip i… już 🙂 Jak jest zainstalowany motyw główny – to możesz aktywować swój child theme.
A przykładowo, które pliki dodatkowo tam dać. Jak jakiś powiedzmy header plik chcemy aby się nie zmieniał wyglądem, a mamy w tym pliku tylko wyciętą 1 linijkę kodu. Bo nie chcemy widoku kategorii na górze. To zostawić taki plik w potomnym z wyciętym też źle – bo mogą być aktualizowane pozostałe treści kodu. Jak takie cos można by rozwiązać?
Zasadniczo trzeba zrobić strukturę analogiczną do motywu nadrzędnego. Jedna linijka kodu pokazuje skąd pobiera plik docelowy – więc w child theme trzeba dać odpowiedni katalog i plik jaki zmieniamy.
W aktualnej wersji Divi mamy coś takiego jak konstruktor motywu – więc to co próbujesz zrobić powinno się udać również z poziomu Divi -> konstruktor motywów i zrobić po prostu globalny header.
Motywy potomne bardzo ułatwiają pracę nad stroną. Gdy ktoś potrafi pisać skrypty i style może wręcz zapomnieć o Customizer czy wtyczkach do „wstrzykiwania” kodu. Wszystkie wprowadzane zmiany ma się w jednym miejscu 🙂
W przypadku motywu dla WooCommerce motyw potomny tworzy się identycznie, czy są jednak jakieś dodatkowe „zależności” wynikające z np. używanych dodatkowych wtyczek? Ma Pan jakieś doświadczenia w tej kwestii?
Jeśli motyw główny posiada więcej niż jeden plik styli (tutaj pliki inne niż główny plik styli „style.css”) – czy są one również dołączane instrukcją:
wp_enqueue_style( 'parent-style’, get_template_directory_uri() . '/style.css’ );
W przypadku importowania innych plików styli podejrzewam są dołączane, ale jeśli w inny sposób to podejrzewam trzeba też je uwzględnić, prawda?
Child w Divi nie różni się niczym od childow w innych motywach. Wiec dodatkowe css podłącza się prawdopodobnie w identyczny sposób (mówię prawdopodobnie, bo póki co nie miałem potrzeby korzystania z większej ilości plików css). Niemniej wypróbuję wspomnianą przez Ciebie metodę. Dzięki 🙂