Jak utworzyć motyw podrzędny WooCommerce Storefront [Kompletny przewodnik]
Opublikowany: 2022-01-05
W tym artykule przyjrzymy się, jak utworzyć motyw potomny WooCommerce Storefront w zaledwie czterech prostych krokach. Motyw Storefront WooCommerce jest jednym z głównych powodów, dla których WooCommerce odniósł sukces, ponieważ jest darmowy i łatwy w użyciu, aby stworzyć unikalny sklep przy minimalnym wysiłku.
Ponadto Woocommerce ma prawie nieskończone możliwości dostosowywania, co jest kolejnym ogromnym czynnikiem przyczyniającym się do sukcesu WooCommerce. Oznacza to, że w połączeniu z odpowiednim motywem zapewni Ci dużą elastyczność projektowania.
Motyw podrzędny WooCommerce Storefront
Aby uzyskać profesjonalny wygląd, motyw Storefront jest doskonałym wyborem. Teraz, gdy Twój sklep WooCommerce już działa, możesz nadal chcieć dostosować wygląd swojego sklepu do swojej dokładnej wizji.
Po zainstalowaniu motywu witryny sklepu WooCommerce następnym krokiem jest utworzenie motywu potomnego WooCommerce Storefront, który umożliwi wprowadzanie zmian w motywie nadrzędnym Storefront bez bezpośredniej edycji kodu motywu nadrzędnego.
Ułatwia to dostosowanie wyglądu sklepu i eliminuje potencjalne ryzyko związane z motywem i sklepem, w szczególności ryzyko utraty dostosowania, które dodałeś po zaktualizowaniu motywu WooCommerce Storefront.
Dlaczego warto tworzyć motyw podrzędny WooCommerce Storefront?
Jeśli poświęciłeś dużo czasu na czytanie WordPressa, być może wcześniej natknąłeś się na motywy potomne. Mówiąc prościej, motyw potomny jest kopią innego motywu, często określanego jako „motyw nadrzędny”.
Oznacza to, że możesz wprowadzać zmiany w motywie potomnym i testować je bez bezpośredniej edycji motywu nadrzędnego. Dokonywanie zmian w motywie potomnym jest ważne, ponieważ zmiana oryginalnego motywu może spowodować nieodwracalne błędy, a nawet uszkodzenie witryny.
Co więcej, możesz chcieć utworzyć motyw potomny, ponieważ chcesz użyć innego motywu jako podstawy. Dzięki temu zaoszczędzisz czas i nie będziesz musiał budować nowego motywu całkowicie od zera.
Ponadto możesz wprowadzić drobne zmiany w brandingu lub ogólnej estetyce motywu. Korzystanie z motywu potomnego otwiera wiele możliwości w zależności od czasu, jaki chcesz poświęcić na trwający projekt.
Możesz jednak pobrać kilka opcji z oficjalnego sklepu WooCommerce lub innych witryn, takich jak ThemeForest, ale żaden z istniejących motywów podrzędnych w ofercie nie może odpowiadać Twoim potrzebom. Dodatkowo możesz chcieć stworzyć niepowtarzalny wygląd. Motyw potomny Storefront ma na celu zapewnienie sklepu idealnego dla Twojej niszy.
Warto również wspomnieć, że rzeczywisty proces tworzenia motywu potomnego jest taki sam dla WooCommerce czy ogólniejszej witryny WordPress. Mimo to, dostosowując motyw podrzędny, musisz pamiętać o celu swojego sklepu.
Jak stworzyć motyw podrzędny WooCommerce Storefront
W tym samouczku utworzymy motyw, który używa Storefront jako swojego rodzica. Możesz użyć dowolnego motywu jako bazy. Ważne jest również, aby utworzyć kopię zapasową witryny przed kontynuowaniem, ponieważ zapewni to bezpieczeństwo sklepu, jeśli coś się zepsuje podczas procesu rozwoju.
Dodatkowo mądrze jest użyć środowiska inscenizacyjnego do tworzenia i dostosowywania motywu potomnego. Aby utworzyć motyw potomny, potrzebujemy tylko trzech rzeczy do uruchomienia: katalogu motywu potomnego, pliku style.css i pliku functions.php.
Oto kroki, które należy wykonać, aby utworzyć motyw podrzędny WooCommerce.
1. Tworzenie folderu motywów
Ten folder motywu będzie zawierał arkusze stylów i pliki funkcji. Z punktu widzenia eksperta idealnie jest użyć nazwy motywu nadrzędnego jako nazwy folderu i dodać do niej „-dziecko”. W tym samouczku nazwałem mój katalog „Storefront-child”. Ważne jest również, aby sprawdzić, czy nazwa katalogu motywu potomnego nie zawiera spacji, aby uniknąć możliwych błędów.
2. Arkusz stylów motywu potomnego
Po utworzeniu folderu musisz utworzyć arkusz stylów dla motywu potomnego. Arkusz stylów musi być ustawiony tak, aby dziedziczył style z motywu nadrzędnego.
Aby to zrobić, musisz wstawić następujący nagłówek arkusza stylów i zastąpić go odpowiednimi szczegółami. Warto również wspomnieć, że dokonane tutaj dostosowania zastąpią style motywów nadrzędnych.
/* Nazwa motywu: Storefront Child URI motywu: http://sitename.com/storefront/ Opis: Motyw podrzędny Storefront Autor: Twoje imię URI autora: http://nazwawitryny.com Szablon: storefront /*rozróżniana jest wielkość liter*/ Wersja: 1.0.0 Licencja: Powszechna Licencja Publiczna GNU v2 lub nowsza URI licencji: http://www.gnu.org/licenses/gpl-2.0.html Tagi: jasny, ciemny, pełna szerokość, responsywny układ, gotowy do dostępności Domena tekstowa: storefront-child */ /*Dostosowywanie motywów zaczyna się tutaj*/
Jednak w tym samouczku nie nauczę Cię, jak korzystać z CSS, ponieważ nie da się tego omówić w tym artykule. Musisz nauczyć się CSS lub zatrudnić programistę, który poprawi CSS w Twojej witrynie.
3. Funkcja motywu potomnego
W poprzednich metodach sugerują użycie „@import” w arkuszu stylów, aby załadować motyw podrzędny. Należy zauważyć, że nie jest to już uważane za najlepszą praktykę. Jednak wystarczy „umieścić w kolejce” arkusz stylów motywu nadrzędnego w pliku functions.php motywu potomnego.
Aby było to możliwe, możesz użyć „akcji wp_enqueue_scripts” i użyć „wp_enqueue_style()”. Warto również wspomnieć, że arkusz stylów dla motywu potomnego jest zwykle ładowany automatycznie.
Musisz go dobrze zakolejkować, aby został załadowany i musisz upewnić się, że podrzędny arkusz stylów ma priorytet. Aby to ułatwić, stworzyłem następujący kod, który ustawia „styl rodzica” jako zależność, dzięki czemu arkusz stylów motywu potomnego ładuje się po nim.
<?php
function theme_enqueue_styles() {
$parent_style = 'rodzic-styl';
wp_enqueue_style( $ parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'styl-dziecko', get_stylesheet_directory_uri() . '/style.css', array( $parent_style) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>4. Aktywacja
Teraz, gdy folder motywu potomnego jest gotowy, musisz utworzyć plik .zip z folderu motywu potomnego, aby móc dodać go do motywów WordPress.
Możesz to zrobić za pomocą 7-zip lub Winrar. Ważne jest również, aby upewnić się, że w folderze motywu potomnego znajduje się plik style.css i functions.php.
Ponadto ważne jest, aby zanotować i zapisać inne ustawienia wtyczek przed aktywacją motywu podrzędnego. Następnie możesz przesłać to do swojego WordPressa, wybierając Wygląd > Dodaj motywy . 
WordPress zainstaluje go tak jak każdy motyw, a po jego zainstalowaniu musisz go aktywować, klikając „Aktywuj”, przechodząc do Wygląd> Motywy , jak pokazano poniżej: 
Po aktywacji wygląda tak samo jak oryginalny motyw. Motyw potomny pobiera style z motywu nadrzędnego. Następnie musisz wykazać się kreatywnością i dostosować wygląd w arkuszu stylów.
Dodatkowo możesz wprowadzać zmiany w plikach szablonu swojego motywu, kopiując plik szablonu, który chcesz zmienić, taki jak header.php, z folderu nadrzędnego do folderu motywu podrzędnego.
Co więcej, będziesz musiał również wprowadzić pewne zmiany, aby określić, której funkcji WordPress używa do odwoływania się do plików szablonów. Oznacza to, że będziesz używać get_stylesheet_directory(); zamiast funkcji get_template_directory() do odwoływania się do szablonów.
Wniosek
W tym momencie jestem pewien, że możesz stworzyć motyw podrzędny WooCommerce Storefront. Gorąco polecam odświeżenie swojego CSS, aby jak najlepiej wykorzystać swoją stylizację i zapoznanie się z naszym innym przewodnikiem na temat tworzenia motywów potomnych, aby uzyskać jeszcze więcej porad.
Możesz także kupić motyw potomny od zewnętrznego dostawcy, ale nie musisz polegać na kreatywności innych. Dzieje się tak, ponieważ stworzenie WooCommerce Storefront Child Theme nie jest tak trudne, jak mogłoby się wydawać.
Co więcej, daje Ci prawie całkowitą kontrolę nad wyglądem i funkcjonalnością Twojego sklepu. Dlatego musisz go utworzyć, ponieważ jest to uważane za najlepszą praktykę podczas wykonywania prac programistycznych w witrynie WooCommerce.
Ponadto bezpośrednia modyfikacja motywu wiąże się z ryzykiem utraty modyfikacji podczas aktualizacji. Motyw potomny zapewni zachowanie nienaruszonych modyfikacji.
Podobne artykuły
- Co to jest motyw witryny sklepu WooCommerce? [Odpowiedź]
- Ponad 80 sztuczek, aby dostosować motyw WooCommerce Storefront: Najlepszy przewodnik po dostosowywaniu motywu Storefront
- Jak dodać logo zaufania lub bezpieczne na stronie kasy WooCommerce
- Jak przekierować WooCommerce po realizacji transakcji: Przekieruj na niestandardową stronę z podziękowaniami
- Jak utworzyć powiadomienie administratora WooCommerce dla wtyczki – Rozwój WooCommerce
- Jak stworzyć bazę danych WordPress w PHPMyAdmin
- Jak tworzyć wiele widżetów w WordPress za pomocą pętli For i Foreach
- Jak stworzyć krótki kod dla wtyczki w WordPress
- Jak utworzyć bazę danych MySQL WordPress za pomocą wiersza poleceń
- Pierwsze 20 kroków dla początkujących początkujących WordPressa
- Jak wyświetlać produkty WooCommerce według kategorii?
- WooCommerce Wyloguj fragment PHP, aby utworzyć przycisk wylogowania
- Jak zmienić tekst przycisku Dodaj do koszyka na stronie sklepu WooCommerce?
- Jak ustawić polecane produkty w WooCommerce?
- Jak dodać niestandardową metodę wysyłki w WooCommerce?