Jak stworzyć motyw potomny WordPress

Zwykle znalezienie idealnego motywu jest prawie niemożliwe; zawsze trzeba dokonać pewnych modyfikacji. Dlaczego więc nie wziąć fajnego domyślnego motywu WordPress, takiego jak Twenty Fifteen, i uczynić go własnym, aby wyglądał i działał dokładnie tak, jak chcesz? Tworzenie motywu potomnego pozwoli Ci zaoszczędzić mnóstwo czasu i bólu głowy (zaufaj mi).

Mogę mówić z własnego doświadczenia. „Odziedziczyłem” witrynę WordPress, w której programista właśnie zhakował motyw nadrzędny, i nadal pamiętam, jak frustrujące było to, że nie mogłem zaktualizować motywu w obawie, że nada on funkcjonalności witryny. Nie wiedziałem, co to był oryginalny kod, a co niestandardowy, więc tak się stało, bez możliwości aktualizacji.

Historia ma jednak szczęśliwe zakończenie. Byłem wtedy nowszy w WordPressie, więc nauczyło mnie to wcześnie, że zmiana motywu nadrzędnego nie jest dobrym pomysłem. Kiedy strona została ostatecznie przeprojektowana, pierwszym zadaniem było wzięcie dostosowań i umieszczenie ich w motywie potomnym.

Motyw potomny umożliwia pracę w osobnym miejscu bez zastępowania Twojej pracy przez przyszłą aktualizację motywu nadrzędnego. Z technicznego punktu widzenia, tworząc motyw podrzędny, tworzysz osobny zestaw plików, których możesz użyć do dostosowania motywu bez wpływu na oryginalny motyw nadrzędny. Jeśli wprowadzisz zmiany w plikach motywu nadrzędnego, te zmiany zostaną nadpisane przy następnej aktualizacji motywu. To wielka sprawa, ponieważ aktualizacje mogą obejmować modyfikacje funkcji, poprawki błędów i ważne środki bezpieczeństwa. Bardzo ważne jest, aby motyw nadrzędny był aktualny i używał motywu podrzędnego do wszelkich dostosowań.

Podstawy tematu potomnego

Motywy potomne to oddzielne motywy, które tworzysz, a ich podstawowa funkcjonalność opiera się na motywie nadrzędnym. Kiedy używasz motywu potomnego, WordPress wie, jak się do niego odwoływać i szukać zawartych w nim funkcji. Jest to świetne, ponieważ pozwala modyfikować tylko te części motywu rodziców, które musisz zmienić, co czyni go bardzo skutecznym sposobem dodawania dostosowań do witryny WordPress.

Aby zagłębić się nieco głębiej, oto jak działają motywy potomne na poziomie plików. WordPress sprawdza, czy potrzebny plik jest zawarty w motywie potomnym. Jeśli jest dołączony, ładowany jest plik motywu potomnego. Jeśli nie ma takiego w motywie potomnym, ładowany jest plik w motywie nadrzędnym. Jedynym wyjątkiem jest plik functions.php, w którym ładowana jest zarówno wersja nadrzędna, jak i podrzędna. Zazwyczaj kluczowe informacje znajdują się w pliku functions.php. Gdyby WordPress załadował tylko wersję motywu potomnego (chyba że skopiowałeś wszystko), witryna nie działałaby poprawnie. Na szczęście WordPress ładuje oba pliki, więc nie musisz się martwić o skopiowanie całego pliku functions.php do motywu potomnego.

Pamiętaj, że zawsze możesz wyłączyć motyw potomny i w razie potrzeby wrócić do oryginału. Jest to jednak ulica jednokierunkowa; nie możesz wyłączyć rodzica i polegać na motywie potomnym.

Jeśli dodajesz dostosowania do motywu WordPress, najlepiej użyć motywu podrzędnego. Gotowy do stworzenia własnego? Teraz przejdziemy przez ten proces krok po kroku.

Tworzenie motywu potomnego

Stworzenie takiego nie jest tak skomplikowane, jak mogłoby się wydawać. Z technicznego punktu widzenia wszystko, czego potrzebujesz, to tylko dwa pliki: plik style.css i plik functions.php . Większość motywów potomnych ma więcej, ale technicznie rzecz biorąc, są to jedyne wymagane dwa.

Aby utworzyć motyw potomny, musisz mieć zainstalowany WordPress wraz z motywem nadrzędnym, którego chcesz użyć.

Utwórz katalog motywów

Najpierw przejdź do katalogu motywów i utwórz folder dla nowego motywu. Nadaj mu rozpoznawalną nazwę. W tym przykładzie nazwę mojego motywu child-example , aby łatwo go znaleźć.

Utwórz arkusz stylów motywu potomnego

Kolejnym, bardzo ważnym krokiem jest stworzenie arkusza stylów motywu potomnego. Utwórz plik style.css . Pamiętaj, że musi mieć nazwę style.css , aby wszystko działało prawidłowo.

Następnie musisz podać kilka informacji o swoim motywie.

Skopiuj i wklej to do style.css file :

/*
 Theme Name:   Child Example
 Theme URI:    http://example.com/child-exxample/
 Description:  Child Example Twenty Fifteen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain:  twenty-fifteen-child
*/

Może to wyglądać na dużo, ale tak naprawdę potrzebne są tylko dwa, a mianowicie Theme Name i Template . Nazwa Theme Name mówi WordPressowi nazwę motywu potomnego. Template mówi WordPressowi, który motyw powinien uznać za motyw nadrzędny, co jest bardzo ważne.

Większość pozostałych jest dość oczywista, ale jest kilka, które mogą wymagać nieco więcej wyjaśnień. Text Domain i Tags mogą być nieco mylące. Text Domain służy do tłumaczenia ciągów znaków w celu internacjonalizacji. Jest to unikalne dla twojego motywu i powinno być używane za każdym razem, gdy używasz funkcji tłumaczenia. W Kodeksie jest dużo więcej informacji i można je znaleźć w temacie I18n dla programistów WordPress. Sekcja Tags to lista tagów, które są specyficzne dla motywu WordPress. W tym przykładzie spojrzałem na plik nadrzędny Twenty Fifteen style.css , pobrałem stamtąd tagi i umieściłem je w motywie potomnym.

Wykorzystaj style rodzicielskie

Pamiętasz, jak WordPress najpierw szuka plików motywów potomnych? W tej chwili motyw potomny działa, ale nie wygląda na bardzo dopracowany, ponieważ nie wykonałeś jeszcze żadnych stylizacji. Jeśli go aktywujesz i ponownie załadujesz stronę, będzie wyglądać trochę niechlujnie. Prawdopodobnie będzie to wyglądać mniej więcej tak:

Naprawmy to tak, aby wracał do motywu nadrzędnego i został zastosowany przynajmniej jakiś styl. Nadal będziesz używać motywu potomnego do niestandardowej stylizacji, ale najpierw pokażmy styl nadrzędny.

Aby upewnić się, że załadujesz arkusz stylów pliku nadrzędnego, będziemy musieli umieścić go w kolejce w motywie potomnym. Będziesz potrzebował pliku functions.php w motywie potomnym, aby umieścić w nim następujący fragment.

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Dostosowywanie CSS

Teraz, gdy wyświetlane są style nadrzędne, zmieńmy niektóre CSS w celu dostosowania motywu podrzędnego. W tym przykładzie stylizacja elementu tła dla zawartości strony to dobry sposób na zobaczenie działania motywu podrzędnego. Został stylizowany na biały w CSS motywu nadrzędnego, ale zmieńmy go na niebieski w motywie potomnym. Pamiętaj, że style nadrzędne są ładowane jako pierwsze, a twoje dostosowania zostaną załadowane później, więc to właśnie zobaczymy.

Jeśli jesteś użytkownikiem przeglądarki Chrome, narzędzia dla programistów są bardzo pomocne w sprawdzaniu stylizacji i eksperymentowaniu w przeglądarce. Przejdź do Widok > Deweloper > Wyświetl źródło i wybierz elementy strony. Style zostaną pokazane po prawej stronie. Sprawdziłem artykuł, który miał klasę .hentry z białym tłem. Wkleiłem wartość szesnastkową, aby najpierw przetestować ją w przeglądarce.

Aby wprowadzić tę zmianę, otwórz plik CSS w motywie podrzędnym i dodaj informacje CSS.

Jak widać, zmiany stylu można łatwo wprowadzić w motywie potomnym.

Modyfikowanie funkcjonalności motywu potomnego

Dostosowywanie stylu jest dość łatwe, ale co z innymi rzeczami, takimi jak nagłówek, stopka, pasek boczny itp.? Załóżmy, że w stopce trzeba wprowadzić pewne modyfikacje. Skopiuj i wklej stopkę z motywu nadrzędnego do dziecka. Plik footer.php można otworzyć w wybranym edytorze tekstu i zmodyfikować. Postanowiłem usunąć wiersz „Proudly powered by WordPress”, więc usunąłem go z pliku w moim motywie potomnym. Jest to teraz plik, który WordPress załaduje jako pierwszy, więc ten wiersz tekstu się nie pokaże.

Tworzenie motywu potomnego to dobry nawyk podczas tworzenia motywów WordPress. Wystarczy kilka prostych kroków, aby można je było łatwo stworzyć i utrzymać. Oddzielenie dostosowań od motywów nadrzędnych jest dobre zarówno dla celów organizacyjnych, jak i aktualizowania wszystkiego, co zaoszczędzi wiele bólu głowy w przyszłości.