Szybki przewodnik po tworzeniu i dostosowywaniu motywu potomnego WordPress

Chociaż tworzenie motywów może wydawać się przytłaczające, konfigurowanie motywów potomnych jest proste i jest to znacznie szybsza alternatywa dla tworzenia motywu od zera.

W tym poście przedstawię więcej szczegółów na temat motywów potomnych WordPress, a także jak skutecznie je tworzyć i dostosowywać.

Co to jest motyw potomny WordPress?

Przed określeniem, czym jest motyw potomny WordPress, ważne jest, aby najpierw zrozumieć, czym jest motyw WordPress i skąd WordPress czerpie informacje, aby wyświetlić projekt witryny.

Według WordPress Codex „Motyw to zbiór plików, które współpracują ze sobą, tworząc graficzny interfejs z ujednoliconym projektem dla bloga. Motyw modyfikuje sposób wyświetlania danych bez zmiany oprogramowania bazowego”.

Jeśli Twoja witryna WordPress ma jeden aktywny motyw ze wszystkimi wymaganymi szablonami i zasobami, nie ma rozróżnienia między motywem nadrzędnym a podrzędnym.

Jeśli jednak uznasz, że naprawdę podoba Ci się znaleziony motyw, ale chcesz wprowadzić w nim kilka zmian bez tworzenia motywu od zera, możesz utworzyć motyw potomny WordPress, który będzie służył temu celowi.

Motyw podrzędny dziedziczy strukturę oryginalnego motywu i zawiera tylko wprowadzone w nim dostosowania. Zamiast całkowicie zastępować motyw, motyw potomny modyfikuje lub dodaje pliki istniejącego motywu.

W ten sposób, gdy witryna zostanie załadowana dla użytkownika, oryginalny projekt motywu zostanie załadowany, ale ze zmianami, które w nim wprowadziłeś.

Dzieci w prawdziwym życiu – a nie w świecie online – są uzależnione od co najmniej jednej postaci rodzicielskiej. Podobnie, motyw potomny jest zależny od oryginalnego motywu, aby funkcjonować.

Dlatego gdy używasz motywu potomnego, oryginalny motyw jest nazywany motywem nadrzędnym.

W przeciwieństwie do ludzkiego niemowlęcia, motyw dziecięcy nie jest sam w sobie kompletnym tematem. Oznacza to, że motyw nadrzędny musi zostać zainstalowany, zanim będzie można aktywować odpowiadający mu motyw potomny.

Idealny motyw dziecięcy i kiedy go używać

Każdy motyw może być motywem nadrzędnym, ale niektóre lepiej do niego pasują.

Wybierz motyw, który Ci się podoba, aby można było użyć kilku niewielkich dostosowań strukturalnych, aby dopasować je do Twoich potrzeb, ale nie ma opcji umożliwiających dostosowanie, które chcesz od razu po wyjęciu z pudełka.

Na przykład motyw Perfect Magazine został użyty jako motyw nadrzędny do utworzenia motywu potomnego Newsliner, aby nie tylko zmienić niektóre kolory w projekcie, ale także usunąć baner reklamowy podczas dodawania karuzeli postów na blogu u góry strony.

Tego rodzaju dostosowania nie są możliwe w opcjach Perfect Magazine, ale nie są wystarczająco duże, aby uzasadnić stworzenie zupełnie nowego motywu od zera.

Po co tworzyć motyw potomny?

Motywy potomne WordPress są ważne dla zapisywania i zachowywania całej pracy, którą włożyłeś w witrynę. Jeśli zmodyfikujesz motyw bezpośrednio, a następnie zaktualizujesz go nową wersją oprogramowania, wszystkie modyfikacje i dostosowania zostaną utracone.

Dlatego wielu właścicieli witryn decyduje się w ogóle nie aktualizować swojego motywu nadrzędnego. Jest to jednak poważny problem bezpieczeństwa, ponieważ 54% zhakowanych witryn WordPress zawierało nieaktualne oprogramowanie, które hakerzy i złośliwe oprogramowanie często skanują w celu znalezienia.

Ponadto aktualizacje często zawierają poprawki luk w zabezpieczeniach, więc zignorowanie aktualizacji oznacza pozostawienie witryny szeroko otwartej na ataki.

Alternatywnie możesz utworzyć motyw potomny, aby uniknąć tych pułapek.

Jak wcześniej wspomniano, korzystanie z motywu potomnego WordPressa może również przyspieszyć rozwój.

Mając już skonfigurowane systemy plików i podstawowe elementy witryny, nie musisz zaczynać od zera. Możesz budować na istniejącym motywie i korzystać z funkcji, jednocześnie dostosowując jego projekt.

Pierwsze kroki z motywem potomnym WordPress

Jest kilka kluczowych elementów, których potrzebujesz, aby stworzyć motyw potomny:

1. Folder z katalogiem motywów
2. Plik style.css
3. Plik functions.php

Podczas gdy jedynym wymaganym plikiem w motywie potomnym jest style.css , plik functions.php jest potrzebny do prawidłowego zakolejkowania arkusza stylów motywu nadrzędnego.

Dlatego zdecydowanie zaleca się utworzenie pliku functions.php w motywie potomnym, aby uniknąć błędów.

Tworzenie motywu potomnego WordPress

Podczas tworzenia motywu potomnego WordPress, są cztery kroki, które są szczegółowo opisane poniżej: tworzenie folderu katalogu, tworzenie arkusza stylów, umieszczanie w kolejce nowego i nadrzędnego arkusza stylów oraz aktywacja motywu.

Tworzenie folderu katalogu

Wszystkie motywy znajdują się w folderze /wp-content/themes/ instalacji WordPress.

Przejdź do tego katalogu i utwórz nowy folder, który będzie służył jako folder motywu podrzędnego.

Zazwyczaj tytuł motywu jest zmieniany przy użyciu nazwy motywu nadrzędnego, ale dodając na końcu -child .

Na przykład dwie ścieżki plików to /wp-content/themes/yourtheme/ i /wp-content/themes/yourtheme-child/ .

W nazwie motywu potomnego nie powinno być również spacji.

Chociaż nie są to sztywne i szybkie zasady dotyczące nazywania folderu, zwłaszcza jeśli nie rozpowszechniasz motywu do użytku publicznego, jest to powszechna praktyka programistyczna WordPress, ponieważ pomaga w organizacji.

Tworzenie arkusza stylów

Motywy potomne WordPressa są często używane do dość obszernych edycji projektu, więc potrzebny jest osobny plik style.css .

Plik będzie zawierał wszystkie reguły CSS i deklaracje, które wpływają na wygląd Twojego motywu.

Utwórz plik style.css w katalogu głównym nowego folderu motywu podrzędnego. Następnie wprowadź ten nagłówek u góry strony:

 /*
 Nazwa motywu: dwadzieścia siedemnaście dzieci
 Motyw URI: http://example.com/dwadzieścia-siedemnaście-dziecko/
 Opis: Motyw dwudziestu siedemnastu dzieci
 Autor: Jane Doe
 URI autora: http://example.com
 Szablon: dwadzieścia siedemnaście
 Wersja: 1.0.0
 Licencja: Powszechna Licencja Publiczna GNU v2 lub nowsza
 URI licencji: http://www.gnu.org/licenses/gpl-2.0.html
 Tagi: jasny, ciemny, dwukolumnowy, prawy pasek boczny, responsywny układ, gotowy do ułatwień dostępu
 Domena tekstowa: dwadzieścia siedemnaście-dziecko
*/

Nagłówek jest istotną częścią pliku, ponieważ zawiera podstawowe informacje o motywie WordPress. Sygnalizuje również, że jest to motyw potomny z określonym rodzicem, jak wskazuje część Szablon .

Jedynymi wymaganiami dotyczącymi nagłówka są nazwa motywu i szablon . Ale najlepiej jest wypełnić resztę.

Pamiętaj, aby zmienić również wszystkie wymagane szczegóły, aby były dokładne. Na przykład identyfikator URI autora i autora, a także odwołania do dwudziestego siedemnastego, jeśli używany motyw nadrzędny jest inny.

Sekcja Tagi odnosi się do katalogu motywów WordPress. Jeśli chcesz przesłać tam swój motyw, wybierz tagi, które odnoszą się do Twojego motywu.

Umieszczanie w kolejce arkuszy stylów motywu rodzica i dziecka

Następnie ważne jest, aby upewnić się, że arkusz stylów każdego motywu ładuje się poprawnie w procesie zwanym kolejkowaniem.

Wstawić do kolejki oznacza dodanie elementu lub listy elementów do kolejki przetwarzania danych. W tym przypadku kolejka to pliki, które Twoja witryna musi załadować, gdy przeglądarka ich zażąda.

Jeśli miałbyś pominąć kolejkowanie, Twoja witryna pobierałaby tylko z arkusza stylów motywu podrzędnego i nie używałaby żadnego ze stylów zapewnianych przez motyw nadrzędny.

Warto również zauważyć, że możliwe jest umieszczenie w kolejce rodzica style.css przy użyciu metody @import . Ale nie jest to już zalecane ze względu na problemy z wydajnością.

Aby kolejkować arkusze stylów, musisz utworzyć plik functions.php , jeśli jeszcze tego nie zrobiłeś.

Można to zrobić, tworząc nowy plik i nazywając go functions.php . Następnie. umieść ten kod na samej górze:

 <?php

Pamiętaj, aby nie wstawiać spacji przed wierszem powyżej, ponieważ spowoduje to błąd.

W pliku functions.php dodaj poniższy kod, aby upewnić się, że Twoja witryna prawidłowo ładuje zarówno styl nadrzędny style.css , jak i styl.css motywu potomnego w odpowiedniej kolejności:

 add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

function my_theme_enqueue_styles() {

    $rodzic_; // To jest 'styl dwudziesty siedemnaście' dla tematu Twenty Seventeen.

    wp_enqueue_style( $ parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'styl-dziecko',
        get_stylesheet_directory_uri() . '/styl.css',
        tablica ($styl_nadrzędny ),
        wp_get_theme()->get('Wersja')
    );
}
?>

Upewnij się, że zmieniłeś styl nadrzędny przechowywany w zmiennej $parent-style , aby zawierał nazwę twojego motywu.

Zgodnie z zaleceniami Kodeksu WordPress, ten kod zapewni, że nadrzędny style.css zostanie załadowany jako zależność, co oznacza, że ​​jest wymagany do załadowania style.css motywu potomnego.

Aktywacja motywu potomnego

Po zapisaniu wszystkich plików przejdź do Wygląd> Motywy , aby znaleźć motyw podrzędny, a następnie kliknij przycisk Aktywuj.

Nie musisz też aktywować motywu nadrzędnego. Chociaż nadal powinien być zainstalowany i pozostać w folderze /wp-content/themes/ .

Tekst nagłówka w style.css motywu potomnego połączy te dwa elementy i wyjaśni związek dla Twojej instalacji WordPress.

Po aktywowaniu motywu potomnego może być konieczne ponowne zapisanie menu w opcji Wygląd > Menu , a także innej zawartości w Opcjach motywu dostosowania, jeśli wystąpią problemy z projektem.

Wskazówki dotyczące szybkiego dostosowywania

Zanim zaczniesz wdzierać się w proces tworzenia, poniżej znajdziesz kilka wskazówek dotyczących dostosowywania motywu potomnego WordPress.

Obraz motywu

Na stronie Wygląd > Motywy musisz dołączyć własny obraz do motywu.

Jeśli zamiast tego chcesz wstawić coś w celu zastąpienia pola w kratkę, możesz przesłać plik obrazu PNG o wymiarach 880 x 660 o nazwie screenshot.png .

Umieść obraz w katalogu głównym folderu motywu podrzędnego. W ten sposób instalacja WordPressa będzie wiedziała, że ​​użyje go jako obrazu dla twojego motywu.

Zastępowanie plików motywów nadrzędnych

Jeśli chcesz wstawić nowe pliki do motywu potomnego WordPress, aby zastąpić stare komponenty, skopiuj plik nadrzędny do motywu potomnego, który możesz następnie dostosować.

Podczas ładowania witryny WordPress sprawdzi, czy motyw potomny zawiera pliki odpowiadające motywowi nadrzędnemu. Jeśli jakieś zostaną znalezione, zastąpią plik oryginalnego motywu nadrzędnego.

To nie wymaga wioski

Tworzenie motywów potomnych WordPress nie musi być tak skomplikowane, jak mogłoby się wydawać. Wykonaj powyższe kroki i bądź pewien, że Twoje zmiany pozostaną nienaruszone. Dzięki temu Twoja witryna będzie trochę bezpieczniejsza.

Jaki motyw potomny chcesz stworzyć? Czy udało Ci się go stworzyć z sukcesem? Czy przy okazji napotkałeś kłopoty? Podziel się swoimi doświadczeniami w komentarzach poniżej.