Motyw potomny w WordPressie – czym jest i jak go stworzyć

Motyw jest nieodzowną częścią każdej strony internetowej wykonanej na WordPressie. To właśnie motyw w dużej mierze odpowiada za wygląd strony. Tworząc swoją wymarzoną stronę internetową, możemy samodzielnie wykonać motyw od zera, skorzystać z motywu startowego (polecam Underscores) lub skorzystać w gotowca. Ta ostatnia opcja jest najprostsza i z pewnością będzie najlepsza dla osób, które nie mają zbyt dużo czasu. Zwłaszcza że w sieci dostępnych jest dużo ciekawych motywów do WordPressa. Część z nich jest bezpłatna.

Jednak każdy z nas ma swoje oczekiwania i preferencje odnośnie wyglądu strony. Często zachodzi potrzeba wprowadzenia zmian w wyglądzie, a także w funkcjonowaniu motywu. I tu z pomocą przychodzi motyw potomny 🙂

Czym jest motyw potomny

Motyw potomny tzw. Child Theme jest motywem, który dziedziczy style oraz funkcjonalności innego motywu, a także wprowadza swoje własne. Stanowi on ważny element w przypadku, gdy chcemy zmodyfikować gotowy motyw. Owszem, możemy nanosić zmiany bezpośrednio w gotowym motywie. Niestety jest pewien minus takiego rozwiązania. W przypadku, gdy zostanie wypuszczona aktualizacja, a my ją zainstalujemy, to wszystkie wprowadzone przez nas zmiany zostaną nadpisane. I właśnie to jest główny powód, dla którego warto pracować na motywie potomnym.

Jak działa motyw potomny w WordPressie

Motyw potomny dziedziczy cały wygląd i funkcjonalności po motywie nadrzędnym. Jednak, jeśli w motywie potomnym pojawią się jakieś pliki, to będą one miały pierwszeństwo przed takimi samymi plikami z motywu nadrzędnego. Przykładowo w motywie potomnym znajdują się dwa pliki zmieniające strukturę nagłówka i stopki:

• header.php
• footer.php

Na stronie zostanie wyświetlona zawartość z tych plików. Czyli zostanie przesłonięta zawartość plików header.php i footer.php z motywu nadrzędnego.

Podsumowując, WordPress w pierwszej kolejności wczytuje pliki znajdujące się w motywie potomnym, a dopiero potem uzupełnia te brakujące z motywu nadrzędnego.

Wyjątek stanowi plik functions.php. Plik ten wprowadza funkcje modyfikujące zachowanie danego motywu. Zawartość pliku functions.php z motywu potomnego nie przesłania zawartości z motywu nadrzędnego, a jedynie go uzupełnia.

Czy zawsze należy pracować na motywie potomnym

Moim zdaniem TAK. Nawet jeśli na początek nie planujemy wprowadzać dużych zmian w oryginalnym motywie, to warto od razu pracować na motywie potomnym. Sądzę, że dobrze jest już na samym początku odseparować nasze modyfikacje od oryginalnego motywu.

Motyw potomny w WordPressie – sposób z wtyczką

Zainstaluj i włącz wtyczkę Child Theme Wizard.

Następnie przejdź do ustawień wtyczki: Narzędzia -> Child Theme Wizard. Poniżej znajduje się opis poszczególnych opcji.

• Parent Theme – z listy rozwijalnej wybierz motyw, dla którego chcesz utworzyć motyw potomny.
• Title – nazwa motywu potomnego (może być dowolna).
• Description – opis motywu potomnego (pole to jest opcjonalne).
• Child Theme URL – adres strony internetowej (pole to jest opcjonalne).
• Author – autor motywu potomnego (pole to jest opcjonalne).
• Author URL – adres strony internetowej autora motywu potomnego (pole to jest opcjonalne).
• Version – numer wersji (pole to jest opcjonalne).
• Include GPL Licence – można wygenerować plik z licencją.

Po wypełnieniu formularza kliknij przycisk Create Child Theme, a Twój nowy motyw potomny zostanie automatycznie utworzony. Teraz należy go włączyć z poziomu zakładki Wygląd -> Motywy.

Motyw potomny w WordPressie – sposób bez wtyczki

W pierwszej kolejności zaloguj się na serwer FTP tam, gdzie znajduje się instalacja WordPressa. Przejdź do katalogu z zainstalowanym motywem: wp-content/themes.

Dla przykładu stworzymy motyw potomny dla motywu Astra. W lokalizacji wp-content/themes tworzymy nowy katalog na motyw potomny. Nazwa może być dowolna. W przykładzie tym nazwałam go astra-child.

Następnie dodaj do nowego folderu dwa pliki:

• style.css
• functions.php

Otwórz plik style.css w dowolnym edytorze kodu (polecam edytor kodu Atom) i wklej poniższy fragment kodu:

/* 
Theme Name: Astra Child
Template: astra
*/

• Theme Name – w tym miejscu wpisz nazwę motywu potomnego (może ona być dowolna).
• Template – tu musisz wpisać nazwę folderu motywu nadrzędnego. W naszym przykładzie będzie to astra.

Otwórz plik functions.php i wklej poniższy fragment kodu:

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

Powyższy fragment kodu importuje plik ze stylami motywu nadrzędnego.

Teraz należy włączyć nowo utworzony motyw potomny. Z poziomu kokpitu WordPressa przejdź do zakładki Wygląd -> Motywy i włącz motyw potomny.

Dodatkowo można jeszcze dodać obrazek, który będzie wyświetlany na podglądzie motywu. Wystarczy do folderu z motywem potomnym dodać plik o nazwie screenshot. W pliku tym może być dowolna grafika.

Dlaczego warto korzystać z motywu potomnego

Po pierwsze pracowanie na motywie potomnym jest dobrą praktyką i najwłaściwszym sposobem na wprowadzanie zmian w gotowym motywie. Jeśli wybrany przez Ciebie motyw jest nadal rozwijany, to jest niemalże pewne, że co jakiś czas zostanie wypuszczona aktualizacja. A jak zapewne wiesz, warto instalować aktualizacje, ponieważ mogą zawierać łatkę na lukę w zabezpieczeniach lub mogą wprowadzać nowe, ciekawe funkcjonalności czy ulepszenia. Pracując na motywie potomnym, możemy spokojnie instalować aktualizacje, bez obawy o utratę wprowadzonych modyfikacji.

Po drugie wszelkie zmiany w motywie nadrzędnym są od niego odseparowane i znajdują się w osobnym folderze. Jeśli z jakiegoś powodu zechcesz wrócić do bazowego wyglądu, to wystarczy przełączyć motyw.