Jak stworzyć motyw potomny WordPress w 4 prostych krokach

Motywy potomne – jak sama nazwa wskazuje – to motyw, który czerpie funkcjonalności z motywu nadrzędnego. W niektórych przypadkach nie zaleca się bezpośredniej edycji motywu WordPress, na przykład w przypadku aktualizacji motywu. Jeśli zostanie zastosowana nowa aktualizacja motywu, możesz utracić dokonane dostosowanie.

Aby zachować dostosowania, a także otrzymywać aktualizacje motywów, zaleca się utworzenie motywu potomnego WordPress motywu nadrzędnego, którego chcesz użyć. Tworzenie motywu potomnego ma jeszcze jedną zaletę, ponieważ motyw nadrzędny pozostaje nienaruszony i wolny od jakiejkolwiek edycji.

Motywy potomne istnieją w innym folderze niż motyw nadrzędny, a motyw potomny, o ile nie zostanie zmodyfikowany, zależy od funkcjonalności motywu nadrzędnego. Jeśli używasz motywu potomnego w swojej witrynie, rdzeń WordPress najpierw sprawdzi pliki motywu potomnego. Jeśli nie zostanie zmodyfikowany, WordPress uruchomi pliki motywu nadrzędnego.

Aby w pełni zrozumieć koncepcję motywów potomnych w WordPressie, stworzymy motyw potomny domyślnego motywu WordPress Twenty Fifteen i dokonamy pewnych modyfikacji, aby poznać ideę motywów potomnych.

Aby utworzyć motyw potomny WordPress, wykonaj następujące kroki:

• Utwórz folder i nazwij go dwadzieścia piętnaście-dziecko. Dodanie dziecka jest uważane za dobrą praktykę.
• Utwórz style.css z informacjami o motywie potomnym i plikiem functions.php
• Zaimportuj szablon Twenty Fifteen w style.css
• Umieść arkusze stylów w kolejce za pomocą pliku functions.php
• Edytuj pliki szablonów, takie jak single.php

Krok 1: Utwórz folder motywu podrzędnego i dodaj style.css

Pierwszym krokiem jest utworzenie nowego folderu dla naszego motywu potomnego. Nazwijmy to dwudziestopiętnastolatkiem, aby łatwo zapamiętać, gdzie znajduje się nasz motyw dziecięcy.

Aby to zrobić, połącz się z serwerem za pomocą klienta FTP, takiego jak FileZilla, przejdź do /public_html/wp_content/themes i utwórz nowy folder o nazwie dwadzieścia piętnaście-dziecko

W tym nowym katalogu utwórz plik style.css i wklej do niego następujące informacje.

 /*
Nazwa motywu: Dwadzieścia piętnaście dzieci
URI motywu: https://wordpress.org/themes/twentyfifteen/
Autor: zespół WordPress
URI autora: https://wordpress.org/
Szablon: dwadzieścia piętnaście
Opis: Motyw potomny dwudziestego piętnastego roku
Wersja: 1.3
Licencja: Powszechna Licencja Publiczna GNU v2 lub nowsza
URI licencji: http://www.gnu.org/licenses/gpl-2.0.html
Tagi: czarny, niebieski, szary, różowy, fioletowy, biały, żółty, ciemny, jasny, dwukolumnowy, lewy pasek boczny, stały układ, responsywny układ, gotowy do dostępności, niestandardowe tło, niestandardowe kolory, niestandardowe- nagłówek, niestandardowe menu, styl edytora, polecane obrazy, mikroformaty, formaty postów, obsługa języka rtl, post przyklejony, komentarze w wątkach, gotowe do tłumaczenia
Domena tekstowa: dwadzieścia piętnaście-dziecko
Ten motyw, podobnie jak WordPress, jest objęty licencją GPL.
Użyj go, aby zrobić coś fajnego, dobrze się bawić i dzielić się z innymi tym, czego się nauczyłeś.
*/

Najważniejsze wiersze, które należy edytować, to „Nazwa motywu” , „Domena tekstowa” i „Szablon” . Ponieważ nazwa motywu nie może być taka sama jak Twenty Fifteen, a w szablonie mówimy WordPressowi, że ten motyw jest motywem potomnym Twenty Fifteen, powinniśmy wywoływać pliki z folderów Twenty Fifteen, jeśli nie istnieją w dwudziestu piętnastu. teczka. Ponadto domena tekstowa powinna być inna i niepowtarzalna dla każdego motywu, który masz z instalacją WordPress.

Teraz, jeśli przejdziemy do naszego panelu administracyjnego WordPress → Wygląd → Motyw , zobaczymy, że pojawiło się Twenty Fifteen Child. Możemy zastosować ten motyw na naszej stronie.

Ponieważ style.css jest obecny w katalogu motywów potomnych. WordPress załaduje ten style.css, a nie style.css motywu nadrzędnego. Każdy inny plik, taki jak index.php , page.php , functions.php zostanie załadowany z motywu nadrzędnego.

Ponieważ w pliku style.css motywu potomnego nie zdefiniowano żadnych stylów, będziemy musieli je zaimportować. Najlepszą praktyką zalecaną w kodeksie WordPress jest kolejkowanie arkuszy stylów za pomocą pliku functions.php.

Krok 2: Umieść arkusze stylów w kolejce za pomocą functions.php

W przeciwieństwie do innych plików, teoria kryjąca się za plikiem functions.php w motywach potomnych WordPressa brzmi: WordPress najpierw ładuje functions.php motywu potomnego i inicjalizuje w nim funkcje, a następnie wykonuje również functions.php motywu nadrzędnego.

Jak wspomniałem wcześniej, najlepszym sposobem importowania arkuszy stylów jest kolejkowanie ich za pomocą pliku functions.php .

Utwórz plik functions.php w katalogu motywu potomnego i dodaj następujący kod.

 <?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'styl nadrzędny', get_template_directory_uri().'/style.css' );
}

Spowoduje to wywołanie arkusza stylów „ style.css ” z pliku motywów nadrzędnych. Jeśli chcesz edytować cokolwiek w arkuszach stylów, możesz dodać te reguły w style.css motywu potomnego.

Krok 3: Edytuj plik style.css motywu potomnego

W motywach potomnych WordPress możesz łatwo edytować arkusze stylów, definiując reguły w style.css w folderze motywów potomnych. Na przykład, jeśli chcemy zmienić kolor kotwicy, wystarczy dodać następujący kod w style.css naszego motywu potomnego

 a {
kolor: #D54E21;
dekoracja tekstu: brak;
}

Dzieje się tak, że reguła style.css motywu potomnego dla „a” zastępuje style.css motywu nadrzędnego, reszta pozostaje nienaruszona.

Krok 4: Edytuj plik szablonu single.php

Możemy łatwo edytować poszczególne pliki szablonów w motywach potomnych. Na przykład, jeśli chcemy edytować pojedynczy.php, musimy skopiować ten plik z folderu motywu nadrzędnego i wkleić go do folderu motywu potomnego.

Załóżmy, że chcemy usunąć sekcję komentarzy ze stron pojedynczych postów. Po skopiowaniu pliku do naszego folderu motywu podrzędnego, możemy go edytować i usunąć następującą sekcję komentarzy.

 // Jeśli komentarze są otwarte lub mamy co najmniej jeden komentarz, załaduj szablon komentarza.
if ( comments_open() || get_comments_number() ):
szablon_komentarzy();
endif;

To, co się tutaj dzieje, polega na tym, że WordPress sprawdza folder motywu podrzędnego pod kątem single.php , jeśli istnieje w katalogu, załaduje go stamtąd, w przeciwnym razie powróci do folderu motywu nadrzędnego.

Tak po prostu, możemy edytować dowolny pojedynczy plik szablonu w naszych motywach. To podejście jest ogólnie dobre, ponieważ utrzymuje nienaruszony motyw nadrzędny i aktualizuje motyw nadrzędny bez utraty naszych dostosowań.