Child theme – motyw potomny, czyli bezpieczne modyfikacje motywu

Child theme, czyli motyw potomny jest najlepszym rozwiązaniem dla wprowadzania niewielkich zmian w kodzie wybranego motywu. Child theme korzysta z funkcjonalności motywu rodzica jednak nie podlega zmianom kodu, gdy przykładowo wychodzi nowa wersja motywu. Nie tracimy nic z wprowadzonych zmian, a mimo to możemy korzystać z najnowszych opcji. Warto więc zapoznać się z tworzeniem motywu dziecka.

Dlaczego należy stosować child theme?

Każdy z nas ma pewne wymagania co do posiadanego motywu. Jedni korzystają z tych stworzonych wyłącznie dla nich, inni zaś z ogólnodostępnych motywów. Ta druga grupa częściej wprowadza zmiany, które sprowadzają się również do zmiany w kodzie motywu. Co jakiś czas jednak motywy są poprawiane i wychodzi nowa wersja, a my po aktualizacji jesteśmy zmuszeni do ponownego edytowania plików.

Dodatkową zaletą korzystania z motywu potomnego jest zdecydowane przyśpieszenie prac nad motywem, gdyż mamy fundamenty w postaci motywu rodzica.

Child theme to motyw, który korzysta z plików i funkcjonalności motywu rodzica jednak aktualizacje nie zmieniają jego kodu. Dokonując zmian w motywie, dublujemy pliki i przenosimy do folderu motywu dziecka. Zostają one nadpisane i w pierwszej kolejności wordpress skorzysta właśnie z nich. Wyjątkiem jest plik functions.php. Plik functions.php wczytywany jest tuż przed functions.php rodzica, lecz nie nadpisuje go. Dlatego umieszczamy tam jedynie dodane funkcje.

Jak stworzyć child theme?

Stworzenie motywu potomnego należy rozpocząć od stworzenia w folderze wp-content/themes nowego folderu. Tworzymy w nim plik style.css w którym umieszczamy na samym początku niezbędne linie.

/*
Theme Name: Nazwa motywu Child theme (wymagane)
Theme URI: http://twojastrona.pl
Description: Krótki opis motywu.(opcjonalnie)
Author: (opcjonalnie)
Author url: http://twojkontakt.pl(opcjonalnie)
Version: 1.0 (opcjonalnie)
Tags: (opcjonalnie)
Template: twentytwelve (nazwa motywu rodzica - wymagane)
*/

Plik style.css jest jedynym plikiem wymaganym do działania child theme. Obowiązkowo na początku musimy wpisać nazwę motywu, która wyświetli się w Panel administratora >> Wygląd >> Motywy oraz Theme, czyli szablon – motyw rodzica z którego korzystamy. Pozostałe informacje umieszczamy opcjonalnie.

Należy również pamiętać, że style.css nadpisze style z motywu rodzica. Aby nie przepisywać ich wszystkich należy umieścić linijkę kodu potrzebną do zaimportowania wyglądu motywu.

@import url('../twentytwelve/style.css'); (importowanie stylów z motywu rodzica)

Efekt możemy obserwować po wyszukaniu naszego motywu w zakłądce Wygląd i uruchomieniu motywu.
Plik functions.php tworzymy jeżeli będziemy dodawać dodatkowe funkcje. Należy zawsze je dodawać w miejsce pomiędzy odpowiednie znaczniki.

 

Plik functions.php ze stworzonego motywu potomnego będzie nadpisywał funkcje rodzica, jeżeli twórca edytowanego motywu odpowiednio go przystosuje (if ( ! function_exists).

if ( ! function_exists( 'theme_poll' ) ) {
function theme_poll() {
// Ankieta.
}
}

Jeżeli zamierzamy wprowadzić w jakimś pliku motywu rodzica zmianę, kopiujemy go do folderu z motywem potomnym, aby posiadał tę samą nazwę i wtedy zmieniamy wartości.

Child theme z obsługą RTL

Jeżeli nasz motyw potomny ma być przystosowany do wyświetlania tekstu od prawej do lewej strony należy analogicznie jak z plikiem style.css utworzyć odpowiednik rtl.css i umieścić w nim następujący kod:

`
/*
Theme Name: Nazwa motywu Child theme
Template: twentytwelve (szablon)
*/

@import url(„../twentytwelve/rtl.css”);
`

Pobierz child theme

[symple_button color=”green” url=”http://jakubstrawa.pl/wp-content/uploads/2013/08/twenty-ten-child-theme.zip” title=”Twenty Ten Child theme download” target=”blank” border_radius=””]Twenty Ten Child theme[/symple_button][symple_clear_floats] [symple_button color=”green” url=”http://jakubstrawa.pl/wp-content/uploads/2013/08/twenty-eleven-child-theme.zip” title=”Twenty Eleven Child theme download” target=”blank” border_radius=””]Twenty Eleven Child theme[/symple_button][symple_clear_floats] [symple_button color=”green” url=”http://jakubstrawa.pl/wp-content/uploads/2013/08/twenty-twelve-child-theme.zip” title=”Twenty Twelve Child theme download” target=”blank” border_radius=””]Twenty Twelve Child theme[/symple_button][symple_clear_floats] [symple_button color=”green” url=”http://jakubstrawa.pl/wp-content/uploads/2013/08/twenty-thirteen-child-theme.zip” title=”Twenty Thirteen Child theme download” target=”blank” border_radius=””]Twenty Thirteen Child theme[/symple_button][symple_clear_floats]

Podsumowanie

Motywy potomne rozwiązują problem utraty kodu po aktualizacji. Dodatkowo pozwalają nam bez modyfikacji motywu wyjściowego zmieniać dowolnie jego wygląd. Przyśpieszają prace nad motywem oraz pozwalają szybko wrócić do wyjściowego wyglądu. Przesyłamy je na serwer do tego samego katalogu co motyw rodzica i możemy całkowicie uwolnić wodze fantazji.

Aktualizacja 11.04.16r

Nowe wersje WordPressa polecają, aby korzystać z funkcji wp_enqueue_style zamiast @import. Poniższy kod należy wkleić do pliku function.php w motywie potomnym modyfikując nazwamotywu na nazwę folderu w którym znajduje się motyw rodzica. nazwachildtheme_enqueue_styles należy zmodyfikować według własnego uznania pozostawiając istotny fragment _enqueue_styles niezmieniony. Powodzenia!

`
function nazwachildtheme_enqueue_styles() {
wp_enqueue_style(‚nazwamotywu’, get_template_directory_uri() .’/style.css’);
}
add_action(‚wp_enqueue_scripts’, ‚nazwachildtheme_enqueue_styles’);

`

Źródło: Codex

2 thoughts on “Child theme – motyw potomny, czyli bezpieczne modyfikacje motywu

  1. Super! tego własnie szukaliśmy, dzięki za artykuł znacznie to nam ułatwi pracę 🙂

    1. Dzięki za zostawienie komentarza. Aktualizowałem część wpisu. Sprawdźcie koniecznie! Pozdrawiam

Napisz co uważasz