Jak stworzyć child theme w WordPressie?
Każdy popularny motyw WordPress’a składa się z kolekcji plików szablonów, arkuszy stylów, obrazów i plików JavaScript. Motyw kontroluje układ elementów i wygląd strony. Gdy taki motyw jest prawidłowo skonfigurowany jako motyw nadrzędny, pozwala motywowi potomnemu, lub podzbiorowi instrukcji, nadpisać jego pliki, zapewniając, że motyw dziecka może selektywnie modyfikować układ, style i funkcjonalność motywu nadrzędnego.
Na skróty:
Najszybszym sposobem na zrozumienie motywów potomnych jest pokazanie ich na przykładzie.
Tworzenie prostego motywu potomnego
Utworzymy prosty motyw potomny, który modyfikuje styl motywu nadrzędnego.
Przykład będzie wykorzystywał motyw Twenty Twenty. Zainstaluj ten motyw jeśli jeszcze tego nie zrobiłeś.
Podobnie jak zwykłe motywy, motyw dziecka musi znajdować się w katalogu wewnątrz katalogu /wp-content/themes
. Pierwszym krokiem w tworzeniu motywu dziecka jest dodanie katalogu, w którym będzie się on znajdował. Połącz się ze swoim serwerem FTP i utwórz nowy katalog o nazwie twentytwenty-child
wewnątrz katalogu /wp-content/themes
.
Aby zarejestrować katalog twentytwenty-child
jako motyw i uczynić go motywem potomnym Twenty Twenty, utwórz plik style.css
i dodaj odpowiednie nagłówki motywu. Aby to zrobić, wpisz następujący kod w swoim ulubionym edytorze kodu lub zwykłego tekstu i zapisz plik jako style.css
:
/* Theme Name: Twenty Twenty Child Description: Mój pierwszy szablon potomny Author: Jan Kowalski Version: 1.0 Template: twentytwenty */
Krótkie objaśnienie najważniejszych nagłówków:
Theme Name
: Użytkownik widzi tę nazwę w panelu WordPressa,Template
: Ten nagłówek zmienia motyw w motyw potomny. Wartość tego nagłówka wskazuje WordPressowi motyw nadrzędny.
Teraz aktywuj nowy motyw Twenty Twenty Child jako swój aktywny motyw.
Na rysunku widać, że nowy motyw nie wygląda zbyt dobrze, prawda? Problem polega na tym, że nowy motyw dziecka zastąpił plik style.css motywu rodzica. Plik CSS motywu potomnego nie zawiera jeszcze reguł.
Ładowanie stylu motywu nadrzędnego
Własnością CSS jest to, że reguły mogą się wzajemnie nadpisywać. Jeśli wymienisz tę samą regułę dwa razy w swoim CSS, reguła, która jest ostatnia ma pierwszeństwo.
Spójrz na przykład:
a { color: blue; } a { color: red; }
Ten przykład jest bardzo prosty, ale pokazuje istotę sprawy. Pierwsza reguła mówi, że wszystkie linki powinny być niebieskie, natomiast druga reguła mówi, że linki powinny być czerwone. W CSS ostatnia reguła ma pierwszeństwo, więc linki będą czerwone.
Korzystając z tej właściwości CSS, można odziedziczyć całą stylizację motywu nadrzędnego i selektywnie ją modyfikować, nadpisując reguły motywu nadrzędnego. Ale jak załadować plik style.css
motywu nadrzędnego, aby odziedziczył on stylizację motywu nadrzędnego? Dzieje się to w pliku functions.php
, jak poniżej:
<?php function mytheme_enqueue_styles() { wp_enqueue_style('parent-theme', get_template_directory_uri() .'/style.css'); } add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles'); ?>
Parametr parent-theme
w funkcji wp_enqueue_styles
rozpoznaje szablon, który zidentyfikowałeś w nagłówku motywu w arkuszu stylów, funkcja mówi WordPressowi, aby dołączył arkusz stylów z szablonu zidentyfikowanego w nagłówku arkusza stylów.
Obok pliku style.css
stwórz plik functions.php
i wklej do niego kod PHP pokazany wyżej.
Obrazek pokazuje, jak wygląda strona po zaktualizowaniu pliku style.css
motywu dziecka, aby dopasować go do zestawienia.
Dopisywanie lub nadpisywanie styli CSS motywu nadrzędnego
Twój motyw dziecka Twenty Twenty jest skonfigurowany tak, aby pasował do motywu macierzystego Twenty Twenty. Teraz możesz dodać nowe reguły do pliku style.css
motywu Twenty Twenty Child. Aby zobaczyć prosty przykład działania dostosowywania, dodaj reguły, które przekształcą wszystkie nagłówki H1, H2 i H3 na kapitaliki:
/* Theme Name: Twenty Twenty Child Description: Mój pierwszy szablon potomny Author: Jan Kowalski Version: 1.0 Template: twentytwenty */ h1, h2, h3 { text-transform: uppercase; } body { background-color: #ffe9ec; }
Po zapisaniu zmian nagłówki powinny być renderowane tylko dużymi literami a tło powinno być różowe tak jak pokazano na obrazku:
Gdy dostępne są aktualizacje motywu nadrzędnego, możesz uaktualnić rodzica, aby uzyskać dodatkowe funkcje, ale nie musisz ponownie wprowadzać swoich modyfikacji, ponieważ dokonałeś ich w motywie dziecka, a nie w motywie nadrzędnym.