Twój ostateczny przewodnik po pracy z motywami potomnymi WordPress

Jeśli chcesz dostosować motywy, które kupujesz od nas w HeroThemes, na przykład budując witryny internetowe dla siebie lub swoich klientów, korzystając z projektu na zamówienie, możesz wykorzystać moc motywów potomnych WordPressa.

W najprostszym przypadku korzystanie z motywów potomnych sprawi, że będziesz bardziej wydajny – zachowanie kodu używanego dla każdego projektu we własnym motywie nadrzędnym lub użycie gotowego motywu nadrzędnego, takiego jak jeden z naszych, będzie oznaczać, że przestrzegasz Zasady DRY (Nie powtarzaj się).

Ale idąc dalej, możesz używać motywów potomnych i nadrzędnych do tworzenia sieci witryn z podstawową bazą kodu, możesz tworzyć niestandardowe motywy w oparciu o ramy tematyczne stron trzecich, a nawet możesz stworzyć własny zaawansowany motyw nadrzędny do użytku jako ramy tematyczne . W tym artykule przedstawię krótki przegląd podstawowych tematów potomnych, a następnie pokażę kilka bardziej zaawansowanych technik. Nauczysz się:

• jak użyć motywu potomnego, aby dostosować motyw nadrzędny innej firmy lub ramy motywu do potrzeb Twojego projektu
• jak WordPress nadaje priorytet plikom szablonów w każdym z motywów nadrzędnych i podrzędnych
• jak przesłonić funkcje motywu nadrzędnego w pliku funkcji motywu potomnego.

Zrozumienie motywów rodzica i dziecka

Teoretycznie każdy motyw może działać jako motyw nadrzędny, chociaż niektóre są lepiej zaprojektowane do tej roli (w tym nasza!). Jeśli używasz jednego z naszych motywów i chcesz go dostosować do własnego projektu, znacznie lepiej jest użyć do tego motywu potomnego niż zhakować motyw główny, co oznacza, że ​​utracisz wszystkie zmiany podczas aktualizacji motyw do przyszłych wersji. Aby utworzyć motyw potomny, po prostu utwórz nowy motyw i dodaj następujący tekst na początku jego arkusza stylów. Mój przykład poniżej używa motywu HeroThemes HelpGuru jako rodzica, ale możesz użyć dowolnego motywu, w tym innego produktu HeroTheme, takiego jak KnowAll.

Zacznij budować swoją bazę wiedzy już dziś!

Nasz motyw KnowAll zawiera motyw potomny, który pomoże Ci dostosować witrynę bazy wiedzy

Pobierz motyw

/*
Theme Name: My child theme
Theme URI: URL of the theme or site it's used for
Description: Description of what the theme is for and its main features.
Author: Your name
Template: helpguru
Version: 1.0
*/
@import url("../helpguru/css/style.css");

Ważnymi liniami są te dwa:

Template: helpguru
@import url("../helpguru/css/style.css");

Pierwsza sekcja określa szablon, który informuje WordPressa, że ​​jest to motyw potomny, a jego rodzicem jest motyw HelpGuru. Zauważ, że używasz tutaj nazwy folderu motywu nadrzędnego, a nie nazwy motywu (więc powyżej użyłem „helpguru”, a nie „HelpGuru”).

Druga sekcja importuje arkusz stylów z motywu nadrzędnego, co oznacza, że ​​wszystkie style motywu nadrzędnego zostaną aktywowane w motywie potomnym. Następnie dodaj własną stylizację poniżej tej deklaracji @import – oznacza to, że zostaną użyte style z obu motywów, ale jeśli deklaracja istnieje w obu arkuszach stylów dla tego samego elementu, CSS motywu potomnego będzie dominował ze względu na kaskadę (jako stylizacja następuje po stylizacji z motywu nadrzędnego).

Motyw potomny może składać się z arkusza stylów i niczego więcej, jeśli chcesz, w takim przypadku wszystko, czego użyjesz, to przesłonięcie niektórych stylów motywu nadrzędnego. Alternatywnie możesz dodać dodatkowe pliki szablonów i/lub plik funkcji, w takim przypadku musisz zrozumieć, w jaki sposób WordPress uzyskuje dostęp do plików szablonów z motywów nadrzędnych i podrzędnych.

Pliki szablonów motywów nadrzędnych i podrzędnych

Sposób, w jaki WordPress wykorzystuje pliki szablonów w motywach nadrzędnych i podrzędnych, jest dość prosty. Kiedy dana strona (lub post lub dowolny inny typ treści) jest wyświetlany, WordPress użyje najbardziej odpowiedniego pliku szablonu z motywu nadrzędnego lub podrzędnego zgodnie z hierarchią szablonów. Jeśli znajdzie dwie wersje tego samego pliku szablonu, użyje wersji z motywu potomnego. Oznacza to, że pliki szablonów motywu podrzędnego zastąpią pliki szablonów motywu nadrzędnego w dwóch scenariuszach:

• jeśli twój motyw potomny zawiera plik szablonu, który jest wyżej w hierarchii niż te w motywie macierzystym;
• lub jeśli zarówno motyw nadrzędny, jak i podrzędny zawierają wersję wymaganego pliku szablonu.

Decydowanie o plikach szablonów motywów nadrzędnych lub potomnych

WordPress użyje hierarchii szablonów, aby określić, którego pliku szablonu użyć, ale oddziałuje to z plikami, które masz w każdym z motywów nadrzędnych i podrzędnych. Mówiąc prościej, WordPress przechodzi przez trzy kroki:

1. Identyfikuje rodzaj wyświetlanej treści.
2. Działa poprzez hierarchię szablonów, dopóki nie znajdzie pliku do wyświetlenia tej zawartości, zarówno w motywie nadrzędnym, jak i podrzędnym.
3. Jeśli plik jest obecny zarówno w motywie nadrzędnym, jak i potomnym, używa tego z motywu potomnego.

Zilustrujmy to przykładem. Poniższa tabela przedstawia zestaw plików szablonów w dwóch hipotetycznych motywach, z których jeden jest elementem podrzędnym drugiego. Pliki, które zaznaczyłem, mają pierwszeństwo.

Tak więc w powyższym przykładzie spójrzmy, które pliki szablonów byłyby używane do wyświetlania określonych typów treści:

• Pojedyncze posty dla niestandardowego typu posta „produkt” byłyby wyświetlane przy użyciu single-product.php z motywu potomnego.
• Pojedyncze posty dla innych typów postów (w tym zwykłych postów) byłyby wyświetlane przy użyciu single.php z motywu potomnego.
• Strony statyczne będą wyświetlane za pomocą page.php z motywu nadrzędnego.
• Listingi dla kategorii widżetów będą wyświetlane przy użyciu category-widgets.php z motywu potomnego.
• Inne wykazy kategorii byłyby wyświetlane przy użyciu category.php z motywu nadrzędnego.
• Inne wykazy archiwów byłyby wyświetlane przy użyciu archive.php z motywu nadrzędnego.
• Wyniki wyszukiwania byłyby wyświetlane przy użyciu search.php z motywu nadrzędnego.
• Strony 404 będą wyświetlane przy użyciu 404.php z motywu nadrzędnego.
• Inne strony bez określonego pliku szablonu byłyby wyświetlane przy użyciu index.php z motywu potomnego.

Idąc dalej — zastępowanie funkcji motywu nadrzędnego

Oprócz nadpisywania lub uzupełniania plików CSS i/lub szablonów w motywie nadrzędnym, możesz użyć motywu potomnego, aby przesłonić funkcjonalność w motywie nadrzędnym lub dodać dodatkowe funkcje.

Ostrzeżenie! Jeśli jedyne, do czego używasz motywu potomnego, to dodanie dodatkowych funkcji, może lepiej napisać wtyczkę. Niestety pliki funkcji w motywach nadrzędnych i podrzędnych nie oddziałują w taki sam sposób jak arkusze stylów, w rzeczywistości działają w odwrotny sposób (wiem, że mylące). WordPress wywołuje funkcje z motywu nadrzędnego po funkcjach z motywu potomnego, co oznacza, że ​​mogą one zastąpić funkcje motywu potomnego. Wiem, że brzmi to trochę uciążliwie: stworzyłeś motyw potomny, ponieważ tego chcesz w swojej witrynie, prawda? Cóż, na szczęście istnieją sposoby, aby to przezwyciężyć. Pierwsza metoda to ta, której używasz w motywie potomnym, a to ustawienie priorytetu podczas dołączania funkcji do odpowiedniej akcji lub haczyków filtra. Drugi jest wykonywany w motywie nadrzędnym, a to po to, aby twoje funkcje były podłączane. Dojdę do tego za chwilę, ale najpierw spójrzmy na metodę w motywie potomnym.

Używanie priorytetu do zastąpienia funkcji motywu nadrzędnego

Aby aktywować każdą funkcję dodaną w motywie potomnym, musisz dołączyć ją do haka akcji lub haka filtra za pomocą add_action() lub add_filter() . Funkcje add_action() i add_filter() mają trzy parametry:

• $tag – unikalny identyfikator akcji lub hook filtra
• $function_to_add – nazwa Twojej funkcji
• $priority – priorytet, z jakim chcesz podpiąć swoją funkcję (o czym wkrótce)

Dzięki add_filter() możesz użyć czwartego opcjonalnego parametru, $arguments , ale nie jest to szczególnie istotne w przypadku motywów potomnych. W większości przypadków używane są tylko dwa pierwsze parametry (oba są wymagane), ale możesz użyć opcjonalnego parametru $priority , aby przesłonić funkcję z motywu nadrzędnego funkcją z motywu potomnego. Im wyższy priorytet, tym później się ładuje: wartość domyślna to 10 , więc jeśli motyw nadrzędny nie określa priorytetu, po prostu ustaw priorytet w motywie potomnym na liczbę wyższą niż 10. Przyjrzyjmy się, jak to Pracuje. Wyobraź sobie, że pracujesz z dzieckiem motywu HelpGuru i chcesz zastąpić funkcjonalność menu i dodać własne. Ten motyw zawiera funkcję ht_theme_setup() do ustawienia motywu (w tym rejestrowanie menu, dodawanie obsługi polecanych obrazów i nie tylko), która jest dołączona do haka działania after_setup_theme . Kod w pliku funkcji HelpGuru wygląda następująco:

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}
add_action( 'after_setup_theme', 'ht_theme_setup' );

Aby przesłonić elementy funkcji ht_theme_setup() (ale nie wszystkie: wkrótce do tego dojdziemy) w motywie potomnym, napisałbyś funkcję, która zastępuje elementy funkcjonalności dostarczanej przez HelpGuru i dołącza ją do akcji after_setup_theme hook, określając priorytet wyższy niż 10:

function my_theme_setup() {
// contents of function
}
add_action( 'after_setup_theme', 'my_theme_setup', 15 );

Kiedy WordPress napotka te funkcje dołączone do tego samego haka, najpierw uruchomi funkcję o niższym priorytecie, czyli tę z motywu nadrzędnego. Następnie uruchomi ten o wyższym priorytecie z motywu potomnego, co oznacza, że ​​może zastąpić funkcję z motywu nadrzędnego. Jak wspomniałem powyżej, istnieje inna metoda, którą dobrze jest zapisać w swoich motywach, aby można je było łatwiej używać jako motywów nadrzędnych, a to ma na celu umożliwienie podłączania funkcji.

Używanie funkcji podłączanych do zezwolenia na nadpisanie motywu potomnego

Ponieważ WordPress przekazuje funkcję w motywie nadrzędnym po funkcjach w motywie potomnym, możesz zakodować funkcje motywu nadrzędnego, aby sprawdzały funkcję o tej samej nazwie w motywie potomnym, a jeśli taka istnieje, funkcja motywu nadrzędnego nie jest przeszedł. Robisz to za pomocą instrukcji warunkowej, takiej jak ta, którą widzieliśmy powyżej w HelpGuru:

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}

Jeżeli żadna funkcja o tej samej nazwie nie została już przekazana (np. w motywie potomnym), to zostanie przekazana funkcja z motywu nadrzędnego. Ale jeśli WordPress napotkał już funkcję o tej nazwie, zignoruje funkcję podłączaną (tj. tę w motywie nadrzędnym). Aby to zadziałało, po prostu utwórz funkcje w motywie potomnym o tej samej nazwie, co te w motywie nadrzędnym, które chcesz zastąpić. Więc aby całkowicie zastąpić funkcję ht_theme_setup() , użyjesz tego w swoim motywie potomnym:

function ht_theme_setup() {
// contents of function
}

Otóż ​​to! Po prostu napisz inną funkcję o tej samej nazwie, a zastąpi ona funkcję z motywu nadrzędnego. Uwaga: Ta technika zadziała tylko wtedy, gdy tworzysz własny motyw nadrzędny — nie ulegaj pokusie edytowania pliku funkcji w motywie nadrzędnym innej firmy, aby można je było podłączyć. W końcu cały sens tworzenia motywu potomnego polega na tym, aby nie dotykać rodzica!

Streszczenie

Jak mam nadzieję, pokazałem, praca z motywami potomnymi może zwiększyć Twoją wydajność i skuteczność jako programisty WordPress, zwłaszcza jeśli tworzysz niestandardowe witryny dla klientów lub dla siebie. Przynajmniej użycie motywu potomnego istniejącego motywu, takiego jak jeden z naszych motywów HeroThemes, może przyspieszyć i wydajniej pracować przy programowaniu, ponieważ pozwala to uniknąć ciągłego wykonywania tej samej pracy.

Możesz pójść dalej, używając plików szablonów motywu podrzędnego i pliku funkcji, aby zastąpić lub uzupełnić funkcje motywu nadrzędnego. A jeśli naprawdę chcesz maksymalnie wykorzystać motywy potomne, możesz zbudować własny motyw nadrzędny, co da ci szybki punkt wyjścia do wszystkich nowych projektów i pozwoli dodać o wiele więcej do motywów potomnych przy mniejszym wysiłku niż zaczynanie od zera .