Po co i jak stworzyć motyw potomny ? | Biznes Zoom
FreshMail.pl

Najlepsze praktyki WordPress’a: Po co i jak stworzyć motyw potomny?

Wielu z Was czytając ten wpis zadało sobie zapewne pytanie: “Ok, ale czym jest ten motyw potomny? Czemu ten facet określa to jedną z najlepszych praktyk w tworzeniu stron na WordPress’ie? ”

A zatem: motyw potomny (z angielskiego child theme) jest osobnym motywem stworzonym przez administratora strony podczas jej projektowania. Dziedziczy on wszystkie właściwości, które zawiera oryginalny szablon wordpress. Co to oznacza w praktyce ? Motyw potomny można bezpiecznie modyfikować bez ingerowania w kod oryginalnego szablonu. Innymi słowy: możemy swobodnie np. dodać nową czcionkę na WordPress’a, zmienić kolor tła przy użyciu CSS, dodać ikonki Font Awesome na stronę itd., a oryginalny szablon pozostaje bez zmian. Robimy to bez ryzyka zepsucia oryginalnego motywu, a więc w przypadku, gdyby pojawi się jakiś błąd, proces można cofnąć. Robi się to poprzez przywrócenie pliku z oryginalnego szablonu. Dodatkowo podczas aktualizacji oryginalnego szablonu nie tracimy danych, które uprzednio edytowaliśmy (a może się tak zdarzyć, jeśli nie użyjemy motywu potomnego).

Jest to podstawowe działanie przy modyfikowaniu i wprowadzaniu różnych funkcjonalności na naszą stronę. Bez motywu potomnego nasza witryna jest jak dom zbudowany na piasku – prędzej czy później pojawią się poważne kłopoty.

 

Jak stworzyć motyw potomny ?

 

No dobrze, więc pytasz jak stworzyć motyw potomny? Oto instrukcja:

Logujemy się na własny serwer FTP poprzez program Total Commander i wchodzimy w menu “Sieć”, a następnie wybieramy “FTP Połączenia”:

 

Logowanie na serwer FTP

 

Wyświetla się okienko “Połącz z serwerem FTP”, w którym klikamy “Nowe połączenie”. W nim wpisujemy dane do logowanie na serwer FTP, które podał nam przy zakupie hostingu właściciel serwera (poszukaj w mailach). W razie wątpliwości proszę skontaktuj się z pomocą techniczną usługodawcy.

 

Łączenie z serwerem FTP

 

Po wpisaniu danych klikamy OK. Następnie w oknie “Połącz z serwerem FTP” klikamy “Połącz” i znajdujemy się na naszym FTP-ie. Wśród katalogów musimy wyszukać katalog, w którym znajduje się WordPress i tam wchodzimy w “wp-content”, a potem “themes”. W tym katalogu tworzymy poprzez naciśnięcie klawisza F7 podkatalog motywu potomnego. Jako, że moim motywem jest Zerif-lite, nazywam go “zerif-child” (nazwa jest dowolna).

 

Jak stworzyć motyw potomny

 

Tworzenie pliku style.css w motywie potomnym

 

Następnie na dysku C: tworzę w notatniku plik style.css, dodaję w nim informacje według poniższych wytycznych:

/*
Theme Name: zerif-child
Template: zerif-lite
*/

W “Theme name” wpisujemy nazwę naszego motywu potomnego, natomiast w “Template” nazwę katalogu oryginalnego motywu, czyli w moim przypadku “zerif-lite”. Tak stworzony plik przerzucamy do katalogu z motywem potomnym “zerif-child”. Pamiętamy, by zapisując plik dodać mu rozszerzenie .css zamiast .txt.

Przenoszenie style CSS

 

Po wykonaniu tego zadania tworzymy kolejny plik functions.php w tym samym folderze motywu potomnego.

Dodajemy w nim następujący kod:

<?php
 function my_theme_enqueue_styles() {

$parent_style = 'parent-style'; // Podajemy tu 'twentyfifteen-style' dla motywu Twenty Fifteen.

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
 wp_enqueue_style( 'child-style',
 get_stylesheet_directory_uri() . '/style.css',
 array( $parent_style ),
 wp_get_theme()->get('Version')
 );
 }
 add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
 ?>

Wprowadzamy drobną modyfikację. Musimy podpiąć plik style.css z motywu rodzica wprowadzając jego nazwę w wierszu zawierającym $parent_style. Jak uzyskać tą nazwę? Już tłumaczę! W kokpicie WordPress’a wyszukujemy zakładkę “Wygląd” z menu po lewej stronie, tam wybieramy “Edytor”. Znajdujemy z prawej strony ” Wybierz motyw, który chcesz edytować:” i wybieramy motyw oryginalny, czyli w moim przypadku zerif-lite.  Dalej po prawej stronie szukamy pliku “Funkcje motywu (functions.php)” i w nim wyszukujemy (najlepiej przez użycie kombinacji klawiszy ctrl+f) słowa “wp_enqueue_style”. Szukamy czegoś w tym rodzaju: wp_enqueue_style( ‘zerif_style’, get_stylesheet_uri(), array( ‘zerif_fontawesome’ ), ‘v1’ ); . Widzimy nazwę zerif_style i to jest nazwa pliku styli CSS w motywie rodzica. Tej nazwy potrzebowaliśmy! Czyli ostatecznie treść kodu, którą dodałem do pliku functions.php w motywie potomnym wygląda następująco:

<?php
 function my_theme_enqueue_styles() {

$parent_style = 'zerif_style'; 

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
 wp_enqueue_style( 'child-style',
 get_stylesheet_directory_uri() . '/style.css',
 array( $parent_style ),
 wp_get_theme()->get('Version')
 );
 }
 add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
 ?>

Teraz wchodzimy w Kokpit WordPress’a, w menu “Wygląd” wybieramy “Motywy” i tam aktywujemy nasz motyw potomny, czyli w moim przypadku “zerif-child”. Po wykonaniu tej czynności swobodnie możemy wprowadzać zmiany w pliku style.css motywu potomnego. Robimy to wchodząc w menu “Wygląd”, a następnie klikamy w “Edytor” i wybieramy z prawej strony Arkusz stylów (style.css)

 

Pozostałe pliki szablonu w motywie potomnym

 

Aby stworzyć kopię plików innych niż style.css (np. plik nagłówka – header.php, albo plik stopki – footer.php) wystarczy je skopiować z katalogu motywu oryginalnego do katalogu motywu potomnego. W ten sposób przeniesiony plik możemy bezpiecznie edytować.

 

Mam nadzieję że udało Ci się przebrnąć przez mój poradnik i już masz na swojej stronie motyw potomny!

Jakby coś nie działało, to służę pomocą. Pisz do mnie na adres: [email protected]

Spodobał Ci się ten artykuł? Podziel się nim!

10 thoughts on “Najlepsze praktyki WordPress’a: Po co i jak stworzyć motyw potomny?

    • Cieszę się, że mogłem pomóc. Niebawem opublikuję kolejne artykuły na temat modyfikacji strony. Planuję stworzyć serię artykułów o wdrażaniu nowych czcionek i o typografii. Zapraszm do zapisu na newslettera 🙂

    • No nieraz potrafią zaboleć. Sam to przerabiałem na początku przygody z WordPress’em, kiedy po aktualizacji motywu musiałem wprowadzać wszystkie zmiany od nowa. Na szczęście nauczyłem się na własnych błędach 🙂

  • Od kilku dni próbuję ogarnąć motywy potomne… i niestety bezskutecznie. Najpierw edytowałem tak Llorix One Lite, później wziąłem się, czysto eksperymentalnie, za Twenty Seventeen.
    Import css z motywu nadrzędnego poprzez @import url() nie dział w obu przypadkach – dało się powiązać jedynie przez fuction.php
    Najciekawsze było jednak później – jakiekolwiek zmiany w css potomnym nie były dostrzegane przez stronę. Mama wrażenie, jakby style.css nie był czytany. Ścieżki są dobre (w function.php działają bez problemu). W motywie potomnym mogę dowolnie edytować wszystkie pliki poza nieszczęsnym style.css
    Pytanie – czy ktoś wie, co robię źle?

    • Pierwsza myśl, która mi przychodzi do głowy, to to, że jest błędny znak ” w @import url(“adres/style.css”);, bądź inny, drobny, lecz uniemożlwijający prawidłową pracę błąd w zapisie. Może nie ma średnika na końcu ?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Top

Pudełko i CD
Chcesz pobrać darmowe infografiki ? Tak!

Wpisz poniżej adres e-mail, na który ma zostać wysłany bezpłany zestaw infografik! Zapisz się na nasz newsletter:

FreshMail.pl