Panduan Permulaan untuk Membangunkan Tema WooCommerce: Membina Laman Web E-dagang Anda dari Awal

Jika anda sudah biasa dengan pembangunan tema untuk WordPress, maka mencipta tema khusus untuk WooCommerce akan menjadi lanjutan yang logik. WooCommerce, sebagai tambahan e-dagang untuk WordPress, mempunyai fungsi utamanya yang ditampilkan melalui pelbagai templat halaman yang boleh disesuaikan, pengulangan (looping), dan kod pendek (shortcodes). Sebuah tema WooCommerce perlu memanggil templat-templat ini dengan betul, serta memastikan semua gaya dan skrip dapat disatukan dengan lancar.

Untuk mengembangkan sebuah tema untuk WooCommerce, pertama sekali anda perlu memiliki sebuah tema asas WordPress sebagai titik permulaan. Tema tersebut boleh jadi sebuah tema anak (sub-theme) yang anda buat dari awal, atau sebuah tema yang telah dibangunkan berdasarkan rangka kerja sedia ada (seperti Underscores atau Storefront) dan kemudian diubahsuai. Yang penting, tema anda perlu menyatakan dengan jelas bahawa ia menyokong WooCommerce, supaya plugin dapat mengintegrasikan fail-fail templat mereka ke dalam struktur tema anda.

Proses tersebut melibatkan beberapa langkah kritikal: membina persekitaran pembangunan, memahami hierarki templat WooCommerce, membuat fail tema yang diperlukan, menggunakan fungsi “action” dan “filter hook” untuk penyesuaian ciri-ciri, serta ujian dan pengoptimuman produk akhir. Seterusnya, kita akan membincangkan setiap langkah ini secara terperinci.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Permulaan untuk Pembangunan Tema WordPress: Membina Tema Pertama Anda Daripada Awal。

Pembinaan persekitaran pembangunan dan struktur tema

Sebelum mula menulis sebarang kod, sebuah persekitaran pembangunan tempatan yang boleh dipercayai adalah sangat penting. Alat seperti Local, XAMPP, atau Docker disyorkan untuk membina dengan cepat persekitaran yang merangkumi PHP, MySQL, dan Apache/Nginx. Pastikan bahawa versi PHP anda memenuhi keperluan terkini untuk WooCommerce (biasanya PHP 7.4 atau lebih tinggi), dan pasanglah WordPress serta plugin WooCommerce dengan betul.

UltaHost – Penyedia Hosting untuk WordPress

Jaminan pemulangan wang dalam tempoh 30 hari, lebar jalur dan pangkalan data yang tidak terhad, perlindungan DDoS percuma, diskaun 50% untuk pembelian selama 3 tahun.

Lawati halaman

Cipta sebuah direktori topik yang baru, sebagai contoh… my-woocommerce-themeDan letakkan ia di… wp-content/themes/ Dalam direktori tersebut, sebuah tema yang menyokong WooCommerce pada tahap asas perlu mempunyai sekurang-kurangnya fail-fail teras berikut:

• style.cssFail gaya tema, yang mesti mengandungi ulasan kepala tema WordPress standard.
• index.phpFail templat utama untuk topik tersebut.
• functions.phpFail utama yang digunakan untuk menambahkan ciri-ciri tema, skrip pendaftaran, gaya (styles), dan pengisytiharan sokongan untuk WooCommerce.

Pertama sekali, style.css Dalam ulasan kepala (header comments), anda perlu mendefinisikan maklumat topik dengan jelas.

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

Seterusnya, functions.php Dalam fail tersebut, perkara pertama dan yang paling penting adalah untuk menyatakan bahawa tema anda menyokong WooCommerce. Ini dilakukan dengan… add_action Kekunci dan add_theme_support Fungsi ini dilaksanakan melalui kod program.

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

Mengerti dan meliputi templat WooCommerce

WooCommerce menggunakan sistem templat yang boleh disesuaikan. Semua fail templat lalai terletak dalam direktori plugin. templates/ Dalam folder tersebut. Untuk menyesuaikan templat-templat ini mengikut keperluan tema anda, anda perlu membuat sebuah fail dengan nama tertentu dalam direktori tema anda. woocommerce Salin folder tersebut, kemudian ikuti struktur laluan yang sama dalam plugin untuk menyalin dan mengubah suai fail templat yang bersesuaian.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Ultimatif untuk Membangunkan Tema WordPress: Membina Tema Kustom Pertama Anda Dari Awal Hingga Selesai.。

Sebagai contoh, jika anda ingin mengubah templat halaman produk yang tertentu, laluan laluan default untuk WooCommerce adalah… plugins/woocommerce/templates/single-product.phpAnda perlu membuat perkara berikut dalam tema anda:themes/my-woocommerce-theme/woocommerce/single-product.phpApabila fail ini wujud, WooCommerce akan memuat turun versi tema tersebut terlebih dahulu.

Lapisan templat (template hierarchy) merupakan satu konsep yang penting. WooCommerce telah mengintegrasikan dengan bijak lapisan templat standard WordPress. Sebagai contoh, untuk halaman kedai (Shop Page), WordPress akan mencari templat mengikut urutan berikut:archive-product.php > archive.php > index.phpOleh itu, penciptaan… archive-product.php Ini adalah kaedah yang paling langsung dan berkesan untuk halaman senarai kedai khusus (customized store list page).

Fail templat asas yang sering digunakan dan disyorkan untuk ditulis semula terlebih dahulu termasuk:
- single-product.phpHalaman butiran produk individu.
- archive-product.phpHalaman Arkib Produk (Laman Utama Kedai).
- cart/cart.phpHalaman Keranjang Beli-belah.
- checkout/form-checkout.phpHalaman pembayaran.
- myaccount/my-account.phpHalaman akaun saya.

hosting.com Hosting Bersama

Prestasi tinggi, menampilkan CPU AMD EPYC, storan SSD NVMe dan LiteSpeed, dengan sokongan pakar dalaman 24/7, langkah keselamatan canggih termasuk SSL, perlindungan serangan paksa kata laluan, perisian hasad dan DDoS, menjimatkan sehingga 73%.

Lawati halaman

Semasa menutupi templat, amalan terbaik adalah dengan menyalin fail templat asal dari plugin WooCommerce ke direktori yang sesuai dengan tema anda, kemudian membuat modifikasi. Ini dilakukan untuk memastikan bahawa fungsi asas tidak terganggu.

Menggunakan hook untuk penyesuaian fungsi

Selain daripada menggantikan fail templat, WooCommerce juga menyediakan sebilangan besar aksi (actions) yang boleh digunakan untuk mengubah tingkah laku aplikasi e-dagang tersebut.action) dan penapis (filterAlat “hook” membenarkan anda menambah, menghapus, atau mengubah kandungan dan fungsi tanpa perlu mengedit fail templat asas. Kaedah ini biasanya lebih ringan dan mudah diselenggara berbanding dengan menulis semula templat secara langsung.

Action hooks membenarkan anda menjalankan kod khusus di lokasi tertentu. Sebagai contoh, anda boleh menambahkan blok khusus selepas maklumat ringkasan produk.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Membina Laman Web Profesional: Panduan Lengkap Untuk Membangunkan Tema WordPress yang Dikustomisasi dari Kosong。

function my_custom_product_message() {
    echo '<p class="my-custom-notice">🎉 Produk ini sedang menyertai acara promosi yang berlangsung untuk tempoh terhad!</p>';
}
add_action( 'woocommerce_single_product_summary', 'my_custom_product_message', 20 );

Di sini,woocommerce_single_product_summary Ia adalah nama hook.20 Ia merupakan nombor keutamaan (yang menentukan urutan pelaksanaan).

Hook untuk penapis membenarkan anda mengubah data. Sebagai contoh, anda boleh mengubah teks butang “Tambah ke Keranjang Beli-belah”.

Hosting Bersama InterServer

Hosting kongsi: 1TB/bulan pada $2.50 USD, bulan pertama pada $0.10 USD dengan kod promo tryinterserver. 461 skrip aplikasi awan tersedia untuk pemasangan satu klik.

Lawati halaman

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

Satu alat yang sangat berkuasa lagi ialah “template hook”. WooCommerce telah meletakkan banyak fungsi (features) dalam fail-fail templat (templates). do_action Dengan mencari hook-hook ini, anda boleh mengawal output struktur halaman dengan tepat. Anda boleh menggunakannya untuk… remove_action Untuk menghapus elemen yang tidak diperlukan, atau gunakan… add_action Menyisipkan elemen baru di lokasi tertentu adalah lebih fleksibel berbanding mengedit fail templat secara langsung, terutama ketika mengemas kini plugin WooCommerce, kerana perubahan yang anda buat kurang cenderung untuk ditimpa.

Pengaturan gaya (style customization) dan reka bentuk responsif (responsive design)

WooCommerce mempunyai satu set gaya asas yang disertakan, tetapi untuk memastikannya selaras dengan reka bentuk tema anda, penyesuaian gaya yang lebih mendalam adalah perlu. Adalah disyorkan untuk membuat sebuah fail CSS yang berasingan. woocommerce.cssDan juga… functions.php Data dimuat turun berdasarkan syarat-syarat tertentu, seperti yang ditunjukkan dalam contoh sebelumnya.

Inti kepada penyesuaian gaya adalah pemahaman terhadap struktur HTML dan kelas CSS yang dihasilkan oleh WooCommerce. Menggunakan alat pembangun (developer tools) dalam pelayar untuk memeriksa elemen-elemen seperti senarai produk dan jadual keranjang beli-belah merupakan cara yang cepat untuk memulakan. WooCommerce telah menambahkan kelas CSS yang kaya dan bermakna (semantic) untuk hampir semua elemen. .product、.woocommerce-loop-product__link、.onsale dan sebagainya.

Sebagai contoh, untuk mengubah gaya label “Special Price”:

/* 在你的 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 */
}

Reka bentuk responsif sangat penting untuk laman web e-dagang. Anda perlu memastikan bahawa grid produk dan jadual (seperti keranjang beli-belah, butiran pesanan) dapat dipaparkan dengan baik pada pelbagai saiz skrin. Gunakan kueri media CSS dan susunan Flexbox/Grid untuk mengubah susunan senarai produk.

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

RINGKASAN

Pembangunan tema untuk WooCommerce adalah proses menggabungkan pengetahuan tentang tema WordPress dengan keperluan khusus perniagaan e-dagang. Kuncinya adalah memahami mekanisme penggantian templat (template coverage) dan menggunakan fungsi “actions” serta “filters hooks” dengan mahir untuk mencapai penyesuaian fungsi yang fleksibel. Dari membina persekitaran pembangunan, mengisytiharkan sokongan yang diperlukan, menggantikan templat-templat utama, hingga menggunakan hooks untuk membuat penyesuaian halus dan penyesuaian gaya yang mendalam, setiap langkah merupakan asas untuk membina sebuah kedai dalam talian yang profesional, unik, dan cekap. Ingatlah sentiasa bahawa pembangunan sebaiknya dilakukan dalam sub-theme (tema anak), dan gunakan hooks sebagai pilihan utama berbanding mengubah templat asal secara langsung. Ini merupakan amalan terbaik untuk memastikan kod mudah diselenggara dan kompatibel pada masa hadapan.

FAQ - Soalan Lazim

Bagaimana untuk menghapus atau mengatur semula elemen pada halaman butiran produk dalam sebuah tema?

Anda boleh menggunakan remove_action Fungsi ini digunakan untuk menghapus elemen tertentu daripada kawasan ringkasan produk. Pertama sekali, anda perlu mengetahui melalui hook mana elemen tersebut ditambahkan, serta keutamaannya (prioriti)nya.

Sebagai contoh, untuk menghapuskan tajuk produk, anda boleh melihat… plugins/woocommerce/templates/single-product/title.phpAnda akan mendapati bahawa ia berfungsi melalui pengait (hook). woocommerce_single_product_summary Tambah dengan keutamaan 5. Jadi, dalam topik anda… functions.php Anda hanya perlu menambahkan kod berikut untuk menghapuskannya:

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

Untuk mengatur semula susunan, anda perlu menghapus semua elemen yang berkaitan terlebih dahulu, kemudian menambahkannya kembali mengikut urutan yang diinginkan. Alternatifnya, anda boleh mengatur keutamaan mereka dengan menggunakan nombor; semakin kecil nombor tersebut, semakin awal elemen tersebut akan dijalankan dan kedudukannya dalam output akan lebih dekat ke bahagian atas.

Mengapa pengubahsuaian tema saya hilang selepas saya mengemaskini WooCommerce?

Jika anda membuat perubahan secara langsung pada direktori plugin WooCommerce…wp-content/plugins/woocommerce/Jika anda menggunakan fail templat yang terletak di bawah direktori tersebut, maka setiap kali plugin diperbaharui, semua perubahan yang anda buat akan ditimpa. Ini merupakan amalan yang sangat tidak disyorkan.

Cara yang betul adalah dengan mengikuti mekanisme penggantian tema (template override) yang disediakan oleh WooCommerce. Salin fail templat yang perlu diubah ke dalam direktori tema (theme directory) anda. woocommerce/ Perubahan dibuat dalam folder sub. Dengan cara ini, WooCommerce akan memuatkan versi tema anda terlebih dahulu, dan apabila plugin diperbaharui, ia tidak akan mempengaruhi kandungan yang anda buat sendiri.

Bagaimana untuk membuat reka bentuk yang disesuaikan untuk halaman kedai WooCommerce?

Cara yang paling berkesan untuk membuat reka letak khusus untuk halaman kedai adalah dengan menulis semula (overwriting) kod yang digunakan untuk reka letak tersebut. archive-product.php Fail templat. Anda boleh merancang semula struktur HTML fail ini sepenuhnya.

Satu kaedah yang lebih modular adalah dengan menggunakan “hook” (pautan atau mekanisme pengaitan). Kandungan halaman kedai kebanyakannya terdiri daripada… woocommerce_before_main_content、woocommerce_archive_description、woocommerce_before_shop_loop、woocommerce_after_shop_loop Kawalan melalui “hook” (tangkai penghubung). Anda boleh menghapus gelung lalai dan memasukkan pertanyaan khusus serta struktur gelung anda sendiri di antara hook-hook tersebut, untuk mencipta reka bentuk grid, senarai, atau susunan elemen (masonry layout) yang unik.

Pada masa yang sama, dengan menggabungkan penggunaan alat penyesuaian (customizer) WordPress atau membuat halaman pilihan tema (theme options page), anda boleh membenarkan pengguna untuk menukar reka letak (layout) tanpa perlu mengedit kod.

Bagaimana untuk menambah JavaScript khusus dengan betul ke tema WordPress WooCommerce?

Untuk menambahkan JavaScript tersuai ke tema WooCommerce, anda harus mengikuti amalan terbaik untuk mengatur skrip di WordPress. Dalam tema anda, functions.php Dalam dokumen tersebut, penggunaan wp_enqueue_script Fungsi untuk mendaftar dan memuatkan skrip.

Pastikan untuk menggunakan… wp_enqueue_script Ketika menggunakan perkhidmatan tertentu, anda boleh menetapkan kebergantungan melalui parameter ketiga, contohnya kebergantungan pada jQuery. Bagi skrip yang khusus untuk WooCommerce, kadangkala ia memerlukan penggunaan jQuery. wc-add-to-cart-variation(Untuk produk yang boleh diubahsuai) atau wc-checkout(Untuk halaman pembayaran). Sila lalui proses pembayaran dengan mengikuti arahan yang diberikan. wp_localize_script Dalam fungsi ini, anda boleh dengan selamat menghantar pemboleh ubah PHP (seperti URL AJAX, alamat laman web, dsb.) ke dalam fail JavaScript anda.

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' ), // Keperluan (dependencies)
'1.0.0',
true // Dimuatkan di bahagian kaki halaman
);
`wp_localize_script('my-woocommerce-script', 'myWooParams', array(...));`
'ajax_url' => admin_url( 'admin-ajax.php' ),
) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_wc_scripts' );