คู่มือการพัฒนา WooCommerce แบบกำหนดเอง: บทช่วยสอนปฏิบัติจริงแบบครบวงจรตั้งแต่เริ่มต้นจนถึงระดับสูง

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

พื้นฐานการพัฒนาปรับแต่ง WooCommerce

ก่อนเริ่มเขียนโค้ด การเข้าใจโครงสร้างของ WooCommerce เป็นพื้นฐานสำคัญสำหรับการปรับแต่งให้สำเร็จ โดยพื้นฐานแล้ว WooCommerce เป็นปลั๊กอิน WordPress ที่ออกแบบมาอย่างดี ซึ่งขยายฟังก์ชันหลักของ WordPress เช่น ประเภทโพสต์ที่กำหนดเอง หมวดหมู่ และบทบาทผู้ใช้ และสร้างตรรกะอีคอมเมิร์ซที่สมบูรณ์บนพื้นฐานนี้

แนวคิดหลักและโครงสร้างไฟล์

ไฟล์หลักของ WooCommerce ตั้งอยู่ที่/wp-content/plugins/woocommerce/อย่างไรก็ตาม การแก้ไขไฟล์เหล่านี้โดยตรงเป็นสิ่งต้องห้ามอย่างยิ่ง เนื่องจากการอัปเดตปลั๊กอินจะทำให้การแก้ไขทั้งหมดหายไป วิธีที่ถูกต้องคือการแทนที่หรือขยายฟังก์ชันการทำงานผ่านธีมลูกหรือปลั๊กอินที่กำหนดเอง WooCommerce ใช้ชุดของประเภทโพสต์ที่กำหนดเอง ซึ่งที่สำคัญที่สุดรวมถึงproduct(สินค้า)shop_order(คำสั่งซื้อ) และshop_coupon(คูปอง) การทำความเข้าใจโมเดลข้อมูลเหล่านี้เป็นพื้นฐานสำหรับการสอบถามหรือดำเนินการข้อมูลใดๆ

แนะนำให้อ่าน WooCommerce คืออะไรและสถาปัตยกรรมหลัก。

วิธีการหลักในการปรับเปลี่ยนอย่างปลอดภัย

มีวิธีหลักสามวิธีในการปรับแต่งอย่างปลอดภัย: การใช้ฮุค (Actions และ Filters), การเขียนทับไฟล์เทมเพลต และการเพิ่มฟังก์ชันที่กำหนดเอง กลไกฮุคเป็นวิธีขยายหลักที่ WooCommerce และ WordPress มีร่วมกัน ช่วยให้คุณแทรกโค้ดหรือแก้ไขข้อมูลได้ในช่วงเวลาที่กำหนด การเขียนทับเทมเพลตช่วยให้คุณเปลี่ยนรูปลักษณ์และการจัดวางของหน้ากับผู้ใช้ได้ ในขณะที่ฟังก์ชันที่กำหนดเองใช้สำหรับการดำเนินการทางธุรกิจใหม่ทั้งหมด

UltaHost WordPress โฮสติ้ง

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

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

เริ่มต้นปฏิบัติจริง: สถานการณ์การปรับแต่งที่พบบ่อย

เริ่มต้นจากความต้องการปรับแต่งที่พบบ่อยที่สุดบางส่วน ผ่านตัวอย่างโค้ดจริงเพื่อทำความเข้าใจขั้นตอนการพัฒนา

เพิ่มฟิลด์ผลิตภัณฑ์แบบกำหนดเอง

สมมติว่าคุณต้องการเพิ่มฟิลด์ “หมายเลขผู้ผลิต” สำหรับผลิตภัณฑ์ ซึ่งเกี่ยวข้องกับการเพิ่มฟิลด์ในหน้าการแก้ไขผลิตภัณฑ์ในแอดมิน และต้องมั่นใจว่าค่าจะถูกบันทึก แสดงผล และส่งผ่านไปยังรถเข็นและคำสั่งซื้อได้ ก่อนอื่น เราจำเป็นต้องใช้woocommerce_product_options_general_product_dataAction hook นี้ในการเพิ่มฟิลด์ในแอดมิน

add_action( 'woocommerce_product_options_general_product_data', 'add_custom_manufacturer_field' );
function add_custom_manufacturer_field() {
    global $post;
    echo '<div class="options_group">';
    woocommerce_wp_text_input( array(
        'id'          =&gt; '_manufacturer_sku',
        'label'       =&gt; __( '生产商编号', 'your-textdomain' ),
        'placeholder' =&gt; '例如：MFG-12345',
        'desc_tip'    =&gt; 'true',
        'description' =&gt; __( '产品生产商提供的唯一编号。', 'your-textdomain' ),
    ) );
    echo '</div>';
}

ต่อไปนี้ จำเป็นต้องใช้woocommerce_process_product_metaฮุคเพื่อบันทึกค่าฟิลด์ และใช้woocommerce_product_get_manufacturer_skuฟิลเตอร์ดังกล่าวเพื่อกำหนดตรรกะในการรับค่านั้น

แก้ไขฟิลด์ในหน้าชำระเงิน

การปรับแต่งฟอร์มการชำระเงินเป็นอีกหนึ่งความต้องการทั่วไป ตัวอย่างเช่น คุณต้องการตั้งฟิลด์ “ที่อยู่บรรทัดที่ 2” ให้เป็นฟิลด์บังคับ และแก้ไขป้ายกำกับของฟิลด์นั้น ซึ่งสามารถทำได้ง่ายๆ ผ่าน Filter Hook

แนะนำให้อ่าน คู่มือการพัฒนาเว็บไซต์อีคอมเมิร์ซด้วย WooCommerce ตั้งแต่เริ่มต้นจนถึงการปรับแต่ง。

add_filter( 'woocommerce_checkout_fields', 'customize_checkout_fields' );
function customize_checkout_fields( $fields ) {
    // 将地址行2设为必填并更改标签
    $fields['billing']['billing_address_2']['required'] = true;
    $fields['billing']['billing_address_2']['label'] = '详细地址（如门牌号）';
    // 移除公司名字段
    unset( $fields['billing']['billing_company']);
    return $fields;
}

จากตัวอย่างเบื้องต้นเหล่านี้ คุณจะเห็นได้ว่าระบบ Hook สามารถเปลี่ยนพฤติกรรมหลักของ WooCommerce ได้อย่างไร โดยไม่ต้องเข้าไปยุ่งกับโค้ดหลัก

การพัฒนาในระดับสูง: เทมเพลตธีมและการขยายฟังก์ชันการทำงาน

เมื่อการปรับแต่งพื้นฐานไม่สามารถตอบโจทย์ด้านการออกแบบหรือฟังก์ชันการทำงานได้ ก็จำเป็นต้องลงลึกถึงระดับการเขียนทับเทมเพลตและการสร้างโมดูลฟังก์ชันที่กำหนดเอง

เขียนทับไฟล์เทมเพลตเพื่อปรับแต่งเลย์เอาต์

ไฟล์เทมเพลตส่วนหน้าของ WooCommerce ทั้งหมดสามารถถูกเขียนทับได้โดยธีมของคุณ ตัวอย่างเช่น หากคุณต้องการแก้ไขเลย์เอาต์ของหน้าสินค้าเดียว ขั้นแรกให้สร้าง/woocommerce/โฟลเดอร์ในไดเรกทอรีของธีมลูก WordPress ของคุณ จากนั้น จากไฟล์ต้นฉบับปลั๊กอิน WooCommercetemplates/ค้นหาเทมเพลตที่เกี่ยวข้องในไดเรกทอรี เช่นsingle-product.phpคัดลอกไปยังไดเรกทอรีของธีมย่อยของคุณ/woocommerce/แล้วทำการแก้ไข

hosting.com 共享主机

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

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

วิธีที่พบบ่อยกว่าคือการแทนที่เพียงบางส่วนของเทมเพลต ตัวอย่างเช่น แก้ไขเฉพาะส่วนของราคาสินค้า คุณสามารถคัดลอกtemplates/single-product/price.phpเส้นทางไฟล์ไปยังหัวข้อย่อย ในไฟล์นี้ คุณสามารถเขียน HTML ของราคาใหม่ทั้งหมดได้ เช่น เพิ่มป้ายกำกับ “ราคาสำหรับสมาชิก” ข้างราคา

สร้างวิธีการจัดส่งแบบกำหนดเอง

หากตัวเลือกการจัดส่งที่มีอยู่ไม่ตรงกับความต้องการทางธุรกิจของคุณ คุณอาจต้องพัฒนาวิธีการจัดส่งใหม่ทั้งหมด ซึ่งต้องสร้างคลาส PHP ที่สืบทอดจากWC_Shipping_Methodคลาส PHP

แรกสุด ในปลั๊กอินหรือธีมที่กำหนดเองของคุณfunctions.phpในwoocommerce_shipping_initให้เริ่มต้นคลาสการจัดส่งของคุณในฮุก และลงทะเบียนกับ WooCommerce ผ่านwoocommerce_shipping_methodsFilter

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

ในคลาสการจัดส่งที่กำหนดเองของคุณ คุณต้องกำหนดอย่างน้อย__construct()วิธีการตั้งค่า ID, ชื่อเรื่อง และคุณสมบัติพื้นฐานอื่นๆ พร้อมทั้งcalculate_shipping()วิธีการดำเนินการคำนวณค่าขนส่งหลัก วิธีนี้รับ$packageพารามิเตอร์ ซึ่งประกอบด้วยข้อมูลปลายทาง, สินค้า และอื่นๆ คุณสามารถเขียนกฎการคำนวณที่ซับซ้อนได้จากข้อมูลเหล่านี้ เช่น การกำหนดราคาตามเขตพื้นที่รหัสไปรษณีย์, น้ำหนักรวมของสินค้า หรือคุณสมบัติสินค้าที่กำหนดเอง

การผสานรวมขั้นสูงและการปรับปรุงประสิทธิภาพ

สำหรับร้านค้าที่มีปริมาณการเข้าชมสูงหรือมีตรรกะทางธุรกิจที่ซับซ้อน การพัฒนาตามต้องการจำเป็นต้องพิจารณาถึงประสิทธิภาพ การบำรุงรักษาได้ง่าย และการบูรณาการกับระบบอื่น ๆ

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

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

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

การบูรณาการระบบผ่าน REST API

WooCommerce REST API มีอินเทอร์เฟซที่ทรงพลัง ซึ่งอนุญาตให้แอปพลิเคชันหรือบริการภายนอก (เช่น แอปมือถือ ระบบ ERP ระบบ CRM) มีปฏิสัมพันธ์กับข้อมูลร้านค้าของคุณ คุณสามารถใช้ API เพื่อสร้าง อ่าน อัปเดต และลบข้อมูลต่าง ๆ เช่น สินค้า คำสั่งซื้อ ลูกค้า เป็นต้น

ตัวอย่างเช่น คุณสามารถตั้งค่าระบบจัดการสต็อกภายนอก ซึ่งเมื่อใดก็ตามที่มีการเปลี่ยนแปลงสต็อก ระบบนั้นจะส่งข้อมูลไปยัง/wp-json/wc/v3/products/<product_id>ส่งคำขอ PUT เพื่ออัปเดตจำนวนสินค้าคงคลังใน WooCommerce คุณต้องสร้างและเก็บรักษาคีย์ API (Consumer Key และ Consumer Secret) อย่างปลอดภัย และทำการยืนยันตัวตนในส่วนหัวของคำขอ เมื่อพัฒนาการผสานรวมแบบกำหนดเอง การตั้งค่าความถี่ของคำขอ การจัดการการตอบกลับข้อผิดพลาด และการบันทึกการซิงค์ข้อมูลอย่างเหมาะสมเป็นสิ่งสำคัญ

การสอบถามฐานข้อมูลแบบกำหนดเองและการพิจารณาด้านประสิทธิภาพ

แม้ว่า WooCommerce จะมีWC_Product_Query和WC_Order_Queryเป็นวิธีการเชิงวัตถุสำหรับการสอบถามข้อมูล แต่เมื่อต้องจัดการกับข้อมูลจำนวนมากหรือรายงานที่ซับซ้อน บางครั้งการเขียนคำสั่ง SQL ที่ได้รับการปรับปรุงให้มีประสิทธิภาพโดยตรงอาจทำได้ดีกว่า สิ่งสำคัญคือ การดำเนินการใดๆ กับฐานข้อมูลโดยตรงจะต้องทำผ่าน$wpdbการดำเนินการกับวัตถุทั่วโลกเพื่อให้มั่นใจในความปลอดภัยและความเข้ากันได้

ในเวลาเดียวกัน ต้องให้ความสำคัญกับประสิทธิภาพของโค้ดที่กำหนดเอง หลีกเลี่ยงการดำเนินการคำสั่งฐานข้อมูลที่ใช้ทรัพยากรมากในฮุค โดยเฉพาะอย่างยิ่งในwp_headหรือฮุคที่โหลดในทุกหน้า ใช้ API แบบชั่วคราว (Transients) สำหรับข้อมูลที่สามารถแคชได้ เช่น การแคชรายการ “สินค้าขายดีประจำสัปดาห์” ที่คำนวณอย่างซับซ้อนเป็นเวลา 12 ชั่วโมง เมื่อพัฒนาฟังก์ชันที่กำหนดเอง ให้พิจารณาอยู่เสมอว่ามันจะส่งผลต่อความเร็วในการโหลดหน้าหรือไม่ และใช้โหมดดีบักและเครื่องมือวิเคราะห์ประสิทธิภาพของ WordPress ในการทดสอบ

สรุป

การพัฒนาแบบกำหนดเองของ WooCommerce เป็นกระบวนการที่เริ่มจากการทำความเข้าใจโครงสร้างหลัก แล้วค่อยๆ ลึกลงไปสู่การใช้ฮุค การแทนที่เทมเพลต การสร้างโมดูลฟังก์ชัน และการบูรณาการระบบ ประเด็นสำคัญคือการปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเสมอ: ดำเนินการปรับเปลี่ยนผ่านธีมลูกและปลั๊กอินที่กำหนดเอง ใช้ประโยชน์จากฮุค Actions และ Filters ที่หลากหลายอย่างเต็มที่ และแทนที่ไฟล์เทมเพลตอย่างปลอดภัย ตั้งแต่การเพิ่มฟิลด์สินค้าง่ายๆ ไปจนถึงการสร้างเครื่องมือคำนวณการจัดส่งใหม่ทั้งหมด ทุกขั้นตอนสร้างขึ้นจากพื้นฐานความเข้าใจที่มั่นคงเกี่ยวกับกลไกการทำงานร่วมกันของ WooCommerce และ WordPress จำไว้ว่าก่อนเริ่มการกำหนดเองขั้นสูงใดๆ ให้กำหนดความต้องการทางธุรกิจให้ชัดเจนก่อน และประเมินว่ามีปลั๊กอินที่มีอยู่หรือแผนการฮุคที่ง่ายกว่าที่สามารถแก้ปัญหาได้หรือไม่ สิ่งนี้จะช่วยคุณสร้างร้านค้าออนไลน์ที่มีทั้งประสิทธิภาพและบำรุงรักษาได้ง่าย

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

วิธีที่ปลอดภัยที่สุดในการแก้ไขโค้ด WooCommerce คืออะไร?

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

ฉันจะเขียนทับไฟล์เทมเพลตของ WooCommerce ในธีมของฉันได้อย่างไร?

ก่อนอื่น ให้สร้างโฟลเดอร์ชื่อwoocommerceในไดเรกทอรีหลักของ WordPress child theme ของคุณ จากนั้นในไดเรกทอรีของปลั๊กอิน WooCommerce (/wp-content/plugins/woocommerce/templates/) ให้ค้นหาไฟล์เทมเพลตที่คุณต้องการแก้ไข รักษาโครงสร้างไดเรกทอรีย่อยและคัดลอกไฟล์ไปยังโฟลเดอร์woocommerceในธีมของคุณ ตัวอย่างเช่น หากต้องการแก้ไขหน้าเพจสินค้าเดียว ให้คัดลอกtemplates/single-product.php到your-theme/woocommerce/single-product.phpตอนนี้คุณสามารถแก้ไขสำเนานี้ได้อย่างปลอดภัยแล้ว

ฉันเพิ่มฟิลด์สินค้าที่กำหนดเอง แต่ไม่แสดงในรถเข็นหรือคำสั่งซื้อ ต้องทำอย่างไร?

การเพิ่มฟิลด์ในแอดมินและบันทึกเป็นเพียงขั้นตอนแรกเท่านั้น หากต้องการให้ค่าของฟิลด์นั้นแสดงที่ด้านหน้าและดำเนินต่อไปในขั้นตอนการสั่งซื้อ คุณต้องส่งผ่านข้อมูลไปยังรายการในรถเข็นและรายการในคำสั่งซื้อ โดยทั่วไปจะเกี่ยวข้องกับการใช้ฮุคหลายตัว: ใช้woocommerce_add_cart_item_dataเพื่อเพิ่มค่าฟิลด์ลงในข้อมูลเซสชันของรถเข็น; ใช้woocommerce_get_item_dataแสดงเป็นข้อมูลเมตาของสินค้าในหน้าตะกร้าสินค้าและหน้าชำระเงิน; สุดท้าย, ใช้woocommerce_checkout_create_order_line_itemบันทึกข้อมูลจากตะกร้าสินค้าไปยังบันทึกฐานข้อมูลของคำสั่งซื้อ แต่ละขั้นตอนจำเป็นต้องเขียนฟังก์ชันที่สอดคล้องกันเพื่อส่งค่าฟิลด์ที่คุณกำหนดเอง

เมื่อพัฒนาฟังก์ชัน WooCommerce ที่กำหนดเอง จะดีบั๊กโค้ดได้อย่างไร?

การเปิดใช้งานโหมดดีบั๊กของ WordPress เป็นขั้นตอนแรก ในของคุณwp-config.phpในไฟล์, การตั้งค่าdefine( 'WP_DEBUG', true );แนะนำให้เขียนบันทึกการดีบักลงในไฟล์: ตั้งค่าdefine( 'WP_DEBUG_LOG', true );和define( 'WP_DEBUG_DISPLAY', false );ด้วยวิธีนี้ ข้อผิดพลาดและผลลัพธ์ของคุณerror_log()或wc_get_logger()จะถูกเขียนลงไปด้วย/wp-content/debug.logไฟล์ นอกจากนี้ การใช้เครื่องมือนักพัฒนาของเบราว์เซอร์เพื่อตรวจสอบคำขอเครือข่ายและคอนโซล JavaScript มีความสำคัญอย่างยิ่งสำหรับการดีบักการโต้ตอบ Ajax และฟังก์ชันการทำงานส่วนหน้า