Motyw potomny w WordPress – jak stworzyć motyw potomny w WordPressie – krok po kroku

Zanim pokażę wam jak dodać motyw potomny w WordPressie, zadajmy sobie pytanie – po co?

Wielu początkujących programistów zaczynając swoja przygodę z WordPressem może znaleźć w różnych poradnikach informacje o tym, gdzie należy dodawać swój autorski kod. Najczęściej proponowanym plikiem do wprowadzania zmian, jest functions.php. Plik ten możemy znaleźć w głównym folderze używanego przez nas motywu – /wp-content/themes/TwójTheme/.

Załóżmy, że posłuchaliśmy się tej porady i kodujemy zawzięcie swoje funkcje ciesząc się z natychmiastowo widocznych efektów. Kończymy projekt, przekazujemy klientowi, zgarniamy zapłatę i temat zamknięty. Szukamy nowych zleceń, a klient w tym czasie chcąc sprawnie zarządzać swoją stroną, szuka w internecie informacji jak obsługiwać WordPressa. Trafia na jedną z ważniejszych porad dotyczących bezpieczeństwa, czyli AKTUALIZUJ MOTYWY I WTYCZKI! Chcąc dbać o swój serwis klika „Aktualizuj” i… i strona wygląda nieco inaczej. Dlaczego tak się stało?

Tworzenie Child Theme – jaki jest cel?

Aktualizacja naszego motywu powoduje pobranie najnowszych plików wprost od wydawcy, wrzucenie ich do nas na serwer i zastąpienie aktualnie działających. Skutkiem tego jest utrata wszystkich wprowadzonych przez nas zmian. Jeśli utworzyliśmy kopię strony przed wydaniem jej klientowi, mamy szansę wyjść z tej sytuacji z twarzą wklejając nasze funkcje do pliku functions.php w katalogu motywu. Czy jednak chcemy to robić po każdej aktualizacji? Zdecydowanie nie. Wyjściem z tej sytuacji jest stworzenie motywu potomnego i wprowadzaniu jakichkolwiek zmian w jego plikach. Zacznijmy zatem od początku.

Moty potomny – krok po kroku

Zacznijmy od wejścia na nasz serwer przez klienta FTP i odnalezienia katalogu z motywami – /wp-content/themes/. Tutaj tworzymy nowy folder i nadajemy mu dowolną nazwę, ja użyłem „mytheme”.

Wchodzimy teraz do tego folderu i tworzymy plik style.css, do którego wpisujemy następujący kod:

Wiem, że możecie mnie za to nie polubić, ale na moim blogu kod będę wklejał tylko jako obrazki. Zmusi was to do pisania kodu a nie tylko wciskania Ctrl+C, Ctrl+V. Docenicie w przyszłości 😉

Wyjaśnijmy teraz co przed chwilą wpisaliśmy.
Theme Name – Tu wpisujemy nazwę naszego motywu, pod którą ma on funkcjonować
Description – Napisz krótki opis motywu
Author – To chyba jasne, chodzi o Ciebie!
Author URI – Link do Twojej strony
Template – Nazwa motywu nadrzędnego (tego, który będziemy „edytować”)
Version – Wersja motywu

Pogrubione wartości są obowiązkowe, resztę możecie pominąć.
Poza wymienionymi wartościami, dostępne są jeszcze Tagi, Licencja, Link do motywu i inne. Po dokładny opis odsyłam tutaj.
Kod wpisany? Plik zapisany w folderze waszego motywu? Sprawdźmy teraz co się stało.

Nasz nowy motyw pojawił się w zakładce Wygląd->Motywy.
Uwaga! Jeśli chcecie aby wasz motyw posiadał zdjęcie poglądowe, umieszczacie je w folderze głównym motywu pod nazwą screenshot.png.

Tutaj też widzimy wszystkie informacje, które wpisywaliśmy do pliku style.css.

Teraz możemy śmiało klikać Aktywuj i nasz motyw potomny zacznie działać! Aktywujemy i oglądamy efekty.

Kiepsko to wygląda. Czy coś popsuliśmy?
Spokojnie, wszystko pod kontrolą. Po aktywacji motywu potomnego WordPress wczytał plik style.css, który umieściliśmy w folderze naszego Child Theme. Plik ten poza nagłówkiem motywu nie ma w sobie nic, stąd efekt widoczny na screenie. Musimy teraz podłączyć do motywu potomnego style z motywu nadrzędnego. Robimy to wrzucając do naszego style.css kod, który wskaże ścieżkę do pliku stylów motywu nadrzędnego. W moim przypadku:

@import url("/wp-content/themes/twentynineteen/style.css");
lub krócej
@import url("../twentynineteen/style.css");

Zapisujemy plik, odświeżamy stronę, działa!

Zwracam uwagę, że nie jest to zalecane rozwiązanie. Zgodnie z najlepszymi praktykami WordPressa, wszystkie arkusze stylów podpinamy przez akcję. W drodze wyjątku wstawię wam ten kod z możliwością skopiowania. Wklejamy to do pliku functions.php motywu potomnego.

function JuniorEnqueueStyles() {
    wp_enqueue_style( 'parent-stylesheet', trailingslashit( get_template_directory_uri() ) . 'style.css', false );
}
add_action( 'wp_enqueue_scripts', 'JuniorEnqueueStyles' );

Używając tej metody podłączania stylów, unikniemy w przyszłości problemów z kompresowaniem czy cachowaniem plików css.

Jak modyfikować motyw w WordPressie?

Tworząc strony internetowe, nie zawsze wystarczy nam modyfikacja stylów jakiegoś motywu. Często musimy wykonać zmiany w układzie strony, kolejności wyświetlanych sekcji, działaniu modułów czy dodawać własne funkcjonalności.
Zanim dojdziemy do pisania własnych funkcji, zajmijmy się poprzednimi możliwościami.

Wyjaśnijmy najpierw jak WordPress interpretuje funkcjonowanie motywu potomnego. Motyw potomny dziedziczy pliki z motywu nadrzędnego – motywu rodzica. Co to oznacza? Nie musimy do naszego Child Theme kopiować wszystkich plików z motywu nadrzędnego. WordPress najpierw ładuje pliki motywu potomnego, a po nich dociąga brakujące elementy z rodzica. Jak to działa w praktyce? Sprawdźmy na przykładzie.
Kopiujemy z folderu motywu nadrzędnego do folderu motywu podrzędnego plik footer.php, otwieramy, edytujemy, zapisujemy i wysyłamy na serwer.

Dla przykładu dodałem zwykły znacznik <p>. Zobaczmy jak to wygląda.

Jak widać, WordPress wyświetlił nam zawartość pliku footer.php znajdującego się w folderze naszego motywu potomnego. Analogicznie do tego przykładu możemy postępować z innymi plikami. Możemy w nich dodawać swoje treści, zmieniać kolejność sekcji czy usuwać zbędne fragmenty (ostrożnie!).

Plik functions.php jest obsługiwany trochę inaczej. WordPress najpierw wczytuje plik z motywu nadrzędnego, a dopiero po nim doczytuje plik z Child Theme. Dlaczego tak się dzieje? Gdyby postąpił analogicznie jak w przypadku pliku footer.php, wszystkie funkcje w nim zawarte, nie zostałyby załadowane, przez co nasza strona wyglądałaby tak:

Nie musimy zatem kopiować pliku functions.php z motywu nadrzędnego, wystarczy utworzenie nowego w folderze motywu potomnego.
Możliwości pisania swoich funkcji w WordPressie są niemal nieograniczone. Dla pokazania, że nasz nowo stworzony plik functions.php działa i wykonuje się, wrzućmy kawałek prostego kodu.

I od razu sprawdźmy czy działa.

Jak widać nasz kawałek tekstu wyświetlił się – funkcja działa.

Motyw potomny w WordPress – podsumowanie

Jak widać nie ma w tym czarnej magii. Stworzenie motywu potomnego i prawidłowe podpięcie go zajmuje kilka minut, a może nas uchronić przed fatalnymi skutkami edytowania motywu nadrzędnego. Czy jest to jednak dobre rozwiązanie i zawsze konieczne? Postaram się w niedalekiej przyszłości skrobnąć parę słów na ten temat. Wcześniej jednak opublikuję krótki wpis o tym, jak tworzyć wtyczki w WordPressie.

Mam nadzieję że tym wpisem pomogłem paru osobom. Jeśli macie jakieś pytania, piszcie komentarze, postaram się sprawnie odpowiadać.

PS. Drodzy Seniorzy WP. Jestem juniorem, jak gdzieś się pomyliłem, kajam się i przepraszam. Piszcie, a poprawię.