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

ทำความเข้าใจระบบเทมเพลต WooCommerce และความต้องการปรับแต่ง

WooCommerce ใช้ระบบการแทนที่เทมเพลตที่ทรงพลัง ซึ่งช่วยให้นักพัฒนาสามารถปรับแต่งรูปลักษณ์และเค้าโครงหน้าของร้านค้าได้ โดยไม่ต้องแก้ไขไฟล์ปลั๊กอินหลัก ระบบนี้สร้างขึ้นจากแนวคิดธีมลูก (Child Theme) ของ WordPress เพื่อรับประกันความเสถียรของการปรับแต่งและความสามารถในการอัปเกรดในอนาคต ไฟล์เทมเพลตทั้งหมดของ WooCommerce อยู่ใน plugins/woocommerce/templates ไดเรกทอรี แต่การแก้ไขโดยตรงจากที่นี่เป็นสิ่งต้องห้ามอย่างยิ่ง เนื่องจากการอัปเดตปลั๊กอินจะเขียนทับการเปลี่ยนแปลงทั้งหมด

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

ขั้นตอนพื้นฐานในการสร้างเทมเพลตแบบกำหนดเอง

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

แนะนำให้อ่าน คู่มือการวิเคราะห์ปลั๊กอิน WooCommerce อย่างลึกซึ้ง: ตั้งแต่การตั้งค่าขั้นพื้นฐานไปจนถึงการปรับแต่งขั้นสูง。

ค้นหาและคัดลอกไฟล์เทมเพลตเป้าหมาย

สมมติว่าคุณต้องการปรับแต่งหน้าหลักของร้านค้า (หน้าอาร์ไคฟ์) ก่อนอื่นคุณต้องหาไฟล์ต้นฉบับจากไดเรกทอรีปลั๊กอิน WooCommerce:plugins/woocommerce/templates/archive-product.phpคัดลอกไฟล์นี้ไปยังไดเรกทอรี woocommerce ของธีมย่อยของคุณ ตอนนี้การแก้ไขใดๆ ที่ทำกับสำเนานี้จะมีผล นี่เป็นวิธีการปรับแต่งที่ตรงไปตรงมาที่สุด เหมาะสำหรับการปรับแต่งสไตล์หรือการเปลี่ยนแปลงตรรกะเล็กน้อยในเทมเพลตที่มีอยู่

UltaHost WordPress โฮสติ้ง

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

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

เพิ่มหรือลบเนื้อหาผ่านฟังก์ชันฮุค

WooCommerce ใช้ Action Hooks และ Filter Hooks อย่างกว้างขวาง ซึ่งเป็นวิธีที่ยืดหยุ่นและรุกล้ำน้อยกว่าในการปรับแต่ง ตัวอย่างเช่น หากคุณต้องการเพิ่มข้อความที่กำหนดเองใต้หัวข้อในหน้าลายละเอียดสินค้า แทนที่จะแก้ไข single-product.php เทมเพลตโดยตรง ให้ใช้ฮุคใน functions.php ไฟล์ของธีมลูกของคุณ

นี่คือโค้ดตัวอย่างที่แสดงวิธีการใช้ woocommerce_single_product_summary เพิ่มเนื้อหาด้วยฮุค:

add_action( 'woocommerce_single_product_summary', 'my_custom_product_text', 6 );
function my_custom_product_text() {
    echo '<p class="my-custom-text">นี่คือเนื้อหาที่กำหนดเองที่เพิ่มลงในพื้นที่สรุปสินค้า</p>';
}

โดยการปรับลำดับความสำคัญ (หมายเลข 6 ในโค้ดด้านบน) คุณสามารถควบคุมตำแหน่งที่เนื้อหานี้ปรากฏได้อย่างแม่นยำ

พัฒนาเทมเพลตหน้าขั้นสูงแบบกำหนดเอง

สำหรับเค้าโครงหน้าใหม่ทั้งหมด การเขียนทับเทมเพลตที่มีอยู่อาจไม่เพียงพอ คุณจำเป็นต้องสร้างไฟล์เทมเพลตหน้าที่กำหนดเองจริงๆ

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

สร้างเทมเพลตหมวดหมู่ผลิตภัณฑ์ใหม่ทั้งหมด

คุณสามารถสร้างเทมเพลตเฉพาะสำหรับหมวดหมู่ผลิตภัณฑ์ใดหมวดหมู่หนึ่งได้ ขั้นแรก ในโฟลเดอร์ woocommerce ของธีมย่อย ให้คัดลอก archive-product.php และเปลี่ยนชื่อเป็น taxonomy-product_cat-{slug}.phpโดยที่ {slug} แทนที่ด้วยนามแฝงของหมวดหมู่เป้าหมาย เช่น สำหรับหมวดหมู่ที่มีนามแฝงว่า “electronics” ให้สร้างเทมเพลต ชื่อไฟล์ควรเป็น taxonomy-product_cat-electronics.phpในไฟล์นี้ คุณสามารถจัดระเบียบลูปใหม่ นำเข้าคิวรีที่กำหนดเอง หรือเพิ่มองค์ประกอบหน้าเว็บที่ไม่ซ้ำใคร

สร้างไฟล์เทมเพลตหน้าที่กำหนดเอง

บางครั้งคุณอาจต้องการหน้าที่เป็นอิสระโดยสมบูรณ์จากเส้นทางมาตรฐานของ WooCommerce ในกรณีนี้ คุณสามารถสร้างเทมเพลตหน้า WordPress มาตรฐานได้ สร้างไฟล์ในไดเรกทอรีรูทของธีมลูกของคุณ เช่น template-custom-store.phpและเพิ่มคำประกาศเทมเพลตต่อไปนี้ที่ส่วนหัวของไฟล์:

<?php
/**
 * Template Name: 自定义商店布局
 * Template Post Type: page
 */

จากนั้น สร้างหน้าใหม่ในแอดมินของ WordPress และในกล่องดรอปดาวน์ “เทมเพลต” ให้เลือก “เค้าโครงร้านค้าที่กำหนดเอง” ภายในไฟล์เทมเพลตนี้ คุณสามารถใช้ฟังก์ชันเทมเพลตและตัวแปรโกลบอลของ WooCommerce (เช่น $product, WC()) เพื่อสืบค้นและแสดงสินค้า ออกแบบเค้าโครงและตรรกะของทั้งหน้าได้อย่างอิสระ โดยไม่ต้องอยู่ภายใต้ข้อจำกัดของโครงสร้างหน้าร้านค้าเริ่มต้น

hosting.com 共享主机

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

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

เทคนิคขั้นสูงและแนวปฏิบัติที่ดีที่สุดสำหรับเทมเพลตที่กำหนดเอง

เมื่อพัฒนารูปแบบที่กำหนดเอง การปฏิบัติตามแนวปฏิบัติที่ดีที่สุดบางประการสามารถรับประกันความแข็งแกร่งและความสามารถในการบำรุงรักษาของโค้ด

การเรียกใช้ฟังก์ชันและข้อมูลของ WooCommerce อย่างปลอดภัย

ในรูปแบบที่กำหนดเอง ต้องแน่ใจว่าได้โหลดสภาพแวดล้อมของ WooCommerce แล้ว ก่อนที่จะใช้ฟังก์ชันเฉพาะของ WooCommerce หรือตัวแปรส่วนกลางใด ๆ สามารถตรวจสอบเงื่อนไขได้ ตัวอย่างเช่น ในลูปผลิตภัณฑ์ วิธีปฏิบัติมาตรฐานคือการใช้ wc_get_loop_prop( 'name' ) เพื่อตรวจสอบประเภทของลูป หรือการใช้ is_product()、is_shop() ป้ายกำกับเงื่อนไขอื่นๆ เมื่อเข้าถึงข้อมูลผลิตภัณฑ์ ควรใช้ WC()->product_factory->get_product() 或 wc_get_product() ฟังก์ชันเพื่อดึงอ็อบเจ็กต์ผลิตภัณฑ์ แทนที่จะจัดการกับตัวแปรโกลบอลโดยตรง

ตรวจสอบให้แน่ใจว่าการตอบสนองของเทมเพลตและการปรับปรุงประสิทธิภาพ

เทมเพลตที่กำหนดเองไม่ควรทำลายการออกแบบที่ตอบสนองของเว็บไซต์ ตรวจสอบให้แน่ใจว่า HTML และ CSS ที่คุณเพิ่มสามารถปรับให้เข้ากับขนาดหน้าจอที่แตกต่างกัน นอกจากนี้ ควรระมัดระวังเกี่ยวกับปัญหาประสิทธิภาพที่อาจเกิดขึ้นในเทมเพลต หลีกเลี่ยงการดำเนินการค้นหาฐานข้อมูลที่ซับซ้อนหรือเรียกใช้ API ภายนอกจำนวนมากภายในลูป ใช้กลไกการแคชที่ WooCommerce จัดเตรียมไว้อย่างเหมาะสม เช่น การแคชข้อมูลผลิตภัณฑ์ สำหรับการค้นหาที่กำหนดเองที่ซับซ้อน ให้พิจารณาใช้ wc_get_products ฟังก์ชันการค้นหาผลิตภัณฑ์ที่มีประสิทธิภาพนี้ มันดีกว่ามาตรฐาน WP_Query เหมาะสำหรับข้อมูลผลิตภัณฑ์ WooC​​ommerce มากกว่า

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

การจัดระเบียบสไตล์ชีตของธีมลูก

สไตล์ที่กำหนดเองทั้งหมดควรเขียนลงในธีมลูก style.css ในไฟล์ เพื่อให้เป็นระเบียบ แนะนำให้เขียนบล็อก CSS แยกต่างหากสำหรับส่วนประกอบเทมเพลต WooCommerce ที่แตกต่างกัน และเพิ่มคำอธิบายอย่างละเอียด ใช้ตัวเลือกที่สอดคล้องกับโครงสร้างไฟล์เทมเพลตเดิมเพื่อเขียนทับสไตล์ เพื่อให้แน่ใจว่าสไตล์ของคุณมีความเฉพาะเจาะจงเพียงพอที่จะเขียนทับสไตล์เริ่มต้น ตัวอย่างเช่น สำหรับเทมเพลตหมวดหมู่ที่คุณปรับแต่งเอง คุณสามารถเพิ่มกฎสไตล์เฉพาะให้กับ body.term-product_cat-electronics เพิ่มกฎสไตล์เฉพาะ

สรุป

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

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

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

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

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

จำเป็นต้องใช้ธีมลูกในการแก้ไขเทมเพลต WooCommerce หรือไม่?

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

จะค้นหาไฟล์เทมเพลต WooCommerce ที่สอดคล้องกับหน้าเฉพาะได้อย่างไร?

WooCommerce มีโหมดดีบักเพื่อช่วยระบุตำแหน่งของไฟล์เทมเพลต ภายในธีมลูกของคุณ functions.php เพิ่มโค้ดต่อไปนี้ในไฟล์:add_filter( 'woocommerce_template_debug_mode', '__return_true' );เมื่อเปิดใช้งานแล้ว ที่ด้านล่างของหน้าเว็บไซต์ด้านหน้า WooCommerce จะแสดงเส้นทางของไฟล์เทมเพลตทั้งหมดที่กำลังใช้ในหน้าปัจจุบัน ช่วยให้คุณค้นหาไฟล์เป้าหมายที่ต้องการแทนที่ได้อย่างรวดเร็ว

หลังจากปรับแต่งเทมเพลตแล้ว ทำไมฟรอนต์เอนด์ไม่แสดงการเปลี่ยนแปลง?

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

สามารถสร้างเทมเพลตที่กำหนดเองสำหรับผลิตภัณฑ์เดี่ยวได้หรือไม่

ได้ WooCommerce อนุญาตให้สร้างเทมเพลตที่กำหนดเองสำหรับผลิตภัณฑ์เดี่ยว คุณต้องทำในธีมลูกที่ woocommerce ของธีมย่อย ให้คัดลอก single-product.php และเปลี่ยนชื่อเป็น single-product-{slug}.php 或 single-product-{id}.phpแทนที่ {slug} ด้วย slug ของผลิตภัณฑ์ หรือแทนที่ {id} แทนที่ด้วย ID ตัวเลขของผลิตภัณฑ์ เพื่อใช้โครงร่างแม่แบบเฉพาะสำหรับผลิตภัณฑ์นั้น