publikacja: 19 czerwca 2012, autor: , komentarzy 77 https://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/

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

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

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

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ładzie get_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 jak index.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.

Uwagi końcowe

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.

Wybór metody zależy głównie od tego, jak duże zmiany planujemy wprowadzić. Dla drobnych zmian, które przykładowo wymagają jedynie modyfikacji arkusza stylów, najlepszym wyjściem jest stworzenie motywu potomnego. Dla rozbudowanych modyfikacji, które wymagają również nadpisywania wielu standardowych plików motywu rodzica, bardziej uzasadnione może okazać się stworzenie jego kopii i pracowanie na niej.

Niezależnie jednak od zakresu wprowadzanych zmian, zawsze trzeba pamiętać, aby nie modyfikować plików oryginalnego motywu. Pozwoli nam to na swobodne aktualizacje i oszczędzi problemów w przyszłości.

Dodaj własny komentarz

Odnośniki z innych stron

Lista innych stron, które w jakiś sposób odnoszą się do opublikowanej tutaj treści:

  1. Jak zintegrować silnik wyszukiwarki Google z WordPress? | WPNinja

    […] Oba fragmenty składają się z dwóch części. Pierwsza z nich jest identyczna w obu przypadkach – jest to kod, który należy dodać do nagłówka tuż przed zamykającym znacznikiem </head>. Możemy tego dokonać na dwa sposoby – edytując bezpośrednio plik header.php lub za pośrednictwem pliku functions.php (w obu przypadkach warto wziąć pod uwagę opcję stworzenia motywu potomnego). […]

  2. Jak zrobić tłumaczenie motywu WordPressa w motywie potomnym | Webfaces Blog

    […] Krok 1. Tworzymy motyw potomny. Na rysunku wyżej pokazano, jak wygląda poprawnie utworzony motyw potomny. Jeśli nie wiesz, jak tworzy się motywy potomne, przeczytaj ten tutorial. […]

  3. Tworzenie child theme – brabrakadabra

    […] https://wpninja.pl/artykuly/motywy-potomne-czyli-jak-dostosowac-motyw-wordpressa-do-wlasnych-potrzeb/ […]