Jak stworzyć i korzystać z motywu potomnego w Wordpressie?

Każdy kto miał styczność z Wordpressem na pewno miał zamiar dostosować jakiś gotowy motyw do własnych potrzeb. Zmiany mogą polegać na zmianie loga, koloru linków, tła, dodania własnego menu, widgetów itp. Często jednak aby zmienić coś w szablonie, potrzeba edycji jego plików źródłowych (np. CSS).

W takim wypadku wystarczy wejść do folderu z aktualnie używanym motywem (poprzez klienta ftp lub wordpressowy edytor wtyczek oraz pluginów), wybrać plik do edycji, wprowadzić zmiany, zapisać, podmienić i gotowe. Odświeżamy stronę i cieszymy się z wprowadzonej modyfikacji. Wszystko fajnie, ale co kiedy zaktualizujemy swój motyw bo została wydana nowsza wersja? Wszystkie nasze zmiany znikną i zostaną nadpisane. Aby zapobiec takim właśnie wpadkom korzysta się z tak zwanych "motywów pochodnych".

Czym jest motyw pochodny w Wordpressie?

Motyw potomny (ang. child theme) dziedziczy wygląd oraz funkcje motywu głównego i pozwala na wprowadzanie w nim zmian, bez konieczności modyfikacji jego oryginalnych plików. WordPress najpierw wyszuka odpowiednie pliki w folderze motywu potomnego, a jeśli ich tam nie będzie, sięgnie do motywu rodzica. Dlatego motyw potomny może zawierać tylko zmodyfikowane pliki, a reszta zostanie podłączona z motywu rodzica. Proste.

Jak stworzyć motyw pochodny?

Sposób pierwszy.

Utwórzmy w katalogu themes folder o nazwie: twentyfourteen-child (zakładając że za przykład bierzemy motyw o nazwie Twenty Fourteen który jest jednym z podstawowych themsów wordpressa). Aby nasz szablon oraz WP zorientowali się że chcemy korzystać z jego nowej, zdatnej na bezpieczne modyfikacje wersji musimy stworzyć plik style.css oraz functions.php i wkleić do nich następujący kod:

style.css:

Theme Name: Twenty Twelve Child 
Template: twentytwelve 
Author: the WordPress team 
Version: 1.0 
Text Domain: twentytwelve-child 
*/ @import url(„../twentytwelve/style.css”)

functions.php:

function twentyfifteen_child_enqueue_styles() { 
$parent_style = 'twentyfifteen-style'; // nazwa użyta w motywie nadrzędnym 
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); // podłączenie style.css motywu nadrzędnego 
wp_enqueue_style( 'child-style', 
get_stylesheet_directory_uri() . '/style.css', 
array( $parent_style ), 
wp_get_theme()->get('Version') 
); 
} 
add_action( 'wp_enqueue_scripts', 'twentyfifteen_child_enqueue_styles' );

Aby sprawdzić czy wszystko działa, przejdźmy do panelu administracyjnego w zakładkę Wygląd. Powinien pojawić się stworzony przez nas motyw potomny Twenty Fourteen Child. Aktywujmy go.

Możemy uzupełnić nasz nowy motyw o obrazek poglądowy - wystarczy wrzucić go pod nazwą screenshot.png do folderu z istniejącym już plikiem style.css.

Jeżeli chcemy edytować coś w nagłówku, na przykład w header.php to musimy go skopiować z motywu głównego do naszego potomka. Analogicznie z innymi.

Sposób drugi - łatwiejszy

W zasadzie powinienem zacząć od niego, ale chciałem pokazać wam wersję manualną :) Istnieje wtyczka o nazwie Child Theme Configurator. Po jej instalacji klikamy na Create a new Child Theme i wybieramy motyw któremu chcemy stworzyć potomka. Następnie klikamy Analayze. Na liście będą różne opcje – w większości przypadków wystarczą ustawienia domyślne i klikamy Create New Child Theme.

Po pomyślnym stworzeniu motywu potomnego pojawią nam się nowe dodatkowe opcje konfiguratora o których można poczytać na stronie wtyczki. Teraz należy przejść w zakładkę Motywy i aktywować nasz nowy theme. Motyw potomny został stworzony pomyślnie a wtyczkę można usunąć.