Każdy początkujący użytkownik WordPressa przynajmniej raz dostosowywał gotowy motyw do własnych potrzeb. Najczęściej takie dostosowanie polega na zmianie logo, koloru lub obrazka w nagłówku, dodaniu swojego menu, dodatkowej formy lub elementu, itd. Ale mogą też pojawić się sytuacje, kiedy trzeba zmienić kod w plikach motywu. Wtedy użytkownicy zapominają o jednym: edytują pliki macierzyste motywu bez tworzenia ich kopii zapasowej. To największy błąd, ponieważ podczas kolejnej aktualizacji motywu wszystkie zmiany zostaną utracone.
Jak najlepiej edytować motyw, aby zachować wszystkie zmiany? Utworzyć kopię zapasową? Jest to jakieś rozwiązanie, ale za każdym razem będzie trzeba przenosić fragmenty kodu do plików. A czy ktoś w ogóle ma na to czas?
Jest jeszcze inne, zdecydowanie prostsze, rozwiązanie, które proponują twórcy WordPressa: nigdy nie należy edytować plików motywu, a wszystkie zmiany tworzyć z wykorzystaniem tzw. „motywów potomnych”. Dziś pokażemy wam, jak można szybko stworzyć prosty motyw potomny w WordPress CMS. Wcześniej jednak wyjaśnimy, czym on jest.

Czym jest motyw potomny?
Z definicji wynika, że motyw potomny (ang. child theme) „dziedziczy” wygląd oraz funkcje motywu rodzica i pozwala na wprowadzanie w nim zmian, bez konieczności modyfikacji jego oryginalnych plików. Różnica między motywem potomnym a motywem rodzica leży w mechanizmie działania. Wyświetlając konkretną stronę, WordPress najpierw „szuka” odpowiedniego pliku w folderze motywu potomnego, a jeśli go tam nie znajduje, sięga do motywu rodzica. Dlatego motyw potomny może zawierać tylko zmodyfikowane pliki, a reszta zostanie podłączona z motywu rodzica. Jest to więc proste i efektywne rozwiązanie.

Tworzenie motywu potomnego
Aby przejść do tworzenia motywu dziecka (motywu potomnego) należy najpierw wybrać motyw rodzica. W naszym przypadku będzie to Twenty Fourteen, czyli jeden z motywów domyślnych w WordPress, wersja 4.3.1. Następnie przechodzimy na serwer, do folderu wp-content/themes, gdzie znajdują się wszystkie zainstalowane motywy strony internetowej.
W folderze wp-content/themes tworzymy nowy folder, który nazwiemy „twentyfourteen-child”. Będzie znajdować się w nim nasz motyw potomny (rys. 1):
rysunek 1

Aby WordPress CMS „zrozumiał”, że w folderze wp-content/themes/twentyfourteen-child znajduje się motyw potomny, musi zawierać on plik style.css (rys. 2). Tworzymy ten plik i wrzucamy do niego następujący kod:

/*

Theme Name: Twenty Twelve Child

Template: twentytwelve

Author: the WordPress team

Version: 1.0

Text Domain: twentytwelve-child

*/

@import url(„../twentytwelve/style.css”)

Opisany powyżej kod identyfikuje motyw „w oczach” systemu. Za pomocą linijki @import url(„../twentytwelve/style.css”), arkusz CSS style.css pokazuje WordPressowi, który motyw jest jego rodzicem.

rysunek 2

Aby sprawdzić poprawność działania pliku style.css, przejdźmy do panelu administracyjnego naszej strony. W sekcji Wygląd powinien pojawić się stworzony przez nas motyw potomny Twenty Fourteen Child (rys 3.):

rysunek 3

Od innych motywów różni się on jedynie brakiem obrazka. Aby dodać go do naszego motywu potomnego, musimy stworzyć plik screenshot.png, który powinien znajdować się w folderze twentyfourteen-child. Nie będziemy teraz tworzyć nowego obrazka. Skorzystamy natomiast z tego, który już znajduje się w folderze z motywem rodzica. Wystarczy skopiować go z jednego folderu do drugiego.

Jeśli wszystko wykonaliśmy poprawnie, to po odświeżeniu sekcji Wygląd nad nazwą motywu pojawi się obrazek. Aktywujemy motyw potomny Twenty Fourteen Child i przystępujemy do jego modyfikacji (rys. 4):

rysunek 4

Jak już wspomnieliśmy powyżej, pliki, które znajdują się w folderze z motywem potomnym, mają priorytet w odniesieniu do plików umieszczonych w folderze z motywem rodzica. Oznacza to, że w celu modyfikacji odpowiedniego elementu strony należy przenieść do motywu potomnego tylko odpowiadający za niego plik, a nie wszystkie pliki motywu rodzica.

Zobaczmy, jak działa ten mechanizm, na przykładzie edycji nagłówka dla strony www. Musimy przenieść plik header.php do folderu z motywem potomnym. Ale wcześniej zapamiętajmy, jak wygląda strona www oparta o motyw Twemty Fourteen bez modyfikacji (rys.5):

rysunek 5

Jak widać, w nagłówku występuję nazwa strony. Spróbujmy dodać do niego obrazek i parę linijek tekstu. Musimy zacząć od przeniesienia pliku header.php, który znajduje się w folderze motywu rodzica, do folderu twentyfourteen-child. Następnie przechodzimy do edycji pliku: dodajemy obrazek i slogan. Zapisujemy wszystkie zmiany i odświeżamy stronę www (rys. 6):

rysunek 6

Jak widać, nasza strona internetowa ma teraz nowy nagłówek. Odpowiada za niego plik, który znajduje się w folderze z motywem potomnym. A to kolejny dowód, że pliki z danego folderu mają priorytet w porównywaniu do plików z folderu, który zawiera motyw rodzica.

Edytowanie stylów w motywie potomnym

Największy problem podczas korzystania z motywu potomnego leży w modyfikacji arkuszu stylów style.css. Na przykład, gdy będziemy chcieli zmienić szerokość pasma tekstu w pliku style.css, który znajduje się w folderze z motywem potomnym, to takie zmiany nie będą brane pod uwagę. Aby więc WordPress zaakceptował wprowadzone modyfikacje, musimy stworzyć osobny arkusz stylów i podłączyć go do motywu potomnego. Pokażemy, jak to zrobić na prostym przykładzie.

Tworzymy plik newstyle.css. Dodajemy do niego kod ze spoilera:

.site {

margin: 0 auto;

max-width: 90%;

overflow: hidden;

}

Niestety, dyrektywa @import url działa tylko w jednym pliku style.css, dlatego nie da się połączyć przy jej pomocy drugiego arkusza stylów. Ten problem pomoże rozwiązać funkcja wp_enqueue_style(). Aby skorzystać się z niej, trzeba stworzyć plik functions.php, który powinien znajdować się w folderze z motywem potomnym.

Gdy już stworzymy plik, musimy dodać do niego poniższy kod:

<php

function get_child_template_directory_uri() {

return dirname( get_bloginfo(’stylesheet_url’) );

}

function child_styles() {

wp_enqueue_style( 'twentyfourteen-child-style’, get_child_template_directory_uri() . '/newstyle.css’ );

}

add_action( 'wp_enqueue_scripts’, 'child_styles’,12);

?>

Zapisujemy wszystkie zmiany i odświeżamy stronę. Otrzymamy następujący rezultat (rys. 7):

rysunek 7

Jak widać, dzięki funkcji wp_enqueue_style() udało się nam podłączyć nowy arkusz stylów newstyle.css. W razie potrzeby, można też skopiować podany fragment kodu i podłączyć inny arkusz stylów. Co więcej, przy pomocy pliku functions.php możemy korzystać z innych potrzebnych i niezależnych funkcji, których nie utracimy podczas aktualizacji motywu.

Podsumowanie

Korzystanie z motywu potomnego to najlepsze rozwiązanie w celu edycji wyglądu strony www opartej o WordPress CMS. Dzięki niemu, podczas aktualizacji motywu rodzica można zachować wszystkie wprowadzone zmiany. Ponadto, motyw potomny zawiera tylko te pliki, które zostały zmodyfikowane, dzięki czemu zajmuje on mało miejsca na serwerze.

Na sam koniec trzeba dodać, że tworzenie motywu potomnego to bardzo prosta sprawa. Od użytkownika wymaga się jedynie chęci zagłębienia się w tajemnice WordPressa. 🙂

P.S. Możecie poeksperymentować z tworzeniem własnych motywów potomnych, a o rezultatach napisać w komentarzach 😉

Autor tekstu: Janusz Kamiński

Specjalista działu marketingu firmy TemplateMonster. W branży IT pracuje od 5 lat. Posiada doświadczenie w SEO, marketingu internetowym. Oprócz tego interesuje się tworzeniem stron www.

TemplateMonster logo