คู่มือเริ่มต้นการพัฒนา WooCommerce Theme: สร้างเว็บไซต์ E-commerce ของคุณตั้งแต่เริ่มต้น

หากคุณคุ้นเคยกับการพัฒนา WordPress Theme อยู่แล้ว การสร้างธีมสำหรับ WooCommerce จะเป็นการต่อยอดตามธรรมชาติ WooCommerce ในฐานะปลั๊กอิน E-commerce ของ WordPress ทำงานหลักผ่านชุดเทมเพลตหน้า, ลูป และชอร์ตโค้ดที่กำหนดเอง ธีม WooCommerce จำเป็นต้องเรียกใช้เทมเพลตเหล่านี้อย่างถูกต้อง และต้องมั่นใจว่าสไตล์และสคริปต์ทั้งหมดสามารถผสานรวมได้อย่างราบรื่น

การพัฒนา WooCommerce Theme ก่อนอื่นหมายความว่าคุณต้องมีธีม WordPress พื้นฐานเป็นจุดเริ่มต้น ซึ่งอาจเป็นธีมลูกที่คุณสร้างตั้งแต่เริ่มต้น หรือพัฒนาต่อยอดจากเฟรมเวิร์กที่มีอยู่ (เช่น Underscores หรือ Storefront) ประเด็นสำคัญคือธีมของคุณต้องประกาศการรองรับ WooCommerce เพื่อที่ปลั๊กอินจะได้ฉีดไฟล์เทมเพลตเข้าไปในโครงสร้างธีมของคุณ

กระบวนการทั้งหมดเกี่ยวข้องกับขั้นตอนสำคัญหลายประการ: การตั้งค่า environment การพัฒนา, การทำความเข้าใจลำดับชั้นเทมเพลตของ WooCommerce, การสร้างไฟล์ธีมที่จำเป็น, การใช้ action และ filter hooks สำหรับปรับแต่งฟังก์ชันการทำงาน, และการทดสอบและปรับปรุงผลิตภัณฑ์สุดท้าย ต่อไปเราจะแยกย่อยขั้นตอนเหล่านี้ทีละขั้นตอน

แนะนำให้อ่าน คู่มือเริ่มต้นการพัฒนา WordPress Theme: สร้างธีมแรกของคุณตั้งแต่ศูนย์。

การตั้งค่าสภาพแวดล้อมการพัฒนาและโครงสร้างธีม

ก่อนเริ่มต้นการเขียนโค้ดใด ๆ สภาพแวดล้อมการพัฒนาท้องถิ่นที่เชื่อถือได้เป็นสิ่งจำเป็น ควรใช้เครื่องมือเช่น Local, XAMPP หรือ Docker เพื่อตั้งค่าสภาพแวดล้อมอย่างรวดเร็วที่รวม PHP, MySQL และ Apache/Nginx ตรวจสอบให้แน่ใจว่าเวอร์ชัน PHP ของคุณตรงตามข้อกำหนดล่าสุดของ WooCommerce (โดยทั่วไปคือ PHP 7.4 หรือสูงกว่า) และติดตั้ง WordPress และปลั๊กอิน WooCommerce ให้เรียบร้อย

UltaHost WordPress โฮสติ้ง

การรับประกันคืนเงินภายใน 30 วัน, แบนด์วิธและฐานข้อมูลไม่จำกัด, การป้องกัน DDoS ฟรี, ซื้อ 3 ปีลดราคา 50%

เข้าถึงหน้าเว็บ

สร้างไดเรกทอรีธีมใหม่ เช่น my-woocommerce-themeและวางไว้ในไดเรกทอรี wp-content/themes/ ธีมพื้นฐานที่รองรับ WooCommerce อย่างน้อยต้องมีไฟล์หลักดังต่อไปนี้:

• style.css: สไตล์ชีตของธีม ซึ่งต้องรวมถึงส่วนหัวความคิดเห็นมาตรวดของ WordPress ธีม
• index.php: ไฟล์แม่แบบหลักของธีม
• functions.php: ไฟล์หลักสำหรับเพิ่มฟังก์ชันการทำงานของธีม, การลงทะเบียนสคริปต์และสไตล์, การประกาศการรองรับ WooCommerce

ก่อนอื่นใน style.css : ในส่วนหัวความคิดเห็นของ คุณต้องกำหนดข้อมูลธีมอย่างชัดเจน

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

ต่อไป ใน functions.php ในไฟล์ สิ่งแรกและสำคัญที่สุดคือการประกาศว่าธีมของคุณรองรับ WooCommerce ซึ่งทำได้ผ่าน add_action ฮุคและ add_theme_support ฟังก์ชัน

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

การทำความเข้าใจและการแทนที่เทมเพลต WooCommerce

WooCommerce ใช้ระบบเทมเพลตที่สามารถแทนที่ได้ เทมเพลตเริ่มต้นทั้งหมดอยู่ในไดเรกทอรีปลั๊กอินที่ templates/ โฟลเดอร์ ในการปรับแต่งเทมเพลตเหล่านี้ในธีมของคุณ คุณต้องสร้างโฟลเดอร์ชื่อ woocommerce โฟลเดอร์ แล้วคัดลอกและแก้ไขไฟล์เทมเพลตที่เกี่ยวข้องตามโครงสร้างเส้นทางเดียวกันในปลั๊กอิน

แนะนำให้อ่าน คู่มือขั้นสูงสุดในการพัฒนา WordPress Theme: สร้างธีมที่กำหนดเองของคุณตั้งแต่เริ่มต้นจนสำเร็จ。

ตัวอย่างเช่น หากคุณต้องการแก้ไขเทมเพลตของหน้าผลิตภัณฑ์เดี่ยว เส้นทางเริ่มต้นของ WooCommerce คือ plugins/woocommerce/templates/single-product.phpคุณจำเป็นต้องสร้างในธีมของคุณ:themes/my-woocommerce-theme/woocommerce/single-product.phpเมื่อไฟล์นี้มีอยู่ WooCommerce จะโหลดเวอร์ชันจากธีมของคุณเป็นลำดับแรก

ระดับชั้นของเทมเพลตเป็นอีกแนวคิดหลัก WooCommerce ได้ผสานเข้ากับระดับชั้นเทมเพลตมาตรฐานของ WordPress อย่างชาญฉลาด ตัวอย่างเช่น สำหรับหน้าเว็บร้านค้า (Shop Page) WordPress จะค้นหาเทมเพลตตามลำดับต่อไปนี้:archive-product.php > archive.php > index.phpดังนั้น การสร้าง archive-product.php จึงเป็นวิธีที่ตรงไปตรงมาและมีประสิทธิภาพมากที่สุดในการปรับแต่งหน้ารายการสินค้าของร้านค้า

ไฟล์เทมเพลตหลักที่ใช้บ่อยและแนะนำให้ทำการแทนที่ก่อน ได้แก่:
- single-product.php: หน้ารายละเอียดสินค้าเดียว
- archive-product.php: หน้ารวบรวมสินค้า (หน้าหลักร้านค้า)
- cart/cart.php: หน้าตะกร้าสินค้า
- checkout/form-checkout.php: หน้าชำระเงิน
- myaccount/my-account.php: หน้าบัญชีของฉัน

hosting.com 共享主机

高性能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候24小时、全天候的专家内部支持，高级安全措施，包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 73%

เข้าถึงหน้าเว็บ

เมื่อต้องการแทนที่เทมเพลต ขั้นตอนที่ดีที่สุดคือคัดลอกไฟล์เทมเพลตต้นฉบับจากปลั๊กอิน WooCommerce ไปยังไดเรกทอรีที่ตรงกันในธีมของคุณก่อน แล้วจึงทำการแก้ไข เพื่อให้แน่ใจว่าฟังก์ชันหลักจะไม่เสียหาย

ใช้ฮุกสำหรับการปรับแต่งฟังก์ชัน

นอกจากแทนที่ไฟล์เทมเพลตแล้ว WooCommerce ยังมีแอ็กชัน (action) และฟิลเตอร์ (filter) ฮุคที่อนุญาตให้คุณเพิ่ม ลบ หรือแก้ไขเนื้อหาและฟังก์ชันการทำงานโดยไม่ต้องแก้ไขไฟล์เทมเพลตหลัก ซึ่งโดยทั่วไปจะเบากว่าและบำรุงรักษาง่ายกว่าการเขียนทับเทมเพลตโดยตรง

ฮุคแอ็กชันอนุญาตให้คุณรันโค้ดที่กำหนดเองในตำแหน่งเฉพาะ เช่น คุณสามารถเพิ่มบล็อกที่กำหนดเองหลังจากข้อมูลสรุปของผลิตภัณฑ์

แนะนำให้อ่าน สร้างเว็บไซต์มืออาชีพ: คู่มือฉบับสมบูรณ์ในการพัฒนา WordPress Theme แบบกำหนดเองตั้งแต่เริ่มต้น。

function my_custom_product_message() {
    echo '<p class="my-custom-notice">🎉 สินค้านี้เข้าร่วมกิจกรรมจำกัดเวลา!</p>';
}
add_action( 'woocommerce_single_product_summary', 'my_custom_product_message', 20 );

ที่นี่,woocommerce_single_product_summary เป็นชื่อของ hook20 คือตัวเลขลำดับความสำคัญ (กำหนดลำดับการดำเนินการ)

ตัวฟิลเตอร์ฮุคช่วยให้คุณสามารถปรับเปลี่ยนข้อมูลได้ ตัวอย่างเช่น การปรับเปลี่ยนข้อความของปุ่ม “เพิ่มลงในตะกร้าสินค้า”

โฮสติ้งแบบแชร์ของ InterServer

共享主机每月 $2.50 USD , 首月 $0.1 USD 优惠码 tryinterserver, 461个云应用脚本，一键安装。

เข้าถึงหน้าเว็บ

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

อีกเครื่องมือที่มีประสิทธิภาพคือเทมเพลตฮุค WooCommerce ได้วาง do_action การเรียกใช้ไว้ในไฟล์เทมเพลตจำนวนมาก ด้วยการค้นหาฮุคเหล่านี้ คุณสามารถควบคุมผลลัพธ์โครงสร้างหน้าได้อย่างแม่นยำ คุณสามารถใช้ remove_action เพื่อลบองค์ประกอบที่ไม่ต้องการ หรือใช้ add_action แทรกองค์ประกอบใหม่ในตำแหน่งเฉพาะ ซึ่งมีความยืดหยุ่นมากกว่าการแก้ไขไฟล์เทมเพลตโดยตรง โดยเฉพาะอย่างยิ่งเมื่ออัปเดตปลั๊กอิน WooCommerce การแก้ไขของคุณจะไม่ถูกเขียนทับได้ง่าย

การปรับแต่งสไตล์และการออกแบบที่ตอบสนอง

WooCommerce มีสไตล์พื้นฐานในตัว แต่เพื่อให้สอดคล้องกับภาษาการออกแบบธีมของคุณ การปรับแต่งสไตล์อย่างลึกซึ้งเป็นสิ่งจำเป็น แนะนำให้สร้างไฟล์ CSS แยกต่างหาก เช่น woocommerce.cssและสร้างที่เก็บโค้ดบน functions.php โหลดตามเงื่อนไขใน ดังตัวอย่างที่แสดงไว้ก่อนหน้านี้

หัวใจสำคัญของการปรับแต่งสไตล์คือการเข้าใจโครงสร้าง HTML และคลาส CSS ที่ WooCommerce สร้างขึ้น การใช้เครื่องมือนักพัฒนาของเบราว์เซอร์เพื่อตรวจสอบองค์ประกอบต่างๆ เช่น รายการสินค้า, ตะกร้าสินค้า เป็นวิธีการเริ่มต้นที่รวดเร็ว WooCommerce ได้เพิ่มคลาส CSS ที่อุดมไปด้วยความหมายให้กับองค์ประกอบเกือบทั้งหมด ตัวอย่างเช่น .product、.woocommerce-loop-product__link、.onsale เป็นต้น

ตัวอย่างเช่น การแก้ไขสไตล์ของป้าย “ราคาพิเศษ”:

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

การออกแบบที่ตอบสนองต่ออุปกรณ์มีความสำคัญอย่างยิ่งสำหรับเว็บไซต์อีคอมเมิร์ซ คุณต้องมั่นใจว่าตารางสินค้าและตารางต่างๆ (เช่น ตะกร้าสินค้า, รายละเอียดการสั่งซื้อ) สามารถแสดงผลได้ดีในทุกขนาดหน้าจอ ใช้ CSS media queries และ Flexbox/Grid layout เพื่อปรับโครงสร้างการจัดเรียงรายการสินค้า

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

สรุป

การพัฒนาเทมเพลต WooCommerce เป็นกระบวนการที่ผสมผสานความรู้เกี่ยวกับ WordPress theme กับความต้องการเฉพาะของอีคอมเมิร์ซ ประเด็นสำคัญคือการเข้าใจกลไกการแทนที่เทมเพลต และการใช้ action และ filter hooks อย่างเชี่ยวชาญเพื่อปรับแต่งฟังก์ชันการทำงานอย่างยืดหยุ่น ตั้งแต่การตั้งค่าแวดล้อม การประกาศการสนับสนุน การแทนที่เทมเพลตสำคัญ ไปจนถึงการใช้ hooks สำหรับการปรับแต่งรายละเอียดและการปรับสไตล์อย่างลึกซึ้ง ทุกขั้นตอนคือพื้นฐานในการสร้างร้านค้าออนไลน์ที่มีความเป็นมืออาชีพ เป็นเอกลักษณ์ และมีประสิทธิภาพ จำไว้เสมอว่า การพัฒนาใน child theme และการใช้ hooks เป็นลำดับแรกแทนการแก้ไขเทมเพลตหลักโดยตรง คือแนวปฏิบัติที่ดีที่สุดเพื่อรับประกันการบำรุงรักษาโค้ดและความเข้ากันได้ในอนาคต

คำถามที่พบบ่อย (FAQ)

วิธีการลบหรือจัดเรียงองค์ประกอบใหม่ในหน้าลายละเอียดสินค้าในธีม

คุณสามารถใช้ remove_action ฟังก์ชันเพื่อลบองค์ประกอบเฉพาะภายในพื้นที่สรุปสินค้า ก่อนอื่นคุณต้องรู้ว่าองค์ประกอบนั้นถูกเพิ่มผ่านฮุคใดและมีความสำคัญระดับใด

ตัวอย่างเช่น หากต้องการลบชื่อสินค้า คุณสามารถตรวจสอบ plugins/woocommerce/templates/single-product/title.phpจะพบว่ามันถูกเพิ่มผ่านฮุค woocommerce_single_product_summary เพิ่มด้วยลำดับความสำคัญ 5 จากนั้น ในธีมของคุณ functions.php เพิ่มโค้ดต่อไปนี้เพื่อลบออก:

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

หากต้องการจัดเรียงใหม่ คุณต้องลบองค์ประกอบที่เกี่ยวข้องทั้งหมดออกก่อน แล้วจึงเพิ่มกลับตามลำดับที่ต้องการ หรือเรียงลำดับโดยการปรับตัวเลขลำดับความสำคัญ ตัวเลขที่น้อยกว่าจะถูกดำเนินการก่อนและแสดงผลก่อน

ทำไมการแก้ไขธีมของฉันถึงหายไปหลังจากอัปเดต WooCommerce

หากคุณแก้ไขไฟล์เทมเพลตในไดเรกทอรีปลั๊กอิน WooCommerce (wp-content/plugins/woocommerce/) โดยตรง การแก้ไขเหล่านั้นจะถูกเขียนทับทุกครั้งที่ปลั๊กอินอัปเดต นี่เป็นวิธีการที่ไม่แนะนำอย่างยิ่ง

วิธีที่ถูกต้องคือการทำตามกลไกการแทนที่เทมเพลตของ WooCommerce โดยคัดลอกไฟล์เทมเพลตที่ต้องการแก้ไขไปยังโฟลเดอร์ย่อย woocommerce/ ในไดเรกทอรีธีมของคุณ แล้วจึงทำการแก้ไข ด้วยวิธีนี้ WooCommerce จะโหลดเวอร์ชันจากธีมของคุณก่อน และการอัปเดตปลั๊กอินจะไม่ส่งผลกระทบต่อเนื้อหาที่คุณปรับแต่งเอง

วิธีสร้างเลย์เอาต์ที่กำหนดเองสำหรับหน้าเว็บร้านค้า WooCommerce

วิธีที่มีประสิทธิภาพที่สุดในการสร้างเลย์เอาต์ที่กำหนดเองสำหรับหน้าเว็บร้านค้าคือการเขียนทับ archive-product.php ไฟล์เทมเพลต คุณสามารถออกแบบโครงสร้าง HTML ของไฟล์นี้ใหม่ทั้งหมดได้

อีกวิธีที่โมดูลาร์มากขึ้นคือการใช้ฮุค เนื้อหาของหน้าเว็บร้านค้าส่วนใหญ่ถูกกำหนดโดย woocommerce_before_main_content、woocommerce_archive_description、woocommerce_before_shop_loop、woocommerce_after_shop_loop ควบคุมด้วยฮุค คุณสามารถลบลูปเริ่มต้นออกและแทรกโครงสร้างคิวรีและลูปที่กำหนดเองของคุณเองระหว่างฮุคเหล่านี้ เพื่อสร้างเลย์เอาต์กริด รายการ หรือแบบเมสันรีที่ไม่เหมือนใคร

ในขณะเดียวกัน การใช้ WordPress Customizer หรือสร้างหน้าตัวเลือกธีม คุณสามารถอนุญาตให้ผู้ใช้สลับเลย์เอาต์ได้โดยไม่ต้องแก้ไขโค้ด

วิธีเพิ่ม JavaScript ที่กำหนดเองให้กับธีม WooCommerce อย่างถูกต้อง

การเพิ่ม JavaScript ที่กำหนดเองให้กับธีม WooCommerce ควรปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดในการเข้าคิวสคริปต์ของ WordPress ในของคุณ functions.php ในไฟล์ ใช้ wp_enqueue_script ฟังก์ชันสำหรับลงทะเบียนและโหลดสคริปต์

ตรวจสอบให้แน่ใจว่าเมื่อใช้ wp_enqueue_script ให้กำหนดการพึ่งพาผ่านพารามิเตอร์ที่สาม เช่น การพึ่งพา jQuery สำหรับสคริปต์เฉพาะของ WooCommerce บางครั้งอาจพึ่งพา wc-add-to-cart-variation(สำหรับผลิตภัณฑ์แบบแปรผัน) หรือ wc-checkout（สำหรับหน้าเช็คเอาท์）ผ่าน wp_localize_script ฟังก์ชัน คุณสามารถส่งตัวแปร PHP (เช่น URL AJAX ที่อยู่เว็บไซต์ ฯลฯ) ไปยังไฟล์ JavaScript ของคุณได้อย่างปลอดภัย

php
function my_theme_wc_scripts() {
wp_enqueue_script(
'สคริปต์-วูคอมเมิร์ซ-ของฉัน',
get_template_directory_uri() . 'https://www.likacloud.com/js/my-woocommerce.js',
array( 'jquery', 'wc-add-to-cart-variation' ), // การอ้างอิง
'1.0.0',
true // โหลดในส่วนท้าย
);
wp_localize_script( 'สคริปต์-วูคอมเมิร์ซ-ของฉัน', 'myWooParams', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_wc_scripts' );