Hej, w tym artykule pokażę Ci, czym jest szablon potomny w WordPress (child theme), jak i po co go stosować. Rozsiądź się wygodnie i zaczynamy.
Po co szablon potomny?
Prędzej, czy później dojdzie do tego, że będziesz chciał zrobić jakąś zmianę w szablonie – czy to w pliku php, czy css, a może jeszcze gdzieś indziej. To może być mała, ale kluczowa zmiana. Jeśli nie zastosowałbyś szablonu potomnego, to mogłoby się okazać, że po aktualizacji szablonu, który używasz, straciłeś swoje zmiany. No i klops, no i cześć.
Dlatego istotne jest, aby stosować szablony potomne. Dzięki nim, raczej nigdy nie powinieneś stracić swoich zmian (pomijając jakieś duże lub źle zrobione aktualizacje).
Czym jest szablon potomny?
W WordPress są dwa rodzaje szablonów – szablon rodzic (parent theme) i szablon potomny (child theme). Instalując szablon na swoim WordPressie, instalujesz szablon typu rodzic – czyli główny szablon. On może być całkowicie zmieniony podczas aktualizacji.
Szablon potomny to szablon, który tworzysz niejako na podstawie szablonu rodzica. I to właśnie szablonów potomnych powinieneś używać. NIGDY nie używaj szablonu, który instalujesz, za każdym razem utwórz szablon potomny i ten właśnie używaj.
Jak stworzyć szablon potomny?
Na szczęście jest to niesamowicie proste.
- Zainstaluj szablon, który chcesz używać, ale nie wybieraj go w ustawieniach WordPress. U mnie to Divi, który szczególnie polecam.
- Teraz musisz uruchomić jakąś przeglądarkę plików. Może to być Windows Explorer (jeśli Twoja strona istnieje tylko lokalnie), Total Commander lub jakakolwiek inna przeglądarka (klient FTP)
- W katalogu głównym bloga masz katalog
wp-content
. Przejdź do niego - W nim masz katalog
themes
. Przejdź tam. - W katalogu
themes
masz katalogi zainstalowanych szablonów. Utwórz tutaj nowy katalog z nazwą istniejącego szablonu i dopiskiem-child
. Tzn. jeśli np. chcesz używać szablonuTwentyTwenty
, utwórz katalogTwentyTwenty-child
(oczywiście katalog TwentyTwenty musi tutaj istnieć – ponieważ zainstalowałeś ten szablon) - W nowo utworzonym katalogu (z sufiksem -child) utwórz plik
style.css
. To jest główna część Twojego szablonu potomnego. Do tego pliku dodaj taką zawartość:
/*
Theme Name: Nazwa szablonu (np. TwentyTwenty Child)
Theme URI: strona szablonu (np. http://twenty-twenty.com)
Description: Opis Twojego szablonu (np: Szablon potomny TwentyTwenty)
Author: Ja
Author URI: strona autora
Template: TwentyTwenty (wpisz tutaj nazwę szablonu rodzica)
Version: 1.0.0
*/
Mimo, że powyższy kod jest w komentarzu, to jednak jest on istotny. Krótkie wyjaśnienie:
- Theme Name – nazwa szablonu, który będzie wyświetlony w menu WordPressa. Nazwa musi być unikalna. Ta wartość jest wymagana
- Theme URI – strona szablonu, możesz pominąć
- Description – opis szablonu, możesz pominąć
- Author – autor szablonu – możesz pominąć
- Author URI – strona autora szablonu – możesz pominąć
- Template – szablon rodzic dla tego szablonu. Ta wartość jest wymagana
- Version – wersja, możesz pominąć.
Jest jeszcze kilka samoopisujących się elementów, które możesz tutaj zawrzeć, ale raczej nie będziesz ich stosował (License
– nazwa licencji (np. GNU); License URI
– strona z licencją; Tags
– tagi szablonu; Text Domain
– szczerze, nie mam pojęcia co to. Jeśli wiesz, podziel się w komentarzu)
Kolejkowanie styli szablonów
To właściwie tyle. Utworzyłeś szablon potomny. W pliku style.css możesz dalej robić modyfikacje swojego szablonu. Jest jednak jeszcze jedna rzecz, którą powinieneś zrobić. Powinieneś skolejkować style.css szablonu rodzica i potomnego. Kiedyś robiło się to inaczej (dyrektywa @import w pliku style.css). Ale dzisiaj zalecany jest sposób z wykorzystaniem php.
W świecie idealnym szablon rodzica powinien zaczytać zarówno swoje style, jak i style szablonu potomnego. Jednak nie zawsze to się dzieje. Dlatego powinieneś zrobić to ręcznie:
- Utwórz w katalogu szablonu potomnego jeszcze jeden plik:
functions.php
- Wprowadź mu taką zawartość:
<?php
function dc_enqueue_styles() {
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' ) );
}
add_action( 'wp_enqueue_scripts', 'dc_enqueue_styles' );
Ten kod po prostu rejestruje i kolejkuje arkusze styli. Teraz jest ważne kilka rzeczy:
- szablon potomny jest wczytywany przed szablonem rodzicem
- jeśli nie podasz numeru wersji w pliku style.css, odwiedzający zobaczą to, co zostało zapisane w cache, a nie aktualną wersję. Dlatego po każdej zmianie zmień też numer wersji
- funkcje
get_stylesheet*
szukają najpierw elementów w szablonach potomnych
Teraz już możesz aktywować ten styl potomny w opcjach wyglądu WordPressa.
Jeśli znalazłeś błąd w artykule, masz jakieś pytania lub chcesz coś dodać, podziel się w komentarzu