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 🙂
Spis treści
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.
A przykładowo, które pliki dodatkowo tam dać. Jak jakiś powiedzmy header plik chcemy aby się nie zmieniał wyglądem, a mamy w tym pliku tylko wyciętą 1 linijkę kodu. Bo nie chcemy widoku kategorii na górze. To zostawić taki plik w potomnym z wyciętym też źle – bo mogą być aktualizowane pozostałe treści kodu. Jak takie cos można by rozwiązać?
Jeśli motyw nadrzędny zostanie zaktualizowany, to trzeba także nanieść zmiany w motywie potomnym. Jednak niepotrzebne elementy można ukryć za pomocą kodu CSS.
Utworzyłam motyw potomny za pomocą drugiego sposobu (bez wtyczki) dodaję kody CSS które w oryginalnym motywie działają- w motywie potomnym działa tylko 1 z 3. Dlaczego?
Wklej fragment kodu, który dodałaś, to może uda mi się namierzyć problem 🙂
1) add_filter( 'woocommerce_get_stock_html’, 'wplab_custom_stock_message’, 10, 2 );
function wplab_custom_stock_message( $html, $product ) {
if ( has_term( 'dostepne-od-reki’, 'product_cat’, $product->get_id() ) ) {
return $html;
}
if ( $product->is_in_stock() ) {
return 'Dostępne na zamówienie’;
}
return $html;
}
Natomiast ten kod działa u mnie prawidłowo w motywie potomnym. Na wszelki wypadek proponuję, żebyś skorzystała z wtyczki do utworzenia motywu potomnego.
Zrobiłam motyw potomny za pomocą wtyczki i niestety dalej nic. Drugi kod też nadal nie działa, nawet z tym dodatkiem.
Ja testowałam to na czystym WP z zainstalowanym tylko WooCommerce i to zadziałało. Spróbuj może wyłączyć wszystkie wtyczki i wtedy sprawdzić.
2) /*
* Removes products count after categories name
*/
add_filter( 'woocommerce_subcategory_count_html’, '__return_null’ );
?>
Zainstalowałam u siebie motyw Astra, żeby to sprawdzić i faktycznie u mnie także w motywie potomnym kod nie zadziałał. Jednak pomogła drobna zmiana:
add_filter(’woocommerce_subcategory_count_html’, '__return_null’, 999, 1);
Daj znać, czy u Ciebie także już jest ok 🙂
Te dwa nie działają na potomnym, pomimo że na pierwotnym działają. Motyw Astra.