Każdy użytkownik wordpressa niezależnie od tego czy jest blogerem czy deweloperem, na etapie projektowania postanowił zmienić wygląd swojej strony

– kolory czcionek, tła, rodzaj fontu lub odległości między elementami. W momencie, gdy wbudowany edytor wizualny szablonu nie umożliwia nam personalizacji pożądanych elementów, wiele osób decyduje się na ingerencję w pliki motywu odpowiadające za generowanie stylów czy struktury strony.
Potem przychodzi moment aktualizacji szablonu.. i wszystkie wprowadzone zmiany w naszym WordPressie znikają!

Tu z pomocą pojawiają się motywy potomne. W tym artykule przybliżymy Wam czym są i jakie posiadają zalety, jak stworzyć własny motyw-dziecko (z ang. child theme) oraz na co zwrócić uwagę w trakcie edycji.

Child theme – co to jest?

Child theme to motyw pochodzący od nadrzędnego szablonu zainstalowanego w WP. W praktyce oznacza to, że wszystkie style, atrybuty i funkcje szablonu-rodzica (ang. parent theme) są przekazywane do szablonu potomnego, różniąc się od niego tylko wprowadzonymi przez nas zmianami. Upraszczając, można powiedzieć, że motyw dziecko to swoista “nakładka” na szablon główny, która nadpisuje jego pliki naszymi własnymi.

W trakcie ładowania strony WP nadaje zmodyfikowanym plikom wyższy priorytet wyświetlania. W przypadku arkusza stylów mechanizm nadpisuje oryginalny plik css regułami wprowadzonymi przez nas w motywie dziecku. Natomiast jeśli chodzi o pliki php stanowiące o strukturze strony są one w całości zamieniane na te z szablonu potomnego.
Wyjątkiem jest plik functions.php, którego oryginalna zawartość zostaje uzupełniona o nowe dyrektywy, a nie nadpisywana.

WP childtheme nadpisywanie plikow szablonu

Jak stworzyć motyw potomny w CMS WordPress ?

Istnieją dwa sposoby wprowadzania nowych szablonów potomnych – możecie skorzystać z gotowego pluginu z repozytorium wtyczek WP lub stworzyć motyw samodzielnie. Na szczęście oba sposoby są bardzo proste i nie wymagają zaawansowanej wiedzy, a różni ich tylko czas wykonania.

a) Najprostszym i najszybszym rozwiązaniem jest użycie wtyczki, która sama tworzy motyw potomny na podstawie wybranego szablonu nadrzędnego, który jest już zainstalowany i widoczny w zapleczu Twojej witryny. My rekomendujemy używanie Child Theme Configurator, która jest jedną z najpopularniejszych i regularnie aktualizowanych. Do podstawowych wymagań należy posiadanie na serwerze PHP 5.6.36, jednak my zalecamy nie niższą niż w wersji 7.

Proces tworzenia motywu potomnego jest bardzo prosty i opiszemy go krótko w kilku krokach:

  • pobieramy wtyczkę z repozytorium lub wyszukujemy jej bezpośrednio w zapleczu strony szukając w menu bocznym “Wtyczki -> Dodaj nową”
  • instalując manualnie, wybieramy u góry ekranu przycisk ‘Wyślij wtyczkę na serwer” i ładujemy pobrany wcześniej plik ZIP. Jeśli chcesz skorzystać z wyszukiwarki wtyczek w zapleczu, wpisz ‘Child Theme’ i zainstaluj wybraną wtyczkę. Przechodzimy do “Zainstalowanych wtyczek” i klikamy “Aktywuj”
  • jeśli zdecydowałeś się na ww. wtyczkę, pod zakładką “Narzędzia -> Child Themes” znajdziesz okno konfiguracyjne wtyczki. Tam możesz utworzyć nowy szablon potomny, edytować już istniejący, zrobić duplikat lub zresetować go do ustawień początkowych
  • w kolejnym kroku wybierz szablon nadrzędny, który zostanie poddany analizie, czy na jego podstawie można utworzyć motyw-dziecko
  • wybieramy ustawienia nowego szablonu, gdzie możemy edytować jego nazwę, opis oraz miejsce zapisywania nowych styli css (my rekomendujemy opcję ‘primary stylesheet’)
  • po zatwierdzeniu ustawień i utworzeniu motywu potomnego, przejdź do sekcji “Wygląd -> motywy” i aktywuj nowo utworzony motyw potomny. Gotowe!

b) Jak stworzyć child theme bez użycia wtyczki:

  • zaloguj się na serwer FTP, na którym znajduje się Twoja instalacja WordPressa i przejdź do katalogu wp-content/themes/

    • WP child theme - tworzenie motywu potomnego

  • wewnątrz utwórz nowy folder nadając mu dowolną nazwę, np. “twentynineteen-child” lub “my-child-theme”. W preferowanym edytorze tekstowym (notatnik, sublime, atom) utwórz dwa nowe pliki: style.css oraz functions.php niezbędne do funkcjonowania motywu potomnego
  • otwórz plik style.css i wprowadź do niego informacje widoczne poniżej

    /*
    Theme Name: my-child-theme
    Template: twentynineteen
    */

    To jedyne niezbędne dane, które są wymagane do działania szablonu. Theme Name to oczywiście nasza nazwa nowego motywu, a Template to nazwa motywu nadrzędnego, na którym będziemy bazować. UWAGA – wprowadź bezbłędnie nazwę motywu rodzica (najlepiej kopiując nazwę folderu) – my na potrzeby przykładu użyliśmy szablonu twentynineteen.
    W tym miejscu możesz wprowadzić więcej informacji, które będą widoczne w szczegółach Twojego motywu, lecz nie są obowiązkowe, np Description, Author, Version i inne.

  • teraz przejdź do edycji pliku functions.php. Do prawidłowego działania child theme potrzebna będzie funkcja pobierająca arkusz styli z motywu nadrzędnego

    add_action( 'wp_enqueue_scripts’, 'enqueue_parent_styles’ );
    function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style’, get_template_directory_uri().’/style.css’ );
    }

  • zapisujemy oba pliki i wrzucamy je na FTP do katalogu z naszym szablonem potomnym
  • w zapleczu WordPressa w zakładce Wygląd -> Motywy aktywujemy nowo utworzony motyw ( i sprawdzamy czy działa! )

WP child theme aktywacja motywu

I to by było na tyle jeśli chodzi o podstawową konfigurację. Oczywiście, możemy rozbudować szablon potomny, np. dokładając przydatne funkcje w pliku functions.php, modyfikując ekran logowania do dashboardu czy dołączać nowe skrypty.

Zalety stosowania motywów potomnych

Główną zaletą stosowania motywu potomnego jest niewątpliwie zachowanie wprowadzonych przez nas zmian przy aktualizacji. Nie oznacza to jednak, że narażamy naszą witrynę na włamania – motyw nadrzędny, stanowiący fundament naszej strony, możemy aktualizować bez obaw i tym samym ustrzec się przed atakami wścibskich gości.

Drugim, ogromnym plusem stosowania motywu dziecka jest możliwość personalizowania wyglądu i funkcjonalności strony. Jeśli wasze umiejętności na to pozwalają, możecie zmienić układ stopki dowolnie edytując plik footer.php, dostosować strukturę kodu w header.php (np. dodając własne meta dane lub skrypty js), czy stworzyć nowy layout wpisów na blogu.

Wady stosowania motywów potomnych

Czy to rozwiązanie ma jakieś wady? Naszym zdaniem absolutnie nie. Można jedynie kwestionować słuszność użycia motywów potomnych w momencie, gdy chcemy w wyglądzie naszej strony zmienić tylko kolor czcionki czy rozmiar logo – do tego zazwyczaj wystarcza wbudowany konfigurator.

Podsumowując, dla nas użycie motywu potomnego to podstawa przy robieniu stron internetowych opartych na wordpressie. Niezależnie od sposobu wykonania – to tylko 5 minut dodatkowej pracy i możemy zagwarantować, że nikt kto się na to rozwiązanie zdecyduje z pewnością nie będzie tego żałować. Prostota wykonania i późniejszej edycji jest komfortowa nie tylko dla zaawansowanych użytkowników WP ale również początkujących osób, które zaczynają swoją przygodę z tworzeniem serwisów www.

Życzymy owocnego działania!

Odwiedź nas na Facebooku i Instagramie,
-BSIDEWORK Team #innowacjewpraktyce