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.

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ś.

motyw Twenty Twenty

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.

child theme bez uzupełnionego kodu w functions.php

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.

child theme z poprawnie uzupełnionym plikiem functions.php

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:

zmodyfikowany child theme

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.

 

4.7/5 - (3 głosów)

Możesz również polubić…

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *