Przewodnik po rozpoczęciu tworzenia motywów WooCommerce: budowanie własnej witryny e-commerce od podstaw.

Jeśli już znasz zasady tworzenia tematów dla WordPress, to stworzenie tematu dla WooCommerce będzie dla ciebie naturalnym krokiem dalej. WooCommerce, jako dodatek do WordPress przeznaczony do zarządzania sklepem online, opiera się na zasadach prezentacji treści za pomocą dostosowanych szablonów stron, cykli i krótkich kodów. Temat dla WooCommerce musi poprawnie wykorzystywać te elementy oraz zapewnić bezproblemową integrację wszystkich elementów wyglądu (stylów) i skryptów.

Aby stworzyć temat dla platformy WooCommerce, najpierw potrzebny jest bazowy temat WordPress jako punkt startu. Może to być temat podstawowy, który tworzisz od zera, albo temat rozszerzony na bazie jakiegoś istniejącego frameworku (np. Underscores lub Storefront). Kluczowe jest to, aby twój temat wyraźnie deklarował swoją kompatybilność z WooCommerce – wtedy dodatki będą mogły włączyć swoje pliki szablonów do struktury twojego tematu.

Cały proces składa się z kilku kluczowych etapów: przygotowania środowiska rozwoju, zrozumienia struktury szablonów w WooCommerce, tworzenia niezbędnych plików tematycznych, dostosowania funkcji za pomocą akcji (actions) i hooków filtrów (filters), a na koniec testowania i optymalizacji produktu. Teraz rozpatrzymy każdy z tych etapów detальnie.

Polecamy lekturę. Przewodnik po tworzeniu motywów w WordPressie: jak stworzyć swój pierwszy motyw od podstaw.。

Ustawienie środowiska rozwoju i struktura tematów

Przed rozpoczęciem pisania jakiegoś kodu niezbędne jest posiadanie sprawdzonego środowiska lokalnego do rozwoju. Zaleca się użyć narzędzi takich jak Local, XAMPP lub Docker, aby szybko skonfigurować środowisko zawierające PHP, MySQL oraz Apache/Nginx. Upewnij się, że twoja wersja PHP odpowiada najnowszym wymaganiom WooCommerce (zwykle to PHP 7.4 lub wyższa), a także zainstaluj WordPress oraz wszystkie niezbędne pliki rozszerzeń (plugi) dla WooCommerce.

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

Utworzyć nowy katalog tematyczny, na przykład… my-woocommerce-themeI umieść to w… wp-content/themes/ W katalogu znajdują się pliki. Tema, które zapewnia podstawową obsługę dla platformy WooCommerce, musi mieć co najmniej następujące kluczowe pliki:

• style.cssSzablon stylu tematu, który musi zawierać standardowe komentarze nagłówkowe tematu WordPress.
• index.phpGłówny plik szablonu tematu.
• functions.phpPodstawowy plik, który służy do włączenia funkcji tematycznych, skryptów rejestracji, stylów oraz deklaracji wsparcia dla platformy WooCommerce.

Najpierw… style.css W komentarzach umieszczonech na początku tekstu należy jasno określić tematyczne informacje dotyczące treści.

/*
Theme Name: My WooCommerce Theme
Theme URI: https://yourdomain.com/
Author: Your Name
Description: 一个为 WooCommerce 定制的现代电商主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-woocommerce-theme
*/

Następnie, functions.php W pliku pierwszą i najważniejszą rzeczą jest deklaracja, że twoja tematyczna rozszerzona funkcjonalność („theme extension”) wspiera platformę WooCommerce. To dokonuje się poprzez… add_action Hakówki i… add_theme_support Implementowane jest to za pomocą funkcji.

<?php
/**
 * 主题功能文件
 */
function my_woocommerce_theme_setup() {
    // 声明主题支持 WooCommerce
    add_theme_support( 'woocommerce' );
    // 可选：支持 WooCommerce 的特定功能，如产品画廊缩放、轮播等
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'my_woocommerce_theme_setup' );

// 注册主题的样式和脚本
function my_woocommerce_theme_scripts() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    // 引入 WooCommerce 样式
    if ( class_exists( 'WooCommerce' ) ) {
        wp_enqueue_style( 'woocommerce-theme', get_template_directory_uri() . '/css/woocommerce.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_woocommerce_theme_scripts' );
?>

Zrozumienie i modyfikacja szablonów WooCommerce

WooCommerce wykorzystuje system szablonów, który można dostosować do potrzeb użytkownika. Wszystkie pliki zdefiniowane jako standardowe szablony znajdują się w katalogu z pluginami. templates/ W folderze. Aby dostosować te szablony w swoim temacie, musisz utworzyć w katalogu tematu plik o nazwie woocommerce Należy otworzyć folder, a potem skopiować i zmodyfikować odpowiednie pliki szablonów, zachowując identyczną strukturę adresów wewnątrz pliku dodatku.

Polecamy lekturę. Święty tekst dla programistów tworzących tematy dla WordPressa: Jak stworzyć swoją pierwszą, dostosowaną tematę od zera。

Na przykład, jeśli chcesz zmienić szablon strony produktu, standardowa ścieżka w WooCommerce to… plugins/woocommerce/templates/single-product.phpMusisz stworzyć to w swoim temacie:themes/my-woocommerce-theme/woocommerce/single-product.phpJeśli ten plik istnieje, WooCommerce będzie najpierw używać wersji tej funkcji zawartej w temacie.

Poziomy struktur tematycznych (template layers) to kolejny kluczowy element w budowie systemów typu WordPress. WooCommerce doskonale integruje się z standardowymi zasadami organizacji poziomów tematycznych w WordPress. Na przykład, jeśli chodzi o stronę sklepu (Shop Page), WordPress sprawdza dostępne tematy w następującym porządku:archive-product.php > archive.php > index.phpDlatego stworzenie… archive-product.php To najprostszzy i najskuteczniejszy sposób na przygotowanie strony z listą sklepów dostosowanych do potrzeb użytkowników.

Wśród najczęściej używanych, zaleczonych do przepisania z dowolnych powodów kluczowych plików szablonów znajdują się:
- single-product.phpStrona szczegółów pojednego produktu.
- archive-product.phpStrona archiwu produktów (główna strona sklepu).
- cart/cart.phpStrona koszyka zakupów.
- checkout/form-checkout.phpStrona dokonania płatności.
- myaccount/my-account.phpMoja strona konta.

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

Podczas modyfikacji szablonu najlepszą praktyką jest najpierw kopiowanie oryginalnych plików szablonów z wtyczki WooCommerce do odpowiedniego katalogu twojego tematu, a dopiero potem dokonywanie zmian. Dzięki temu unikniesz uszkodzenia podstawowych funkcji systemu.

Można dostosować funkcje za pomocą „haków” (ang. hooks).

Poza możliwością modyfikacji plików szablonów, WooCommerce oferuje również wiele dodatkowych funkcji („akcji”) do dostosowania zachowania sklepu online.action) oraz filtry (filterZaawansowane narzędzia do edycji szablonów umożliwiają dodawanie, usuwanie lub modyfikowanie treści oraz funkcji bez konieczności zmian w samych plikach szablonów. Takie podejście jest zwykle lżejsze w obsłudze i mniej wymagające czasu niż bezpośrednie przepisywanie kodu.

Aktywnie działające „haki” (ang. action hooks) umożliwiają wykonywanie własnego kodu w określonych miejscach. Na przykład można dodać własny blok tekstu po informacjach sumarycznych produktu.

Polecamy lekturę. Stworzenie profesjonalnego witryny internetowej: Pełny przewodnik po rozwijaniu własnego tematu dla WordPress od zera。

function my_custom_product_message() {
    echo '<p class="my-custom-notice">🎉 Ten produkt bierze udział w promocji na określony czas!</p>';
}
add_action( 'woocommerce_single_product_summary', 'my_custom_product_message', 20 );

Tu.woocommerce_single_product_summary To nazwa haka.20 To liczba oznaczająca priorytet (odpowiedzialna za ustalenie kolejności wykonywania działań).

Filtry typu “hook” umożliwiają modyfikację danych – na przykład tekstu na przycisku „Dodaj do koszyka”.

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

function my_custom_add_to_cart_text( $text ) {
    if ( is_product() ) {
        $text = __( '立即购买', 'my-woocommerce-theme' );
    }
    return $text;
}
add_filter( 'woocommerce_product_single_add_to_cart_text', 'my_custom_add_to_cart_text' );

Kolejnym potężnym narzędziem są „hooki” w szablonach. WooCommerce umieszcza wiele takich „hooków” w plikach szablonów. do_action Wywołaj. Poprzez wyszukiwanie tych „haków” (hooków) możesz precyzyjnie kontrolować wyświetlanie struktury strony. Możesz to zrobić, używając… remove_action Aby usunąć niepotrzebne elementy, można użyć odpowiednich narzędzi lub metod. add_action Wstawienie nowych elementów w określone miejsce jest bardziej elastyczne niż edycja bezpośrednia pliku szablonu, szczególnie podczas aktualizacji wtyczki WooCommerce – w ten sposób Twoje zmiany nie będą tak łatwo przywróczone.

Dostosowanie stylu i projektowanie responsywne

WooCommerce posiada własną bazową szablonę, ale aby dopasować jej do języka projektowania twojego tematu, konieczne jest dokonanie dalszych dostosowań. Zaleca się stworzenie osobnego pliku CSS. woocommerce.cssI… functions.php Zawartość jest ładowana według określonych warunków, jak pokazano w wcześniejszym przykładzie.

Podstawa personalizacji stylu polega na zrozumieniu struktury HTML i klas CSS generowanych przez WooCommerce. Sprawdzenie elementów takich jak lista produktów lub tabela koszyka zakupów za pomocą narzędzi developerskich w przeglądarzu to szybki sposób na poznanie funkcji tego systemu. WooCommerce dodaje bogate, semantyczne klasy CSS dla prawie wszystkich elementów. .product、.woocommerce-loop-product__link、.onsale I tak dalej.

Na przykład, zmiana stylu etykety “Specjalna cena”:

/* 在你的 woocommerce.css 中 */
.onsale {
    background-color: #ff3366;
    color: white;
    border-radius: 0;
    padding: 0.5em 1em;
    font-weight: bold;
    top: 10px;
    right: 10px;
    left: auto; /* 覆盖默认的 left: 0 */
}

Dzięki projektowaniu responsywnemu witryny e-commerce są w stanie dobrze funkcjonować na różnych rozmiarach ekranów. Musisz upewnić się, że układ produktów, tabel (np. w koszyku zakupów, szczegóły zamówienia) jest wyświetlany korzystnie na wszystkich urządzeniach. Aby to osiągnąć, użyj zapytań mediów w CSS oraz rozwiązań typu Flexbox lub Grid do organizacji elementów na ekranie.

@media (max-width: 768px) {
    ul.products li.product {
        width: 48%; /* 在平板设备上每行显示两个产品 */
        margin-right: 4%;
    }
    ul.products li.product:nth-child(2n) {
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    ul.products li.product {
        width: 100%; /* 在手机上每行显示一个产品 */
        margin-right: 0;
    }
    /* 调整结账表单的输入框 */
    .woocommerce form .form-row {
        width: 100%;
        float: none;
        margin-right: 0;
    }
}

Podsumowanie.

Rozwoj tematów dla platformy WooCommerce polega na połączeniu wiedzy o tematach WordPress z specyficznymi wymaganiami e-handlu. Kluczowym elementem jest zrozumienie mechanizmu obsługi szablonów, a także biegłe korzystanie z akcji (actions) i hooków, aby uzyskać możliwość dostosowania funkcji według potrzeb. Od przygotowania środowiska, deklarowania wsparcia dla wymaganych funkcji, przekształcania kluczowych szablonów po użycie hooków do dokładnej regulacji i dostosowania stylu, każdy krok stanowi fundament dla stworzenia profesjonalnego, unikalnego i wydajnego sklepu online. Zawsze pamiętaj, że rozwoj należy prowadzić w ramach subtematów (subthemes) oraz preferować hooki zamiast bezpośrednich modyfikacji szablonów podstawowych – to najlepsza praktyka gwarantująca łatwość utrzymania kodu i kompatybilność w przyszłości.

FAQ – najczęściej zadawane pytania.

Jak usunąć lub przearanżować elementy strony z informacjami o produkcie w temacie?

Możesz użyć remove_action Funkcja służy do usunięcia określonego elementu z obszaru opisu produktu. Najpierw musisz wiedzieć, za pomocą jakiego „hooka” (elementu programowego) ten element został dodany, oraz jaką ma priorytetność.

Na przykład, jeśli chcesz usunąć nagłówek produktu, możesz sprawdzić… plugins/woocommerce/templates/single-product/title.phpOdkryjesz, że używa haków (hooków) do realizacji swoich celów. woocommerce_single_product_summary Dodaj to z priorytetem 5. A więc, w twoim temacie… functions.php Aby je usunąć, wystarczy dodać następujący kod:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );

Aby zmienić kolejność elementów, musisz najpierw usunąć wszystkie elementy związane z daną grupą, a potem ponownie je umieścić według żądanego porządku. Można też sortować elementy poprzez zmianę ich numerów priorytetu – im mniejszy numer, tym wcześniej element zostanie wykonywany i tym wyższe będzie jego miejsce w wyniku.

Dlaczego zmiany w moim temacie zostały usunięte po aktualizacji WooCommerce?

Jeśli bezpośrednio zmieniłeś katalog plików wtyczki WooCommerce…wp-content/plugins/woocommerce/Jeśli pliki szablonów znajdują się w tej lokalizacji, to każdy czas, gdy zostanie aktualizowany plugin, te zmiany zostaną przywróczone do stanu sprzed aktualizacji. Taka praktyka jest absolutnie niezalecana.

Poprawnym sposobem jest stosowanie mechanizmu nadpisywania szablonów w WooCommerce – należy skopiować plik szablonu, który wymaga modyfikacji, do katalogu tematu (theme directory) Twojego projektu. woocommerce/ Zmiany można dokonać w podfolderach. Dzięki temu WooCommerce będzie najpierw ładać wersję z twojego tematu, a aktualizacje pluginów nie wpłyną na twoje własne zmiany.

Jak stworzyć własną layoutę dla stron sklepu w WooCommerce?

Najskuteczniejszym sposobem na stworzenie własnego layoutu dla strony sklepu jest wykorzystanie funkcji overwriting (zastępowania standardowego kodu). archive-product.php Plik z szablonem. Możesz w całości przeprojektować strukturę HTML tego pliku.

Innym, bardziej modułarnym sposobem jest używanie „haków” (ang. hooks). Zawartość strony sklepu jest w większości przypadków generowana… woocommerce_before_main_content、woocommerce_archive_description、woocommerce_before_shop_loop、woocommerce_after_shop_loop Można kontrolować proces generowania elementów za pomocą odpowiednich „haków” (hooków). Można usunąć standardowe cykły i wstawić własne, dostosowane zapytania oraz struktury cykliczne pomiędzy tymi hakami, aby uzyskać unikalne rozwiązania w formie siatki (grid), listy lub układu typu „masonry”.

Dodatkowo, poprzez wykorzystanie funkcji dostosowywania w WordPress lub stworzenie specjalnej strony z opcjami tematu, możesz umożliwić użytkownikom zmianę wyglądu strony bez konieczności edycji kodu.

Jak poprawnie dodać własny kod JavaScript do tematy WordPressa WooCommerce?

Aby dodać własny kod JavaScript do tematy WordPressa WooCommerce, należy stosować najlepsze praktyki dotyczące kolejki wykonywania skryptów w WordPressie. functions.php W pliku użyto… wp_enqueue_script Funkcje służą do rejestracji i ładowania skryptów.

Upewnij się, że używasz… wp_enqueue_script W tym przypadku zależności są ustawiane za pomocą trzeciego parametru – na przykład zależność od jQuery. W przypadku skryptów specyficznych dla platformy WooCommerce czasem można korzystać z tych zależności. wc-add-to-cart-variation(Dostępne dla produktów zmiennych) lub wc-checkout(Dzięki temu można dokonać płatności na stronie zamówień.) wp_localize_script Możesz bezpiecznie przekazać zmienne w PHP (np. URL do AJAX, adres witryny itd.) do pliku JavaScriptu.

php
function my_theme_wc_scripts() {
wp_enqueue_script(
'`my-woocommerce-script`,
`get_template_directory_uri()` . 'https://www.likacloud.com/js/my-woocommerce.js',
array( 'jquery', 'wc-add-to-cart-variation' ), // Zależności
'1.0.0',
true // Zawartość jest ładowana w nagłówku strony.
);
`wp_localize_script('my-woocommerce-script', 'myWooParams', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_wc_scripts' );