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ć z powodu malutkiego, denerwującego elementu 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 przez cały czas zachowując jego podstawową funkcjonalność 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 na przycisku do całkowitej zmiany każdego elementu projektu.

W tym artykule omówimy 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 we własnej witrynie WordPress – we właściwy sposób.

Brzmi dobrze? Zacznijmy!

Motywy potomne WordPress: podstawy

Motywy podrzędne to oddzielne motywy, które aktywnie dziedziczą funkcjonalność swoich motywów nadrzędnych. Po aktywowaniu motywu potomnego WordPress sprawdzi, czy ma w nim zakodowaną konkretną funkcjonalność. Funkcjonalność motywu potomnego zastępuje funkcję motywu nadrzędnego, co oznacza, że ​​funkcjonalność motywu potomnego zostanie zastosowana w witrynie internetowej. 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 obawy o zepsucie oryginalnych plików.

Większość motywów WordPressa jest obecnie dostarczana z motywami potomnymi (lub odmianami 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 zepsujesz za pierwszym razem, zawsze możesz spróbować ponownie. Oprócz tej znaczącej korzyści, motywy potomne mają duże znaczenie dla utrzymania i rozwoju witryny WordPress.

Wyeliminuj ryzyko utraty modyfikacji

Dokonywanie zmian w motywie nadrzędnym (oryginalnych plikach motywu) oznacza, że ​​po aktualizacji motywu zmiany zostaną utracone. 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żna argumentować, że możesz po prostu skopiować i wkleić kod zwią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. Używając 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ówiliśmy powyżej, motywy potomne są aktywnie dziedziczone po motywach 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, to samo 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 swojej instalacji WordPress.

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 :

https://gist.github.com/rafaysansari/59ab402cffc540d050ed

W powyższym kodzie najważniejszymi wierszami są te, które zaczynają się od Theme Name , Template i @import . Bardzo ważne jest prawidłowe wypełnienie tych wierszy, 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:

https://gist.github.com/rafaysansari/6c3cc1606823d56388f4

Należy zauważyć, że motyw potomny nie wymaga do functions.php 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 za pomocą @import spowolni Twoją witrynę o kilka sekund – co nie jest dobre. Nie chcesz wydłużać czasu ładowania strony w witrynie, 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 :

https://gist.github.com/rafaysansari/9535343506d670226f4e

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 niezależnie od tego, ile arkuszy stylów ma motyw nadrzędny, zawsze należy je importować, korzystając z kodu podanego powyżej.

Krok 5: Prześlij motyw podrzędny.

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.

   

4. Kliknij przycisk Prześlij motyw , aby kontynuować.

   

5. Wyszukaj plik .zip motywu podrzędnego i prześlij go.
6. Po przesłaniu motywu podrzędnego kliknij Aktywuj .

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, upewnij się, że dokonałeś niezbędnych zmian w powyższym kodzie.

Ten samouczek ma tylko zademonstrować, 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ć dokładnie 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 stworzyliś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ć prawie 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.

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ć (oprócz zmiany elementów projektu), takie jak:

• Dodaj nowe funkcje do pliku functions.php . Stworzyliśmy już plik functions.php dla Twojego 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 w stanie go poprawić. (Wskazówka: zwykle znajduje się w ostatnich dodanych wierszach!)

Jedną z najlepszych cech motywów 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 It

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 potomnych 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 potomnego. 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? Chcielibyśmy usłyszeć o Twoim doświadczeniu, więc daj nam znać, komentując poniżej!