Poznaj niestandardowe szablony stron w WooCommerce: praktyczny przewodnik po rozwoju od zera do jednego.

Poznaj system szablonów WooCommerce i dowiedz się, jak dostosować go do własnych potrzeb.

WooCommerce korzysta z zaawansowanego systemu nadpisywania szablonów, który umożliwia programistom dostosowywanie wyglądu i układu stron sklepu bez modyfikowania plików wtyczki. System ten opiera się na koncepcie motywów podrzędnych (Child Theme) w WordPressie, co zapewnia stabilność dostosowań i możliwość aktualizacji w przyszłości. Wszystkie pliki szablonów WooCommerce znajdują się w folderze plugins/woocommerce/templates Możesz to sprawdzić w katalogu, ale modyfikowanie go bezpośrednio jest zabronione, ponieważ aktualizacja wtyczki spowoduje nadpisanie wszystkich zmian.

W praktycznych projektach często potrzebne są niestandardowe szablony stron. Na przykład może być konieczne stworzenie unikalnego układu dla określonej kategorii produktów lub całkowite przeredagowanie strony kasy, aby uprościć proces i zintegrować usługi zewnętrzne. Standardowe szablony mogą nie spełniać wymagań dotyczących unikalności marki, złożonej logiki biznesowej lub optymalizacji współczynnika konwersji. Tworząc niestandardowe szablony, można precyzyjnie kontrolować każdy element na stronie, od struktury HTML po logikę PHP, a także uzyskać pełną autonomię w zakresie projektowania i funkcjonalności.

Podstawowe kroki tworzenia niestandardowego szablonu.

Utworzenie niestandardowego szablonu strony WooCommerce rozpoczyna się od utworzenia motywu dziecięcego WordPress. To bezpieczna podstawa wszelkich niestandardowych prac. W katalogu motywu dziecięcego należy utworzyć plik o nazwie woocommerce folderu. WooCommerce najpierw szuka plików szablonu w tym folderze, a jeśli ich nie znajdzie, użyje szablonów dołączonych do wtyczki.

Polecamy lekturę. Szczegółowa analiza wtyczki WooCommerce: kompletny przewodnik od konfiguracji początkowej do zaawansowanych dostosowań.。

Wyszukaj i skopiuj plik szablonu docelowego.

Załóżmy, że chcesz dostosować stronę główną sklepu (stronę archiwalną). Najpierw musisz znaleźć oryginalny plik w katalogu wtyczek WooCommerce:plugins/woocommerce/templates/archive-product.phpNależy skopiować ten plik do folderu z twoimi podmotywami. woocommerce W folderze. Teraz wszelkie zmiany wprowadzone w tej kopii wejdą w życie. To jest najbardziej bezpośrednia metoda dostosowywania, odpowiednia do zmian stylistycznych lub niewielkich modyfikacji logiki w istniejącym szablonie.

UltaHost – hostingu dla stron WordPress

Gwarancja zwrotu pieniędzy w ciągu 30 dni, nieograniczony przepustowość sieci i dostęp do bazy danych, bezpłatna ochrona przed atakami typu DDoS. Promocja: 50% przy zakupie na 3 lata.

strona dostępu

Dodawanie lub usuwanie treści za pomocą funkcji hooków.

WooCommerce w dużej mierze korzysta z haków akcji (Action Hooks) i haków filtrów (Filter Hooks), co zapewnia bardziej elastyczną i mniej inwazyjną metodę dostosowywania. Na przykład możesz dodać niestandardowy tekst poniżej tytułu na stronie szczegółów produktu, zamiast modyfikować go bezpośrednio. single-product.php Szablon, może lepiej w twoim sub-topicu? functions.php W pliku wykorzystano haki.

Oto przykładowy kod pokazujący, jak to użyć. woocommerce_single_product_summary Dzięki temu hookowi można dodać nową zawartość:

add_action( 'woocommerce_single_product_summary', 'my_custom_product_text', 6 );
function my_custom_product_text() {
    echo '<p class="my-custom-text">To niestandardowa treść dodana do obszaru podsumowania produktu.</p>';
}

Dzięki dostosowaniu priorytetu (liczba 6 w powyższym kodzie) możesz precyzyjnie kontrolować, gdzie ma się pojawić ta treść.

Rozwijanie zaawansowanych niestandardowych szablonów stron.

W przypadku zupełnie nowego układu strony zwykłe przepisywanie istniejącego szablonu może nie wystarczyć. Konieczne jest utworzenie własnego szablonu strony.

Polecamy lekturę. Kompletny przewodnik po tworzeniu witryny e-commerce w WooCommerce: od zera do uruchomienia.。

Stwórz nowy szablon kategoryzacji produktów.

Możesz utworzyć dedykowany szablon dla określonej kategorii produktów. Najpierw w podmotywie woocommerce W folderze, skopiuj. archive-product.php I przemianować na taxonomy-product_cat-{slug}.phpWśród nich {slug} Zastąp to aliasami docelowej kategoryzacji. Na przykład szablon dla kategoryzacji, której aliasem jest “elektronika”, powinien mieć nazwę pliku: taxonomy-product_cat-electronics.phpW tym pliku możesz zmienić kolejność pętli, wprowadzić niestandardowe zapytania lub dodać unikalne elementy na stronie.

Stwórz niestandardowy szablon strony.

Czasami potrzebujesz strony całkowicie niezależnej od standardowej ścieżki WooCommerce. W takim przypadku możesz utworzyć standardowy szablon strony WordPress. Utwórz plik w głównym katalogu twojego motywu, na przykład: template-custom-store.phpDodaj następujące oświadczenie szablonu na początku dokumentu:

<?php
/**
 * Template Name: 自定义商店布局
 * Template Post Type: page
 */

Następnie w panelu administracyjnym WordPress należy utworzyć nową stronę i wybrać “Niestandardowy układ sklepu” w rozwijanym menu “Szablony”. W tym pliku szablonu można korzystać z funkcji szablonowych i zmiennych globalnych WooCommerce, np. $product, WC()Możesz wyszukiwać i wyświetlać produkty, a także dowolnie projektować układ i logikę całej strony, bez żadnych ograniczeń wynikających ze standardowej struktury strony sklepu.

hosting.com Hosting współdzielony

Wysoka wydajność dzięki procesorom AMD EPYC, pamięci masowej NVMe SSD i LiteSpeed, wewnętrzne wsparcie ekspertów 24/7, zaawansowane środki bezpieczeństwa, w tym SSL, brute force, ochrona przed złośliwym oprogramowaniem i DDoS, oszczędność do 73%

strona dostępu

Zaawansowane porady i najlepsze praktyki dotyczące dostosowywania szablonów.

Podczas tworzenia niestandardowych szablonów należy stosować się do określonych najlepszych praktyk, aby zapewnić solidność i łatwość utrzymania kodu.

Bezpieczne wywoływanie funkcji i danych WooCommerce.

W niestandardowych szablonach należy upewnić się, że środowisko WooCommerce zostało załadowane. Przed użyciem jakiejkolwiek funkcji lub zmiennej globalnej WooCommerce można przeprowadzić sprawdzenie warunkowe. Na przykład w pętli produktów standardowym rozwiązaniem jest użycie < wc_get_loop_prop( 'name' ) Aby sprawdzić typ pętli lub użyć jej, należy wykonać następujące kroki: is_product()、is_shop() Etui na telefon, klawiatura do laptopa itp. Gdy uzyskujesz dostęp do danych produktu, należy najpierw użyć tych etykiet. WC()->product_factory->get_product() 或 wc_get_product() Należy użyć funkcji, aby uzyskać dostęp do obiektu produktu, zamiast bezpośrednio modyfikować globalną zmienną.

Upewnij się, że szablon jest responsywny i zoptymalizowany pod kątem wydajności.

Niestandardowe szablony nie powinny naruszać responsywnego projektu witryny. Upewnij się, że dodany przez ciebie kod HTML i CSS będzie odpowiedni dla różnych rozmiarów ekranu. Ponadto uważaj na problemy z wydajnością w szablonie. Unikaj wykonywania złożonych zapytań do bazy danych w pętli ani nadmiernego korzystania z zewnętrznych interfejsów API. Należy też odpowiednio korzystać z mechanizmów buforowania dostępnych w WooCommerce, np. buforowania danych o produktach. W przypadku złożonych zapytań niestandardowych należy rozważyć użycie < wc_get_products Ta wydajna funkcja wyszukiwania produktów jest lepsza niż standardowa. WP_Query Jest to bardziej odpowiednie dla danych o produktach w WooCommerce.

Polecamy lekturę. Pełny przewodnik po sklepie internetowym WooCommerce: kompletny poradnik dotyczący tworzenia sklepu od podstaw aż po jego uruchomienie.。

Organizacja szablonów podtematów.

Wszystkie niestandardowe style należy umieścić w podmotywie. style.css W pliku. Aby zachować przejrzystość, zaleca się pisanie oddzielnych bloków CSS dla różnych komponentów szablonu WooCommerce i dodawanie szczegółowych komentarzy. Należy używać selektorów pasujących do struktury oryginalnego pliku szablonu, aby zapewnić, że styl jest na tyle specyficzny, by zastąpić domyślny styl. Na przykład w przypadku niestandardowego szablonu kategorii należy użyć następującego kodu: body.term-product_cat-electronics Dodaj określone reguły stylizacyjne.

Podsumowanie.

Nauka tworzenia niestandardowych szablonów stron w WooCommerce to kluczowa umiejętność, która pozwala uatrakcyjnić i ufunkcjonalnić witrynę e-commerce w WordPress. Zaczynamy od zrozumienia systemu nadpisywania szablonów, poprzez podstawowe dostosowania istniejących szablonów (kopiowanie i modyfikowanie), aż po wykorzystanie haków do elastycznej kontroli treści i tworzenie nowych, zaawansowanych szablonów spełniających złożone wymagania projektowe. Cały proces nacisk kładzie na działanie w sub-motywie, aby zapewnić bezpieczeństwo aktualizacji rdzenia. Stosowanie najlepszych praktyk, takich jak bezpieczne wywoływanie danych, dbałość o responsywność i wydajność oraz dobra organizacja kodu stylowego, to gwarancja profesjonalnego, stabilnego i wydajnego niestandardowego szablonu sklepu. Dzięki temu przewodnikowi, który prowadzi od zera do gotowego rozwiązania, będziesz w stanie wykroczyć poza ograniczenia domyślnych szablonów i stworzyć sklep WooCommerce, który naprawdę spełni Twoje cele biznesowe.

Hosting współdzielony InterServer

Hosting współdzielony $2.50 USD miesięcznie, pierwszy miesiąc $0.1 USD kod promocyjny tryinterserver, 461 skryptów aplikacji w chmurze, instalacja jednym kliknięciem.

strona dostępu

FAQ – najczęściej zadawane pytania.

Czy do modyfikacji szablonu WooCommerce koniecznie trzeba użyć subszablonu?

Zdecydowanie zalecane i zgodne z najlepszymi praktykami w branży. Modyfikowanie plików szablonów bezpośrednio w folderze motywu lub wtyczki spowoduje ich całkowite nadpisanie podczas aktualizacji WooCommerce lub motywu, co doprowadzi do utraty wszystkich niestandardowych treści. Użycie podmotywu pozwala oddzielić niestandardowe elementy od plików głównych, zapewniając większą łatwość utrzymania i bezpieczeństwo witryny.

Jak znaleźć plik szablonu WooCommerce odpowiadający danej stronie?

WooCommerce oferuje tryb debugowania, który ułatwia wyszukiwanie plików szablonów. W tym celu należy otworzyć plik functions.php w swoim motywie dziecięcym. functions.php Dodaj następujący kod do pliku:add_filter( 'woocommerce_template_debug_mode', '__return_true' );Po włączeniu tej funkcji na dole strony głównej witryny WooCommerce wyświetli ścieżki do wszystkich plików szablonów używanych na danej stronie, co ułatwi znalezienie plików, które należy edytować.

Po dostosowaniu szablonu dlaczego na stronie nie widać żadnych zmian?

Najpierw upewnij się, że prawidłowo wyczyściłeś pamięć podręczną witryny i przeglądarki. Następnie sprawdź, czy ścieżka i nazwa pliku są poprawne, upewniając się, że plik szablonu niestandardowego znajduje się w podkatalogu motywu. /woocommerce/ W katalogu i nazwa pliku muszą być w pełni zgodne ze strukturą szablonu WooCommerce. Na koniec sprawdź, czy w kodzie nie ma błędów składniowych, i spróbuj tymczasowo włączyć WordPressa. WP_DEBUG Użyj tego wzorca, aby sprawdzić, czy wyświetlane są komunikaty o błędach PHP.

Czy można stworzyć niestandardowy szablon dla pojedynczego produktu?

Tak. WooCommerce pozwala na tworzenie niestandardowych szablonów dla poszczególnych produktów. Musisz to zrobić w submotywie. woocommerce W folderze, skopiuj. single-product.php I przemianować na single-product-{slug}.php 或 single-product-{id}.php。 Przenieś {slug} Zastąp to pseudonimem produktu lub zamień na {id} Wystarczy zamienić to na cyfrowy identyfikator produktu, aby zastosować unikalny układ szablonu dla tego konkretnego produktu.