WordPress jak zrobić motyw potomny

W tym artykule: nie tak krótko o motywach potomnych – czym są i dlaczego warto z nich korzystać a także jak zrobić motyw potomny w WordPress.

O motywie potomnym pierwszy raz wspominałam gdy wymieniałam sposoby, na jakie można zacząć tworzenie własnego motywu w WordPress. Było to w artykule z serii o tworzeniu od podstaw motywu do WordPressa: Budowa motywu do WordPressa, wycieczka w świat szablonów.

Czym jest motyw potomny?

Motyw potomny (ang. child theme) jest motywem, który dziedziczy style i funkcjonalności innego motywu (motyw, na którym bazujemy nazywamy motywem nadrzędnym).

Po co stosuje się motywy potomne?

Ok, wiemy już, że motyw potomny otrzyma style i funkcje z innego motywu, ale po co właściwie miałby to robić, jakie to daje możliwości?
Okazuje się, że dziedziczenie po motywie nadrzędnym jest szalenie użyteczne, gdy naszym celem jest zmodyfikowanie już istniejącego motywu.

Można na starcie wymienić parę plusów wynikających z pracowania na motywie potomnym:

  • zmiany, które nanosimy bazując na motywie nadrzędnym są bezpieczne w potomku – aktualizacja motywu nadrzędnego ich nie wyczyści
  • jeśli w motywie potomnym coś przekombinujemy, szybko możemy deaktywować motyw potomny i wrócić do motywu nadrzędnego
  • dzięki motywowi potomnemu, można szybko zrobić motyw bazujący na innym z dopasowanymi do naszych potrzeb stylami/dodatkowymi funkcjonalnościami
  • jest to całkiem dobry sposób na poznanie się z tworzeniem motywów do WordPress

Jak zrobić motyw potomny w WordPress?

Wiemy  już czym jest motyw potomny i w jakich przypadkach się z niego korzysta. Teraz możemy iść dalej i zobaczyć w jaki sposób tworzy się motywy potomne w WordPress.

Na warsztat biorę motyw, który dołączany jest do instalacji WordPress’a – Twenty Fifteen. Bazując na nim, chcę zrobić motyw potomny, który będzie modyfikował oryginalne style motywu nadrzędnego.

 

Mój motyw nadrzędny – Twenty Fifteen

Wszystko zaczyna się od nowego katalogu

Żeby stworzyć motyw potomny, w katalogu z motywami ([ścieżka do instalacji WP]/wp-content/themes/) tworzę nowy folder i nazywam go: twentyfifteen-child.

Motyw nadrzędny (ten, z którego dziedziczymy) musi być obecny w katalogu z motywami w naszej instalacji WordPressa.

Do poprawnej aktywacji motywu potomnego wymagane są dwa pliki, które trzeba stworzyć w katalogu z motywem potomnym:

  • style.css – z zakomentowanym nagłówkiem
  • functions.php – do załączenia arkuszy stylów rodzica i dziecka

W arkuszu stylów motywu-dziecka kluczowy jest zakomentowany nagłówek z meta danymi. Bardzo ważne jest wpisanie nazwy katalogu motywu nadrzędnego w linijce zaczynającej się od „Template: „.

Moża tam też określić inne przydante informacje takie jak nr wersji, nazwę autora, domenę tekstową itp.

Teraz  trzeba jeszcze zaimportować w motywie potomnym style rodzica i dołączyć style dziecka.

Robimy to w pliku functions.php – w nim generalnie możemy rozszerzać funkcjonalność motywu nadrzędnego. Tam też musi znaleźć się funkcja, zarejestrowana do zaczepu akcji o nazwie wp_enqueue_scripts, ładująca style obu motywów:

Teraz po odświeżeniu strony z wczytanym motywem potomnym widać już style załadowane z rodzica.

Struktura katalogu:

Mając aktywny motyw potomny, mogę w nim dowolnie modyfikować motyw, na którym bazuję – bez obaw, że po aktualizacji motywu nadrzędnego moje wprowadzone zmiany się wykasują.

Przykładowa zmiana kolorystyki w motywie potomnym:

Zmiany naniesione w motywie potomnym bazującym na Twenty Fifteen

Przydatne informacje:

Jeśli w motywie potomnym chcemy załączać np. grafiki, które są w katalogu motywu potomnego, musimy użyć funkcji zwracającej odpowiednią ścieżkę.

Użyte w motywie potomnym:

  • get_stylesheet_directory_uri() – zwraca ścieżkę URL do motywu potomnego
    ( np. http://localhost/wp/wp-content/themes/twentyfifteen-child )
  • get_stylesheet_directory() – zwróci ścieżkę absolutną do katalogu na serwerze.
    (np. C:\xampp\htdocs\wp/wp-content/themes/twentyfifteen-child)
  • get_template_directory_uri() – zwraca ścieżkę URL do motywu nadrzędnego
    (np. http://localhost/wp/wp-content/themes/twentyfifteen)

2
Dodaj komentarz

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Crocoderszmigieldesign Recent comment authors
  Subscribe  
najnowszy najstarszy oceniany
Powiadom o
szmigieldesign
Gość

Motywy potomne to jedna z moich ulubionych funkcjonalności WordPress. Przydają się w szczególności do pracy z motywami komercyjnymi, które można prawie dowolnie modyfikować bez ingerencji w kod źródłowy – minimalizując tym samym niekompatybilność przy aktualizacjach motywu głównego. Warto wiedzieć, że również autorzy niektórych wtyczek umożliwiają ich personalizację poprzez umieszczanie plików w strukturze motywu potomnego.