Co to jest motyw potomny i dlaczego jest tak ważny?

W tym poście udzielimy odpowiedzi na te pytania i pokażemy krok po kroku, jak utworzyć i dostosować własny motyw potomny za pomocą wtyczek lub kodu.

Jeśli chcesz wprowadź zmiany w motywie witryny WordPress,prawdopodobnie widziałeś, jak ludzie mówią ci, aby użyć motywu potomnego.

Ale czym jest motyw potomny i dlaczego motywy potomne są tak ważne?

W tym poście udzielimy Ci odpowiedzi na te pytania wraz z wprowadzeniem do motywów potomnych i tego, jak są one idealne dla Ciebie. 

Następnie pokażemy Ci krok po kroku, jak stworzyć i dostosować własny motyw potomny za pomocą wtyczek lub kodu.

Ale jeśli nigdy nie instalowałeś WordPress, odkryj Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu

A potem wróćmy do tego, po co tu jesteśmy.

Co to jest motyw potomny WordPress?

Motyw potomny nie jest motywem samodzielnym. Jest „dzieckiem” istniejącego motywu macierzystego, stąd nazwa.

Zainstalujesz go razem z motywem nadrzędnym, ale daje to szansę na bezpieczne wprowadzenie zmian w motywie nadrzędnym bez konieczności edytowania samego motywu nadrzędnego.

Motyw potomny otrzyma większość / wszystkie ustawienia projektu z motywu nadrzędnego. Jednak w sytuacjach, gdy zmienisz motyw podrzędny, zmiana ta nadpisze ustawienia motywu nadrzędnego.

Korzyści z motywu potomnego

W tym momencie możesz się zastanawiać:  dlaczego nie możesz po prostu wprowadzić zmian bezpośrednio w motywie nadrzędnym?

Głównym powodem, dla którego nie jest to dobry pomysł, jest plik Aktualizacje motywów WordPress.

Jeśli chcesz, aby Twoja witryna WordPress była bezpieczna i działała, musisz szybko stosować aktualizacje, gdy tylko się pojawią, w tym aktualizacje motywu WordPress.

Jeśli dostosujesz swoją witrynę internetową, bezpośrednio edytując motyw (bez motywu potomnego), oznacza to, że nadpisujesz wszystkie zmiany za każdym razem, gdy aktualizujesz motyw WordPress.

Oznacza to, że:

Za pomocą motywu potomnego możesz wprowadzić wszystkie zmiany w motywie potomnym. Wtedy będziesz mógł zaktualizować motyw nadrzędny bez utraty swojej pracy.

Oprócz pomocy w bezpiecznej aktualizacji, korzystanie z motywu podrzędnego jest również ogólnie przydatne do dostosowywania. Ponieważ oddziela wszystkie zmiany w jednym miejscu, łatwo jest śledzić wszystkie zmiany i zmieniać je w razie potrzeby.

Łatwo też postawić na głowie. Na przykład, jeśli chcesz przestać używać zmian i powrócić do motywu nadrzędnego, po prostu dezaktywuj motyw potomny.

kilka Motywy WordPress nawet użyj tego domyślnego podejścia rodzic/dziecko. Na przykład, jeśli chcesz użyć frameworka Genesis, będziesz potrzebować zarówno motywu nadrzędnego (szkieletu bazowego), jak i motywu potomnego, aby kontrolować projekt.

Kiedy używać motywu potomnego

Oprócz kilku wyjątków, które wymienimy poniżej, musisz toujours użyj motywu potomnego, jeśli planujesz wprowadzić własne modyfikacje w istniejącym motywie WordPress.

Kiedy nie musisz używać motywu potomnego

Ogólnie rzecz biorąc, używanie motywu podrzędnego jest dobrą praktyką przy każdym dostosowywaniu motywu WordPress.

Istnieje jednak kilka wyjątków od reguły, w których może istnieć lepsza opcja niż użycie motywu potomnego.

Po pierwsze, jeśli chcesz dokonać drobnych poprawek CSS, utworzenie motywu potomnego tylko dla kilku poprawek może być przesadą.

Zamiast tego możesz dodać niestandardowy CSS za pomocą funkcji Dodatkowy CSS zintegrowane z konfiguratorem WordPress. Lub możesz użyć darmowa wtyczka WordPress, taka jak Simple CSS.

Po drugie, jeśli wprowadzasz jakiekolwiek zmiany, które mają być niezależne od motywów, motyw potomny może nie być najlepszym rozwiązaniem.

Na przykład, jeśli zarejestrujesz niestandardową taksonomię lub plik niestandardowy typ postu, prawdopodobnie nie chcesz używać tego pliku functions.php motywu podrzędnego (ponieważ chcesz je zachować, nawet jeśli zmienisz motyw). Zamiast tego wystarczy dodać kod poza motywem za pomocą wtyczki, takiej jak Fragmenty kodu lub własną niestandardową wtyczkę.

Jak utworzyć motyw potomny na WordPress

Teraz, gdy już wiesz, dlaczego motywy podrzędne są ważne, przejdźmy do tego, jak możesz stworzyć motyw podrzędny dla swojej witryny WordPress.

Po pierwsze, jeśli używasz Witaj motyw Elementor, stworzyliśmy już dla Ciebie motyw potomny - nie musisz tego robić samodzielnie. Możesz pobierz motyw potomny Hello Elementor z WordPress.org. Możesz go zainstalować jak każdy inny motyw WordPress (w dalszej części tego postu pokażemy Ci również, jak zainstalować motyw potomny).

Jeśli używasz innego motywu WordPress, zawsze warto rzucić okiem na Google, aby sprawdzić, czy programista motywów WordPress udostępnia motyw podrzędny. Na przykład Astra, GeneratePress i OceanWP mają narzędzia / pliki, które pomogą Ci pobrać motyw potomny.

Jeśli Twój motyw WordPress nie ma jeszcze motywu potomnego, możesz utworzyć motyw potomny dla dowolnego motywu WordPress:

  1. Użyj a WordPress Plugin darmowy generator motywów dla dzieci.
  2. Ręcznie utwórz własny motyw potomny.

Pokażemy Ci, jak wykonać obie metody.

Jak korzystać z wtyczki WordPress z motywem potomnym

Wtyczka generatora motywów potomnych umożliwia tworzenie motywów potomnych bez opuszczania pulpitu WordPress.

Najpopularniejszą opcją jest tutaj bezpłatna wtyczka do konfigurowania motywów potomnych, który jest aktywny na ponad 300.000 XNUMX witryn internetowych.

Konfigurator motywów potomnych nie tylko pomaga w tworzeniu plików motywów potomnych, ale także analizuje motyw, którego używasz, oraz arkusze stylów motywów i czcionek, zgodnie z potrzebami.

Zawiera również inne przydatne funkcje, jeśli próbujesz utworzyć motyw potomny w witrynie internetowej, do której dodano już zawartość. Na przykład może skopiować istniejące widżety i opcje dostosowywania do motywu potomnego.

Jeśli jednak planujesz używać wtyczka na stronie internetowejopérationnel, zalecamy wykonanie pełnej kopii zapasowej przed kontynuowaniem. Lub najlepiej ustawić to wszystko na stronie demonstracyjnej.

Po przygotowaniu kopii zapasowej zacznij od zainstalowania i aktywowania bezpłatnej wtyczki Child Theme Configurator z WordPress.org. Następnie przejdź do menu Narzędzia → Motywy podrzędne aby stworzyć motyw potomny.

Na liście Wybierz jedno menu motyw nadrzędny, wybierz motyw, dla którego chcesz utworzyć motyw potomny. Następnie kliknij Analizować:

Wtyczka przeanalizuje następnie motyw nadrzędny pod kątem wszelkich zależności.

Po zakończeniu zobaczysz kilka dodatkowych opcji konfigurowania sposobu tworzenia motywu podrzędnego. Jeśli nie masz pewności, co oznacza określone ustawienie, możesz po prostu pozostawić je jako domyślne:

 

Po dokonaniu wyboru kliknij przycisk u dołu, aby utwórz nowy motyw potomny.

I to wszystko ! Wtyczka następnie utworzy dla Ciebie motyw potomny. Jednak nie aktywuje się pas ten motyw potomny.

Aby go aktywować:

  • Aller à Wygląd → Motywy.
  • Zobacz, jak wygląda Twoja witryna z tym motywem potomnym (aby upewnić się, że działa - jeśli Twoja witryna wygląda dziwnie, prawdopodobnie z powodu problemu z CSS).
  • Aktywuj motyw podrzędny, tak jak każdy inny motyw WordPress. Pamiętaj jednak, aby pozostawić zainstalowany motyw nadrzędny.

Po aktywowaniu motywu potomnego wtyczka Child Theme Configurator oferuje również inne przydatne narzędzia, które pomogą Ci zarządzać motywem potomnym. Na przykład, jeśli przejdziesz do zakładki Akta w ustawieniach wtyczki można wyświetlić wszystkie powiązane pliki w motywie nadrzędnym i podrzędnym.

Następnie możesz skopiować pliki z motywu nadrzędnego do motywu potomnego.

Na przykład, jeśli chcesz wprowadzić pewne zmiany w single.php, możesz skopiować ten plik do motywu potomnego, aby móc go bezpiecznie edytować:

Znajdziesz także wiele innych narzędzi, które pomogą Ci pracować z CSS.

Później wyjaśnimy, dlaczego te narzędzia są przydatne.

Jak ręcznie utworzyć motyw potomny

W tej sekcji zakładamy, że wiesz trochę więcej o PHP i CSS. Jeśli instrukcje tutaj Cię przytłaczają, zalecamy skorzystanie z bezpłatnej wtyczki z poprzedniej sekcji.

Aby ręcznie utworzyć motyw potomny, musisz utworzyć dwa pliki (są to ścisłe minimum dla motywu potomnego):

  • style.css - na początku wystarczy dodać kod Boilplate.
  • functions.php - pozwala to na załadowanie arkusza stylów motywu nadrzędnego. Bez tego Twój motyw potomny nie byłby w stanie zastosować CSS z motywu nadrzędnego, przez co Twoja witryna byłaby super brzydka!

style.css

Najpierw utwórz plik o nazwie style.css i dodaj następujący kod:

Najpierw utwórz plik o nazwie style.css i dodaj następujący kod:

/*

Nazwa motywu: Hello Elementor Child

Identyfikator URI motywu: https://github.com/elementor/hello-theme/

Opis: Hello Elementor Child to motyw potomny Hello Elementor, stworzony przez zespół Elementor

Autor: Zespół Elementor

Identyfikator URI autora: https://elementor.com/

Szablon: hello-elementor

Wersja: 1.0.1

Domena tekstowa: hello-elementor-child

Licencja: Powszechna Licencja Publiczna GNU v3 lub nowsza.

Identyfikator URI licencji: https://www.gnu.org/licenses/gpl-3.0.html

*/

Pamiętaj, aby zastąpić wszystko, co znajduje się po dwukropku, aktualnymi informacjami:

  • Nazwa motywu - nazwa Twojego motywu potomnego.
  • Motyw URI - strona internetowa Twojego motywu i jego dokumentacja.
  • Opis - krótki opis tematu.
  • Autor - nazwisko autora tematu.
  • Identyfikator URI autora: - strona internetowa autora tematu.
  • szablon - nazwa twojego nadrzędnego folderu z motywami (zgodnie z nazwą w twoim folderze wp-content / themes). To jest najważniejsza kwestia; Twój motyw potomny nie będzie działał bez niego.
  • Wersja - numer wersji motywu potomnego.
  • Pole tekstowe - to służy do internacjonalizacji. Możesz po prostu dodać słowo „dziecko” na końcu nazwy szablonu.
  • Licencja - pozostaw to jako domyślne.
  • Licencja URI - pozostaw to jako domyślne.

Z wyłączeniem wiersza Szablon, tak naprawdę nie ma znaczenia, co wpisujesz, więc nie stresuj się zbytnio. Upewnij się tylko, że poprawnie wpisałeś nazwę folderu motywu nadrzędnego dla pliku szablon.

Jeśli chcesz w przyszłości dodać własne niestandardowe style, możesz dodać je do tego arkusza stylów pod kodem gotowym.

functions.php

Następnie musisz utworzyć plik functions.php dla Twojego motywu podrzędnego. Ponownie, to właśnie umożliwia załadowanie pełnego arkusza stylów CSS motywu nadrzędnego.

W pliku functions.php, dodaj następujący kod:



/ * Funkcja umieszczania w kolejce arkusza stylów z motywu nadrzędnego * /

function child_enqueue__parent_scripts () {
wp_enqueue_style ('rodzic', get_template_directory_uri (). '/ style.css');
}
add_action („wp_enqueue_scripts”, „child_enqueue__parent_scripts”);

Prześlij pliki do witryny WordPress

Gdy masz już swoje pliki style.css et functions.php, musisz przesłać je do swojej witryny WordPress jako nowy motyw.

Aby to zrobić, połącz się ze swoją witryną WordPress za pomocą protokołu FTP.

Następnie przejdź do katalogu motywów swojej witryny (wp-content / motywy)i utwórz nowy folder dla motywu podrzędnego.

Na przykład, jeśli folder motywu nadrzędnego to cześć-elementor, możesz nazwać podrzędny folder motywu cześć-eletor-dziecko aby pomóc ci to zapamiętać.

Następnie prześlij swój plik style.css et functions.php wewnątrz tego folderu:

Po pobraniu obu plików możesz przejść do Wygląd → Motywy i aktywuj swój motyw potomny, tak jak każdy inny motyw WordPress.

Jak zainstalować motyw podrzędny WordPress

Omówiliśmy niektóre z tych aspektów powyżej w Szczegółowych metodach, ale jeszcze raz omówimy, jak zainstalować motyw potomny WordPress.

Będzie to również przydatne, jeśli pobierzesz motyw potomny ze strony internetowej twórcy kompozycji, zamiast tworzyć go samodzielnie.

Możesz zainstalować motyw potomny WordPress, tak jak każdy inny motyw WordPress:

  • Dostęp do Wygląd → Motywy w panelu WordPress.
  • Kliknij Dodaj nowe.
  • Prześlij plik ZIP motywu potomnego.

Podczas procesu instalacji WordPress wykrywa, że ​​pobierasz motyw potomny i sprawdza, czy motyw nadrzędny istnieje:

Po pobraniu pliku pamiętaj, aby aktywuj to.

Pamiętaj, że aby motyw podrzędny działał, musisz zainstalować go w ten czasmotyw nadrzędny i motyw potomny.

Motyw podrzędny powinien być Twoim aktywnym motywem, ale nadal powinieneś mieć zainstalowany motyw nadrzędny.

Oto jak to powinno wyglądać:

  1. Motyw potomny jest motywem aktywnym
  2. Motyw nadrzędny jest nadal zainstalowany, ale nie jest aktywny

Jak dostosować motyw potomny

Podobnie jak w przypadku dostosowywania zwykłego motywu WordPress, masz kilka opcji „dostosowywania” motywu potomnego.

Mówiąc dokładniej, jesteś tak naprawdę nie dostosowujesz motywu potomnego - używasz motywu potomnego do dostosowania istniejącego (nadrzędnego) motywu.

Najpierw pokażemy Ci kilka sposobów wykorzystania kodu do dostosowania motywu podrzędnego. Następnie udostępnimy łatwiejszy sposób personalizowania rzeczy za pomocą Kreator motywów Elementor.

Dostosuj motyw potomny za pomocą kodu

Jeśli chcesz dostosować motyw potomny za pomocą kodu, musisz mieć dobrą znajomość CSS, HTML i PHP.

Oto kilka rzeczy, które możesz zrobić:

Dodaj niestandardowy CSS

Aby dostosować motyw potomny za pomocą CSS, możesz dodać go bezpośrednio do pliku style.css Twojego motywu podrzędnego.

Dodaj CSS poniżej istniejącego kodu na górze pliku.

Każdy kod CSS, który dodasz do motywu podrzędnego, zastąpi motyw motywu nadrzędnego, o ile użyjesz tych samych selektorów.

Zastąp istniejące szablony

Jeśli chcesz zastąpić szablony motywu nadrzędnego, możesz:

  • Skopiuj plik szablonu z motywu nadrzędnego do motywu podrzędnego.
  • Edytuj plik szablonu w swoim motywie potomnym.

Na przykład, jeśli chcesz się zmienić pojedynczy.php, najpierw kopiujesz plik single.php z motywu nadrzędnego do motywu podrzędnego (zachowując tę ​​samą strukturę).

Następnie możesz edytować kod w swojej wersji motywu potomnego single.php.

Uwaga: WordPress użyje szablonu Twojego motywu podrzędnego, o ile ma on taką samą nazwę. Z tego powodu praktycznie ukrywasz istniejący szablon w motywie nadrzędnym.

Jeśli korzystasz z wtyczki Child Theme Configurator, o której wspomnieliśmy powyżej, może ona pomóc Ci skopiować pliki do motywu podrzędnego bez opuszczania pulpitu WordPress.

Dodaj nowe szablony

Oprócz kopiowania i modyfikowania istniejących szablonów z motywu nadrzędnego można również tworzyć nowe szablony niestandardowe w motywie podrzędnym.

Na przykład, jeśli chcesz utworzyć szablon dla dodanego niestandardowego typu posta, możesz dodać te szablony do motywu podrzędnego.

Dostosuj motyw potomny za pomocą generatora motywów Elementor

Jeśli nie jesteś zaznajomiony, Kreator motywów Elementorumożliwia dostosowanie części lub całości motywu WordPress za pomocą interfejsu wizualnego.

Dzięki Elementor Pro i Theme Builder możesz tworzyć niestandardowe szablony dla szablonów witryn:

  • chodnikowiec
  • Stopka
  • Pojedynczy (np. Pojedynczy post na blogu lub strona)
  • Archiwa (np. Strona zawierająca wszystkie Twoje posty na blogu)

Te szablony będą działać zarówno z motywem podrzędnym, jak i nadrzędnym.

Dzięki Elementor Theme Builder nie musisz bezpośrednio pracować z kodem. Nie ma potrzeby dodawania niestandardowego CSS ani kopiowania plików szablonów PHP - wszystko robisz metodą przeciągnij i upuść.

Na przykład załóżmy, że chcesz dostosować nagłówek swojego motywu potomnego. Zamiast kopiować plik header.php na swoim motywie potomnym, a następnie zmienić PHP, możesz po prostu zaprojektować nowy nagłówek za pomocą wizualnego interfejsu Elementora oraz interfejsu przeciągnij i upuść. Następnie możesz zastosować ten nagłówek w dowolnym miejscu witryny lub tylko w określonych częściach witryny.

Jeśli jesteś nowy w CSS, HTML i PHP, to podejście bez kodu pozwala dostosować motyw podrzędny. A nawet jeśli to zrobisz, to wizualne podejście może nadal zaoszczędzić ci dużo czasu niż w przypadku PHP w plikach szablonów.

Kiedy tworzysz nowy szablon za pomocą Elementor Theme Builder, będziesz mógł wybrać typ szablonu. Na przykład nagłówek.

Następnie możesz zacząć od pustej karty lub wybrać jeden z modeli Elementor Pro:

Stamtąd możesz użyć opcji przeciągania i upuszczania paska bocznego, aby kontrolować wygląd nagłówka:

Po zakończeniu możesz wybrać dokładnie, gdzie chcesz użyć tego szablonu nagłówka:

Jak usunąć motyw potomny w WordPress

Jeśli chcesz przestać używać motywu podrzędnego, możesz go wyłączyć, tak jak w przypadku zwykłego motywu WordPress.

To jest :

  • Aller à Wygląd → Motywy.
  • Aktywuj inny motyw. Albo motyw nadrzędny, albo zupełnie nowy motyw WordPress.

Pamiętaj, że jeśli wyłączysz motyw podrzędny i wrócisz do motywu nadrzędnego, wszelkie zmiany dodane za pomocą motywu podrzędnego już tam nie będą.

Zamiast tego wrócisz do projektowania motywu nadrzędnego.

Zacznij używać motywu potomnego WordPress

Motyw potomny pomaga bezpiecznie wprowadzać zmiany w motywie WordPress.

Twój motyw podrzędny odziedziczy wszystkie style z motywu nadrzędnego, ale wszelkie zmiany wprowadzone w motywie podrzędnym zastąpią motyw nadrzędny. Oznacza to, że możesz bezpiecznie zaktualizować motyw nadrzędny bez utraty zmian wprowadzonych w motywie potomnym.

Aby rozpocząć pracę z motywem potomnym WordPress, możesz:

  • Sprawdź, czy Twój twórca motywów oferuje już motyw potomny. Jeśli używasz Hello Elementor, możesz pobierz dla niego motyw potomny z GitHub.
  • Skorzystaj z bezpłatnej wtyczki do konfigurowania motywów potomnych.
  • Utwórz ręcznie motyw potomny.

Stamtąd możesz dostosować motyw podrzędny za pomocą CSS, HTML i PHP. Możesz także pominąć kod i użyć Kreatora motywów Elementor, aby dostosować motyw za pomocą wizualnego interfejsu przeciągnij i upuść.

Odkryj także niektóre motywy i wtyczki premium WordPress  

Możesz użyć innych WordPress wtyczki aby nadać nowoczesny wygląd i zoptymalizować obsługę Twojego bloga lub strony internetowej.

Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.

1. Stoły cenowe AP

Tabela cen AP to WordPress Plugin premium, który ułatwia tworzenie bogatych w funkcje cenników z intuicyjnymi interfejsami. Oferuje 35 gotowych szablonów i nieograniczone opcje.

Tabele cen ap wtyczka do tworzenia responsywnych tabel cenowych dla Wordpress

Z tym WordPress Plugin łatwy w użyciu, zaprojektowanie wspaniałej tabeli cen za pomocą zaledwie kilku kliknięć będzie bardzo łatwe. Umożliwia tworzenie nieograniczonych siatek cenowych, zapewniając możliwość dodawania wierszy i kolumn, ustawiania obramowania kolumn, przestrzeni kolumn, szerokości kolumn i wielu innych.

Czytaj także Jak dostosować przycisk „Dodaj do koszyka” WooCommerce

Ta wtyczka pozwala również dodać zawartość audio, wideo i mapa Google.

PobierzDemo | hosting

2.wp Kreator stron

WordPress Page Builder to najlepszy kreator dla Twojej witryny WordPress, który zawiera świetne narzędzia do generowania dowolnego niestandardowego postu, niestandardowej taksonomii lub niestandardowego metaboxu. 

Kreator stron WP - wtyczka Wordpress Metabox

Posiada między innymi: niestandardowy typ postaCPT, spersonalizowana taksonomia, zaawansowane pola niestandardowe, funkcja przeciągania i upuszczania, obsługiwana lokalizacja Map Google, obsługiwane również pola powtarzalne i wiele więcej.

Pobierz | Demo | hosting

3. Rankie

Rankie to bardzo przydatny moduł WordPress przeznaczony do regularnego sprawdzania rankingów WordPress w Google przy ścisłym monitorowaniu pozycji każdego słowa kluczowego.

Wtyczka Rankie wordpress dla SEO

Jako wtyczka do śledzenia rankingu Rankie codziennie aktualizuje pozycjonowanie słów kluczowych i generuje dokładne raporty.

 Przeczytaj także nasze Regularne pytania 6 dotyczące SEO i przekierowań

Zawiera również potężne narzędzie badawcze, które generuje cenne listy słów kluczowych. Google już używa go do badań.

Pobierz | Demo | hosting

Polecane zasoby

Dowiedz się o innych zalecanych zasobach, które pomogą Ci zbudować witrynę i zarządzać nią.

Wnioski

Tutaj! To wszystko w tym samouczku. Czy nadal masz pytania dotyczące przydatności motywu potomnego w WordPress? Daj nam znać w sekcja komentarzy a my postaramy się pomóc!

Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress.

Nie wahaj się udostępnij znajomym w swoich ulubionych sieciach społecznościowych

...