Tworzenie motywu potomnego w WordPress

W tym wpisie przedstawię pokrótce w jaki sposób możemy stworzyć motyw potomny w WordPress. Dlaczego chcielibyśmy go tworzyć? To chyba najlepsze rozwiązanie jeśli chcemy wprowadzić zmiany w istniejącym, gotowym motywie w taki sposób żeby jego aktualizacja nam ich nie nadpisała. Podobnie z tłumaczeniami – być może używany motyw nie jest przetłumaczony na nasz język, lub ma błędne tłumaczenie i tutaj motyw potomny pomoże nam poprawić tłumaczenie w taki sposób żeby go nie utracić przy aktualizacji plików głównego motywu.

Co to jest motyw potomny?

Motyw potomny to motyw który dziedziczy style po motywie głównym (rodzicu) i działa jako swego rodzaju nakładka na motyw właściwy. W motywie potomnym możemy dodać własne style CSS które będą nadpisywać te z motywu rodzica oraz pliki PHP które będą miały większy priorytet. WordPress będzie najpierw szukał plików PHP w motywie dziecka a jak ich nie znajdzie to dopiero wtedy będzie brał z motywu rodzica. Wyjątkiem jest plik functions.php który jest odczytywany z obu motywów. Dzięki temu nasze modyfikacje w plikach CSS, JS i PHP nie zostaną nadpisane aktualizacją motywu rodzica. A trzeba pamiętać że aktualizacja wtyczek lub motywów powoduje nadpisanie wszystkich istniejących plików na hostingu – a więc jeśli wprowadzaliśmy modyfikacje bezpośrednio w plikach głównego motywu i go zaktualizujemy to wtedy utracimy modyfikacje. Dlatego w tej sytuacji niezbędne jest używanie motywu potomnego.

Tworzenie motywu potomnego w WordPress

Istnieją wtyczki do tworzenia motywów, jednak w tym wpisie przedstawię jak to zrobić bez użycia wtyczek, za pomocą dostępu do konta FTP.

  1. Przejdź na koncie FTP do folderu /wp-content/themes/ i utwórz tam folder o nazwie „nazwa motywu głównego myślnik child” czyli jeśli motyw główny ma nazwę „abc” to motyw potomny powinien mieć nazwę „abc-child”
  2. W nowo utworzonym folderze tworzymy dwa niezbędne pliki: style.css i functions.php
  3. W pliku style.css wklej następującą zawartość:
/*
Theme Name: ABC Child
Theme URL: https://example.com
Description: ABC Child Descrption
Template: abc
Version: 1.0.0
*/

Theme Name to nazwa motywu która będzie wyświetlana w panelu WordPress, razem z opisem (pole Description) i adresem URL (pole Theme URL). Ważne jest zeby w pole Template wpisać nazwę folderu z motywem nadrzędnym, bez tego szablon potomny nie będzie działac.

W tym pliku możesz dodać własne style CSS.

4. W pliku functions.php wklej poniższy kod aby zaimportować style CSS rodzica:

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

W tym pliku możesz też dodawać własne funkcjonalności, importować dodatkowe style, skrypty itd.

5. Włącz motyw potomny w panelu WordPress w Wygląd > Motywy

6. Jeśli chcesz dokonać modyfikacji w jakimś pliku PHP z motywu nadrzędnego skopiuj go do motywu potomnego i dokonaj zmian. WordPress będzie w pierwszej kolejności wczytywał pliki z motywu potomnego i gdy danego nie ma to pobierze z motywu nadrzędnego. W ten sposób możesz w motywie potomnym stworzyć np. własną wersję stopki, nagłówka, wpisu blogowego.

Tłumaczenie motywu potomnego

Jeśli motyw nadrzędny zawiera plik do tworzenia tłumaczeń .pot (np. w katalogu /languages) możemy z niego utworzyć tłumaczenie programem Poedit. Wygenerowane pliki wgrywamy w motywie potomnym do katalogu /languages i w pliku functions.php dodajemy:

function my_child_theme_locale() {
  load_child_theme_textdomain( 'abc', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_locale' );

Gdzie „abc” podmieniamy na domenę tłumaczenia z motywu nadrzędnego (zazwyczaj to nazwa folderu z motywem nadrzędnym).

Podsumowanie

Mam ndzieję, że ten wpis pomoże w tworzeniu własnych motywów potomnym w WordPressie. Jeśli zauważyłeś błąd lub masz pytania – śmiało dodaj komentarz.

Zobacz tez przykładowe wykorzystanie motywu potomnego we wpisie dotyczącym tworzenia motywów w wordpress: Własny motyw do WordPressa – itworksb5

Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close