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

ปรับปรุงล่าสุด - 5 มีนาคม 2021

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

รับหน้าร้าน WooCommerce!

ธีมลูก – ภาพรวม

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

ข้อดีของการใช้ธีมลูก

การปรับเปลี่ยนธีมโดยตรงอาจเสี่ยงต่อการสูญเสียการดัดแปลงระหว่างการอัปเดต ธีมลูกช่วยให้แน่ใจว่าการแก้ไขจะถูกรักษาไว้เหมือนเดิม โดยรวมแล้ว การพัฒนาธีมลูกเป็นกระบวนการที่เร็วกว่าการสร้างธีมใหม่ นอกจากนี้ สำหรับผู้ที่สนใจใน การพัฒนาธีม WordPress การ สร้างธีมลูกเป็นวิธีที่ยอดเยี่ยมในการทดลองและเรียนรู้

นี่คือข้อดีบางประการในการสร้างธีมย่อย:

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

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

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

ในการเริ่มต้นกระบวนการ ให้สร้างไฟล์ style.css สำหรับธีมย่อยโดยใช้โค้ดตัวอย่างต่อไปนี้ใน WooCommerce Docs

ถัดไป เปลี่ยนฟิลด์เทมเพลตให้ชี้ไปที่หน้าร้าน

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

คุณสามารถถ่ายโอนไฟล์ไปยังโฟลเดอร์ธีมย่อย สร้างไฟล์ zip และอัปโหลด เมื่อเสร็จแล้ว ให้เปิดใช้งานธีมลูกใหม่จาก Appearance > Themes

คุณยังสามารถอัปโหลดธีมลูกผ่าน FTP ได้ หากคุณมีสิทธิ์เข้าถึงบริการโฮสติ้งของคุณ คุณสามารถใช้โปรแกรม FTP เช่น FileZilla

ไคลเอนต์ FTP อันดับต้น ๆ สำหรับ Mac และ Windows

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

จะปรับแต่งการออกแบบและการทำงานของธีมลูกได้อย่างไร?

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

การเปลี่ยนแปลงการออกแบบ

ตัวอย่างเช่น ในสไตล์ชีตด้านบนที่คุณสร้างขึ้นสำหรับธีมย่อย คุณสามารถกำหนดสีสำหรับชื่อไซต์โดยใช้โค้ดด้านล่าง:
.site-branding h1 a {
color: red;
}

การปรับเปลี่ยนเทมเพลต

คุณยังสามารถแก้ไขไฟล์เทมเพลต (*.php) ในโฟลเดอร์ธีมได้ ตัวอย่างเช่น คุณสามารถแก้ไขโค้ดเฉพาะได้โดยการคัดลอก header.php จากโฟลเดอร์ธีมหลัก wp-content/themes/storefront/header.php ไปยังโฟลเดอร์ธีม ย่อย wp-content/themes/storefront-child/header.php

เมื่อคัดลอกเสร็จแล้ว คุณสามารถแก้ไข header.php และปรับแต่งโค้ดได้ตามต้องการ header.php ในธีมลูกจะถูกใช้แทนที่ header.php ของธีมหลัก

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

เอกสารประกอบของ WooCommerce นี้จะช่วยให้คุณเข้าใจโครงสร้างเทมเพลต WooCommerce มากขึ้น

ปรับแต่งฟังก์ชันการทำงาน

เมื่อคุณสร้างธีมย่อย คุณต้องการให้มีฟังก์ชันแบบกำหนดเองด้วยเช่นกัน สำหรับสิ่งนี้ คุณต้องตรวจสอบให้แน่ใจก่อนว่าไฟล์ functions.php ของคุณว่างเปล่าและไม่มีข้อมูลใด ๆ จากไฟล์ functions.php ของพาเรนต์ ตอนนี้ หากฟังก์ชันเฉพาะในฟังก์ชันของธีมหลักเป็นแบบเสียบได้ (รวมอยู่ในเงื่อนไข if คำสั่ง) คุณก็จะสามารถคัดลอกฟังก์ชันนั้นไปยัง functions.php ของธีมลูกได้ เมื่อคุณคัดลอกฟังก์ชันที่เสียบได้แล้ว คุณสามารถเปลี่ยนแปลงได้ตามต้องการ ด้านล่างนี้เป็นตัวอย่างสำหรับฟังก์ชันที่เสียบได้:
if (!function_exists("parent_function_name")) {
parent_function_name() {
...
}
}

การสร้างธีมลูกทั่วไป

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

ขั้นตอนแรกคือการสร้างไดเร็กทอรีธีม ถัดไป สร้างสไตล์ชีต (ไฟล์ style.css) สำหรับธีมลูก WooCommerce แนะนำให้สร้างไฟล์ functions.php ซึ่งมีประโยชน์ในการจัดคิวสไตล์อย่างถูกต้อง

การสร้างธีมลูกทั่วไป

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

ขั้นตอนแรกคือการสร้างไดเร็กทอรีธีม ถัดไป สร้างสไตล์ชีต (ไฟล์ style.css) สำหรับธีมลูก WooCommerce แนะนำให้สร้างไฟล์ functions.php ซึ่งมีประโยชน์ในการจัดคิวสไตล์อย่างถูกต้อง

การสร้างไดเร็กทอรีธีมลูก

สร้างและวางไดเร็กทอรีธีมลูกใน wp-content/themes แนะนำให้ต่อท้ายชื่อของไดเร็กทอรีธีมลูกด้วย '-child' แม้ว่าจะไม่บังคับก็ตาม ควรใช้ความระมัดระวังไม่ให้เว้นวรรคในชื่อไดเร็กทอรีธีมลูกเพื่อหลีกเลี่ยงปัญหาใดๆ

การสร้างสไตล์ชีตของธีมลูก

สร้างส่วนหัวของสไตล์ชีตเพื่อเริ่มกระบวนการ ด้านล่างนี้คือตัวอย่าง WordPress Codex ของส่วนหัวของสไตล์ชีตที่สร้างขึ้นสำหรับธีมย่อยตามธีม Twenty Fifteen

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

การจัดคิวธีมหลักและลูก

สร้างไฟล์ functions.php ในไดเร็กทอรีธีมลูกเพื่อจัดคิวธีมหลักและธีมย่อย จัดคิวสไตล์ชีตของธีมหลักโดยเพิ่มการกระทำ wp_enqueue_scripts และโดยใช้ wp_enqueue_style() ใน function.php ของธีมลูก เปิด function.php ของธีมลูกของคุณด้วยแท็ก PHP (<?php) ถัดไป จัดคิวสไตล์ชีตของธีมหลักและรอง ด้านล่างภาพหน้าจอเป็นตัวอย่างที่จะใช้งานได้ก็ต่อเมื่อธีมหลักของคุณใช้ไฟล์ .css ไฟล์เดียวเพื่อเก็บ CSS หากมีไฟล์ .css มากกว่าหนึ่งไฟล์ เช่น style.css, main.css, ie.css ให้ตรวจสอบให้แน่ใจว่าได้รักษาการพึ่งพาธีมหลักทั้งหมด ความรู้ด้านการเขียนโปรแกรมในระดับที่ดีนั้นเป็นปัจจัยสำคัญในการทำให้ถูกต้องในครั้งแรกอย่างชัดเจน

คุณต้องจัดคิวโค้ด CSS จริงในธีมลูกของคุณ style.css เพื่อให้แน่ใจว่าสไตล์ชีตของธีมย่อยโหลดหลังจากสไตล์ชีตหลัก คุณสามารถตั้งค่าสไตล์พาเรนต์เป็นการพึ่งพาได้ นอกจากนี้ รวมหมายเลขเวอร์ชันของธีมลูกเพื่อให้แน่ใจว่าคุณสามารถทำลายแคชสำหรับธีมลูกของคุณได้ ตัวอย่างที่แนะนำใน Codex มีดังต่อไปนี้:

กำลังเปิดใช้งานธีมลูกของคุณ

สร้างไฟล์ zip ของโฟลเดอร์ธีมลูกของคุณและอัปโหลดโดยไปที่ Appearance → Themes → Add New Theme

ตอนนี้ธีมลูกใหม่จะปรากฏในรายการธีม

คุณสามารถเปิดใช้งานธีมลูกใหม่ได้ทันทีโดยคลิกปุ่ม เปิดใช้งาน

• ดาวน์โหลดธีมหน้าร้านทันที
• อ่านเพิ่มเติมเกี่ยวกับธีมลูกจาก WordPress Codex

คุณยังสามารถดาวน์โหลดตัวอย่างธีมลูกจากลิงค์ WooCommerce นี้เพื่อทราบดีขึ้น หรืออ่านบทความที่เกี่ยวข้องบางส่วนของเรา:

1. วิธีการเลือกธีมที่เหมาะสมสำหรับร้านค้า WooCommerce ของคุณ?
2. จะติดตั้งและกำหนดค่าหน้าร้านได้อย่างไร?
3. แนวโน้มล่าสุดในธีม WooCommerce