Jednym z najbardziej ciekawych etapów pod czas tworzenia strony www opartej o WordPress jest dostosowywanie gotowego motywu graficznego do własnych potrzeb. Przy tym początkujący użytkownicy tego CMS dość często wchodzą na te same grabie – edytują pliki macierzyste motywu bez robienia ich kopii zapasowej. W rezultacie czego wszytkie zmiany zostaną stracone w przypadku aktualizacji motywu. Dlatego, żeby to się nie stało, należy pamiętać o złotej zasadzie – nigdy nie edytujemy plików motywu a wszystkie zmiany tworzymy z wykorzystaniem tzw. „motywów potomnych”. Dziś pokarzemy Wam przykład tworzenia prostego motywu potomnego dla WordPressa.

Ale przed tym jak przejść do tworzenia motywu potomnego, należy wyjaśnić czym on właściwie jest?

Czym jest motyw potomny?

Z definicji wypływa, ż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. Developerzy WordPressa rekomendują ten sposób do wprowadzania zmian w motywach podczas tworzenia stron internetowych.

Istotną odmianą motywu potomnego od motywu rodzica jest jego mechanizm działania. Wyświetlając konkretną stronę, WordPress najpierw „szuka” odpowiedniego pliku w folderze motywu potomnego, a jeśli go tam nie znajdzie, sięga do motywu rodzica. Dlatego motyw potomny zawiera tylko te pliki, które różnią się względem motywu nadrzędnego. No i taki motyw zawsze będzie chronił wszystkie zmiany wniesione w motyw przez autora.

A teraz można przejść do tworzenia samego motywu potomnego.

Tworzenie motywu potomnego

Dla przykładu będziemy tworzyć motyw potomny do motywu Twenty Fourteen, który jest dostępny w wersji WordPress 4.3.1. Przechodzimy do folderu wp-content/themes, który znajduję się na naszym serwerze. Zawiera on wszystkie dostępne dla użytku motywu. Stworzymy nowy folder twentyfourteen-child, który będzie zawierał nasz motyw potomny (rys. 1):

Rysunek 1. Tworzenia folderu dla motywu potomnego

Dlatego, żeby nasz motyw działał poprawnie, nasz folder powinien zawierać plik style.css (rys. 2). Stworzymy taki plik i wrzucimy do niego podstawowy kod:

/*

Theme Name: Twenty Twelve Child

Template: twentytwelve

Author: the WordPress team

Version: 1.0

Text Domain: twentytwelve-child

*/

@import url("../twentytwelve/style.css")

Podany kod w nagłówku zawiera informację identyfikującą motyw. A za pomocą linijki @import url(„../twentytwelve/style.css”) arkusz CSS style.css wskazuje, który motyw jest jego rodzicem.

Rysunek 2. Tworzenie pliku style.css

Teraz możemy przyjść do panelu administracyjnego naszej strony. W sekcji Wygląd musi pojawić się stworzony przez nas motyw potomny Twenty Fourteen Child (rys 3.):

Rysunek 3. Motyw potomny Twenty Fourteen Child w sekcji Wygląd

Dlatego, żeby zamiast pustego miejsca pojawił się obrazek należy stworzyć plik screenshot.png, który powinien znajdować się w folderze z motywem potomnym. W naszym przypadku nie będziemy tworzyć nowego obrazku lecz skopiujemy go z folderu zawierającego motyw rodzica. Po skopiowaniu obrazku do folderu można odświeżyć stronę sekcji Wygląd. Teraz można aktywować nasz motyw potomny i przejść do jego edytowania (rys. 4):

Rysunek 4. Aktywacja motywu potomnego Twenty Fourteen Child

Jak już wspominaliśmy wyżej, pliki znajdujące się w folderze z motywem potomnym mają priorytet w odniesieniu do plików, umieszczonych w folderze z motywem rodzica. Dlatego, dla tworzenia nowego wyglądu dla strony nie trzeba kopiować wszystkich plików motywu. Wystarczy wybrać tylko te, które należy przerobić. A dalej umieścić ich w folder z motywem potomnym.

W naszym przypadku nie będziemy modyfikować całego motywu potomnego, a tylko pokażemy Państwu jak wygląda ten proces na przykładzie edytowania jednego pliku. Niech to będzie plik header.php.

Ale przed wdrożeniem odpowiednich zmian spojrzymy jak wygląda strona www oparta o motyw Twemty Fourteen (rys.5):

Rysunek 5. Standardowy nagłówek motywu rodzica

Teraz możemy przestąpić do zmian. Najpierw przeniesiemy plik header.php, znajdujący się w folderze motywu rodzica wdo folderu twentyfourteen-child. Nie będziemy robić aż zbyt wielkich modyfikacji, dodamy tylko obrazek i parę linijek tekstu. W rezultacie takich prostych zmian otrzymamy następujący rezultat (rys. 6):

Rysunek 6. Nowy nagłówek motywu potomnego

Jak widać nasza strona internetowa ma nowy nagłówek, który znajduje się w pliku z motywem potomnym. To jeszcze raz dowodzi, że plik header.php ma priorytet w porównywaniu do analogicznego pliku z folderu, zawierającego motyw rodzica.

Największy problem podczas użycia motywu potomnego leży w modyfikacji arkuszu stylów style.css. Tak na przykład, gdy będziemy chcieli zmienić szerokość pasma tekstu w pliku style.css, znajdującym się w folderze z motywem potomnym, to takie zmiany nie będą brane pod uwagę. Dlatego, żeby zmiany były akceptowane przez CMS trzeba stworzyć osobny arkusz stylów i podłączyć go do motywu potomnego.

Stworzymy plik newstyle.css. Dodamy 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 drugi arkusz stylów nie da się podłączyć za jej pomocą. W takim przypadku nam pomoże funkcja wp_enqueue_style(), którą trzeba dodać w pliku functions.php.

Przede wszystkim przystępujemy do tworzenia pliku functions.php. Zatem dodajemy w niego odpowiedni kod:

function get_child_template_directory_uri() {

   return dirname( get_bloginfo('stylesheet_url') );

}

Dalej podłączamy arkusz stylów newstyle.css.

function child_styles() {

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

}                                 

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

Możecie również skopiować podany fragment kodu i podłączyć inny arkusz stylów. Oprócz tego za pomocą pliku functions.php można realizować inne potrzebne niezależne funkcji, które nie będą stracone pod czas aktualizacji motywu.

Podsumowanie

Opisana metoda nie jest jedynym sposobem na stworzenie motywu bazującego na innym motywie. Inny sposób polega na skopiowaniu motywu bazowego i zmianie jego nazwy, a następnie dokonywaniu wszelkich modyfikacji w nowym motywie.

Jednak proponowany sposób tworzenie motywu potomnego jest naszym zdaniem prostą metodą, z którą poradzić sobie mogą początkujący użytkownicy WordPressa. Podane rozwiązanie pozwoli zabezpieczyć was od stracenia wszystkich zmian wniesionych do motywu rodzica pod czas jego aktualizacji. W rezultacie czego możecie w lekki sposób przechowywać zmiany, nawet bez tworzenia kopii zapasowej.

Artykuł opracowany przy współpracy z TemplateMonster.com