Motyw potomny WordPress (child theme) – co to jest i jak go stworzyć

3. Metoda 1: motyw potomny ręcznie – krok po kroku

Tak tworzę motyw potomny dla motywu Astra. Dla innych motywów zasada jest taka sama – zmieniają się tylko nazwy. Potrzebujesz dostępu do serwera przez SFTP/FTP (np. programem FileZilla) albo menedżera plików w panelu hostingu.

Krok 1. Utwórz folder motywu potomnego

W katalogu wp-content/themes/ utwórz nowy folder. Przyjęło się nazywać go nazwą rodzica z dopiskiem -child, np. astra-child.

Krok 2. Utwórz plik style.css

W folderze astra-child utwórz plik style.css z takim nagłówkiem:

/*
 Theme Name:   Astra Child
 Template:     astra
 Description:  Motyw potomny dla Astry
 Version:      1.0.0
*/

Najważniejsza jest linia Template: – musi zawierać dokładną nazwę folderu motywu nadrzędnego (tu: astra), a nie jego nazwę wyświetlaną w kokpicie. Pod nagłówkiem możesz od razu dopisywać własne reguły CSS.

Krok 3. Utwórz plik functions.php i załaduj style

To, jaki kod wpiszesz, zależy od tego, jak motyw nadrzędny ładuje swoje style. Większość nowoczesnych motywów – w tym Astra – sama ładuje swój CSS. Motyw potomny musi wtedy dołączyć tylko własny style.css:

<?php
add_action( 'wp_enqueue_scripts', 'astra_child_styles', 15 );

function astra_child_styles() {
	wp_enqueue_style(
		'astra-child-style',
		get_stylesheet_uri(),
		array( 'astra-theme-css' ),
		wp_get_theme()->get( 'Version' )
	);
}

array( 'astra-theme-css' ) sprawia, że Twój CSS ładuje się po stylach Astry, więc może je nadpisywać. Jeśli motyw nadrzędny ładuje style przez get_stylesheet_uri(), dokumentacja WordPressa zaleca dodatkowo dołączyć arkusz rodzica przez get_parent_theme_file_uri( 'style.css' ). W motywach blokowych style zwykle obsługuje plik theme.json i ten krok bywa w ogóle zbędny.

W starej wersji tego wpisu był kod ładujący style.css rodzica. Przy Astrze to niepotrzebne, bo jej plik style.css zawiera głównie nagłówek, a właściwe style ładuje sam motyw.

Krok 4. Aktywuj motyw potomny

W kokpicie przejdź do Wygląd → Motywy, znajdź „Astra Child” i kliknij „Włącz”. Motyw nadrzędny musi pozostać zainstalowany – nie usuwaj go.

Krok 5. Sprawdź ustawienia po aktywacji

Część motywów zapisuje ustawienia Customizera osobno dla każdego motywu. Po aktywacji motywu potomnego sprawdź więc logo, menu, widżety i kolory. Jeśli motyw ma eksport i import ustawień, zrób eksport przed zmianą.