Czym jest motyw potomny w WordPressie i jak go stworzyć

Motyw potomny, czyli tzw. Child Theme to szablon, który działa w oparciu o inny motyw. Umożliwia wprowadzanie zmian do oryginalnego motywu bez konieczności jego bezpośredniej edycji. Jak stworzyć motyw potomny i jakie ma zalety?

Kiedy chcesz (lub musisz) wprowadzić zmiany do szablonu, którego używasz, to masz dwie możliwości. Pierwszym sposobem jest bezpośrednia edycji plików danego szablonu i wprowadzenie swoich modyfikacji. To rozwiązanie ma jednak poważną wadę – w przypadku aktualizacji motywu utracisz wszystkie swoje zmiany, gdyż zostaną one nadpisane zaktualizowanymi plikami.

Drugim rozwiązaniem jest stworzenie motywu potomnego (z ang. child theme). Jest to zalecane rozwiązanie, gdy chcemy zmodyfikować istniejący szablon lub stworzyć własny motyw na podstawie innego. Dzięki niemu wszystkie nasze zmiany zostaną zachowane w trakcie aktualizacji motywu. Zobaczmy, jak dokładnie wygląda działanie motywów potomnych i jakie mają zalety.

Czym jest motyw potomny w WordPressie i jak działa?

Motyw potomny to taki motyw, który dziedziczy wygląd swojego motywu rodzica i zawiera jedynie nasze własne modyfikacje. Innymi słowy, motyw potomny działa w oparciu o inny motyw (tzw. motyw rodzic), dziedzicząc jego wygląd i różniąc się tylko tymi plikami, które są w nim umieszczone. Wykorzystuje oryginalny wygląd głównego motywu i nakłada na niego nasze własne zmiany bez bezpośredniej modyfikacji głównego szablonu.

W folderze z motywem potomnym są umieszczone tylko te pliki, w których wprowadziliśmy jakiekolwiek zmiany i stanowią one pierwszeństwo, nadpisując oryginalne pliki motywu rodzica podczas ładowania strony. Dzięki temu wszystkie nasze modyfikacje są całkowicie odseparowane w osobnym folderze.

WordPress podczas otwierania strony najpierw ładuje nasze zmodyfikowane pliki z folderu z motywem potomnym, gdyż mają one pierwszeństwo. Reszta plików jest natomiast ładowana z oryginalnego motywu, na którym bazujemy.

Można to przedstawić na prostym przykładzie. Załóżmy, że chcielibyśmy zmodyfikować nagłówek i stopkę w motywie TwentySixteen. Za nagłówek odpowiada plik header.php, za stopkę odpowiada plik footer.php. Zamiast edytować te pliki bezpośrednio w oryginalnym motywie, wystarczy stworzyć motyw potomny dla szablonu TwentySixteen i umieścić w nim kopię plików header.php i footer.php , a następnie wprowadzić do nich swoje zmiany.

WordPress podczas otwierania strony użyje wszystkich plików z motywu rodzica za wyjątkiem tych plików, które znajdują się w motywie potomnym, czyli header.php oraz footer.php. Te dwa pliki zostaną odczytane z motywu potomnego. Mówiąc krótko, motyw potomny nadpisuje pliki motywu rodzica podczas otwierania strony.

Jak są nadpisywane pliki przez motyw potomny?

Generalnie zasada jest dość prosta. Gdy zarówno w folderze z motywem rodzicem jak i motywem potomnym znajdują się dwa pliki o tej samej nazwie, to wygrywa zawsze ten z motywu potomnego. Podczas ładowania strony pliki z motywu rodzica są ignorowane, gdy w folderze z motywem potomnym istnieją ich odpowiedniki. Widać to na poniższym przykładzie, gdzie motyw potomny nadpisuje pliki header.php i footer.php.

Od tej reguły jest jeden wyjątek – plik functions.php. Plik ten z reguły zawiera niestandardowe funkcje PHP, które są potrzebne do działania poszczególnych elementów na stronie, wprowadzonych przez dany motyw. W tym wypadku zawartość pliku functions.php nie jest nadpisywana, a uzupełniana. Oznacza to, że zarówno zawartość oryginalnego pliku z motywu rodzica jak i zawartość tego samego pliku z motywu potomnego jest wczytywana jednocześnie.

Zalety używania motywu potomnego w WordPressie

Motywy potomne są najwłaściwszym sposobem na edytowanie istniejącego szablonu lub budowanie własnego motywu w oparciu o inny, gdyż pozwalają pozostawić oryginalny szablon bez zmian i odseparować swoje zmiany do osobnego folderu.

Jedną z najważniejszych zalet motywów potomnych jest rozwiązanie problemu z aktualizacjami szablonów. Motywy pobrane z sieci często otrzymują aktualizacje, które po zainstalowaniu resetują ustawienia oraz nadpisują obecne pliki motywu. Użycie motywu potomnego sprawia jednak, że nasze zmodyfikowane pliki są w osobnym folderze, a więc przetrwają każdą aktualizację, gdyż ta ich po prostu nie dotyka. Jeśli teraz po każdorazowej aktualizacji motywu musiałeś ponownie wprowadzać swoje zmiany do szablonu, to użycie motywu potomnego rozwiąże ten problem raz na zawsze.

Kolejną zaletą jest zachowanie oryginalnych plików motywu rodzica. Jeśli kiedyś zechcemy usunąć swoje modyfikacje i powrócić do oryginalnego motywu, to nie ma z tym żadnego problemu. Wystarczy przełączyć się z powrotem na motyw rodzica lub usunąć swój motyw potomny, a cała strona momentalnie zmieni swój wygląd na taki, jaki zaplanował autor motywu.

Motywy potomne przyspieszają również proces tworzenia strony. Zamiast tworzyć własny szablon zupełnie od zera, możemy wykorzystać motyw, który jest podobny do tego, co chcemy osiągnąć, a następnie za pomocą motywu potomnego dostosować go do własnych potrzeb. To też świetny sposób na to, aby po prostu nauczyć się w bezpieczny sposób modyfikować szablony i poznać strukturę motywów w WordPressie – jak coś pójdzie nie tak, to zawsze możesz powrócić do oryginalnego motywu.

Kiedy warto używać motywów potomnych?

Wiemy już, jak działa motyw potomny i jakie ma zalety. Warto jednak jeszcze dowiedzieć się, kiedy w ogóle warto używać takiego rozwiązania. Czy powinniśmy tworzyć motyw potomny za każdym razem, gdy chcemy zmienić np. kolorystykę strony? Dlaczego w takim wypadku nie skorzystać z opcji personalizacji motywu, które nawet twórcy szablonów dodają do swoich projektów?

Odpowiedź jest zależna od tego, co chcemy zmodyfikować. Jeśli nasze zmiany ograniczają się do zmiany kolorystyki kilku elementów, do rozmiaru i kroju czcionki, a także do prostych rzeczy, które można zmienić z poziomu ustawień motywu, to użycie motywu potomnego nie jest potrzebne.

Jeśli jednak planujesz modyfikować kod w plikach oryginalnego motywu, dodawać lub usuwać swoje własne funkcje i wprowadzać duże zmiany w strukturze strony, to użycie motywu potomnego jest jak najbardziej wskazane. Z reguły motywu potomnego powinieneś użyć zawsze wtedy, gdy pojawia się potrzeba bezpośredniego edytowania plików PHP lub dopisywania dużej ilości własnych reguł CSS (oraz modyfikowania istniejących).

Tworzenie motywu potomnego w WordPressie

Motyw potomny można utworzyć na wiele sposobów. Istnieją wtyczki typu One Click Child Theme, które za pomocą panelu administracyjnego pozwalają jednym kliknięciem myszki stworzyć motyw potomny dla wybranego szablonu. My pokażemy jednak ręczną metodę za pomocą serwera FTP.

Zaloguj się na serwer FTP ze swoim WordPressem, a następnie udaj się do katalogu z motywami. Są one w poniższej ścieżce:

wp-content/themes/

W tym katalogu znajdują się podfoldery, z których każdy reprezentuje motyw zainstalowany na twojej stronie. Załóżmy, że chcemy stworzyć motyw dziecięcy dla motywu TwentySixteen, który znajduje się w folderze „twentysixteen”.

Utwórz nowy katalog w folderze z szablonami i nadaj mu dowolną, wybraną przez siebie nazwę (np. „twentysixteen-child”). Wejdź do utworzonego przez siebie folderu. Musisz utworzyć tu na start dwa pliki:

  • style.css
  • functions.php

Utwórz je najpierw na komputerze za pomocą Notatnika. Do pliku style.css wklej poniższy fragment:

/* 
Theme Name:   Twenty Sixteen – motyw potomny
Template:     twentysixteen
*/

Powyższy fragment zawiera dwa obowiązkowe tagi. Pierwszy to „Theme name”, w którym po prostu wpisujemy nazwę dla naszego motywu potomnego (może być dowolna). Drugi to „Template” i tu musimy bardzo uważnie wpisać nazwę motywu, który ma pełnić rolę rodzica, czyli na bazie którego ma działać nasz „child theme”. Wpisujemy tu nazwę folderu, w którym motyw rodzic jest umieszczony. Oczywiście do tego pliku  później możemy dopisać własne style CSS, które będą zmieniać wygląd strony.

Następnie utwórz plik functions.php i wklej w nim poniższy fragment:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Fragment ten sprawia, że motyw potomny zaimportuje oryginalny styl CSS z motywu rodzica. Bez tego strona byłaby praktycznie cała biała i zawierała czysty tekst.

Zapisz oba pliki i przekopiuj je do folder, który utworzyłeś dla swojego motywu potomnego. Teraz możesz wejść do panelu administracyjnego WordPressa, a następnie udać się do zakładki „Motywy”. Na liście wyświetli się twój motyw potomny – aktywuj go i ustaw jako domyślnego.

Od teraz pracujesz na motywie potomnym. Jeśli zechcesz wprowadzić jakieś modyfikacje w którymś z plików motywu rodzica, to wystarczy, że skopiujesz te pliki do folderu z motywem potomnym i wprowadzisz w nich zmiany. WordPress odczyta te pliki w pierwszej kolejności, ignorując oryginalne pliki z motywu rodzica.


Szukasz sprawdzonego hostingu dla swojego WordPressa? Sprawdź ofertę LH.pl i bezpłatnie przetestuj dowolny pakiet hostingowy.

Default image
Błażej Starosta
Wieloletni webmaster, tworzący serwisy przy użyciu popularnych CMS typu WordPress oraz Prestashop. Ma doświadczenie w prowadzeniu sklepów internetowych i stara się być na bieżąco ze wszystkimi nowinkami technologicznymi. Uwielbia dzielić się swoją wiedzą, zawsze chętnie pomoże rozwikłać problemy.

4 komentarze

  1. Bardzo ciekawy artykuł. Dziękuję!

  2. Robię wszystko według instrukcji, ale zamiast motywu potomnego pojawia się przezroczyste okienko do wyboru. Mam motyw Divi na wordpressie. Macie jakiś pomysł co mogę zmienić? 🙂

    • Trochę odkop, ale rozwiązaniem może być dodanie tagu <?php na początku functions.php, o którym autor zapomniał :). Ewentualnie w pliku CSS źle podana nazwa katalogu z themem bazowym (Template: …).

    • Rzeczywiście pusta strona niestety – jakieś podpowiedzi ??

Zostaw komentarz