<< powrót
Opublikowano 11 komentarzy

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

Motyw potomny w WordPressie

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.phpfooter.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.

Wtyczka Child Theme Wizard

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

Wtyczka Child Theme Wizard
  • 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.

Motyw potomny w WordPressie

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.

Motyw potomny w WordPressie

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.

Motyw potomny w WordPressie
Motyw potomny w WordPressie

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.

Subskrybuj
Powiadom o
guest
11 komentarzy
najstarszy
najnowszy oceniany
Inline Feedbacks
View all comments
Totemat
2 lat temu

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ć?

Magda
Magda
9 miesięcy temu

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?

Magda
Magda
9 miesięcy temu
Reply to  Monika Szeliga

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;
}

Magda
Magda
9 miesięcy temu
Reply to  Monika Szeliga

Zrobiłam motyw potomny za pomocą wtyczki i niestety dalej nic. Drugi kod też nadal nie działa, nawet z tym dodatkiem.

Magda
Magda
9 miesięcy temu
Reply to  Monika Szeliga

2) /*
* Removes products count after categories name
*/
add_filter( 'woocommerce_subcategory_count_html’, '__return_null’ );

?>

Magda
Magda
9 miesięcy temu
Reply to  Monika Szeliga

Te dwa nie działają na potomnym, pomimo że na pierwotnym działają. Motyw Astra.