Tutorial asas dan panduan amali untuk membangunkan ekstensi WooCommerce.

Mengapa perlu membangunkan tambahan (extension) untuk WooCommerce?

WooCommerce, sebagai plugin e-dagang yang paling berkuasa dalam ekosistem WordPress, telah meliputi keperluan asas operasi kedai dalam talian, seperti pengurusan produk, keranjang beli-belah, pembayaran, dan proses penyelesaian pembelian. Namun, setiap perniagaan mempunyai model perniagaan, ciri-ciri produk, dan proses operasi yang unik. Fungsi standard seringkali tidak dapat memenuhi keperluan seperti konfigurasi produk yang disesuaikan, peraturan pengiraan kos penghantaran yang kompleks, integrasi dengan sistem perancangan sumber perusahaan (ERP) tertentu, atau penciptaan sistem keanggotaan yang khusus. Dalam situasi seperti ini, pembangunan tambahan (extension) khusus untuk WooCommerce menjadi pilihan yang tidak dapat dielakkan.

Dengan mengembangkan tambahan (extensions), pembangun boleh mengemas logik perniagaan tertentu ke dalam modul yang berasingan, dan dengan cara ini dapat meningkatkan atau mengubah fungsi kedai tanpa perlu mengubah kod asas WooCommerce. Pendekatan ini memastikan keserasian dan kemudahan penyelenggaraan tambahan tersebut, serta memudahkan kemas kini dan peningkatan pada masa hadapan. Sama ada untuk menyediakan penyelesaian bagi industri tertentu (seperti perkhidmatan tempahan, muat turun digital, sistem langganan), atau untuk mengoptimumkan pengalaman pengguna (seperti pencarian yang lebih baik, cadangan peribadi), tambahan yang disesuaikan merupakan cara penting untuk mencapai keunikan perniagaan dan kawalan teknikal yang lebih baik.

Membina persekitaran pembangunan untuk pengembangan tambahan (extensions) untuk WooCommerce

Sebelum mula menulis kod, sebuah persekitaran pembangunan tempatan yang stabil dan mirip dengan persekitaran produksi adalah sangat penting. Ini bukan sahaja dapat meningkatkan kecekapan pembangunan, tetapi juga dapat mengelakkan risiko yang mungkin timbul akibat eksperimen di pelayan dalam talian.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Pengalaman Analisis Mendalam WooCommerce: Panduan Lengkap Dari Konfigurasi Asas Hingga Operasi Yang Cekap。

Konfigurasi persekitaran pembangunan tempatan

Disyorkan untuk menggunakan persekitaran integrasi pelayan tempatan, seperti Local by Flywheel, Laragon, atau XAMPP. Alat-alat ini membolehkan anda mengkonfigurasi PHP, MySQL, dan pelayan web (seperti Apache atau Nginx) dengan cepat pada komputer anda sendiri. Anda perlu memastikan bahawa versi PHP yang digunakan adalah serasi dengan versi WordPress dan WooCommerce yang anda gunakan; biasanya, versi PHP 7.4 atau lebih tinggi disyorkan. Selain itu, anda juga perlu memasang editor kod di komputer tempatan, seperti Visual Studio Code atau PhpStorm, yang menyediakan sokongan yang baik untuk pembangunan PHP dan WordPress.

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

Memasang WordPress dan WooCommerce

Dalam persekitaran pelayan tempatan anda, pertama-tama pasang WordPress yang baru. Disyorkan untuk memuat turun versi terkini dari WordPress.org. Setelah pemasangan selesai, masuk ke halaman “Plugins” > “Install Plugins” di panel kawalan WordPress, cari dan pasang plugin yang diperlukan. WooCommerceLakukan konfigurasi asas mengikut panduan penyetelan WooCommerce, buat sebuah produk ujian, dan tetapkan kaedah pembayaran serta kos penghantaran, supaya dapat menyediakan senario ujian yang sebenar untuk pembangunan tambahan pada masa akan datang. Selain itu, disyorkan untuk mengaktifkan mod pembangunan (debug mode) di WordPress. wp-config.php Dokumen tersebut akan WP_DEBUG Konstanta ditetapkan kepada trueIni membantu mengesan ralat dengan cepat semasa proses pembangunan.

Membuat plugin pertama anda untuk WooCommerce

Ekstensi WooCommerce pada dasarnya adalah sebuah plugin untuk WordPress. Langkah pertama dalam membuat sebuah plugin adalah untuk mewujudkan struktur fail yang betul dan menyatakan maklumat tentang plugin tersebut.

Struktur fail asas untuk plugin

Dalam direktori pemasangan WordPress anda… wp-content/plugins Dalam folder tersebut, buatlah sebuah folder baru, sebagai contoh… my-first-woocommerce-extensionDalam folder ini, buat fail plugin utama, yang biasanya dinamakan berdasarkan nama plugin tersebut, seperti… my-first-woocommerce-extension.phpIni adalah titik masuk untuk plugin, dan ia mesti mengandungi ulasan kepala plugin WordPress standard.

<?php
/**
 * Plugin Name: My First WooCommerce Extension
 * Plugin URI:  https://yourwebsite.com/
 * Description: 一个简单的 WooCommerce 扩展示例，用于演示开发基础。
 * Version:     1.0.0
 * Author:      Your Name
 * License:     GPL v2 or later
 * Text Domain: my-first-wc-ext
 */

Tambahkan satu fungsi pengaitan (function hook) yang mudah.

Untuk memastikan bahawa pengembangan kami hanya berjalan apabila WooCommerce diaktifkan, dan untuk menambahkan ciri-ciri dengan selamat, kami perlu menggunakan Action Hook atau Filter Hook. Berikut adalah contoh yang menambahkan segmen teks khusus selepas tajuk halaman produk individu. Kami menggunakan… woocommerce_single_product_summary Pengaitan tindakan ini.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Apa itu WooCommerce dan komponen utamanya?。

// 防止文件被直接访问
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// 检查 WooCommerce 是否激活
if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {

add_action( 'woocommerce_single_product_summary', 'my_custom_product_message', 6 );

function my_custom_product_message() {
        echo '<p class="my-custom-text">Ini adalah teks yang ditambahkan melalui pengembangan khusus (custom extension).</p>';
    }
}

Simpan kod di atas ke dalam fail plugin utama anda, kemudian masuk ke panel pentadbiran WordPress untuk mengaktifkan plugin tersebut. Kunjungi halaman produk mana-mana, dan anda sepatutnya dapat melihat ayat khusus yang telah ditambahkan berhampiran tajuk produk tersebut. Contoh mudah ini menunjukkan bagaimana untuk mengintervensi proses rendering dalam WooCommerce melalui penggunaan “hooks”.

Mendalami Intipati: Menggunakan Hook Aksi dan Penapis

Kekuatan pengembangan (extensibility) WooCommerce sangat bergantung pada sistem hook yang besar dan fleksibel yang dimilikinya. Memahami dan menggunakan hook dengan mahir merupakan asas untuk melakukan pembangunan peringkat lanjut (advanced development).

Contoh penggunaan hook untuk tindakan biasa (Common action hooks examples)

Action hooks membenarkan anda “melaksanakan” kod anda sendiri pada masa-masa tertentu. Sebagai contoh, anda mungkin ingin memulakan operasi menghantar data ke sistem luaran apabila status pesanan berubah kepada “Selesai”. Ini boleh dilakukan dengan menggunakan action hooks. woocommerce_order_status_completed Pengimplementasian hook.

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

add_action( 'woocommerce_order_status_completed', 'send_order_to_erp' );

function send_order_to_erp( $order_id ) {
    $order = wc_get_order( $order_id );
    // 编写你的逻辑，例如获取订单数据并调用外部 API
    // error_log( "订单 #{$order_id} 已完成，准备同步至ERP。" );
}

Satu senario yang biasa lagi adalah menambahkan bidang khusus (custom fields) pada halaman pembayaran. Ini boleh dilakukan dengan menggunakan… woocommerce_after_order_notes Action Hook.

Contoh penggunaan hook penapis yang sering digunakan

Hook untuk penapis membenarkan anda “mengubah” data yang sudah sedia ada. Sebagai contoh, anda mungkin ingin menambahkan yuran tambahan yang tetap kepada semua harga produk, atau mengubah hasil pengiraan kos penghantaran. Anda boleh mengubah harga sesuatu barang dalam keranjang beli-belah menggunakan fungsi ini. woocommerce_product_get_price Penapis.

add_filter( 'woocommerce_product_get_price', 'increase_price_by_ten', 10, 2 );

function increase_price_by_ten( $price, $product ) {
    // 只对特定产品ID为 99 的产品生效
    if ( 99 === $product->get_id() ) {
        $price = $price + 10;
    }
    return $price;
}

Mengubah bidang pembayaran adalah aplikasi tipikal untuk penggunaan hook penapis lain, yang digunakan untuk… woocommerce_checkout_fields Penapis boleh ditambah, dihapus, atau disusun semula dengan mudah.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menganalisis WooCommerce secara mendalam: Panduan lengkap untuk membina laman web e-dagang berprestasi tinggi dari awal.。

Pembangunan Lanjutan: Mencipta Tab Produk Yang Dikustomisasi

Untuk menyediakan contoh praktikal yang lebih lengkap, kami akan membuat ciri yang membolehkan menambahkan tab khusus yang dinamakan “Spesifikasi Produk” pada halaman produk.

Daftar tab produk baru

Pertama sekali, kita perlu menggunakan woocommerce_product_tabs Kita menggunakan penapis untuk menambahkan tab tambahan ke senarai produk yang sedia ada (seperti “Deskripsi”, “Ulasan”).

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

add_filter( 'woocommerce_product_tabs', 'add_custom_specification_tab' );
function add_custom_specification_tab( $tabs ) {
    // 添加新选项卡
    $tabs['specification_tab'] = array(
        'title'    => __( '规格参数', 'my-first-wc-ext' ),
        'priority' => 50,
        'callback' => 'display_custom_specification_tab_content'
    );
    return $tabs;
}

Mendefinisikan fungsi untuk menunjukkan kandungan tab

Seterusnya, kita perlu mendefinisikan fungsi panggilan balik (callback function) yang disebutkan di atas. display_custom_specification_tab_contentIa digunakan untuk mengeluarkan kandungan HTML dalam tab tersebut. Dalam contoh ini, kita hanya menunjukkan segmen teks yang telah dikodkan secara tetap, tetapi dalam projek sebenar, anda mungkin akan mengambil data daripada bidang khusus produk (yang dibina menggunakan…) Advanced Custom Fields Data boleh diperoleh secara dinamik daripada tambahan (plugin) atau metadata post yang asli.

function display_custom_specification_tab_content() {
    // 这里可以编写从数据库获取数据的逻辑
    echo '<h2>Spesifikasi Produk Terperinci</h2>';
    echo '<p>Berikut adalah butiran spesifikasi teknikal, bahan, saiz, dan maklumat lain produk tersebut. Pembangun boleh menghubungkan bidang khusus (custom fields) untuk menunjukkan kandungan secara dinamik.</p>';
    echo '<ul>';
    echo '<li>Material: Aluminum alloy berkualiti tinggi</li>';
    echo '<li>Saiz: 30cm x 20cm x 10cm</li>';
    echo '<li>Berat: 1.5kg</li>';
    echo '</ul>';
}

Masukkan kod tersebut ke dalam fail plugin utama anda, simpan perubahan tersebut, kemudian refresh halaman produk. Anda sepatutnya dapat melihat bahawa tab “Spesifikasi” baru muncul di sebelah tab “Deskripsi”. Kes praktikal ini menggunakan hook penapis (filter hooks) untuk mengubah struktur data WooCommerce, dan fungsi panggilan balik (callback functions) untuk menghasilkan kandungan yang dipaparkan di halaman web. Ini merupakan model pembinaan yang biasa digunakan untuk banyak fungsi tambahan (extensions).

RINGKASAN

Membangunkan tambahan (extension) untuk WooCommerce merupakan proses yang kuat untuk mengubah platform e-dagang yang serba guna menjadi penyelesaian perniagaan yang disesuaikan dengan keperluan khusus. Kami bermula dengan memahami keperluan untuk membangunkan tambahan yang diperibadikan, kemudian membina persekitaran pembangunan tempatan yang profesional, dan secara beransur-ansur mencipta sebuah plugin asas yang mempunyai struktur yang standard. Dengan meneroka sistem hook (pautan) dan filter dalam WooCommerce dengan mendalam, kami mempelajari kaedah utama untuk memasukkan atau mengubah fungsi pada titik-titik kritikal dalam proses pembangunan. Latihan praktikal terakhir, iaitu mencipta tab produk yang diperibadikan, telah menyatukan keseluruhan proses pembangunan daripada penggunaan hook hingga rendering kandungan di bahagian hadapan (front end). Ingatlah untuk sentiasa mengutamakan penggunaan hook berbanding membuat perubahan langsung pada fail-fail asas, kerana ini akan memastikan tambahan yang dibangunkan mempunyai keserasian yang baik, mudah diselenggara, dan dapat dinaik taraf bersama-sama dengan versi terkini WooCommerce.

FAQ - Soalan Lazim

Bagaimana untuk menentukan sama ada sebuah fungsi harus menggunakan Action Hook atau Filter Hook?

Satu kaedah penilaian yang mudah adalah: Jika kod anda perlu “melakukan sesuatu” pada masa tertentu (seperti menghantar e-mel, merekod log, atau menghasilkan kandungan HTML), maka biasanya anda akan menggunakan “action hook” (pautan tindakan).add_actionJika kod anda perlu “mengubah suatu nilai yang sedia ada” (contohnya, mengubah harga, menyesuaikan kos penghantaran, atau mengedit kandungan teks), maka anda sepatutnya menggunakan fungsi pengait filter (filter hook).add_filterPada dasarnya, penapis (filter) adalah sejenis tingkah laku khusus yang memerlukan pengembalian nilai (return value).

Apakah yang perlu saya perhatikan agar penambahan (extension) saya serasi dengan pelbagai versi WooCommerce?

Prinsip utama adalah untuk mengelakkan penggunaan fungsi dan kaedah yang telah dibatalkan (dibuang/dihentikan penggunaannya). Semasa proses pembangunan, rujuklah kepada dokumen pengembang rasmi yang sesuai dengan versi minimum WooCommerce yang anda gunakan. Gunakan pengujian syarat (conditional checks) untuk memeriksa sama ada fungsi atau kelas tertentu wujud atau tidak. Sebagai contoh, semasa membuat panggilan… wc_get_order Sebelumnya, anda boleh memeriksa terlebih dahulu sama ada fungsi tersebut wujud. Jika tidak, anda boleh kembali menggunakan versi yang lebih lama. get_order Cara: Gunakan secara aktif konstanta versi WordPress dan WooCommerce untuk melakukan pemeriksaan ciri-ciri (feature detection).

Bagaimanakah untuk menyelesaikan masalah kod (debugging) dengan cekap semasa proses pembangunan?

Langkah pertama adalah mengaktifkan mod pembangunan (debug mode) di WordPress. wp-config.php Di dalam pengaturan define( 'WP_DEBUG', true );Gunakan error_log() Fungsi tersebut akan merekod maklumat variabel ke dalam log ralat server, yang sangat berguna untuk mengesan aliran logik program. Selain itu, anda boleh memasang plugin pembangun seperti Query Monitor yang dapat menunjukkan secara masa nyata hook yang dilaksanakan, pertanyaan pangkalan data, ralat PHP, dan amaran. Ia merupakan alat bantu yang sangat kuat untuk pembangunan tambahan (extension) untuk WooCommerce.

Adakah ekstensi yang saya bangunkan boleh dihantar ke kedai ekstensi rasmi WooCommerce?

Boleh, tetapi proses dan keperluannya agak ketat. Ekstensi yang anda buat perlu mematuhi standard pengaturcaraan WordPress dan WooCommerce, menyediakan kod yang berkualiti tinggi dan bebas daripada ralat, serta menyokong penggunaan dalam pelbagai bahasa (internationalization) dengan baik. Anda juga perlu menghantar permohonan melalui laman web WooCommerce.com, di mana pasukan mereka akan meninjau keselamatan, kualiti kod, dan fungsi ekstensi tersebut. Bagi pembangun individu atau pasukan kecil, anda juga boleh memilih untuk mengeluarkan ekstensi tersebut di direktori plugin WordPress.org atau di pasaran pihak ketiga seperti CodeCanyon.