วิธีสร้างธีมลูกหน้าร้าน WooCommerce [คู่มือฉบับสมบูรณ์]

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

นอกจากนี้ Woocommerce ยังมีความเป็นไปได้ในการปรับแต่งที่แทบจะไม่มีที่สิ้นสุด ซึ่งเป็นอีกปัจจัยสำคัญที่ส่งผลต่อความสำเร็จของ WooCommerce ซึ่งหมายความว่าเมื่อรวมเข้ากับธีมที่เหมาะสมแล้ว จะทำให้คุณมีความยืดหยุ่นในการออกแบบได้มาก

ธีมลูกหน้าร้าน WooCommerce

เพื่อให้ดูเป็นมืออาชีพ ธีมหน้าร้านเป็นตัวเลือกที่ยอดเยี่ยม เมื่อร้านค้า WooCommerce ของคุณเปิดใช้งานแล้ว คุณอาจยังต้องการปรับแต่งรูปลักษณ์ของร้านค้าของคุณให้ตรงกับวิสัยทัศน์ของคุณ

หลังจากที่คุณติดตั้งธีมหน้าร้าน WooCommerce แล้ว ขั้นตอนต่อไป คุณต้องสร้างธีมย่อยของ WooCommerce Storefront ที่จะช่วยให้คุณเปลี่ยนแปลงธีมหลักของหน้าร้านได้โดยไม่ต้องแก้ไขโค้ดของธีมหลักโดยตรง

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

ทำไมต้องสร้างธีมลูกหน้าร้าน WooCommerce?

หากคุณใช้เวลาอ่าน WordPress เป็นจำนวนมาก คุณอาจเคยเจอธีมลูกมาก่อน พูดง่ายๆ ก็คือ ธีมลูกคือสำเนาของธีมอื่น ซึ่งมักเรียกกันว่า 'ธีมหลัก'

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

นอกจากนี้ คุณอาจต้องการสร้างธีมย่อยเนื่องจากต้องการใช้ธีมอื่นเป็นพื้นฐาน วิธีนี้จะช่วยคุณประหยัดเวลาและคุณไม่จำเป็นต้องสร้างธีมใหม่ทั้งหมดตั้งแต่เริ่มต้น

นอกจากนี้ คุณอาจต้องการทำการเปลี่ยนแปลงเล็กน้อยกับตราสินค้าของธีมหรือความสวยงามโดยรวม การใช้ธีมลูกเปิดโอกาสมากมายขึ้นอยู่กับเวลาที่คุณต้องการอุทิศให้กับโครงการที่กำลังดำเนินอยู่

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

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

วิธีสร้างธีมลูกหน้าร้าน WooCommerce

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

นอกจากนี้ การใช้สภาพแวดล้อมการแสดงละครเพื่อสร้างและปรับแต่งธีมลูกของคุณก็เป็นเรื่องที่ฉลาดเช่นกัน ในการสร้างธีมลูก เราจำเป็นต้องมีสามสิ่งในการเริ่มต้น: ไดเร็กทอรีธีมลูก ไฟล์ style.css และไฟล์ functions.php

นี่คือขั้นตอนที่คุณต้องปฏิบัติตามเพื่อสร้าง WooCommerce Child Theme

1. การสร้างโฟลเดอร์ธีม

โฟลเดอร์ชุดรูปแบบนี้จะเก็บไฟล์สไตล์ชีตและฟังก์ชันของคุณ จากมุมมองของผู้เชี่ยวชาญ ควรใช้ชื่อธีมหลักเป็นชื่อโฟลเดอร์และต่อท้ายด้วย "-child" ในบทช่วยสอนนี้ ฉันตั้งชื่อไดเร็กทอรีของฉันว่า "Storefront-child" สิ่งสำคัญคือต้องตรวจสอบว่าชื่อไดเร็กทอรีของธีมลูกของคุณไม่มีช่องว่างเพื่อหลีกเลี่ยงข้อผิดพลาดที่อาจเกิดขึ้น

2. สไตล์ชีตธีมเด็ก

หลังจากสร้างโฟลเดอร์แล้ว คุณต้องสร้างสไตล์ชีตสำหรับธีมลูก ต้องตั้งค่าสไตล์ชีตเพื่อสืบทอดสไตล์จากธีมหลักของคุณ

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

 /*

 ชื่อธีม: เด็กหน้าร้าน

 URI ธีม: http://sitename.com/storefront/

 คำอธิบาย: ธีมลูกหน้าร้าน

 ผู้เขียน: ชื่อของคุณ

 URI ผู้แต่ง: http://sitename.com

 แม่แบบ: หน้าร้าน /*ตัวพิมพ์เล็กและตัวพิมพ์ใหญ่*/

 เวอร์ชัน: 1.0.0

 ใบอนุญาต: GNU General Public License v2 หรือใหม่กว่า

 URI ใบอนุญาต: http://www.gnu.org/licenses/gpl-2.0.html

 Tags: สว่าง, มืด, เต็มความกว้าง, เลย์เอาต์ตอบสนอง, พร้อมสำหรับการเข้าถึง

 โดเมนข้อความ: หน้าร้าน-ลูก

*/

/*การปรับแต่งธีมเริ่มต้นที่นี่*/

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

3. ฟังก์ชั่นธีมลูก

ในวิธีการก่อนหน้านี้ พวกเขาแนะนำให้คุณใช้ “@import” ในสไตล์ชีตของคุณเพื่อโหลดธีมลูกของคุณ สิ่งสำคัญคือต้องทราบว่าวิธีนี้ไม่ถือเป็นแนวทางปฏิบัติที่ดีที่สุดอีกต่อไป อย่างไรก็ตาม คุณเพียงแค่ต้อง "จัดคิว" สไตล์ชีตของธีมหลักในไฟล์ functions.php ของธีมลูกของคุณ

เพื่อให้เป็นไปได้ คุณสามารถใช้ "wp_enqueue_scripts action" และใช้ "wp_enqueue_style()" นอกจากนี้ยังควรกล่าวด้วยว่าสไตล์ชีตสำหรับธีมลูกของคุณมักจะโหลดโดยอัตโนมัติ

คุณต้องจัดคิวให้ดีเพื่อที่จะโหลดและคุณต้องแน่ใจว่าสไตล์ชีตย่อยได้รับความสำคัญ เพื่อให้ง่ายขึ้น ฉันได้สร้างโค้ดต่อไปนี้ซึ่งตั้งค่า 'parent-style' เป็นการขึ้นต่อกัน ดังนั้นสไตล์ชีตของธีมลูกของคุณจึงโหลดหลังจากนั้น

 <?php

ฟังก์ชัน theme_enqueue_styles () {

$parent_style = 'รูปแบบหลัก';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'สไตล์เด็ก', get_stylesheet_directory_uri() . '/style.css', อาร์เรย์( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

?>

4. การเปิดใช้งาน

เมื่อโฟลเดอร์ธีมลูกเสร็จสมบูรณ์แล้ว คุณต้องสร้างไฟล์ .zip ของโฟลเดอร์ธีมลูกของคุณ เพื่อให้คุณสามารถเพิ่มลงในธีม WordPress ของคุณได้

คุณสามารถทำได้โดยใช้ 7-zip หรือ Winrar สิ่งสำคัญคือต้องแน่ใจว่าคุณมี style.css และ functions.php อยู่ในโฟลเดอร์ธีมลูกของคุณ

นอกจากนี้ คุณควรจดบันทึกและเก็บบันทึกการตั้งค่าปลั๊กอินอื่นๆ ก่อนที่คุณจะเปิดใช้งานธีมลูกของคุณ หลังจากนั้น คุณสามารถอัปโหลดสิ่งนี้ใน WordPress ผ่าน Appearance > Add Themes

WordPress จะติดตั้งเหมือนกับธีมใดๆ และเมื่อติดตั้งแล้ว คุณต้องเปิดใช้งานโดยคลิกที่ 'เปิดใช้งาน' โดยไปที่ ลักษณะที่ ปรากฏ > ธีม ดังที่แสดงด้านล่าง:

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

นอกจากนี้ คุณสามารถเปลี่ยนแปลงไฟล์เทมเพลตของธีมได้ โดยการคัดลอกไฟล์เทมเพลตที่คุณต้องการแก้ไข เช่น header.php จากพาเรนต์ของคุณไปยังโฟลเดอร์ธีมย่อย

นอกจากนี้ คุณจะต้องทำการเปลี่ยนแปลงบางอย่างเพื่อระบุฟังก์ชันที่ WordPress ใช้เพื่ออ้างอิงไฟล์เทมเพลต ซึ่งหมายความว่าคุณจะใช้ get_stylesheet_directory(); ฟังก์ชั่นแทน get_template_directory() เพื่ออ้างอิงเทมเพลตของคุณ

บทสรุป

ณ จุดนี้ ฉันแน่ใจว่าคุณสามารถสร้าง WooCommerce Storefront Child Theme ได้ ฉันขอแนะนำอย่างยิ่งให้คุณแปรง CSS ของคุณเพื่อให้ได้รับประโยชน์สูงสุดจากสไตล์ของคุณ และดูคำแนะนำอื่น ๆ ของเราเกี่ยวกับการสร้างธีมย่อยสำหรับคำแนะนำเพิ่มเติม

คุณยังสามารถซื้อธีมย่อยจากผู้ให้บริการบุคคลที่สามได้ แต่คุณไม่จำเป็นต้องพึ่งพาความคิดสร้างสรรค์ของผู้อื่น เนื่องจากการสร้าง WooCommerce Storefront Child Theme นั้นไม่ยากอย่างที่คุณคิด

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

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

บทความที่คล้ายกัน

1. ธีมหน้าร้าน WooCommerce คืออะไร? [ตอบ]
2. 80+ เคล็ดลับในการปรับแต่งหน้าร้าน WooCommerce Theme : สุดยอดคู่มือการปรับแต่งธีมหน้าร้าน
3. วิธีเพิ่มความน่าเชื่อถือหรือโลโก้ที่ปลอดภัยในหน้าชำระเงินของ WooCommerce
4. วิธีเปลี่ยนเส้นทาง WooCommerce หลังจากชำระเงิน : เปลี่ยนเส้นทางไปยังหน้าขอบคุณแบบกำหนดเอง
5. วิธีสร้างประกาศผู้ดูแลระบบ WooCommerce สำหรับปลั๊กอิน – การพัฒนา WooCommerce
6. วิธีสร้างฐานข้อมูล WordPress ใน PHPMyAdmin
7. วิธีสร้างวิดเจ็ตหลายตัวใน WordPress โดยใช้ For & Foreach Loops
8. วิธีสร้างรหัสย่อสำหรับปลั๊กอินใน WordPress
9. วิธีสร้างฐานข้อมูล MySQL WordPress ผ่าน Command Line
10. 20 ขั้นตอนแรกสำหรับ WordPress เริ่มต้นใช้งานให้สมบูรณ์
11. วิธีแสดงผลิตภัณฑ์ WooCommerce ตามหมวดหมู่
12. ตัวอย่าง PHP ออกจากระบบ WooCommerce เพื่อสร้างปุ่มออกจากระบบ
13. วิธีเปลี่ยนข้อความปุ่มเพิ่มในรถเข็นในหน้าร้านค้า WooCommerce
14. วิธีตั้งค่าผลิตภัณฑ์เด่นใน WooCommerce
15. วิธีเพิ่มวิธีการจัดส่งแบบกำหนดเองใน WooCommerce