Kompletny przewodnik po motywach WordPress dla dzieci

Czy kiedykolwiek znalazłeś niemal idealny motyw WordPress dla swojej witryny, ale zdecydowałeś się go nie używać ze względu na mały, denerwujący element projektu, którego nie możesz przeoczyć? Może to styl czcionki, paleta kolorów, a może rozmieszczenie elementów projektu ?

Rynek motywów WordPress jest nasycony tak wieloma świetnymi motywami, zarówno darmowymi, jak i premium, ale poza zatrudnieniem programisty do stworzenia dostosowanego motywu dla Twojej witryny, istnieje niewielka szansa, że ​​znajdziesz taki, który będzie idealny do ostatniego piksela.

Motywy potomne WordPress umożliwiają webmasterom modyfikowanie plików motywu przy zachowaniu jego podstawowej funkcjonalności bez ryzyka utraty modyfikacji za każdym razem, gdy motyw jest aktualizowany. Dają one możliwość modyfikowania wyglądu motywu od czegoś tak małego jak wezwanie do działania przycisku do całkowitej zmiany każdego elementu projektu.

W tym artykule znajdziesz wszystko, co musisz wiedzieć o motywach potomnych, od tego, czym są, po dlaczego są tak ważne. Podsumujemy samouczek dotyczący korzystania z motywów podrzędnych w witrynie WordPress – we właściwy sposób.

Brzmi dobrze? Zacznijmy!

Motywy potomne WordPress: podstawy

Motywy potomne to oddzielne motywy, które aktywnie dziedziczą funkcjonalność swoich motywów nadrzędnych. Funkcjonalność motywu potomnego zastępuje funkcję motywu nadrzędnego, co oznacza, że ​​funkcjonalność motywu potomnego zostanie zastosowana w witrynie internetowej. Po aktywowaniu motywu potomnego WordPress sprawdzi, czy ma określoną funkcjonalność. Jeśli jednak funkcja nie istnieje, zajrzy do plików rodzica i pójdzie z tym, który jest tam zakodowany.

W prostym języku angielskim motywy potomne są duplikatami plików motywów i za każdym razem, gdy czujesz potrzebę zmodyfikowania aspektów projektu lub niektórych funkcji, edytujesz je w plikach motywu potomnego. Jest to świetna funkcja, ponieważ umożliwia webmasterom wprowadzanie zmian w motywie bez ciągłego strachu przed zepsuciem oryginalnych plików.

Większość motywów WordPress obecnie zawiera motywy potomne (lub odmiany ich motywów potomnych) od razu po wyjęciu z pudełka.

Dlaczego warto używać motywów potomnych?

Dokonywanie modyfikacji i zmian w motywie za pomocą motywów podrzędnych jest powszechnie akceptowaną (i zalecaną) najlepszą praktyką. Pomyśl o tym w ten sposób: jeśli nawalisz za pierwszym razem, zawsze możesz spróbować ponownie. Oprócz tej znaczącej korzyści motywy potomne są ważne dla utrzymania i rozwoju witryny WordPress.

Wyeliminuj ryzyko utraty modyfikacji

Dokonywanie zmian w motywie nadrzędnym (oryginalnych plikach motywu) oznacza, że ​​zmiany zostaną utracone po aktualizacji motywu. To pozostawia cię w ślepym zaułku; jeśli zaktualizujesz motyw, stracisz wszystkie modyfikacje, ale jeśli nie zaktualizujesz motywu, będziesz mieć błędy rezydujące w Twojej witrynie, które mogą mieć na nią negatywny wpływ.

Możesz skopiować i wkleić kod powiązany z modyfikacjami do motywu nadrzędnego po zakończeniu aktualizacji. Chociaż jest to całkowicie możliwe, po co tracić czas na lokalizowanie wprowadzonych modyfikacji i kopiowanie i wklejanie ich do zaktualizowanych plików motywu za każdym razem, gdy aktualizujesz motyw? To łatwy, ale zawodny proces.

Tutaj po raz pierwszy uświadamia się znaczenie tematów potomnych. Korzystając z motywów podrzędnych, możesz zachować wszystkie modyfikacje i bezpiecznie aktualizować motyw witryny.

Utrzymuj organizację kodu

Motyw WordPress zazwyczaj składa się z kilku tysięcy wierszy kodu i kilku różnych plików – HTML, CSS, PHP, JavaScript i innych. Z tego powodu wszelkie drobne zmiany wprowadzane tu i tam stają się trudne do wyśledzenia. Kiedy nadejdzie czas, aby wrócić i edytować motyw lub naprawić nieoczekiwane błędy, okaże się to dość kosztowne (zarówno pod względem czasu, jak i budżetu).

Jak omówiono powyżej, motywy potomne są aktywnie dziedziczone z motywów nadrzędnych. Wszelkie zmiany wprowadzone w motywie potomnym pozostają tam (to, co dzieje się w motywach potomnych, pozostaje w motywach potomnych!) i są łatwiejsze do śledzenia, ponieważ będzie miał tylko kilkaset wierszy kodu (w najbardziej agresywnych okolicznościach) w przeciwieństwie do kilka tysięcy.

Jak już zapewne wiesz, korzystanie z motywów potomnych nie ma żadnych wad. W rzeczywistości chronią Twoją witrynę przed przypadkowymi błędami.

Jak stworzyć motyw potomny w WordPress

Większość motywów zawiera motywy potomne, ale jeśli znajdziesz taki, który Ci się nie podoba, samodzielne utworzenie motywu potomnego nie jest trudne. Zademonstruję samouczek, tworząc motyw potomny dla naszego motywu Sparkling.

Krok 1: Utwórz katalog dla motywu potomnego w instalacji WordPressa.

1. Przejdź do katalogu motywów witryny WordPress ( /wp-content/themes ).
2. Utwórz nowy folder i nazwij go sparkling-child . Najlepszą praktyką jest nadanie motywowi potomnemu takiej samej nazwy, jak rodzic, z dodanym na końcu -child .

Do tego folderu dodamy wszystkie pliki motywu podrzędnego. To powiedziawszy, jedynym plikiem wymaganym do prawidłowego działania motywu potomnego jest plik style.css .

Krok 2: Utwórz plik style.css dla nowego motywu podrzędnego.

1. Przejdź do katalogu motywu potomnego utworzonego w kroku 1, tj. /wp-content/themes/sparkling-child .
2. Utwórz nowy plik .css w katalogu i nazwij go style.css .
3. Skopiuj i wklej następujący kod do nowego pliku style.css :

W powyższym kodzie najważniejszymi wierszami są te, które zaczynają się od Theme Name , Template i @import . Musisz poprawnie wypełnić te wiersze, jeśli tworzysz motyw potomny dla innego motywu nadrzędnego. Wiersz @import gwarantuje, że nie musisz przepisywać od podstaw reguł CSS motywu nadrzędnego. Bez wiersza @import nowa witryna będzie miała wczytaną tylko zawartość, bez stylizacji.

Jeśli motyw nadrzędny zawiera wiele arkuszy stylów, pomiń ten krok. W poniższych krokach pokażemy, jak zaimportować wiele arkuszy stylów za pomocą natywnej funkcji WordPress.

Krok 3: Utwórz plik functions.php (opcjonalnie).

Plik functions.php umożliwia programistom internetowym dodawanie funkcji do ich witryn WordPress za pomocą natywnych funkcji WordPress i kodu PHP.

1. Przejdź do folderu motywu potomnego, tj. musujące-dziecko .
2. Utwórz plik .php i nazwij go functions.php .
3. Dodaj następujący kod do pliku functions.php:

Należy zauważyć, że motyw potomny nie wymaga do działania pliku functions.php . W rzeczywistości powinieneś dodać ten plik tylko wtedy, gdy zamierzasz zmodyfikować funkcjonalność motywu nadrzędnego. W większości przypadków wystarczy arkusz stylów, ale jeśli motyw nadrzędny zawiera wiele arkuszy stylów, będziesz musiał utworzyć plik functions.php .

Krok 4: Importuj wiele arkuszy stylów (opcjonalnie).

Jeśli na przykład wybrany motyw nadrzędny zawiera więcej niż jeden arkusz stylów, zaimportowanie ich do motywu podrzędnego @import spowolni Twoją witrynę o kilka sekund – co nie jest dobre. Nie chcesz wydłużać czasu ładowania strony swojej witryny, jeśli można tego uniknąć za pomocą kilku linijek kodu.

1. Przejdź do katalogu motywu potomnego i otwórz plik functions.php w edytorze tekstu.
2. Dodaj następujące wiersze kodu do pliku functions.php pod otwierającym tagiem <?php :

Funkcja wp_enqueue_style() użyta w powyższym kodzie zaimportuje wiele arkuszy stylów do motywu podrzędnego bez spowalniania witryny.

Uwaga: Najlepsze praktyki tworzenia motywów potomnych sugerują, że zawsze należy je importować za pomocą kodu podanego powyżej, niezależnie od tego, ile arkuszy stylów ma motyw nadrzędny.

Krok 5: Prześlij motyw potomny.

Po pomyślnym utworzeniu motywu podrzędnego nadszedł czas, aby przesłać go do witryny WordPress i aktywować.

1. Skompresuj katalog motywu podrzędnego do pliku .zip .
2. Zaloguj się do panelu administracyjnego WordPress i przejdź do Wygląd > Motywy .
3. Kliknij przycisk Dodaj nowy na następnym ekranie.

Możesz również przesłać motyw potomny za pośrednictwem klienta FTP, bezpośrednio kopiując plik .zip wklejając go do katalogu motywów. Jeśli tworzysz motyw potomny dla innego motywu, wprowadź niezbędne zmiany w powyższym kodzie.

Ten samouczek ma na celu jedynie zademonstrowanie, jak tworzony jest motyw podrzędny. Stworzyliśmy motyw potomny dla Sparkling, który możesz pobrać bezpośrednio, jeśli nie chcesz tracić czasu na tworzenie własnego.

Dostosowywanie motywu potomnego

Zakładając, że wszystko poszło zgodnie z planem, po aktywacji motywu potomnego Twoja witryna powinna wyglądać tak samo, jak po aktywowaniu motywu nadrzędnego. Ale trzymaj się! Czy nie chodzi o stworzenie motywu potomnego, aby Twoja witryna wyglądała inaczej?

W tej sekcji pokażemy, jak rozpocząć dostosowywanie motywu potomnego w celu wprowadzenia modyfikacji.

Stosowanie stylów niestandardowych

Ponieważ pierwszym plikiem (i plikiem obowiązkowym), który utworzyliśmy, był style.css , sensowne jest tylko rozpoczęcie od dodania niestandardowych stylów do motywu potomnego, który go używa. Dodając niestandardowy kod CSS do arkusza stylów, będziesz mógł zastąpić arkusz stylów motywu nadrzędnego.

Dzięki CSS możesz modyfikować każdy aspekt projektu i stylizacji aktywowanego motywu, od kolorów i przycisków po wymiary i style czcionek. Twórcy stron internetowych z prawdziwym zacięciem do CSS modyfikują cały układ motywu potomnego, aby był jedyny w swoim rodzaju.

Wszystko, co musisz zrobić, to dodać niestandardowy kod CSS na dole pliku style.css motywu podrzędnego i gotowe. Ci z was, którzy nie chcą uzyskiwać dostępu do klienta FTP swojej witryny za każdym razem, gdy trzeba wprowadzić prostą zmianę, mogą przejść do domyślnego edytora WordPressa ( Wygląd > Edytor ) i bezpośrednio stamtąd dodać kod CSS. Przejdź do Wygląd > Edytor i bezpośrednio stamtąd dodaj kod CSS.

Wszystko, co musisz zrobić, to dodać niestandardowy kod CSS na dole pliku motywu potomnego i gotowe.

Alternatywne techniki modyfikacji motywu

Dodanie kodu CSS do pliku style.css to najprostszy sposób na wprowadzenie modyfikacji w motywie potomnym. Jeśli jednak chcesz przenieść sprawy na wyższy poziom i być może dodać nową, niestandardową funkcjonalność do motywu potomnego, wtedy sprawy stają się poważne. Istnieją różne rodzaje modyfikacji, które możesz wprowadzić (poza zmianą elementów projektu), takie jak:

• Dodaj nowe funkcje do pliku functions.php . Stworzyliśmy już plik functions.php dla motywu potomnego, więc wszystko, co musisz teraz zrobić, to dodać do niego kilka niestandardowych funkcji w zależności od funkcjonalności, którą chcesz osiągnąć. Możesz kodować w PHP lub korzystać z natywnych funkcji WordPressa.
• Edytuj pliki szablonów. Jeśli style.css i functions.php po prostu go nie wycinają i nadal musisz zmodyfikować motyw, możesz skopiować i wkleić pliki szablonów z motywu nadrzędnego i odpowiednio je edytować.
• Dodaj nowe pliki szablonów. Jeśli znalazłeś szablony, które lubisz w innym miejscu (nie w katalogu motywu nadrzędnego) lub jeśli chcesz utworzyć własne szablony, możesz dodać je bezpośrednio do motywu potomnego i stamtąd przejść.

Możesz mieć pewność, że Twoja witryna WordPress będzie bezpieczna przed szkodliwymi, niezamierzonymi błędami, niezależnie od metod, które zastosujesz, aby dokonać modyfikacji aktywowanego motywu. Jeśli zdarzy się, że coś z kodem pójdzie nie tak, będziesz dokładnie wiedział, gdzie wystąpił błąd i będziesz mógł go poprawić. (Wskazówka: zwykle znajduje się w ostatnich dodanych wierszach!)

Jedną z najlepszych rzeczy w motywach potomnych jest to, że umożliwiają użytkownikom pełne dostosowanie motywu nadrzędnego do marki ich witryny, co jest szczególnie przydatne zarówno dla nowych, jak i istniejących firm. A jeśli chcesz później całkowicie przeprojektować swoją witrynę w oparciu o ten sam motyw nadrzędny lub nowy motyw nadrzędny, zawsze możesz utworzyć nowy motyw potomny i stamtąd!

Zawijanie tego

Motywy potomne to zalecany sposób wprowadzania zmian w motywie WordPress. Oszczędzają użytkownikom popełniania potencjalnie szkodliwych błędów w oryginalnych plikach motywów i ryzykują utratę modyfikacji za każdym razem, gdy motyw jest aktualizowany.

Omówiliśmy wszystko, co musisz wiedzieć o motywach podrzędnych w WordPressie, omówiliśmy, dlaczego są one tak ważne, i przeprowadziliśmy Cię przez dogłębny samouczek dotyczący tworzenia od podstaw własnego motywu podrzędnego. Aby pomóc Ci rozpocząć wprowadzanie modyfikacji, zakończyliśmy krótką sekcją dotyczącą dostosowywania motywu potomnego.

Czy zgadzasz się, że wszystkie modyfikacje projektu i funkcjonalności powinny być dokonywane za pomocą motywów podrzędnych? Czy udało Ci się stworzyć motyw potomny i aktywować go pomyślnie w swojej witrynie WordPress? Chętnie poznamy Twoje wrażenia, więc daj nam znać, komentując poniżej!