Jak stworzyć motyw podrzędny WooCommerce Storefront

Ostatnia aktualizacja - 5 marca 2021

Motyw potomny to modyfikacja istniejącego motywu zachowująca jego podstawowy styl i funkcje. Oryginalny motyw jest nazywany motywem nadrzędnym, a nowy zmodyfikowany motyw jest nazywany motywem potomnym. Tworzenie własnego motywu potomnego WooCommerce Storefront to dobry sposób, aby spersonalizować swój sklep bez kupowania nowego motywu.

Zdobądź witrynę sklepową WooCommerce!

Motyw potomny – przegląd

Jak wspomniano we wstępie, motyw potomny będzie używał motywu nadrzędnego jako podstawy i nada mu dodatkowe funkcje. Często jest to dobra opcja, gdy chcesz tworzyć wariacje dla jednego motywu. W katalogu motywów potomnych Storefront można znaleźć szeroki wybór motywów potomnych premium odpowiednich dla różnych branż i typów produktów. W ten sposób możesz łatwo stworzyć własny motyw podrzędny dla Storefront.

Zalety korzystania z motywu potomnego

Bezpośrednia modyfikacja motywu wiąże się z ryzykiem utraty modyfikacji podczas aktualizacji. Motyw potomny zapewnia zachowanie modyfikacji w stanie nienaruszonym. Ogólnie rzecz biorąc, tworzenie motywu potomnego jest szybszym procesem niż tworzenie nowego motywu. Ponadto dla tych, którzy są zainteresowani tworzeniem motywów WordPress , tworzenie motywu potomnego to świetny sposób na eksperymentowanie i naukę.

Oto niektóre z zalet tworzenia motywu potomnego:

• Pomaga tworzyć różne wariacje tego samego motywu, pasujące do różnych domen.
• Może zapisywać dostosowania projektu osobno bez modyfikowania motywu nadrzędnego.
• Dostosowania można zachować nawet po aktualizacji motywu nadrzędnego lub podstawowych plików WordPress lub WooCommerce.

Tworzenie motywu potomnego witryny sklepu WooCommerce

Wskazane jest, aby przed przystąpieniem do dostosowywania motywu wykonać odpowiednią kopię zapasową witryny. Aby przesłać nowy motyw podrzędny, musisz mieć dostęp do serwera FTP.

Aby rozpocząć proces, utwórz plik style.css dla motywu potomnego z następującym przykładowym kodem podanym w WooCommerce Docs.

Następnie zmień pole szablonu, aby wskazywało Storefront.

Jedną z różnic, którą mogłeś zauważyć, jest to, że w Storefront nie potrzebujesz kroku w kolejce, który był wykonywany podczas tworzenia motywu potomnego dla dwudziestu piętnastu motywów. Tworząc motyw potomny za pomocą Storefront, potrzebujesz tylko pustego pliku function.php i pliku style.css, aby rozpocząć proces.

Możesz po prostu przenieść plik do folderu motywu podrzędnego, utworzyć plik zip i przesłać. Gdy to zrobisz, aktywuj nowy motyw potomny z Wygląd > Motywy .

Możesz również przesłać motyw potomny przez FTP, jeśli masz dostęp do swojej usługi hostingowej. Możesz użyć programu FTP, takiego jak FileZilla.

Najlepsze klienty FTP dla komputerów Mac i Windows.

Teraz możesz dostosować, dodając kody do arkusza stylów motywu podrzędnego i plików szablonów. Na przykład możesz skopiować dowolny plik szablonu z folderu motywu Storefront do folderu motywu podrzędnego. Ten plik w folderze motywu podrzędnego można dostosować, modyfikując kod zgodnie z wymaganiami.

Jak dostosować projekt i funkcjonalność motywu potomnego?

Dzięki powyższym ustawieniom utworzyłeś motyw podrzędny dla Storefront. Jednak nie ma jeszcze niestandardowych właściwości dla Twojego motywu. Możesz dodawać funkcje i dostosowywać projekt do motywu podrzędnego bez modyfikowania motywu nadrzędnego.

Zmiany projektowe

Na przykład w powyższym arkuszu stylów, który utworzyłeś dla motywu potomnego, możesz dostosować kolor tytułu witryny za pomocą poniższego kodu:
.site-branding h1 a {
color: red;
}

Modyfikacje szablonu

Możesz także modyfikować pliki szablonów (*.php) w ​​folderze motywu. Na przykład możesz zmodyfikować określony kod, kopiując plik header.php z folderu motywu nadrzędnego wp-content/themes/storefront/header.php do folderu motywu potomnego wp-content/themes/storefront-child/header.php.

Po zakończeniu kopiowania możesz edytować plik header.php i dostosować dowolny kod zgodnie z potrzebami. Plik header.php w motywie potomnym zostanie użyty w miejsce header.php motywu nadrzędnego.

W ten sposób możesz również dokonywać modyfikacji szablonów WooCommerce. Po prostu utwórz nowy folder w motywie potomnym i nazwij go „WooCommerce”. Tutaj możesz wprowadzać zmiany w szablonach WooCommerce, aby dostosować je do projektu witryny.

Ta dokumentacja WooCommerce pomoże Ci lepiej zrozumieć strukturę szablonów WooCommerce.

Dostosowywanie funkcjonalności

Kiedy tworzysz motyw podrzędny, chciałbyś, aby miał on również niestandardową funkcjonalność. W tym celu musisz najpierw upewnić się, że plik functions.php jest pusty i nie zawiera żadnych informacji z pliku functions.php rodzica. Teraz, jeśli konkretna funkcja w funkcji motywu nadrzędnego jest podłączalna (opakowana w warunkową instrukcję if), będziesz mógł skopiować ją do motywów potomnych functions.php. Po skopiowaniu funkcji podłączanej można wprowadzić wymagane zmiany. Poniżej znajduje się przykład funkcji wtykowej:
if (!function_exists("parent_function_name")) {
parent_function_name() {
...
}
}

Tworzenie ogólnego motywu potomnego

Proces tworzenia motywu podrzędnego w Storefront jest inny i prostszy niż w przypadku innych motywów. W tym artykule przyjrzymy się również podstawowym szczegółom ogólnej metody.

Pierwszym krokiem jest utworzenie katalogu motywów. Następnie utwórz arkusz stylów (plik style.css) dla motywu potomnego. WooCommerce zaleca utworzenie pliku functions.php, który jest przydatny do prawidłowego kolejkowania stylów.

Tworzenie ogólnego motywu potomnego

Proces tworzenia motywu podrzędnego jest inny i prostszy w witrynie sklepowej w porównaniu z innymi motywami. W tym artykule przyjrzymy się również podstawowym szczegółom ogólnej metody.

Pierwszym krokiem jest utworzenie katalogu motywów. Następnie utwórz arkusz stylów (plik style.css) dla motywu potomnego. WooCommerce zaleca utworzenie pliku functions.php, który jest przydatny do prawidłowego kolejkowania stylów.

Tworzenie katalogu motywów potomnych

Utwórz i umieść katalog motywów podrzędnych w wp-content/themes. Sugerowane jest dodanie do nazwy katalogu motywów potomnych '-child', choć nie jest to obowiązkowe. Należy uważać, aby nie pozostawiać spacji w nazwie katalogu motywów potomnych, aby uniknąć problemów.

Tworzenie arkusza stylów motywu potomnego

Utwórz nagłówek arkusza stylów, aby rozpocząć proces. Poniżej znajduje się przykład WordPress Codex nagłówka arkusza stylów utworzonego dla motywu potomnego opartego na motywie Twenty Fifteen.

Tworząc motyw potomny, możesz użyć tego przykładowego tekstu jako punktu odniesienia i zastąpić go szczegółami związanymi z Twoim motywem. Wiersz Szablon podaje nazwę katalogu motywu nadrzędnego. Musisz dostosować go do tematu, z którym pracujesz.

Kolejkowanie motywów rodzica i dziecka

Utwórz plik functions.php w katalogu motywów potomnych, aby umieścić w kolejce motywy nadrzędne i potomne. Umieść w kolejce arkusz stylów motywu nadrzędnego, dodając akcję wp_enqueue_scripts i używając wp_enqueue_style() w function.php motywu potomnego. Otwórz function.php motywu potomnego z tagiem PHP (<?php). Następnie umieść w kolejce arkusze stylów motywu nadrzędnego i podrzędnego. Poniższy zrzut ekranu to przykład, który zadziała tylko wtedy, gdy motyw nadrzędny używa jednego pliku .css do przechowywania CSS. Jeśli istnieje więcej niż jeden plik .css, taki jak style.css, main.css, tj. css, upewnij się, że zachowane są wszystkie zależności motywu nadrzędnego. Dobry poziom znajomości kodowania jest oczywiście ważnym czynnikiem w uzyskaniu tego dobrze za pierwszym razem.

Musisz także umieścić w kolejce rzeczywisty kod CSS w motywie podrzędnym style.css. Aby upewnić się, że arkusz stylów motywu potomnego zostanie załadowany po arkuszu nadrzędnym, możesz ustawić styl nadrzędny jako zależność. Dodatkowo dołącz numer wersji motywu potomnego, aby upewnić się, że możesz pominąć pamięć podręczną również dla motywu potomnego. Zalecany przykład w Kodeksie jest podany poniżej:

Aktywacja motywu potomnego

Utwórz plik zip z folderu motywu podrzędnego i prześlij go, przechodząc przez Wygląd → Motywy → Dodaj nowy motyw .

Teraz nowy motyw potomny będzie widoczny na liście motywów.

Możesz teraz aktywować nowy motyw potomny, klikając przycisk Aktywuj .

• Pobierz teraz motyw Storefront.
• Przeczytaj więcej o motywach potomnych z WordPress Codex.

Możesz również pobrać przykładowy motyw potomny z tego linku WooCommerce, aby dowiedzieć się lepiej. Lub przeczytaj niektóre z naszych powiązanych artykułów:

1. Jak wybrać odpowiedni motyw dla swojego sklepu WooCommerce?
2. Jak zainstalować i skonfigurować Storefront?
3. Najnowsze trendy w motywach WooCommerce.