Tworzenie motywu potomnego

Moduł 5: Motywy i wtyczki · Czas czytania: 9 minut

Cel lekcji: Po tej lekcji będą Państwo potrafili stworzyć motyw potomny i wiedzieli, kiedy jest on potrzebny, a kiedy nie.

Kluczowe pojęcia: motyw potomny, motyw nadrzędny, Template: w style.css, functions.php, wp_enqueue_style, nadpisywanie szablonu, theme.json w motywie potomnym, Create Block Theme

Problem, który rozwiązuje motyw potomny

Załóżmy, że chcą Państwo nieco zmienić nagłówek swojego motywu klasycznego i w tym celu modyfikują Państwo plik header.php w katalogu motywu. Działa to. Trzy tygodnie później pojawia się aktualizacja motywu, która instaluje się automatycznie (tak jak powinna, lekcja 7.2). Aktualizacja zastępuje wszystkie pliki motywu i Państwa zmiana znika.

Motyw potomny to niewielki motyw, który mówi: "użyj wszystkiego z tamtego innego motywu (motywu nadrzędnego), poza tym, co mam własnego". Swoje zmiany umieszczają Państwo w motywie potomnym. Motyw nadrzędny mogą Państwo normalnie aktualizować, a Państwa zmiany pozostają na miejscu.

Kiedy tak, a kiedy nie

Motyw potomny jest potrzebny, gdy chcą Państwo zmienić lub uzupełnić pliki motywu:

• chcą Państwo zmienić szablon (w motywie klasycznym plik PHP, w motywie blokowym szablon HTML);
• chcą Państwo dodać własny CSS, który jest zbyt duży na pole CSS;
• chcą Państwo dodać własny kod PHP związany z wyglądem (dodatkowy format obrazu, dodatkową lokalizację menu).

Motyw potomny nie jest potrzebny, jeśli:

• modyfikują Państwo motyw blokowy w Edytorze witryny: te zmiany są zapisywane w bazie danych i przetrwają aktualizację (lekcja 5.1);
• dodają Państwo jedynie trochę CSS przez Dodatkowy CSS (w Personalizacji przy motywie klasycznym lub w Style w Edytorze witryny);
• chcą Państwo dodać funkcję, która nie ma nic wspólnego z wyglądem (formularz, połączenie z czymś innym). Taka funkcja powinna znaleźć się we wtyczce, aby przetrwała zmianę motywu.

Motyw potomny dla motywu klasycznego

Motyw potomny to katalog w wp-content/themes/ zawierający przynajmniej jeden plik: style.css. Załóżmy, że Państwa motyw nadrzędny znajduje się w wp-content/themes/hoofdthema/. Należy wtedy utworzyć katalog wp-content/themes/hoofdthema-child/ z takim plikiem style.css:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Własne ustawienia dla example.com
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

/* Państwa własny kod CSS znajduje się poniżej. */
.site-header { border-bottom: 3px solid #e8a33d; }

Najważniejszy jest wiersz Template:. Znajduje się w nim nazwa katalogu motywu nadrzędnego (nie nazwa, którą widać w panelu administracyjnym). Jeśli nie zgadza się ona dokładnie (wielkość liter, myślniki), WordPress zgłosi w Wygląd > Motywy, że motyw nadrzędny jest niedostępny.

Oprócz tego tworzą Państwo plik functions.php, aby wczytać arkusze stylów. Prawidłowy sposób:

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'hoofdthema-child',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
} );

Czy motyw nadrzędny sam wczytuje swój własny arkusz stylów, zależy od konkretnego motywu. Proszę sprawdzić dokumentację swojego motywu nadrzędnego; niektóre wymagają, aby w motywie potomnym również wczytać arkusz stylów motywu nadrzędnego za pomocą get_template_directory_uri() . '/style.css'. Jeśli po aktywacji strona wygląda bez formatowania, oznacza to, że arkusz stylów motywu nadrzędnego nie jest wczytywany.

Jeśli chcą Państwo zmienić szablon, proszę skopiować ten jeden plik (na przykład header.php) z motywu nadrzędnego do swojego motywu potomnego i zmodyfikować kopię. WordPress sprawdza najpierw motyw potomny, a potem motyw nadrzędny. Proszę nie kopiować wszystkich plików: wtedy nie będą już Państwo otrzymywać ulepszeń z motywu nadrzędnego.

Plik functions.php motywu potomnego nie zastępuje pliku motywu nadrzędnego, lecz jest wczytywany przed nim. Oba są wykonywane.

Motyw potomny dla motywu blokowego

W przypadku motywu blokowego działa to tak samo, z plikami blokowymi:

• style.css z taką samą nagłówkową częścią i Template:;
• theme.json: zostaje on połączony z plikiem motywu nadrzędnego, więc umieszczają tam Państwo tylko to, co chcą zmienić (na przykład paletę kolorów);
• ewentualnie szablony w templates/ i parts/, które zastępują te z motywu nadrzędnego.

Plik functions.php w przypadku motywu blokowego często nie jest potrzebny, ponieważ WordPress sam wczytuje style z theme.json.

Istnieje oficjalna wtyczka, Create Block Theme, która tworzy dla Państwa motyw potomny bezpośrednio z Edytora witryny, łącznie z Państwa zmianami zapisanymi w bazie danych. Przydatne, gdy zmodyfikowali Państwo motyw blokowy i chcą te zmiany zapisać w plikach (na przykład aby przenieść je na inną stronę).

Jak umieścić to na swojej stronie

1. Proszę utworzyć katalog i pliki na własnym komputerze i sprawdzić nazwę katalogu motywu nadrzędnego.
2. Proszę przesłać katalog do wp-content/themes/ za pomocą Menedżera Plików lub przez SFTP. Można też spakować katalog do pliku zip i przesłać go w Wygląd > Motywy > Dodaj nowy motyw > Wyślij motyw na serwer.
3. Proszę przejść do Wygląd > Motywy. Państwa motyw potomny znajduje się na liście. Proszę go aktywować.
4. Proszę sprawdzić swoją stronę: menu i widżety mogą wymagać ponownego przypisania po przełączeniu na motyw potomny; ustawienia z Personalizacji dotyczą danego motywu, więc trzeba je ustawić ponownie lub wyeksportować za pomocą wtyczki.
5. Motyw nadrzędny musi pozostać zainstalowany. Proszę go nie usuwać; motyw potomny bez niego nie działa.

Najlepiej zrobić to najpierw w środowisku testowym (staging) (lekcja 8.3), ponieważ zmiana motywu na ruchliwej stronie na żywo może przez chwilę wyglądać chaotycznie.

Podsumowanie

• Motyw potomny zachowuje Państwa zmiany w plikach motywu poza motywem nadrzędnym, dzięki czemu aktualizacje ich nie nadpisują.
• Nie jest on potrzebny do zmian w Edytorze witryny ani do odrobiny Dodatkowego CSS; funkcje powinny znajdować się we wtyczce.
• Minimum to katalog z plikiem style.css, w którym Template: wskazuje dokładnie nazwę katalogu motywu nadrzędnego.
• Proszę kopiować tylko te szablony, które rzeczywiście zmieniają Państwo; plik functions.php motywu potomnego istnieje obok pliku motywu nadrzędnego.
• Motyw nadrzędny pozostaje zainstalowany i nadal jest aktualizowany.

Quiz

Zadanie

Zadanie A5.2: Sprawdzenie swojego motywu potomnego. Proszę stworzyć motyw potomny dla swojego motywu, na stronie testowej lub w środowisku testowym (staging) (lekcja 8.3), i go aktywować. Proszę wpisać adres strony oraz nazwę katalogu motywu potomnego. Program sprawdzi plik wp-content/themes/<katalog>/style.css i zweryfikuje: czy plik istnieje, czy zawiera Theme Name: oraz Template:, czy plik style.css motywu nadrzędnego w tym katalogu również istnieje, oraz czy strona główna odwołuje się do motywu potomnego (czyli jest on aktywny).

Zadanie D5.2: Co zostało zmienione i dlaczego? Proszę zapisać, jakie pliki znajdują się w Państwa motywie potomnym, co zostało zmienione w każdym pliku i dlaczego nie można było tego zrobić w Edytorze witryny, w Dodatkowym CSS lub we wtyczce. Proszę zaznaczyć, że motyw nadrzędny jest nadal zainstalowany i ma włączone automatyczne aktualizacje.

Więcej informacji

Poniższe artykuły opisują kroki w panelach WebOké; w innych panelach działają one w podobny sposób.

• Instrukcja DirectAdmin 11.1: Otwieranie Menedżera Plików: foldery w Państwa pakiecie
• Instrukcja DirectAdmin 11.2: Przesyłanie i pobieranie plików
• Instrukcja DirectAdmin 11.7: Łączenie z FileZilla (FTP, FTPS i SFTP)
• Child themes (developer.wordpress.org, w języku angielskim): https://developer.wordpress.org/themes/advanced-topics/child-themes/