Jak stworzyć i dostosować motyw potomny

Jeśli chcesz wprowadzić zmiany w motywie witryny WordPress, prawdopodobnie widziałeś, jak ludzie proponują Ci użycie motywu potomnego WordPress.

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 tematów potomnych i ich korzyści.

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

Zagłębmy się.

Motyw potomny WordPress nie jest samodzielnym motywem. Jest to „dziecko” istniejącego motywu rodzica, stąd nazwa.

Zainstalujesz go obok motywu nadrzędnego, ale daje to możliwość bezpiecznego wprowadzania zmian w motywie nadrzędnym bez konieczności edytowania samego motywu nadrzędnego.

Motyw potomny pobierze większość/wszystkie ustawienia projektowe z motywu nadrzędnego. Jednak w sytuacjach, w których dokonasz zmiany w motywie potomnym, ta zmiana zastąpi ustawienia w motywie nadrzędnym.

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ł, są aktualizacje motywów .

Jeśli chcesz, aby witryna WordPress była bezpieczna i dobrze działała, musisz niezwłocznie wprowadzać aktualizacje, w tym aktualizacje motywu.

Jeśli dostosujesz swoją witrynę, bezpośrednio edytując motyw (bez motywu podrzędnego), oznacza to, że nadpiszesz wszystkie zmiany za każdym razem, gdy zaktualizujesz motyw.

Oznacza to, że albo:

• Zaktualizuj swój motyw i trać pracę. Niezbyt zabawne doświadczenie, prawda?
• Nie aktualizuj swojego motywu, aby nie stracić pracy… co nie jest dobre dla bezpieczeństwa i funkcjonowania Twojej witryny.

Dzięki motywowi potomnemu WordPress możesz wprowadzić wszystkie zmiany w motywie potomnym. Wtedy będziesz mógł zaktualizować motyw nadrzędny bez utraty swojej pracy.

Poza pomaganiem w bezpiecznym aktualizowaniu, używanie motywu podrzędnego jest również ogólnie wygodne do dostosowywania. Ponieważ segreguje wszystkie zmiany w jednym miejscu, łatwo jest śledzić wszystkie zmiany i dostosowywać je w razie potrzeby.

Ułatwia również cofanie się. Na przykład, jeśli chcesz przestać używać swoich edycji i wrócić do motywu nadrzędnego „waniliowego”, wystarczy wyłączyć motyw podrzędny.

Niektóre gotowe motywy WordPress domyślnie używają nawet tego podejścia rodzica / dziecka. Na przykład, jeśli chcesz użyć Genesis Framework, będziesz potrzebować zarówno motywu nadrzędnego (podstawowego frameworka), jak i motywu potomnego, aby kontrolować projekt.

Poza kilkoma wyjątkami, które wymienimy poniżej, zawsze powinieneś używać motywu potomnego, jeśli planujesz wprowadzać własne zmiany w istniejącym motywie WordPress.

Ogólnie rzecz biorąc, korzystanie z motywu potomnego jest dobrą najlepszą praktyką podczas dostosowywania motywu WordPress.

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

Po pierwsze, jeśli chcesz tylko dokonać kilku drobnych modyfikacji CSS, stworzenie motywu potomnego tylko na kilka poprawek może być przesadą.

Zamiast tego możesz dodać niestandardowy kod CSS, korzystając z wbudowanej funkcji Dodatkowy CSS w narzędziu WordPress Customizer. Możesz też użyć darmowej wtyczki, takiej jak prosta wtyczka CSS Toma Usborne'a.

Po drugie, jeśli wprowadzasz zmiany, które mają być niezależne od motywu, motyw podrzędny może nie być najlepszą opcją.

Na przykład, jeśli rejestrujesz niestandardową taksonomię lub niestandardowy typ postu, prawdopodobnie nie chcesz używać pliku functions.php motywu podrzędnego (ponieważ chciałbyś je zachować, nawet jeśli zmienisz motywy). Zamiast tego należy po prostu dodać kod poza motywem w całości za pomocą wtyczki, takiej jak fragmenty kodu lub własnej niestandardowej wtyczki.

1. Użyj darmowej wtyczki generatora motywów potomnych WordPress.
2. Ręcznie utwórz własny motyw podrzędny.

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

Najpopularniejszą opcją jest darmowa wtyczka Child Theme Configurator, która jest aktywna na ponad 300 000 witryn.

Konfigurator motywów potomnych nie tylko pomaga tworzyć podstawowe pliki motywów potomnych, ale także skanuje używany motyw i umieszcza w kolejce arkusze stylów motywów i czcionek.

Zawiera również inne przydatne funkcje, jeśli próbujesz utworzyć motyw podrzędny w witrynie, w której została już dodana zawartość. Na przykład może skopiować istniejące widżety i opcje dostosowania do motywu podrzędnego.

Jeśli jednak planujesz używać wtyczki na działającej stronie internetowej, zalecamy wykonanie pełnej kopii zapasowej przed kontynuowaniem. Lub, najlepiej, skonfiguruj wszystko w witrynie pomostowej.

Po przygotowaniu kopii zapasowej zacznij od zainstalowania i aktywacji bezpłatnej wtyczki Child Theme Configurator z WordPress.org. Następnie przejdź do Narzędzia → Motywy potomne, aby utworzyć motyw potomny.

Z listy rozwijanej Wybierz motyw nadrzędny wybierz motyw, dla którego chcesz utworzyć motyw podrzędny. Następnie kliknij Analizuj :

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

Gdy to zrobisz, zobaczysz dodatkowe opcje konfiguracji sposobu tworzenia motywu podrzędnego. Jeśli nie masz pewności, co oznacza dane ustawienie, możesz po prostu pozostawić je jako domyślne:

Po dokonaniu wyboru kliknij przycisk u dołu, aby utworzyć nowy motyw podrzędny .

I to wszystko! Wtyczka utworzy dla Ciebie motyw potomny. Jednak nie będzie aktywować motyw dziecka.

Aby go aktywować:

• Przejdź do Wygląd → Motywy.
• Sprawdź, jak wygląda Twoja witryna z motywem podrzędnym (aby upewnić się, że działa – jeśli witryna wygląda dziwnie, prawdopodobnie jest to problem z CSS).
• Aktywuj motyw potomny tak, jak każdy inny motyw WordPress. Pamiętaj jednak, aby pozostawić zainstalowany motyw nadrzędny.

Po aktywowaniu motywu potomnego wtyczka Konfigurator motywu potomnego zawiera również inne przydatne narzędzia, które pomogą Ci zarządzać motywem potomnym. Na przykład, jeśli przejdziesz do zakładki Pliki w ustawieniach wtyczki, możesz wyświetlić wszystkie powiązane pliki zarówno w motywie nadrzędnym, jak i motywie potomnym.

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

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

Znajdziesz tu również wiele innych narzędzi, które pomogą Ci pracować z CSS.

Wyjaśnimy, dlaczego te narzędzia są przydatne później.

W tej sekcji założymy, że znasz trochę PHP i CSS. Jeśli czujesz się przytłoczony instrukcjami tutaj, zalecamy pozostanie przy bezpłatnej wtyczce z poprzedniej sekcji.

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

• style.css – na początek wystarczy dodać jakiś szablonowy kod.

• functions.php – pozwala to na kolejkowanie arkusza stylów z motywu nadrzędnego. Bez tego Twój motyw potomny nie byłby w stanie zastosować CSS motywu nadrzędnego, co sprawiłoby, że Twoja witryna wyglądałaby bardzo brzydko!

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

/*

Nazwa motywu: Witaj Elementor Dziecko

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

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

Autor: Zespół Elementora

URI autora: https://elementor.com/

Szablon: cześć-elementor

Wersja: 1.0.1

Domena tekstowa: hello-elementor-child

Licencja: Powszechna Licencja Publiczna GNU v3 lub nowsza.

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

*/

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

• Nazwa motywu – nazwa motywu potomnego.

• Theme URI – strona internetowa dla twojego motywu i jego dokumentacji.

• Opis – krótki opis tematu.

• Autor – nazwisko autora tematu.

• URI autora: – strona internetowa autora motywu.

• Szablon — nazwa folderu motywu nadrzędnego (jak nazwany w folderze wp-content/themes). To jest najważniejsza linijka, ponieważ motyw potomny nie będzie działał bez tego.

• Wersja – numer wersji motywu potomnego.

• Domena tekstowa – służy do internacjonalizacji. Możesz po prostu dodać „-child” na końcu nazwy szablonu.

• Licencja – pozostaw to jako domyślne.

• URI licencji – pozostaw to jako domyślne.

Wyłączając linię Szablon , nie jest tak naprawdę ważne, co wprowadzisz, więc nie stresuj się zbytnio. Upewnij się tylko, że poprawnie wprowadzono nazwę folderu szablonu nadrzędnego dla szablonu .

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

Następnie musisz utworzyć plik functions.php dla motywu potomnego. Ponownie, to właśnie pozwala umieścić w kolejce pełny arkusz stylów CSS z motywu nadrzędnego.

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

<?php

/* Funkcja kolejkowania 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');

Gdy masz już plik style.css i plik 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ą FTP.

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

Na przykład, jeśli folder motywu nadrzędnego to hello-elementor , możesz nazwać folder motywu podrzędnego hello-elementor-child, aby ułatwić sobie jego zapamiętanie.

Następnie prześlij plik style.css i functions.php do tego folderu:

Po przesłaniu obu plików możesz przejść do Wygląd → Motywy i aktywować motyw podrzędny, tak jak każdy inny motyw WordPress.