Motyw potomny. Child theme. Instrukcja prawidłowej konfiguracji

Motyw potomny to wciąż świetne rozwiązanie, ale nie w każdej sytuacji. Choć przez lata była to absolutna podstawa obsługi WordPressa, dzisiaj warto przyjrzeć się jej z nieco większym dystansem. Ta natywna funkcjonalność WP dotyczy wyłącznie motywów klasycznych – nie dotyczy nowoczesnych motywów blokowych FSE (Full Site Editing), gdzie zarządzanie wyglądem odbywa się w zupełnie inny sposób. Natomiast przy niewielkich modyfikacjach wyglądu znacznie szybsza i wygodniejsza będzie zwykła wtyczka do własnego kodu (np. Code Snippets) lub standardowo wbudowane pole Customizera (Wygląd > Dostosuj > Dodatkowy CSS).

Spis treści
Czym jest motyw potomny?
Co zawiera i jak działa child theme?
Wady motywu potomnego WP
Jak zrobić child theme?
Skrócona instrukcja podstawowa

Co to jest motyw potomny ang. child theme?

Motyw potomny to motyw oparty na motywie nadrzędnym (rodzic, baza – ang. parent, base), korzystający z wszystkich jego plików. WordPress w pierwszej kolejności sprawdza czy potrzebny plik jest w motywie potomnym, jeśli go nie ma korzysta z pliku motywu bazowego.

Motyw potomny umożliwia edycję wyglądu strony bez niewskazanej ingerencji w oryginalne pliki motywu nadrzędnego. Modyfikacja oryginalnych plików stwarza problem po aktualizacji motywu, która usuwa wszystkie wcześniej wprowadzone zmiany. Istnienie motywu potomnego zabezpiecza przed takim scenariuszem, gdyż edytowane zostają jego pliki, a nie oryginalne.

Co może zawierać i jak działa motyw potomny?

Motyw potomny może zawierać kopie dowolnych plików z motywu nadrzędnego oraz pliki dodatkowe, nieznajdujące się w pliku bazowym.

Należy wiedzieć, że tylko 1 plik jest wczytywany z motywu bazowego oraz potomnego i łączony razem, to functions.php (plik potomny przed nadrzędnym). Plik style.css także, ale w jego przypadku zmodyfikowana wersja w motywie potomnym nadpisuje tylko te zmiany w wersji z motywu bazowego. Pozostałe pliki są zastępowane(!)

Minusy motywu potomnego

Dlatego jeśli modyfikowanych plików jest więcej niż niemodyfikowanych stosowanie motywu potomnego można sobie darować.

Jeżeli aktualizacja motywu nadrzędnego obejmie wszystkie zmodyfikowane pliki w motywie potomnym to te kopie będą nieaktualne, gdyż nie będą zawierać zmian wprowadzonych w trakcie aktualizacji.

Wówczas jedynym wyjściem jest ręczne namierzenie zmian w plikach po aktualizacji i ich przenoszenie do plików w motywie potomnym.

Dlatego dopóki WordPress nie zostanie obdarzony mechanizmem scalającym wszystkie zmodyfikowane pliki motywu potomnego z zaktualizowanymi plikami motywu bazowego, w przypadku modyfikacji większości plików, lepiej skopiować cały motyw, nadać mu inną nazwę i edytować te sklonowane wersje.

Jak zrobić motyw potomny?

Są 2 wyjścia: wtyczki – wujek G podeśle jakieś rzetelne porównania aktualnych pluginów – lub krótka instrukcja konfiguracji motywu potomnego, która zapewnia większą kontrolę nad tworzeniem child theme niż wtyczki, dlatego ją opiszę.

1. Przy pomocy wybranego klienta FTP zalogować się na serwer (lub w inny preferowany sposób).

2. W folderze motywów – domyślnie wp-content/themes – utworzyć nowy folder z przykładową nazwą motywpotomny. Powszechną praktyką jest nazywanie motywu potomnego nazwą motywu bazowego z dodatkiem child, czyli MotywBazowy-child. Zakazane są spacje w nazwie, gdyż mogą spowodować błędy.

3. Przy pomocy np. notatnika/notepad++ stworzyć plik style.css i przenieść go do nowego folderu → wp-content/themes/motywpotomny. Plik musi zawierać poprawny nagłówek motywu. Kolejność linii w nagłówku nie ma znaczenia. Nowy plik style.css stanowi wymagane minimum do aktywacji motywu potomnego.

Linie wymagane
Skopiuj, wklej i zmień zaznaczone

/*
Theme Name: MotywPotomny
Template: motywbazowy
Version: 1.0
*/

• Theme Name. Nazwa motywu potomnego
• Template. Nazwa katalogu, w którym znajduje się motyw nadrzędny. Wielkość liter ma znaczenie!
• Version. Numer wersji motywu potomnego. Nieobowiązkowe, ale warto dodać, żeby działało cache motywu potomnego z kodem rekomendowanym poniżej.

Linie dodatkowe

/*
Theme URI: http://twojastrona.pl
Description: Motyw potomny szablonu ...
Author: Imię i nazwisko, ksywa itp.
Author URI: http://twojastrona.pl
*/

• Theme URI. Adres strony motywu
• Description. Krótki opis motywu
• Author. Nazwa autora
• Author URI. Adres strony autora

3A. Powszechne zalecenie umieszczenia w potomnym pliku style.css linii

@import url("../motywbazowy/style.css");

zapewniającej import arkusza stylów motywu nadrzędnego jest błędem spowalniającym stronę. Właściwym rozwiązaniem szybciej ładującym arkusze stylów jest utworzenie pliku functions.php w folderze motywu potomnego i dodanie w nim poniższego kodu… oficjalne wersje z codex.wordpress.org/Child_Themes

Wersja uproszczona

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

}
?>

Powyższy kod będzie działał tylko w przypadku istnienia jednego pliku style.css w motywie bazowym. Jeśli motyw potomny zawiera kilka plików css trzeba dodać wszystkie zależności motywu nadrzędnego.

Rekomendowana, kompletna wersja

Skopiuj, wklej i zmień zaznaczone

<?php
function my_theme_enqueue_styles() {

$parent_style = 'parent-style';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Na przykładzie motywu o nazwie Motyw Bazowy, parent-style powinno wyglądać tak – motywbazowy-style.

Powyższy kod ustawia kolejkę wczytywania arkusza stylów – pierwszy ładuje się plik z motywu nadrzędnego, dopiero po nim wersja potomna.

Ważne. Nowoczesne motywy klasyczne często automatycznie kolejkują arkusz style.css motywu potomnego, gdy tylko wykryją jego obecność. Dodatkowa ręczna rejestracja obu stylów w functions.php może czasem doprowadzić do dwukrotnego załadowania tego samego pliku CSS na stronie.

4. W panelu administracyjnym WP>Wygląd>Motywy włączyć świeżo zrobiony motyw potomny.

5. Należy pamiętać, że motyw potomny dziedziczy tylko i wyłącznie pliki motywu nadrzędnego – nie ustawienia zapisane w bazie danych. Dlatego wszystkie zmiany dokonane w Personalizacji trzeba wprowadzić także w ustawieniach motywu potomnego. Wygodnym rozwiązaniem jest wykorzystanie wtyczki importującej np. Customizer Export/Import

6. Edycja innych plików. Skopiować plik do motywu potomnego z uwzględnieniem struktury katalogów, a następnie go zmodyfikować. Przykładowo edycja pliku inc/config.php wymaga utworzenia katalogu inc i w nim pliku config.php, który można zmodyfikować.

Skrócona instrukcja instalacji motywu potomnego WordPress.

Podstawowa konfiguracja w 4 krokach z wykorzystaniem 2 programów – Total Commander i Notepad++

1. [Total Commander] Nowy folder w wp-content/themes o nazwie motywbazowy-child
2. [Notepad++] Nowy plik style.css z kodem
/*
Theme Name: motywbazowy-child
Template: motywbazowy
Version: 1.0
*/
3. [Notepad++] Nowy plik functions.php z kodem

<?php
function my_theme_enqueue_styles() {

$parent_style = 'motywbazowy-style';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

4. Zmienić zaznaczenia na zielono według nazwy motywu bazowego i zapisać. Gotowe pliki style.css i functions.php wysłać do folderu motywbazowy-child. Włączyć motyw potomny.

Źródła
https://wpzen.pl/motywy-potomne-czym-sa-dlaczego-nie-trzeba-ich-uzywac/
http://girlswhowp.com/bezpiecznie-prawidlowo-modyfikowac-motywy/
http://porady.wordpressa.pl/motyw-potomny/
https://codex.wordpress.org/Child_Themes
https://konstantin.blog/2014/child-themes-import/
Aktualizacja z Gemini AI