Motyw potomny w WordPress – Jak stworzyć w 2024?

Wybrałeś już motyw, który Ci się podoba, ale chcesz wprowadzić kilka zmian? Zmienić wygląd albo zmodyfikować funkcje? Najwłaściwszym sposobem na dostosowanie motywu do własnych potrzeb jest stworzenie motywu potomnego. Wyjaśnie Ci dlaczego taka praktyka jest konieczna i krok po kroku nauczę Cię stworzyć i edytować motyw potomny bez względu na to jakie posiadasz umiejętności.

Co to jest motyw potomny?

Motyw potomny to lustrzane odbicie motywu nadrzędnego. Oznacza to, że dziedziczy wygląd motywu głównego i zawiera Twoje modyfikacje.

Dlaczego powinieneś używać motywów potomnych

Korzystanie z motywu potomnego to najlepsza opcja przy edycji plików Twojego motywu. Wszystkie zmiany, które wprowadzisz będą w osobnym folderze przez co nie znikną po aktualizacji motywu nadrzędnego.

Używanie motywów potomnych WordPress do modyfikowania motywu jest jednym z najbezpieczniejszych i najbardziej zalecanych sposobów. Twoje zmiany nie zostaną usunięte, jeśli motyw nadrzędny zostanie zaktualizowany.

Kolejną zaletą korzystania z motywu potomnego jest to, że jeśli modyfikacja motywu potomnego spowoduje problem, zawsze możesz go wyłączyć i powrócić do motywu głównego.

Jak działa motyw potomny?

Motyw potomny jest przechowywany w oddzielnym katalogu z własnymi plikami style.css i functions.php. Możesz również dodać inne pliki motywu do tego katalogu takie jak: header.php, page.php, footer.php i wprowadzić swoje zmiany.

Kiedy odwiedzający otworzy stronę, WordPress najpierw wczyta pliki z motywu potomnego, a pozostałe  z nadrzędnego. Otrzymujesz zatem to co najlepsze z własnego niestandardowego projektu bez poświęcenia podstawowej funkcjonalności motywu.

Pliki w motywie podrzędnym WordPress

W każdym motywie potomnym muszą być przynajmniej dwa pliki: style.css (arkusz stylów) oraz funsctions.php. Za pomocą arkusza stylów poinformujesz WordPress’a, że to jest motyw potomny oraz wskażesz motyw główny.

Plik functions.php będzie natomiast zawierał funkcję kolejkującą arkusz stylów z motywu nadrzędnego. Bez tego Twój motyw potomny nie będzie miał żadnych stylów, a strona będzie cała biała.

Do uruchomienia motywu potomnego nie potrzebujesz więcej plików, w przeciwieństwie do motywu głównego nie potrzebny jest tutaj plik index.php. WordPress sam załaduje pliki których nie ma w folderze z motywem potomnym. Zatem umieszczasz poza tymi dwoma, jedynie te które chcesz edytować. WordPress wczyta najpierw pliki z child theme, a pozostałe z głównego.

Możesz zastąpić takie pliki jak:

• page.php – Możesz dostosować wyświetlanie stron statycznych
• header.php i footer.php – Dostosowanie nagłówka i stopki. Jeśli chcesz dodać np. kod analytics od Google.
• Dodatkowe pliki – Jeśli chcesz zmodyfikować nagłówek tylko w stronach statycznych, stwórz plik header-page.php i plik page.php, aby zastąpić ten z motywu głównego.
• Dodatkowe funkcjonalności – Jeśli masz zamiar dodać dużo kodu dla jakiejś funkcji oraz go uporządkować, możesz stworzyć nowy plik php ze swoim kodem w folderze z motywem potomny, a następnie wywołać go w functions.php.

Jak stworzyć motyw potomny WordPress

Aby stworzyć motyw potomny, najpierw musisz upewnić się, że motyw z którego chcesz dziedziczyć jest poprawnie zainstalowany. W tym celu przejdź do Wygląd > Motywy i sprawdź czy motyw jest na liście. W przeciwnym razie nie będzie działać prawidłowo.

Motyw potomny możesz stworzyć na dwa sposoby, ręcznie i za pomocą wtyczki.

Ręczne tworzenie motywu potomnego

Zanim zaczniesz będziesz potrzebował login i hasło do swojego FTP, aby połączyć się ze swoim hostingiem. Możesz w tym celu użyć Filezilli lub Total Commander, WinSCP lub innego menadżera plików.

Jeśli masz problemy z połączeniem do FTP, poproś o wsparcie swojego hostingodawcę.

Jeśli już się zalogowałeś, to przejdź do odpowiedniego katalogu public_html > wp-content > themes

Na potrzeby tego poradnika stworzę motyw potomny dla Generatepress. Dla innych motywów zmienia się jedynie nazwa, poza tym wszystko jest tak samo.

Utwórz na swoim komputerze folder o nazwie: generatepress-child i następnie wykonaj poniższe kroki:

Krok 1: Utwórz plik o nazwie style.css i umieść go w folderze generatepress-child;
Krok 2: Otwórz plik style.css i wpisz w nim:

/* 
Theme Name:   Generatepress - Child
Template:     generatepress
*/

/*W tym miejscu można wklejać swoje własne style CSS */

Theme Name – Tutaj wpisz analogicznie do nazwy swojego motywu, zaleca się używania nazwy -child. np. Twentyseventeen Child

Template – ta linia jest najważniejsza ponieważ informuje WordPress’a na którym motywie jest oparty Twój motyw potomny.

Już nie będziesz potrzebował dodatkowej wtyczki jak np. Custom CSS, ponieważ wszystkie zmiany CSS możesz wprowadzać w tym pliku.

Krok 3: Utwórz plik o nazwie functions.php w tym samym folderze i wklej ten kod:

<?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 ten sposób zaimportujesz style z motywu nadrzędnego. Dzięki temu Twój motyw potomny będzie wyglądał dokładnie tak samo jak motyw główny. Nie kopiuj pliku functions.php ze swojego motywu rodzica.

Krok 4: Teraz prześlij cały folder (w moim wypadku generatepress-child) przez FTP. Druga opcja to spakować folder za pomocą np. Winrar (musi być w formacie .zip) i wgrać z poziomu kokpitu WordPressa. Wygląd > Motyw > Dodaj nowy.

Krok 5: Aktywuj motyw

Gratuluję, właśnie stworzyłeś swój własny motyw potomny, teraz jeśli będziesz chciał wprowadzić jakieś zmiany w motywie, po prostu skopiuj oryginalny plik np. header.php, wklej do folderu z motywem potomnym i wprowadź tam swoje zmiany i wgraj plik na hosting.

Poniżej bardzo prosty przykład wykorzystania motywu potomnego

Jak dodać kod do sekcji head?

Bardzo często będziesz potrzebował dodać kod do sekcji head. Dobrym przykładem jest np. Google Analytics albo nasze narzędzie do  generowania powiadomień na stronę – Trustposter. W tym przykładzie pokaże Ci jak wkleić kod do Trustposter, ale z każdym innym będzie podobnie.

1. Utwórz motyw potomny według instrukcji powyżej i go aktywuj
2. Skopiuj plik header.php z motywu głównego i wklej do folderu z motywem potomnym.
3. Edytuj header.php w folderze potomnym wklejając kod tuż nad znakiem </head>
4. Kod skopiuj ze swojego kokpitu Trustposter

<! - Kod piksela dla trustposter ->
    <script async src = "LINK PIXELA"> </script>
    <! - KONIEC Kod piksela ->

Przykład:

<head>
  <meta charset = "<? php bloginfo ('charset');?>">
  <link rel = "profile" href = "https://gmpg.org/xfn/11">
  <? php wp_head (); ?>
    <! - Kod piksela dla trustposter ->
    <script async src = "LINK TWOJEGO PIXELA"> </script>
    <! - KONIEC Kod piksela ->
</head>

Zapisz wszystkie pliki na hostingu i gotowe.

Oczywiście jak to w WordPressie, można to wszystko zastąpić wtyczką do tworzenia motywu potomnego.

Tworzenie motywu potomnego za pomocą wtyczki

Jeśli nie chcesz robić wszystkiego ręcznie, możesz użyć darmowej wtyczki i wszystko wykonasz automatycznie. Istnieje wiele bezpłatnych wtyczek, które pozwalają łatwo stworzyć motyw potomny. Np .: Child Theme Configurator
W tym artykule zobaczymy, jak utworzyć motyw podrzędny za pomocą wtyczki Child Theme Configurator. Postępuj zgodnie z instrukcjami krok po kroku, aby go skonfigurować.

Krok 1:  Zainstaluj wtyczkę: Wtyczki > Dodaj nową > wyszukaj Child Theme Configurator > Zainstaluj teraz > Aktywuj

Krok 2: Przejdź do Narzędzia > Child Themes

Krok 3: Wybierz swój motyw i kliknij Analyze 

Krok 4: Kliknij Create New Child Theme

Krok 5: Włącz motyw potomny w zakładce Wygląd > Motywy

Po utworzeniu motywu potomnego nie będziesz już potrzebował tej wtyczki więc możesz ją śmiało usunąć.