Tworzenie child theme

http://wpninja.pl/artykuly/motywy-potomne-czyli-jak-dostosowac-motyw-wordpressa-do-wlasnych-potrzeb/

Motywy potomne czyli jak dostosować motyw WordPressa do własnych potrzeb

Motywy potomne czyli jak dostosować motyw WordPressa do własnych potrzeb

Dostosowywanie gotowego motywu graficznego WordPressa do własnych potrzeb to sama frajda. Trzeba jednak przy tym pamiętać o złotej zasadzie – nigdy nie edytujemy plików motywu a wszystkie zmiany tworzymy z wykorzystaniem tzw. „motywów potomnych”. Jeśli zastanawiasz się dlaczego, jak to zrobić i co to właściwie jest, to dobrze trafiłeś.

Dlaczego nie edytujemy plików motywu?

Co tak naprawdę się dzieje, kiedy wykonywana jest automatyczna aktualizacja motywu? Otóż, wszystkie pliki są usuwane, a w ich miejsce kopiowana jest świeża zawartość z paczki pobranej z internetu.

W związku z tym, wszelkie ręcznie wprowadzone zmiany w plikach motywu zostaną utracone. A kiedy tak się stanie, jedyną szansą na ich przywrócenie będzie skorzystanie z kopii zapasowej, jeśli ją posiadasz.

Czym jest motyw potomny?

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. Z tego powodu jest to rekomendowany sposób wprowadzania zmian w motywach.

Kluczem do zrozumienia działania mechanizmu motywów potomnych jest wspomniane dziedziczenie. 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 też motyw potomny zawiera tylko te pliki, które różnią się względem motywu nadrzędnego.

Tworzenie motywu potomnego

Na potrzeby tego artykułu będziemy tworzyć motyw potomny do motywu Twenty Eleven.

Katalog motywu wraz z niezbędną zawartością

Pierwszy krok polega na stworzeniu nowego katalogu w folderze wp-content/themes (nazwa katalogu jest dowolna):

Zawartość katalogu /wp-content/themes/

W nowym katalogu obowiązkowo musi się znaleźć tylko jeden plik – arkusz stylów style.css, który w nagłówku zawiera informację identyfikującą motyw oraz wskazuje, który motyw jest jego rodzicem:

/*
Theme Name: Mój Twenty Eleven
Description: Motyw potomny Twenty Eleven
Author: Imię i nazwisko
Template: twentyeleven
*/

Powyższy fragment zawiera dwa obowiązkowe elementy:

  • Theme Name – nazwa motywu potomnego,
  • Template – nazwa katalogu zawierającego motyw rodzica (zwracając uwagę na prawidłową wielkość liter).

Pozostałe elementy nagłówka są opcjonalne.

Po wykonaniu tego kroku mamy w pełni działający motyw potomny, który możemy aktywować z poziomu panelu administracyjnego:

Aktywacja motywu potomnego

Wykonanie tego kroku możemy również powierzyć wtyczce One-Click Child Theme, która za nas stworzy na serwerze katalog, oraz umieści w nim gotowy do edycji plik style.css, z prawidłowo skonfigurowanym nagłówkiem oraz zaimportowanym arkuszem stylów z motywu rodzica.

Wygląd – plik style.css

Arkusz stylów w motywie potomnym nadpisuje w pełni style motywu rodzica. W związku z tym, jeśli nie dodamy żadnych własnych reguł, nasz motyw potomny będzie pozbawiony stylów. Tuż po aktywacji nowo utworzonego motywu potomnego nasza strona będzie wyglądała mniej więcej tak:

Motyw potomny bez stylów

Dlatego w pliku style.css, tuż pod obowiązkowym nagłówkiem warto dodać jedną linijkę:

@import url('../twentyeleven/style.css');

W ten sposób importujemy cały arkusz stylów z motywu rodzica, a dodając pod spodem własne reguły, możemy nadpisywać jego wybrane fragmenty. Oczywiście w zależności od tego na jakim motywie bazujemy nasz motyw potomny, należy odpowiednio zamienić „twentyeleven” na nazwę folderu motywu rodzica.

Przykładowo, aby zmienić kolor linków w motywie potomnym zastosujemy następujący kod:

/*
Theme Name: Mój Twenty Eleven
Description: Motyw potomny Twenty Eleven
Author: Imię i nazwisko
Template: twentyeleven
*/
 
@import url('../twentyeleven/style.css');
 
a {
color: #EB4B0B;
}

W ten sposób zmieniliśmy kolor wszystkich linków z domyślnego niebieskiego, na pomarańczowy:

Zmiana koloru odnośników

Funkcje – plik functions.php

Plik functions.php pozwala na rozszerzanie funkcjonalności motywu, np. poprzez dodanie własnych typów wpisów i taksonomii, nowych obszarów widgetowych itd.

W odróżnieniu od arkusza stylów, plik functions.php umieszczony w motywie potomnym nie nadpisuje swojego odpowiednika w motywie rodzica, nie ma więc potrzeby importowania lub kopiowania całej jego zawartości. Motyw potomny korzysta z obu tych plików, najpierw ładuje własny plik functions.php, a następnie plik z motywu rodzica.

Plik functions.php nie wymaga żadnego specjalnego nagłówka. Należy jedynie pamiętać o znaczniku otwierającym kod PHP, a następnie można już wstawiać własne fragmenty kodu:

<?php
 
/* zmiana obrazka logo na ekranie logowania */
 
function custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image: url('.get_bloginfo('template_directory').'/images/admin-logo.jpg) !important; }
</style>';
}
 
add_action('login_head','custom_login_logo');

Powyższy kod sprawi, że na ekranie logowania do panelu administracyjnego zamiast logo WordPress pojawi się wybrany przez nas obrazek. Zwróć uwagę, że w przykładzieget_bloginfo('template_directory') to ścieżka do katalogu motywu nadrzędnego. Aby skorzystać z obrazka z katalogu images motywu potomnego, należałoby użyćget_bloginfo('stylesheet_directory').

Pozostałe pliki

Poza arkuszem stylów oraz plikiem functions.php motywy zawierają również inne pliki takie jakindex.php, header.php, footer.php itd. W motywie potomnym możemy nadpisać dowolny plik z motywu rodzica. W tym celu wystarczy stworzyć plik o identycznej nazwie w katalogu z motywem potomnym.

Na przykład aby w motywie potomnym, nadpisać stopkę z motywu Twenty Eleven, należy skopiować plik footer.php z motywu nadrzędnego, a następnie wprowadzić w nim wszelkie koniecznie zmiany.

Możemy również stworzyć specyficzny plik, który tylko w określonych przypadkach nadpisze bardziej ogólny odpowiednik z motywu nadrzędnego. Jeśli przykładowo, motyw rodzic posiada ogólny plik dla archiwum – archive.php, moglibyśmy stworzyć plik date.php który będzie wykorzystywany na stronach archiwum wg daty, tym samym w tym konkretnym przypadku nadpisując domyślny odpowiednik z motywu nadrzędnego.

Reklamy

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s