วิธีสร้าง Child Theme ด้วยตัวเอง (ไม่ต้องใช้ปลั๊กอิน)

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

แต่เป็นพื้นฐานสำคัญมากสำหรับคนที่อยากปรับแต่งเว็บเองโดยไม่ต้องพึ่งปลั๊กอินและไม่เสี่ยงกับการอัปเดตในอนาคต ผมจะเล่าให้ฟังตั้งแต่แนวคิดไปจนถึงขั้นตอนสร้าง Child Theme ด้วยตัวเองทำตามได้จริง และใช้ได้ยาว

Child Theme คืออะไร และจำเป็นแค่ไหน

Child Theme คือธีมลูก ที่ทำงานต่อจากธีมหลัก หรือ Parent Theme แนวคิดของมันง่ายมาก เราเอาธีมหลักมาเป็นฐาน แล้วเขียนไฟล์ปรับแต่งเพิ่มใน Child Theme

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

Child Theme ต่างจากแก้ธีมตรง ๆ ยังไง

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

เตรียมอะไรบ้างก่อนสร้าง Child Theme

ก่อนเริ่มควรมีสิ่งเหล่านี้พร้อมก่อน

• มีธีมหลักที่ใช้งานอยู่แล้ว
• เข้าถึงโฟลเดอร์เว็บไซต์ได้ เช่น ผ่าน Hosting หรือ FTP
• เข้าใจโครงสร้างไฟล์ WordPress พื้นฐาน

ไม่ต้องมีปลั๊กอินเพิ่ม ไม่ต้องเขียนโค้ดยาว แค่รู้ว่ากำลังทำอะไรอยู่

โครงสร้างไฟล์ของ Child Theme

Child Theme จะอยู่ในโฟลเดอร์เดียวกับธีมหลัก ตำแหน่งคือ wp-content/themes/ ในโฟลเดอร์นี้ เราจะสร้างโฟลเดอร์ใหม่สำหรับ Child Theme ตั้งชื่ออะไรก็ได้ แต่ควรสื่อความหมาย เช่น theme-name-child

สร้างไฟล์ style.css สำหรับ Child Theme

ภายในโฟลเดอร์ Child Theme ให้สร้างไฟล์ชื่อ style.css แล้วใส่โค้ดพื้นฐานดังนี้

/*
Theme Name: Theme Name Child
Template: theme-name
*/

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

สร้างไฟล์ functions.php เพื่อเรียกไฟล์ CSS

ขั้นตอนต่อมาคือสร้างไฟล์ functions.php ในโฟลเดอร์เดียวกัน แล้วใส่โค้ดสำหรับเรียก CSS ของธีมหลักและธีมลูก

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

โค้ดนี้ทำหน้าที่โหลด CSS ของธีมหลักก่อนแล้วค่อยโหลด CSS ของ Child Theme ตาม

เปิดใช้งาน Child Theme

หลังจากสร้างไฟล์ครบแล้วเข้าไปที่หลังบ้าน WordPressไปที่ Appearance > Themes จะเห็น Child Theme แสดงขึ้นมา
ให้กด Activate ได้ทันที ถ้าเว็บยังแสดงผลเหมือนเดิม แปลว่าการตั้งค่าสำเร็จแล้ว

ปรับแต่งอะไรได้บ้างผ่าน Child Theme

เมื่อมี Child Theme แล้ว คุณสามารถ

• แก้ไข CSS
• เพิ่มโค้ด PHP
• Override ไฟล์ของธีมหลักบางไฟล์
• เพิ่มฟังก์ชันใหม่โดยไม่กระทบธีมหลัก

ทั้งหมดนี้ทำได้ โดยไม่ต้องกลัวว่าอัปเดตแล้วเว็บจะพัง

ข้อควรระวังเวลาใช้ Child Theme

Child Theme ไม่ได้หมายความว่า จะก็อปไฟล์ทั้งธีมหลักมาแก้ ควรคัดลอกเฉพาะไฟล์ที่จำเป็น และแก้เท่าที่ต้องใช้จริง การแก้มากเกินไป อาจทำให้ดูแลยากในอนาคต

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

คำถามที่พบบ่อยเกี่ยวกับ Child Theme