Návod k vývoji témat pro WooCommerce: Vytvořte si svůj e-commerce web od nuly.

Pokud jste již obeznámeni s vývojem temát pro WordPress, pak vytvoření temátu pro WooCommerce bude pro vás přirozeným pokračováním. WooCommerce je e-shopový plugin pro WordPress, jehož základní funkce jsou realizovány pomocí řady vlastních šablon stránek, cyklů a shortcodeů. Tema pro WooCommerce musí tyto šablony správně volat a zajistit, aby všechny styly a skripty fungovaly bezproblémově.

Vývoj tématu pro WooCommerce začíná tím, že potřebujete základní WordPress téma jako výchozí bod. Může jít o téma, které vytvoříte od základu, nebo o téma, které upravíte na základě existujícího frameworku (např. Underscores nebo Storefront). Důležité je, aby vaše téma explicitně deklarovalo podporu pro WooCommerce – pouze tak vám pluginy umožní vložit své šablony do struktury vašeho tématu.

Celý proces zahrnuje několik klíčových kroků: vytvoření vývojového prostředí, pochopení struktury šablon systému WooCommerce, vytvoření potřebných souborů tematického nastavení („themes“), použití akcí a filtrů k přizpůsobení funkčnosti systému a nakonec testování a optimalizace produktu. Nyní tyto kroky rozebereme jednotlivě.

Doporučujeme k přečtení. Průvodce vývojem WordPress temat: Vytvořte si své první téma od nuly。

Nastavení vývojového prostředí a struktura tématu.

Než začnete psát jakýkoli kód, je nezbytné mít spolehlivé lokální vývojové prostředí. Doporučujeme použít nástroje jako Local, XAMPP nebo Docker k rychlému nastavení prostředí obsahujícího PHP, MySQL a Apache/Nginx. Ujistěte se, že vaše verze PHP splňuje nejnovější požadavky WooCommerce (obvykle PHP 7.4 nebo vyšší), a nainstalujte WordPress spolu s příslušnými pluginy pro WooCommerce.

UltaHost – hosting služby pro weby postavené na platformě WordPress

Záruka vrácení peněz do 30 dnů, neomezený šířka pásma a databáze, bezplatná ochrana proti DDoS útokům. Sleva 501 TP4T při nákupu na 3 roky.

přístupová stránka

Vytvořte nový adresář pro tematické materiály, například… my-woocommerce-themeA umístěte ho tam. wp-content/themes/ V adresáři. Nejzákladnější téma podporující WooCommerce musí obsahovat alespoň následující klíčové soubory:

• style.cssŠablona stylu tématu, která musí obsahovat standardní poznámky pro hlavičku WordPress tématu.
• index.phpHlavní šablonový soubor tématu.
• functions.phpJedná se o základní soubory používané k přidání funkce tematizace, registračních skriptů a stylů, stejně jako k deklaraci podpory frameworku WooCommerce.

Nejprve, style.css V hlavičkových poznámkách je nutné jasně definovat informace týkající se daného tématu.

/*
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
*/

Dále, functions.php V souboru je první a zároveň nejdůležitější krok deklarace toho, že váš produkt podporuje platformu WooCommerce. To se provádí pomocí… add_action Klíčové slova: háčky, add_theme_support Funkce je implementována pomocí programovacího kódu.

<?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' );
?>

Porozumění a překrytí šablon WooCommerce

WooCommerce využívá systém šablon, který lze přizpůsobovat podle potřeb. Všechny výchozí šablony jsou umístěny v adresáři s pluginy. templates/ Ve složce. Abyste mohli tyto šablony v tématu přizpůsobit, musíte v adresáři svého tématu vytvořit soubor s názvem woocommerce Přejděte do dané složky a poté podle stejné struktury cest v pluginu zkopírujte a upravte odpovídající šablonové soubory.

Doporučujeme k přečtení. Ultimátní průvodce vývojem temat pro WordPress: Postavte si své první vlastní téma od nuly。

Například, pokud chcete upravit šablonu stránky konkrétního produktu, výchozí cesta v WooCommerce je… plugins/woocommerce/templates/single-product.phpVe svém tématu potřebujete vytvořit následující:themes/my-woocommerce-theme/woocommerce/single-product.phpPokud tento soubor existuje, WooCommerce bude přednostně načítat verzi definovanou v tématu.

Dalším klíčovým konceptem je hierarchie šablon. WooCommerce velmi inteligentně integruje standardní hierarchii šablon WordPressu. Například u stránky obchodu (Shop Page) hledá WordPress šablony v následujícím pořadí:archive-product.php > archive.php > index.phpProto je třeba vytvořit… archive-product.php To je nejpřímější a nejúčinnější způsob, jak vytvořit stránku se seznamem zakázkových obchodů.

Mezi běžně používané a doporučené klíčové šablony, které je vhodné přednostně přepsat, patří:
- single-product.phpStránka s detaily jednoho produktu.
- archive-product.phpStránka s archivem produktů (hlavní stránka obchodu).
- cart/cart.phpStránka nákupního koše.
- checkout/form-checkout.phpStránka pro úhradu.
- myaccount/my-account.phpMoje účetová stránka.

Shared hosting na hosting.com

Vysoký výkon, vybavený procesorem AMD EPYC, úložištěm NVMe SSD a LiteSpeedem, nepřetržitá interní podpora odborníků 24 hodin denně a 7 dní v týdnu, pokročilá bezpečnostní opatření včetně SSL, ochrany proti útokům hrubou silou, malwaru a DDoS, úspora až 731 TB/měsíc.

přístupová stránka

Při překrývání šablon je osvědčenou praxí nejprve zkopírovat původní šablonové soubory z pluginu WooCommerce do odpovídajícího adresáře vaší tématiky a teprve poté je upravovat. Tím zajistíte, že nebudou narušeny základní funkce systému.

Použití hooků k personalizaci funkcí

Kromě přepisování šablonových souborů poskytuje WooCommerce také velké množství akcí (actions).action) a filtry (filterZařízení typu „hook“ vám umožňuje přidávat, odstraňovat nebo upravovat obsah a funkce, aniž byste museli měnit samotné základní šablony. To je obvykle lehčí a snazší na údržbu než přímé přepsání šablon.

Akční háčky vám umožňují provádět vlastní kód na určitých místech. Například můžete přidat vlastní blok textu za shrnutí produktu.

Doporučujeme k přečtení. Vytvořte profesionální web: kompletní návod k vývoji vlastního WordPressového tématu od nuly.。

function my_custom_product_message() {
    echo '<p class="my-custom-notice">🎉 Tento produkt se účastní časově omezené akce!</p>';
}
add_action( 'woocommerce_single_product_summary', 'my_custom_product_message', 20 );

Zde,woocommerce_single_product_summary Je to název háku.20 Jedná se o čísla určující prioritu (která určuje pořadí provedení).

Filtrovací hooky vám umožňují upravovat data – například text tlačítka “Přidat do košíku”.

Shared hosting od InterServeru

Sdílený hosting za 1 TB + 5 TB měsíčně za 2,50 USD, slevový kód tryinterserver pro první měsíc za 1 TB + 5 TB za 0,1 USD, a 461 skriptů cloudových aplikací k jednoduché instalaci.

přístupová stránka

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' );

Dalším mocným nástrojem jsou „templátové háčky“ (template hooks). WooCommerce obsahuje v souborech šablon mnoho takových háčků. do_action Volání. Pomocí hledání těchto „hooků“ můžete přesně ovládat výstup strukturního uspořádání stránky. Můžete je použít k… remove_action Použijte to k odstranění nepotřebných prvků, nebo… add_action Vložení nového prvku na určité místo je flexibilnější než přímá úprava souborů šablony, zejména při aktualizaci pluginů WooCommerce, kdy vaše změny méně snadno mohou být přepsány.

Vlastní nastavení stylů a responsivní design

WooCommerce obsahuje soubor základních stylů, ale pro to, aby se hodily s designem vaší webové stránky, je nutné provést detailní úpravy stylů. Doporučujeme vytvořit samostatný soubor CSS. woocommerce.cssA také… functions.php Zadání se načítá podle určených podmínek, jak je ukázáno v předchozím příkladu.

Podstatou přizpůsobení vzhledu je pochopení HTML struktury a CSS tříd vytvořených nástrojem WooCommerce. Rychlým způsobem, jak se seznámit s funkcemi nástroje, je použít vývojářské nástroje prohlížeče k prohlížení prvků jako je seznam produktů nebo tabulka nákupního košíku. WooCommerce přidává téměř ke všem prvkům bohaté a sémantické CSS třídy. .product、.woocommerce-loop-product__link、.onsale Atd.

Například změna stylu značky “Speciální 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 */
}

Rezponzivní design je pro e-shopové webové stránky zásadní. Je nutné zajistit, aby se produktové mřížky a tabulky (např. nákupní koše, podrobnosti objednávek) dobře zobrazovaly na různých velikostech obrazovek. Použijte CSS media queries a rozložení pomocí technik Flexbox/Grid k přeformulování způsobu zobrazení seznamů produktů.

@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;
    }
}

Závěr

Vývoj tem pro WooCommerce je proces kombinování znalostí o WordPress tematech s specifickými požadavky e-shopů. Klíčovým aspektem je pochopení mechanismu pokrytí šablon a obratné používání akcí a filtrovacích háčků k realizaci flexibilního přizpůsobení funkcí. Od nastavení prostředí, deklarování podpory, přepsání klíčových šablon až po použití háčků k doladění a hlubokému úpravě vzhledu – každý krok je základem pro vytvoření profesionálního, jedinečného a efektivního online obchodu. Vždy mějte na paměti, že vývoj by měl probíhat v podtematech a že používání háčků místo přímého úpravování základních šablon je nejlepší praxí pro udržitelnost kódu a kompatibilitu v budoucnu.

Časté dotazy

Jak odstranit nebo přeuspořádat prvky stránky s podrobnostmi o produktu v tématu?

Můžete použít… remove_action Funkce slouží k odstranění konkrétního prvku z oblasti popisu produktu. Nejprve potřebujete vědět, pomocí kterého „hooku“ byl tento prvek přidán, a také jeho prioritu.

Například, pokud chcete odstranit název produktu, můžete se podívat… plugins/woocommerce/templates/single-product/title.phpZjistíte, že to funguje prostřednictvím háčků („hooks“). woocommerce_single_product_summary Přidejte to s prioritou 5. Takže, ve vašem tématu… functions.php Stačí přidat následující kód, abyste jej odstranili:

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

Chcete-li přeuspořádat prvky, nejprve je musíte odstranit a poté je přidat zpět v požadovaném pořadí. Alternativně můžete dosáhnout řazení úpravou jejich prioritních čísel – čím menší číslo, tím dříve se prvek provede a tím výše bude výsledně umístěn.

Proč změny v mém tématu zmizely po aktualizaci WooCommerce?

Pokud jste přímo upravili adresář pluginu WooCommerce…wp-content/plugins/woocommerce/Pokud použijete šablonové soubory nacházející se pod daným adresářem, budou všechny změny při každém aktualizaci pluginu přepsány. Toto je zcela nedoporučený postup.

Správný postup je dodržovat mechanismus přepsání šablon v WooCommerce a zkopírovat šablonu, kterou potřebujete upravit, do adresáře vaší vlastní tématiky. woocommerce/ Změny provádějte v podpůrných složkách (subfolders). Tímto způsobem bude WooCommerce prioritně načítat verzi funkcí, která je součástí vašeho tématu, a aktualizace pluginů neovlivní vaše vlastní úpravy.

Jak vytvořit vlastní rozložení pro stránky obchodu v systému WooCommerce?

Nejefektivnějším způsobem, jak vytvořit vlastní rozvržení pro stránky obchodu, je přepsat (override) příslušné kódy. archive-product.php Šablonský soubor. Můžete zcela přepracovat HTML strukturu tohoto souboru.

Jiný, více modulární způsob je použití „hooků“. Obsah stránek obchodu je především tvořen… woocommerce_before_main_content、woocommerce_archive_description、woocommerce_before_shop_loop、woocommerce_after_shop_loop Řízení probíhá pomocí „hooků“. Můžete odstranit výchozí cykly a mezi těmito hooky vložit vlastní, přizpůsobené dotazy a cyklické struktury, abyste dosáhli jedinečného uspořádání prvků v podobě mřížky, seznamu nebo typu „masonry“.

Zároveň můžete v kombinaci s nástrojem WordPress Customizer nebo vytvořením stránky s nastavitelnými možnostmi tématu umožnit uživatelům měnit rozložení stránek, aniž by museli upravovat kód.

Jak správně přidat vlastní JavaScript k tématu WooCommerce?

Při přidávání vlastního JavaScriptu do tematického souboru WooCommerce je třeba dodržovat osvědčené postupy pro řazení WordPress skriptů. Ve vašem případě byste měli: functions.php Ve souboru se používá… wp_enqueue_script Funkce slouží k registraci a načítání skriptů.

Ujistěte se, že používáte… wp_enqueue_script Při nastavování závislostí se používá třetí parametr – například pro závislost na knihovně jQuery. U skriptů specifických pro WooCommerce může být někdy nutné použít tyto závislosti. wc-add-to-cart-variation(Používá se pro proměnné produkty) nebo wc-checkout(Použito na stránce pro úhradu.) Prostřednictvím wp_localize_script Funkce vám umožňují bezpečně přenášet PHP proměnné (jako jsou AJAX adresy, adresa webové stránky atd.) do vašich JavaScript souborů.

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' ), // Závislosti
'1.0.0',
true // Načtení v podkladu stránky
);
`wp_localize_script('my-woocommerce-script', 'myWooParams', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_wc_scripts' );