Jak stworzyć Motyw Potomny WordPress

by Jason Cosper
Jak stworzyć Motyw Potomny WordPress thumbnail

Kiedy masz konkretne wymagania, wybór motywu WordPress nie jest łatwym zadaniem. Twój wybór musi wyglądać odpowiednio i zapewniać wszystkie potrzebne funkcje — Pewien kompromis jest niemal nieunikniony.

Dostosowywanie wybranego motywu to jeden ze sposobów, aby poradzić sobie z tym problemem. Jednak motywy WordPressa wymagają okresowej aktualizacji. Kiedy twórca twojego motywu wyda nową wersję, wszystkie twoje dostosowania mogą zostać zresetowane.

Rozwiązanie?

Stwórz motyw potomny WordPress, który dziedziczy funkcjonalność oryginalnego motywu, ale zachowuje twój styl. Nawet jeśli zastosujesz aktualizację motywu, twój dostosowany motyw potomny pozostanie nienaruszony.

W tym poście przyjrzymy się bliżej motywom potomnym WordPress — od tego, dlaczego są potrzebne, po to, jak stworzyć własny. Zanurzmy się!

Czym jest Motyw Potomny?

Słownik DreamHost

Motyw Potomny

Motyw potomny to motyw WordPress z takim samym wyglądem i funkcjonalnością jak jego u2018motyw nadrzędnyu2019. Jednak możesz dostosować jego pliki niezależnie od plików motywu nadrzędnego.

Czytaj więcej

WordPress pozwala na stworzenie lekkiej kopii dowolnego motywu w celu jego dostosowania. Oryginalny motyw staje się motywem nadrzędnym, a kopia jest znana jako motyw potomny.

Dziecko jest zależne od rodzica, czerpiąc z funkcji i projektu oryginalnego motywu. Kiedy motyw nadrzędny otrzymuje aktualizację, otrzymuje ją również dziecko.

Ale podobnie jak nastolatek, motyw potomny ma pewną niezależność. Gdy dostosowujesz motyw potomny, zmiany są nakładane na oryginalny motyw nadrzędny. Te dodatki pozostają, nawet gdy motyw nadrzędny jest aktualizowany lub zmieniany w jakiś inny sposób.

Warto również zauważyć, że modyfikacje w motywie potomnym nie wpływają na motyw nadrzędny. W rzeczywistości są przechowywane oddzielnie. Oznacza to, że masz wolność eksperymentowania, nie martwiąc się o uszkodzenie bazowego kodu. Możesz nawet usunąć swój motyw potomny całkowicie, a nie będzie to miało żadnego wpływu na oryginalny motyw nadrzędny.

Korzystanie z motywu potomnego ułatwia utrzymanie i aktualizację strony. Pomoże to również uniknąć ryzyka bezpośredniej edycji motywu nadrzędnego, który może zostać nadpisany i utracony.

Różnice między motywami potomnymi a nadrzędnymi

Słownik DreamHost

Motyw Nadrzędny

Pracując z motywami potomnymi WordPressa, zawsze istnieje motyw nadrzędny. To motyw, od którego dziecko dziedziczy swój styl i funkcjonalność. Żadne zmiany wprowadzone w motywie potomnym nie wpłyną na kod motywu nadrzędnego.

Czytaj więcej

Istnieje kilka technicznych różnic między motywem nadrzędnym a motywem potomnym. Na przykład, folder motywu nadrzędnego zazwyczaj zawiera:

  • Plik style.css , który określa wygląd i działanie Twojej strony internetowej.
  • Plik functions.php , który umożliwia dodawanie funkcji lub modyfikowanie domyślnego zachowania WordPress.
  • Kilka plików szablonów, które definiują sposób wyświetlania różnych stron na Twojej witrynie.

W przeciwieństwie, folder motywu potomnego wymaga tylko dwóch niezbędnych plików: style.css i functions.php. Dodasz te pliki w katalogu /wp-content/themes/.

Możesz użyć motywu potomnego, aby dokonać zmian stylistycznych na swojej stronie internetowej, takich jak zmiana domyślnej palety kolorów, czcionek i układów.

Na przykład, załóżmy, że chcesz zmienić schemat kolorów swojej strony. Możesz to zrobić, tworząc nowy plik style.css w katalogu motywu potomnego i dodając następujący kod:

body {

background-color:#fff;

}

h1 {

color: #000

}

Zmieniliśmy kolor tła i kolor H1 w powyższym kodzie. Te zmiany zastąpią stylizację motywu nadrzędnego i zaktualizują kolory na Twojej stronie. Możesz dokonać tylu zmian, ile potrzebujesz, w pliku style.css motywu potomnego.

Motyw potomny dziedziczy wszystko po motywie nadrzędnym. Obejmuje to wszystkie pliki szablonów, funkcje oraz zasoby takie jak obrazy i pliki JavaScript. Jeśli chcesz dokonać zmian w tych elementach, musisz skopiować je do katalogu motywu potomnego z motywu nadrzędnego. Następnie możesz edytować te pliki.

Dlaczego powinieneś używać motywu potomnego

Istnieje kilka zalet używania motywu potomnego na Twojej stronie WordPress, w tym:

  • Ochrona zmian motywów przed automatycznymi aktualizacjami.
  • Dostosowywanie elementów wizualnych twojego motywu.
  • Nauka edytowania motywów, co jest krokiem w kierunku tworzenia własnego motywu.

Korzystanie z motywu potomnego wymaga minimalnego doświadczenia w kodowaniu. W większości przypadków wystarczy dodać kilka linii kodu do pliku style.css. Umożliwia to łatwe rozpoczęcie pracy z motywem potomnym, nawet jeśli nie jesteś deweloperem motywów.

Jeśli chcesz zgłębić temat, możesz dodać nowe elementy i funkcje do swojego motywu potomnego za pomocą niestandardowego kodu.

Otrzymuj treści bezpośrednio do swojej skrzynki odbiorczej

Zapisz się teraz, aby otrzymywać wszystkie najnowsze aktualizacje bezpośrednio do swojej skrzynki odbiorczej.

Jak Stworzyć Motyw Potomny WordPress za Pomocą Dodatku

Korzystanie z pluginu to prawdopodobnie najłatwiejszy sposób na stworzenie motywu potomnego WordPress. Plugin przeprowadzi Cię przez cały proces w prostych krokach, co oznacza, że nie potrzebujesz żadnej wiedzy technicznej.

W tym samouczku będziemy pracować z pluginem Child Theme Configurator. To przyjazne użytkownikowi narzędzie może pomóc Ci analizować Twój motyw pod kątem problemów, tworzyć motyw potomny i edytować go, aby spełniał specyfikacje układu i stylu Twojej strony internetowej.

Krok 1: Pobierz i zainstaluj wtyczkę Child Theme Configurator

Aby rozpocząć, musisz pobrać i zainstalować Konfigurator Motywów Potomnych. Możesz to zrobić, przechodząc na stronę wtyczki i klikając przycisk Pobierz:

Zrzut ekranu przycisku pobierania Konfiguratora Motywów Potomnych firmy Lilaea Media

Twój komputer pobierze pliki motywu w pliku ZIP. Następnie przejdź do panelu WordPress i przejdź do Plugins > Add New, aby przesłać pliki.

Kliknij na Upload Plugin > Choose File, i wybierz pobrany folder:

Dodaj pluginy "upload plugin" zrzut ekranu, gdzie można przesłać plik .zip

Po zainstalowaniu pluginu wystarczy go aktywować. Pamiętaj również, że musisz wybrać motyw WordPress, z którego utworzysz swój motyw potomny.

Krok 2: Analizuj Motyw Nadrzędny

Następnie przejdź do Narzędzia > Motywy Potomne:

menu wordpress pokazujące pasek nawigacyjny, gdzie można znaleźć "motywy potomne" w "narzędziach"

Plugin poprowadzi Cię przez kroki tworzenia motywu potomnego. Wystarczy wybrać UTWÓRZ nowy Motyw Potomny, aby rozpocząć:

zrzut ekranu pierwszego kroku: wybierz akcję z zaznaczonym „utwórz nowy motyw potomny”

Zostaniesz poproszony o wybranie motywu nadrzędnego z menu rozwijanego. Jeśli masz wiele motywów na swojej stronie WordPress, upewnij się, że wybierasz ten, który chcesz dostosować:

krok 2: wybierz motyw nadrzędny przedstawiający pasek wyszukiwania, w który wpisano „Twenty Twenty-Four” i wyświetlający wszystkie cztery wersje Twenty Twenty jako wyniki wyszukiwania

Teraz kliknij Analyze, aby sprawdzić motyw nadrzędny pod kątem potencjalnych problemów z kodem:

krok 2: analizuj motyw nadrzędny

Jeśli wtyczka znajdzie jakiekolwiek problemy z kompatybilnością lub kodowaniem, zostaną one wymienione tutaj. W przeciwnym razie zobaczysz zielony komunikat o sukcesie informujący, że możesz bezpiecznie przejść do tworzenia motywu potomnego:

zrzut ekranu strony analizy pokazującej znacznik zaznaczenia, że ten motyw wydaje się być odpowiedni do użycia jako motyw potomny oraz odpowiedni kod

Gdy już ustalisz, że Twój motyw nadrzędny nadaje się na motyw potomny, możesz przejść do następnego kroku. (Możesz także wyświetlić analizę surowych danych lub przesłać prośby o wsparcie do twórcy wtyczki z tej strony.)

Krok 3: Nadaj Nazwę Katalogowi Twojego Motywu Potomnego

Następnie zostaniesz poproszony o utworzenie nazwy katalogu motywu potomnego. Jest to nazwa folderu w plikach twojej strony internetowej.

Możesz nazwać to dowolnie, pod warunkiem że nazwa będzie unikalna dla twojej strony i zawiera akceptowalne znaki. Używamy „twentytwentyfour-child” dla uproszczenia:

Możesz nazwać motyw potomny jak tylko chcesz, pod warunkiem, że jest unikalny dla Twojej strony i zawiera dozwolone znaki.

Pamiętaj, że nazwanie katalogu motywu nie jest tym samym, co nadanie nazwy motywowi potomnemu lub dodanie opisu motywu. Te kroki nastąpią później.

Krok 4: Wybierz Arkusze Stylów Dla Motywów Potomnych i Nadrzędnych

Następnie musisz wybrać nowy arkusz stylów dla swojego motywu potomnego. Jeśli wybierzesz główny arkusz stylów (style.css), Twoje niestandardowe style CSS zastąpią istniejącą zawartość motywu.

Słownik DreamHost

CSS

Cascading Style Sheets (CSS) to niezbędny język kodowania używany do stylizowania stron internetowych. CSS pomaga tworzyć piękne strony, modyfikując wygląd różnych elementów, w tym styl czcionki, kolor, układ i wiele innych.

Czytaj więcej

To jest domyślna opcja, i polecamy wybrać ją, jeśli jesteś nowy w motywach potomnych:

krok 5: wybierz, gdzie zapisać nowe style z zaznaczonym "głównym arkuszem stylów" zamiast "oddzielnego arkusza stylów"

Teraz zostaniesz poproszony o wybranie metody obsługi arkusza stylów motywu nadrzędnego. Istnieje wiele opcji, ale zalecamy przestrzeganie Użyj kolejki stylów WordPress w większości przypadków:

krok 6: wybierz obsługę arkusza stylów motywu nadrzędnego z wybraną opcją "użyj kolejki stylów wordpress"

Jako początkujący, lepiej jest używać domyślnej opcji, dopóki nie będziesz lepiej zaznajomiony z tym, jak motyw nadrzędny obsługuje arkusz stylów. Pozostałe opcje nie zawsze są kompatybilne ze wszystkimi motywami.

Krok 5: Nadaj Nazwę Swojemu Motywowi Potomnemu

Kolejnym krokiem jest nadanie nazwy twojemu motywowi potomnemu oraz napisanie dla niego opisu.

krok 7: wprowadź nazwę motywu potomnego, opis, autora, wersję, itp. korzystając z odpowiednich pól tekstowych w edytorze atrybutów

Konfigurator motywu potomnego pobierze domyślne informacje z motywu nadrzędnego i wyświetli je tutaj. Jeśli tworzysz motyw potomny tylko do użytku osobistego, możesz pozostawić dane bez zmian.

Jednakże, jeśli twój motyw nadrzędny będzie służył jako baza dla nowego motywu, który rozwijasz, warto dodać krótki opis i unikalną nazwę.

Krok 6: Skopiuj ustawienia motywu nadrzędnego do motywu potomnego

Plugin poprosi teraz o potwierdzenie, że może skopiować ustawienia motywu nadrzędnego do twojego motywu potomnego:

krok 8: skopiuj menu, widgety i inne ustawienia personalizacji z motywu nadrzędnego do motywu potomnego z zaznaczonym polem wyboru

Ten krok zapewni, że twój motyw potomny czerpie swoją funkcjonalność i wygląd z motywu nadrzędnego. Zwróć uwagę, że jeśli pracujesz z motywem premium lub ograniczonym jako rodzic, możesz nie być w stanie wykonać tego kroku.

Krok 7: Stwórz Nowy Motyw Potomny i Podgląd

Ostatnim krokiem jest stworzenie motywu potomnego. Kliknij na przycisk Stwórz Nowy Motyw Potomny i poczekaj, aż plugin wykona swoje zadanie:

krok 9: kliknij, aby uruchomić konfigurator i "utwórz nowy motyw potomny" przycisk

Powinieneś otrzymać powiadomienie, że twój motyw potomny został pomyślnie utworzony:

motyw potomny twenty twenty-four został pomyślnie wygenerowany

Zawsze zobacz podgląd swojego motywu potomnego przed jego aktywacją na stronie. Ten krok pomoże Ci zweryfikować, czy wszystko działa jak należy. Następnie kliknij Aktywuj & Publikuj, aby rozpocząć korzystanie z motywu potomnego.

Jak ręcznie stworzyć motyw potomny WordPress

Jeśli wolisz nie używać pluginu do tworzenia motywu potomnego, możesz użyć metody ręcznej. Możesz preferować tę drogę, jeśli już używasz zbyt wielu pluginów na swojej stronie.

Dodatkowo, ręczne tworzenie motywu potomnego WordPress pozwala na wprowadzenie wszystkich zmian, które chcesz, na poziomie szczegółowym. Pamiętaj tylko, że potrzebujesz średnio zaawansowanej wiedzy o kodzie CSS.

Oto przewodnik krok po kroku:

Krok 1: Opracuj Plan Swoich Zmian

Najpierw znajdź motyw nadrzędny, który Ci się podoba i wymień zmiany, które chcesz wprowadzić. Możesz wyświetlić narzędzia deweloperskie i zobaczyć kod motywu, aby dokonać odpowiednich zmian.

Aby wyświetlić narzędzia deweloperskie, kliknij prawym przyciskiem myszy w dowolnym miejscu na swojej stronie podczas uruchomionego motywu i wybierz Inspect Element. Następnie zobaczysz stronę z danymi, która wygląda mniej więcej tak:

niebieski ekran kodu z wyróżnionym w trzech miejscach "background-color"

Tutaj możesz wyszukiwać kolory tła, informacje o czcionkach, rozmiar marginesów i więcej. Następnie możesz stworzyć listę funkcji, które chciałbyś dostosować w swoim motywie potomnym.

Krok 2: Wykonaj kopię zapasową swojej strony

Ważne jest, aby wykonać kopię zapasową obecnej strony przed dokonaniem jakichkolwiek zmian, aby uniknąć utraty ustawień. Możesz zawsze powrócić do tej kopii, jeśli zajdzie taka potrzeba. Możesz także rozważyć użycie strony stagingowej, w przypadku popełnienia krytycznych błędów.

Istnieje kilka różnych sposobów na wykonanie kopii zapasowej Twojej strony. Możesz to zrobić ręcznie za pomocą wtyczki do tworzenia kopii zapasowych, co jest prawdopodobnie najłatwiejszą metodą dla większości osób.

Alternatywnie, możesz współpracować z dostawcą hostingu WordPress, który zajmuje się tworzeniem kopii zapasowych stron internetowych. Nasze plany hostingu zarządzanego DreamPress zawierają automatyczne i na żądanie kopie zapasowe, aby chronić Twoje dane.

Krok 3: Utwórz folder dla swojego motywu potomnego

Musisz utworzyć folder, aby przechowywać pliki swojego motywu potomnego. Aby to osiągnąć, najpierw uzyskaj dostęp do swoich plików za pomocą klienta Secure File Transfer Protocol (SFTP) takiego jak Filezilla i przejdź do folderu z motywami:

pliki pokazujące, gdzie znajdują się pliki motywu w wp-content src=