สุดยอดคู่มือการทำงานกับ WordPress Child Themes

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

โดยพื้นฐานที่สุด การใช้ธีมย่อยจะทำให้คุณมีประสิทธิภาพมากขึ้น – การรักษาโค้ดที่คุณใช้สำหรับทุกโปรเจ็กต์ในธีมหลักของคุณเอง หรือใช้ธีมหลักที่ไม่มีวางจำหน่ายทั่วไปเหมือนอย่างของเรา จะทำให้คุณปฏิบัติตาม หลักการ DRY (อย่าทำซ้ำตัวเอง)

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

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

การทำความเข้าใจธีมสำหรับผู้ปกครองและเด็ก

ตามทฤษฎีแล้ว ธีมใดๆ ก็สามารถทำหน้าที่เป็นธีมหลักได้ แม้ว่าบางธีมจะออกแบบมาได้ดีกว่าสำหรับบทบาทนี้ (รวมถึงของเราด้วย!) หากคุณกำลังใช้ธีมใดธีมหนึ่งของเราและต้องการปรับแต่งสำหรับโปรเจ็กต์ของคุณเอง การใช้ธีมย่อยในการทำเช่นนี้จะดีกว่าการแฮ็กธีมหลัก ซึ่งหมายความว่าคุณจะสูญเสียการเปลี่ยนแปลงทั้งหมดเมื่อคุณอัปเดต ธีมสำหรับรุ่นต่อๆ ไป ในการสร้างธีมลูก คุณเพียงแค่สร้างธีมใหม่และเพิ่มสิ่งต่อไปนี้ที่จุดเริ่มต้นของสไตล์ชีต ตัวอย่างของฉันด้านล่างใช้ HelpGuru ธีม HeroThemes เป็นพาเรนต์ แต่คุณสามารถใช้ธีมใดก็ได้ รวมถึงผลิตภัณฑ์ของ HeroTheme อื่น เช่น KnowAll

เริ่มสร้างฐานความรู้ของคุณวันนี้!

ธีม KnowAll ของเรามีธีมย่อยเพื่อช่วยคุณปรับแต่งไซต์ฐานความรู้ของคุณ

รับธีม

/*
Theme Name: My child theme
Theme URI: URL of the theme or site it's used for
Description: Description of what the theme is for and its main features.
Author: Your name
Template: helpguru
Version: 1.0
*/
@import url("../helpguru/css/style.css");

บรรทัดสำคัญคือสองสิ่งนี้:

Template: helpguru
@import url("../helpguru/css/style.css");

ส่วนแรกระบุเทมเพลต ซึ่งบอก WordPress ว่านี่เป็นธีมลูกและแม่คือธีม HelpGuru โปรดทราบว่าคุณใช้ชื่อโฟลเดอร์ของธีมหลักที่นี่ และไม่ใช่ชื่อของธีม (ดังนั้นฉันจึงใช้ 'helpguru' ด้านบน ไม่ใช่ 'HelpGuru')

ส่วนที่สองนำเข้าสไตล์ชีตจากธีมหลัก ซึ่งหมายความว่าสไตล์ของธีมหลักทั้งหมดจะเปิดใช้งานในธีมย่อยของคุณ จากนั้นคุณเพิ่มสไตล์ของคุณเองด้านล่างการประกาศ @import นี้ - ซึ่งหมายความว่าสไตล์จากทั้งสองธีมจะถูกใช้ แต่ในกรณีที่มีการประกาศอยู่ในทั้งสองสไตล์ชีตสำหรับองค์ประกอบเดียวกัน CSS ของธีมย่อยจะมีผลเหนือกว่าเนื่องจากคาสเคด (เนื่องจากเป็นธีมย่อยของคุณ การจัดสไตล์มาหลังการจัดสไตล์จากธีมหลัก)

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

ไฟล์เทมเพลตธีมสำหรับผู้ปกครองและเด็ก

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

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

การตัดสินใจเลือกไฟล์เทมเพลตธีมหลักหรือรอง

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

1. ระบุประเภทของเนื้อหาที่จะแสดง
2. มันทำงานผ่านลำดับชั้นของเทมเพลตจนกว่าจะพบไฟล์ที่จะแสดงเนื้อหานั้น ในธีมหลักหรือธีมย่อย
3. หากไฟล์มีอยู่ในทั้งธีมพาเรนต์และธีมย่อย ไฟล์จะใช้ไฟล์จากธีมย่อย

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

ในตัวอย่างข้างต้น มาดูกันว่าไฟล์เทมเพลตใดที่จะใช้แสดงเนื้อหาบางประเภท:

• โพสต์เดี่ยวสำหรับประเภทโพสต์ที่กำหนดเอง 'ผลิตภัณฑ์' จะแสดงโดยใช้ single-product.php จากธีมย่อย
• โพสต์เดี่ยวสำหรับโพสต์ประเภทอื่น (รวมถึงโพสต์ปกติ) จะแสดงโดยใช้ single.php จากธีมย่อย
• หน้าคงที่จะแสดงโดยใช้ page.php จากธีมหลัก
• รายการสำหรับหมวดหมู่วิดเจ็ตจะแสดงโดยใช้ category-widgets.php จากธีมลูก
• รายการหมวดหมู่อื่นๆ จะแสดงโดยใช้ category.php จากธีมหลัก
• รายการเก็บถาวรอื่น ๆ จะแสดงโดยใช้ archive.php จากธีมหลัก
• ผลการค้นหาจะแสดงโดยใช้ search.php จากธีมหลัก
• 404 หน้าจะแสดงโดยใช้ 404.php จากธีมหลัก
• หน้าอื่นๆ ที่ไม่มีไฟล์เทมเพลตเฉพาะจะแสดงโดยใช้ index.php จากธีมลูก

ก้าวต่อไป – เอาชนะการทำงานของธีมหลัก

เช่นเดียวกับการแทนที่หรือเสริมไฟล์ CSS และ/หรือเทมเพลตในธีมหลัก คุณสามารถใช้ธีมย่อยเพื่อแทนที่ฟังก์ชันการทำงานในธีมหลักหรือเพื่อเพิ่มฟังก์ชันพิเศษ

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

การใช้ลำดับความสำคัญเพื่อแทนที่การทำงานของธีมหลัก

ในการเปิดใช้งานแต่ละฟังก์ชันที่คุณเพิ่มในธีมย่อย คุณจะต้องแนบไปกับ action hook หรือ filter hook โดยใช้ add_action() หรือ add_filter() add_action() และ add_filter() มีสามพารามิเตอร์:

• $tag – ตัวระบุเฉพาะสำหรับการดำเนินการหรือตัวกรอง hook
• $function_to_add – ชื่อของฟังก์ชันของคุณ
• $priority – ลำดับความสำคัญที่คุณต้องการเชื่อมต่อฟังก์ชันของคุณ (ซึ่งมากกว่านั้นในเร็วๆ นี้)

ด้วย add_filter() คุณสามารถใช้พารามิเตอร์ทางเลือกที่สี่ $arguments แต่นั่นไม่เกี่ยวข้องกับธีมย่อยโดยเฉพาะ ในกรณีส่วนใหญ่ จะใช้เพียงสองพารามิเตอร์แรก (ซึ่งจำเป็นทั้งคู่) แต่คุณสามารถใช้พารามิเตอร์ $priority ทางเลือกเพื่อแทนที่ฟังก์ชันในธีมหลักด้วยฟังก์ชันในธีมย่อยของคุณ ยิ่งมีลำดับความสำคัญสูง ยิ่งโหลดช้า: ค่าเริ่มต้นคือ 10 ดังนั้นหากธีมหลักไม่ได้ระบุลำดับความสำคัญ คุณเพียงแค่ตั้งค่าลำดับความสำคัญในธีมย่อยของคุณเป็นตัวเลขที่สูงกว่า 10 มาดูกันว่าสิ่งนี้เป็นอย่างไร ทำงาน ลองนึกภาพคุณกำลังทำงานกับลูกของธีม HelpGuru และคุณต้องการแทนที่ฟังก์ชันเมนูและเพิ่มของคุณเอง ธีมนี้มี ht_theme_setup() เพื่อตั้งค่าธีม (รวมถึงการลงทะเบียนเมนู เพิ่มการรองรับรูปภาพเด่น และอื่นๆ) ซึ่งแนบมากับเบ็ดการดำเนินการ after_setup_theme รหัสในไฟล์ฟังก์ชันของ HelpGuru มีดังนี้:

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}
add_action( 'after_setup_theme', 'ht_theme_setup' );

หากต้องการแทนที่องค์ประกอบของ ht_theme_setup() (แต่ไม่ใช่ทั้งหมด: เราจะมาในไม่ช้านี้) ในธีมย่อยของคุณ คุณจะต้องเขียนฟังก์ชันที่จะแทนที่องค์ประกอบของฟังก์ชันที่ HelpGuru ให้มา และแนบไปกับการดำเนินการ after_setup_theme ขอระบุลำดับความสำคัญที่สูงกว่า 10:

function my_theme_setup() {
// contents of function
}
add_action( 'after_setup_theme', 'my_theme_setup', 15 );

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

การใช้ฟังก์ชันที่เสียบได้เพื่ออนุญาตให้มีการแทนที่ธีมลูก

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

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}

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

function ht_theme_setup() {
// contents of function
}

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

สรุป

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

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