สุดยอดคู่มือ WordPress Child Themes

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

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

ธีมเด็กคืออะไร?

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

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

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

เหตุใดฉันจึงควรใช้ธีมเด็ก

คำถามที่ดียิ่งขึ้น: ทำไมคุณไม่ใช้ธีมลูกล่ะ จริงๆ แล้วฉันไม่สามารถคิดหาเหตุผลที่ดีที่จะไม่ใช้มันได้ แต่ฉันรู้เหตุผลดีๆ สองสามข้อว่าทำไมคุณจึงควรใช้ธีมลูก

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

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

การพัฒนาที่เร็วขึ้น – การขยายหรือแทนที่รูปแบบและการทำงานของธีมหลักในธีมย่อย เป็นตัวเลือกที่ดีกว่าการรักษาฐานโค้ดของธีมที่แก้ไข ซึ่งสามารถถูกเขียนทับด้วยการอัปเดตธีม (และเราได้สร้างไว้แล้ว การอัปเดตนั้นสำคัญ :)) .

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

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

วิธีการสร้างธีมลูกเริ่มต้น?

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

สำหรับตัวอย่างของเรา เราจะสร้างธีมลูกเริ่มต้นสำหรับธีมหลักของ Adrenaline:

1. สร้างโฟลเดอร์และตั้งชื่อ adrenaline-pt-child แนวทางปฏิบัติที่ดีที่สุดคือการใช้ชื่อโฟลเดอร์ของธีมหลัก (adrenaline-pt) และต่อท้าย '-child' ต่อท้าย ดังนั้นจึงเห็นได้ชัดว่าธีมใดเป็นธีมย่อยและธีมหลักใด
2. สร้าง style.css ในโฟลเดอร์ธีมลูก เปิด style.css แล้ววางโค้ดนี้ลงไป (โค้ดนี้ต้องอยู่ที่ด้านบนสุดของไฟล์):
   

    /* Theme Name: Adrenaline Child Theme Theme URI: https://www.proteusthemes.com/wordpress-themes/adrenaline Description: Child theme for the Adrenaline theme Author: ProteusThemes Author URI: https://www.proteusthemes.com Template: adrenaline-pt Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: grid-layout, custom-background, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, microformats, sticky-post, theme-options, blog, e-commerce, entertainment, holiday Text Domain: adrenaline-pt-child */ /* Write your custom CSS code below */

3. สร้างไฟล์ functions.php ในโฟลเดอร์ธีมลูก เปิดไฟล์ functions.php และวางโค้ดนี้ลงไป:
   

    <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }

4. คุณสามารถเลือกเพิ่ม screenshot.png (หรือ .jpg) ลงในโฟลเดอร์ธีมลูกของคุณ ซึ่งจะแสดงในส่วนลักษณะที่ ปรากฏ -> ธีม เป็นภาพตัวอย่าง (ภาพหน้าจอควรมีขนาดใหญ่ 1200x900px)

นั่นเป็นธีมลูกเริ่มต้นขั้นพื้นฐาน ในการติดตั้ง คุณควรวางโฟลเดอร์นี้ในไดเร็กทอรี wp-content/themes/ ถัดจากโฟลเดอร์ธีมหลัก หรือคุณสามารถสร้างไฟล์ zip จากโฟลเดอร์ธีมลูกนี้และติดตั้งเป็นธีม WP ปกติผ่านแดชบอร์ดผู้ดูแลระบบ WP ใน Appearance -> Themes

มาอธิบายโค้ดในตัวอย่างด้านบนกัน

style.css – ฟิลด์เดียวที่ "จำเป็น" คือ ชื่อธีม (ชื่อธีมลูกของคุณ) และ เทมเพลต (ชื่อโฟลเดอร์ของธีมหลักของคุณ) ฟิลด์อื่นๆ เป็นทางเลือก และธีมย่อยจะทำงานโดยไม่มีฟิลด์เหล่านี้ อย่างไรก็ตาม ฟิลด์เมตาเหล่านี้: URI ธีม, คำอธิบาย, ผู้แต่ง, ... นั้น "น่ามี" และจะแสดงใน ผู้ดูแลระบบ WP -> ลักษณะที่ปรากฏ -> ธีม ซึ่งจะทำให้ธีมย่อย "สมบูรณ์" มากขึ้น

functions.php – เพื่อให้ธีมลูกมีลักษณะเหมือนกับธีมหลัก เราจำเป็นต้องจัดคิวไฟล์ CSS ของธีมหลัก วิธีที่แนะนำในการทำเช่นนี้คือการใช้ wp_enqueue_scripts action hook ในฟังก์ชันเรียกกลับ เราจัดคิวไฟล์ CSS ของธีมหลักด้วยฟังก์ชัน wp_enqueue_style หากธีมพาเรนต์ใช้ไฟล์ CSS หลายไฟล์ (ไม่ใช่แค่ style.css ) คุณอาจต้องจัดคิวไฟล์เหล่านั้นด้วย ขึ้นอยู่กับเทคนิคการเข้าคิวของธีมพาเรนต์

ในธีม Adrenaline ของเรา เรายังใช้ไฟล์ CSS ของ WooCommerce แบบกำหนดเอง ดังนั้นจึงควรจัดคิวในธีมย่อยด้วย เราต้องระวังที่นี่ เพราะเราต้องตั้งชื่อพารามิเตอร์ handle ของฟังก์ชัน wp_enqueue_style เหมือนกับที่อยู่ในธีมหลัก (ในตัวอย่างของเรา: adrenaline-woocommerce ) ด้วยวิธีนี้ ไฟล์ CSS ของธีมลูกของเราจะถูกจัดคิวไว้เป็นลำดับสุดท้าย และเราจะสามารถเขียนทับสไตล์ธีมหลักใดๆ ได้โดยไม่มีปัญหาใดๆ นี่คือไฟล์ functions.php ที่อัปเดตสำหรับธีม Adrenaline ของเรา:

 <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); /** * Enqueue additional parent theme CSS files. * Watch out to name the "handle" parameter the same as it is named * in the parent theme, otherwise the file might be enqueued twice. * In this example the parent handle name for this CSS file was * "adrenaline-woocommerce" */ wp_enqueue_style( 'adrenaline-woocommerce', get_template_directory_uri() . '/woocommerce.css' ); }

ณ จุดนี้ฉันอยากจะพูดถึงว่าวิธีเดิมในการเพิ่มสไตล์พาเรนต์ให้กับธีมย่อยคือการใช้กฎ CSS @import หากคุณกำลังใช้ธีมลูก ซึ่งใช้ @import rule ใน style.css เพื่อนำเข้าไฟล์ CSS ของธีมหลัก เราขอแนะนำให้คุณเปลี่ยนไปใช้ตัวอย่างด้านบน โดยที่ไฟล์ CSS ของธีมพาเรนต์จะถูกจัดคิวใน functions.php ไฟล์ (และลบกฎ @import ออกจาก style.css ) ปัญหาของกฎ @import คือมันช้ากว่าการจัดคิวไฟล์ CSS พาเรนต์ผ่าน wp_enqueue_scripts hook มาก คุณสามารถอ่านเพิ่มเติมเกี่ยวกับปัญหานี้ได้ที่นี่

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

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

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

WordPress ใช้ไฟล์เทมเพลตเพื่อสร้างหน้า HTML จริงที่ผู้เยี่ยมชมเว็บไซต์ของคุณเห็น ไฟล์เทมเพลต WordPress ที่เป็นที่รู้จักมากขึ้น ได้แก่ header.php , footer.php , index.php , single.php , page.php , … ตัวอย่างเช่น หากเข้าชมหน้าบล็อก ไฟล์เทมเพลต index.php จะถูกใช้ เพื่อแสดงรายการโพสต์บล็อก ไฟล์เทมเพลตบางไฟล์เป็นแบบแยกส่วนและนำกลับมาใช้ใหม่ได้ ตัวอย่างเช่น header.php มักใช้กับหน้า WordPress ทุกหน้า

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

แหล่งข้อมูลอื่นที่คุณควรตรวจสอบคือการสร้างภาพข้อมูลเชิงโต้ตอบของลำดับชั้นเทมเพลต WordPress

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

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

วิธีปรับแต่งธีมลูกของคุณ?

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

• เพิ่มสไตล์ที่กำหนดเองและเขียนทับสไตล์หลัก
• เพิ่มฟังก์ชันการทำงานที่กำหนดเองและเขียนทับฟังก์ชันหลัก
  • เพิ่มฟังก์ชันใหม่,
  • การเขียนทับฟังก์ชันหลัก
  • เพิ่มไฟล์เทมเพลตใหม่
  • การเขียนทับไฟล์เทมเพลตหลัก

การเพิ่มสไตล์ที่กำหนดเองและเขียนทับสไตล์พาเรนต์

ควรเพิ่มโค้ด CSS ที่กำหนดเองทั้งหมดลงใน style.css ในธีมย่อย

สมมติว่าเราต้องการเพิ่มรูปแบบคำเตือนสำหรับข้อความบางส่วนในธีมย่อยของเรา เรามีองค์ประกอบ HTML div ที่มีคลาสของ warning พร้อมกับข้อความบนหน้า WordPress และเราต้องการเพิ่มรูปแบบที่เหมาะสมสำหรับองค์ประกอบนี้ โค้ด CSS แบบกำหนดเองที่เราเขียนสำหรับตัวอย่างนี้ ต้องอยู่ใน style.css ใต้ความคิดเห็นส่วนหัวของธีมย่อย (ซึ่งมักจะอยู่ที่ด้านบนสุดของไฟล์เสมอ) style.css ที่มีโค้ด CSS ที่กำหนดเองจะมีลักษณะดังนี้:

 /* Theme Name: Adrenaline Child Theme Theme URI: https://www.proteusthemes.com/wordpress-themes/adrenaline Description: Child theme for the Adrenaline theme Author: ProteusThemes Author URI: https://www.proteusthemes.com Template: adrenaline-pt Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: grid-layout, custom-background, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, microformats, sticky-post, theme-options, blog, e-commerce, entertainment, holiday Text Domain: adrenaline-pt-child */ .warning { margin: 1rem 0; background-color: #fcf8e3; border-color: #faf2cc; color: #8a6d3b; padding: 0.75rem 1.25rem; border: 1px solid transparent; border-radius: 0.25rem; }

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

ในการเขียนทับรูปแบบธีมหลัก คุณต้องค้นหาตัวเลือก CSS ในธีมหลัก ซึ่งกำหนดสีให้กับไอคอนนี้ คุณค้นหาตัวเลือก CSS ได้ด้วยเครื่องมือพัฒนา Chrome นี่คือวิดีโอสอนง่าย ๆ เกี่ยวกับวิธีการทำเช่นนั้น เมื่อคุณมีตัวเลือก CSS ที่ถูกต้องแล้ว ในตัวอย่างของเราคือ .header-info__link .fa คุณต้องวางโค้ดใน style.css ในธีมย่อย style.css ของธีมลูกที่มีการเขียนทับนี้จะมีลักษณะดังนี้:

 /* Theme Name: Adrenaline Child Theme Theme URI: https://www.proteusthemes.com/wordpress-themes/adrenaline Description: Child theme for the Adrenaline theme Author: ProteusThemes Author URI: https://www.proteusthemes.com Template: adrenaline-pt Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: grid-layout, custom-background, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, microformats, sticky-post, theme-options, blog, e-commerce, entertainment, holiday Text Domain: adrenaline-pt-child */ .header-info__link .fa { color: #2ebd61; }

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

ยอดเยี่ยม! เราเพิ่งนำสไตล์ที่กำหนดเองมาใช้กับธีมลูกของเรา คุณสามารถเพิ่มโค้ด CSS ที่กำหนดเองลงใน style.css ของธีมลูกได้มากเท่าที่คุณต้องการ

ตอนนี้เรามาดูกันว่าเราจะเพิ่มฟังก์ชันการทำงานบางอย่างให้กับธีมลูกได้อย่างไร

การเพิ่มฟังก์ชันแบบกำหนดเองและเขียนทับฟังก์ชันหลัก

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

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

• เพิ่มฟังก์ชันใหม่,
• การเขียนทับฟังก์ชันหลัก
• เพิ่มไฟล์เทมเพลตใหม่
• การเขียนทับไฟล์เทมเพลตหลัก

เพิ่มฟังก์ชันใหม่

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

ตัวอย่างเช่น หากคุณเพิ่มรหัสย่อให้กับธีมลูกของคุณ คุณอาจสร้างไฟล์ชื่อ shortcodes.php และเพิ่มรหัสที่เหมาะสมลงในไฟล์นั้น จากนั้นคุณจะต้องการไฟล์ใน functions.php เช่น: require_once get_stylesheet_directory() . '/shortcodes.php' require_once get_stylesheet_directory() . '/shortcodes.php'

การเขียนทับการทำงานของผู้ปกครอง

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

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

ตะขอเกี่ยวกับการดำเนินการและตัวกรองของ WordPress – หากคุณใช้ธีมหลักที่มีการเข้ารหัสอย่างดี คุณควรจะสามารถค้นหาการทำงานและตัวกรอง WP ที่กำหนดเองได้ตลอดทั้งธีม ซึ่งคุณสามารถเชื่อมโยงและเปลี่ยนพฤติกรรมของธีมได้ คุณควรค้นหาฟังก์ชัน do_action และ apply_filters ธีมหลักของคุณ ตัวอย่างเช่น ในธีม Twenty Seventeen คุณจะพบตัวกรองที่กำหนดเองนี้: twentyseventeen_front_page_sections ซึ่งมีค่าเริ่มต้นเป็น 4 ค่านี้แสดงจำนวนส่วนที่กำหนดไว้ในหน้าแรกของธีมนี้ หากเราต้องสร้างธีมลูก Twenty Seventeen และต้องการให้มีเพียง 2 ส่วน เราจะวางโค้ดนี้ไว้ในไฟล์ functions.php ของธีมลูก:

 <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } // Custom Twenty Seventeen front page sections filter example. add_filter( 'twentyseventeen_front_page_sections', 'twentyseventeen_child_front_page_sections' ); function twentyseventeen_child_front_page_sections() { return 2; }

ฟังก์ชันที่ เสียบได้ - ฟังก์ชัน ที่เสียบได้คืออะไร? เป็นฟังก์ชัน PHP ปกติ แต่รวมไว้ในคำสั่ง if เพื่อตรวจสอบว่ามีฟังก์ชันที่มีชื่อนี้อยู่แล้วหรือไม่ พวกเขามีลักษณะเช่นนี้:

 <?php if ( ! function_exists( 'some_function_name' ) ) { function some_function_name() { // Function code goes here. } }

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

ฟังก์ชั่น Pluggable ถูกใช้ใน WordPress core ในช่วงแรกและถูกแทนที่ด้วยตัวกรอง

การเพิ่มไฟล์เทมเพลตใหม่

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

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

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

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

การเขียนทับไฟล์เทมเพลตหลัก

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

หากเราต้องการเปลี่ยนแปลงบางอย่างในเทมเพลตของเพจในธีม Adrenaline child ที่เราสร้างไว้ก่อนหน้านี้ เราจะต้องคัดลอกไฟล์ page.php จากธีมหลักไปยังโฟลเดอร์ธีมย่อยของเรา และทำการเปลี่ยนแปลงตามต้องการ

หากเราต้องการเปลี่ยนผู้เขียนและวันที่ที่แสดงในโพสต์เดียว เราจะคัดลอกไฟล์ single.php ไปยังธีมย่อยและทำการเปลี่ยนแปลงในไฟล์นั้น

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

การเปลี่ยนไปใช้ธีมลูกในธีมหลักที่กำหนดค่าไว้แล้ว

หากคุณมีไซต์ WordPress ที่ไม่มีธีมย่อยและต้องการเริ่มใช้ธีมย่อย มีข้อควรทราบบางประการ

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

เปลี่ยนเป็นธีมลูกด้วยตนเอง

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

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

วิดเจ็ต – ในการแก้ไขปัญหาวิดเจ็ต ให้ไปที่ ลักษณะที่ ปรากฏ -> วิดเจ็ต และจัดตำแหน่งใหม่ (ลากและวาง) วิดเจ็ตในแถบด้านข้างที่ถูกต้อง

การตั้งค่าเครื่องมือ ปรับแต่ง – มีวิธีง่ายๆ ในการย้ายการตั้งค่าตัวปรับแต่งที่คุณได้ตั้งค่าไว้แล้วในธีมหลัก ปลั๊กอิน Customizer Export/Import ใช้งานง่ายมากและจะนำเข้าการตั้งค่าเครื่องมือปรับแต่งธีมหลัก ดังนั้นคุณไม่จำเป็นต้องตั้งค่าด้วยตนเอง ทำตามคำแนะนำเหล่านี้เพื่อย้ายการตั้งค่าเครื่องมือปรับแต่งไปยังธีมย่อยของคุณ

หากธีมของคุณใช้เฟรมเวิร์กตัวเลือกธีมอื่น คุณอาจต้องกำหนดค่าใหม่เช่นกัน

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

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

สลับเป็นธีมลูกโดยอัตโนมัติ (พร้อมปลั๊กอิน)

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

ปลั๊กอินตัวสร้างธีมลูกที่ดีที่สุดที่ฉันทดสอบคือปลั๊กอิน Child Theme Configurator จะช่วยให้เราสร้างธีมย่อยและย้ายการตั้งค่าธีมทั้งหมดจากธีมหลักได้ในคราวเดียว ที่น่ากลัว!

ต่อไปนี้คือบทแนะนำสั้นๆ เกี่ยวกับวิธีเปลี่ยนธีมลูกด้วยปลั๊กอินนี้:

1. ติดตั้งและเปิดใช้งานปลั๊กอิน Child Theme Configurator บนไซต์ WP ของคุณ
2. ไปที่ เครื่องมือ -> ธีมลูก
3. สำหรับขั้นตอนแรก ให้เลือกตัวเลือก "สร้างธีมลูกใหม่" ตรวจสอบให้แน่ใจว่าคุณได้เลือกธีมหลักที่ถูกต้องแล้วคลิกปุ่มวิเคราะห์
4. หลังจากวิเคราะห์ปลั๊กอินเสร็จแล้ว คุณสามารถดูตัวเลือกเพิ่มเติมทั้งหมดที่เกิดขึ้นและทำการปรับเปลี่ยนได้ ขึ้นอยู่กับธีมหลักของคุณ แต่การตั้งค่าเริ่มต้นมักจะใช้ได้
5. คุณสามารถคลิกที่ปุ่มแสดง/ซ่อนคุณลักษณะธีมลูก และเปลี่ยนชื่อชุดรูปแบบย่อยและข้อมูลเมตาอื่น ๆ
6. ในตัวเลือก คัดลอกเมนู วิดเจ็ตและการตั้งค่าตัวปรับแต่งอื่น ๆ จากธีมหลักไปยังตัวเลือกธีมลูก คุณควรเปิดใช้งานช่องทำเครื่องหมาย เพื่อให้วิดเจ็ตและการตั้งค่าปรับแต่งจะถูกย้ายจากธีมหลักที่มีอยู่ของคุณไปยังธีมย่อยที่สร้างขึ้นใหม่นี้
7. คลิกที่ปุ่มสร้างธีมลูกใหม่

แค่นั้นแหละ!

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

ฉันทดสอบปลั๊กอินนี้ในธีม Adrenaline และใช้งานได้ดี สร้างธีมลูกสำเร็จแล้ว และมีการโยกย้ายการตั้งค่าวิดเจ็ตและเครื่องมือปรับแต่งไปด้วยเช่นกัน ดังนั้นฉันจึงแนะนำปลั๊กอินนี้อย่างแน่นอน

สรุป

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

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

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