Child theme คืออะไร


นักพัฒนาจะเข้าไปเกี่ยวข้องกับธีมอยู่สองทางคือ ออกแบบธีมใหม่ทั้งหมดหรือปรับแต่งธีมหรือ customization เรากำลังจะพูดถึงเรื่องที่สอง คุณคุ้นเคยกับ Appearance -> Customize มาแล้ว นั่นเป็นการปรับแต่งธีมผ่านเมนูองธีมนั้นๆ แต่ถ้าเราต้องการอะไรที่มากกว่าที่ผู้ธีมนั้นมีให้เราก็ต้องปรับแต่งเอาเอง

การปรับแต่งมีสองแบบคือการแก้ไข code ของโปรแกรมซึ่งจะเกี่ยวข้องกับความรู้เรื่อง php+html ซึ่งมักจะเกี่ยวข้องกับ layout และ function การทำงานของธีม อย่างที่สองคือการแก้ไขรูปแบบหรือ style ของ layout ของธีมนั้นๆ

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

แนวทางที่จะพูดถึงคือการแก้ไขธีมโดยไม่แยกขาดจากการอัพเดทจากผู้พัฒนาธีม ซึ่งการแก้ไขลักษณะนี้ถือว่าเป็น minor change โดยเราจะเปลี่ยนแปลงเฉพาะบางจุดของธีม ส่วนใหญ่จะเปลี่ยนแปลงที่ layout เฉพาะ page มาตรฐานบางเพจ หรือบางทีอาจเป็นการเข้าไปแก้ไขที่ตัวโปรแกรมเลยก็ได้

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

ธีมลูกมีฐานะเป็นธีมๆหนึ่งเหมือนกับธีมแม่ เมื่อติดตั้งก็จะปรากฏในหน้า Appearance > Themes และมักจะมี screenshot เหมือนกัน สามารถ activate – deactivate และ customize ได้เหมือนธีมปกติจนแทบแยกไม่ออกว่าแตกต่างจากธีมแม่อย่างไร

ขอยกตัวอย่างธีมฟรียอมนิยมตัวหนึ่งคือ Oceanwp ซึ่งเมื่อติดตั้งจะไม่มีธีมลูก หากเราต้องการก็สามารถ download เพิ่มเติมได้จาก https://github.com/oceanwp/oceanwp-child-theme ซึ่งคุณก็เพียงแต่ upload ไฟล์ zip ขึ้นไปในเว็บตามปกติ

Child theme ของ OceanWp

ถ้าเราต้องการใช้ child theme เราก๊เพียงแต่ activate และใช้งานไปตามปกติซึ่งเราจะมองไม่เห็นว่าแตกต่างจากธีมแม่ตรงไหน แต่หากแตกไฟล์ของธีมลูกมาดูคุณจะเห็นว่ามีเพียงไม่กี่ไฟล์

โดยไฟล์แรกที่คุณต้องทำความเข้าใจก็คือ style.css ซึ่งมีเพียง

/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme example child theme.
Author: Nick
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

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

ตามปกติเวลาที่เราต้องการใส่ css เข้าไปในธีม เราก็จะทำในเมนู Additional CSS ใน customize ซึ่งจะมีลำดับความสำคัญสูงกว่า style.css และเช่นเดียวกับธีมลูกซึ่งก็จะมี style.css และ Additional CSS เป็นของตัวเอง โดยลำดับความสำคัญจากสูงไปต่ำจะเป็นดังนี้

  • ธีมลูก Additional CSS
  • ธีมลูก style.css
  • ธีมแม่ Additional CSS
  • ธีมแม่ style.css

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

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

ตัวอย่าง functions.php ของธีมลูก OceanWP

/**
 * Load the parent style.css file
 *
 * @link http://codex.wordpress.org/Child_Themes
 */
function oceanwp_child_enqueue_parent_style() {
	// Dynamically get version number of the parent stylesheet (lets browsers re-cache your stylesheet when you update your theme)
	$theme   = wp_get_theme( 'OceanWP' );
	$version = $theme->get( 'Version' );
	// Load the stylesheet
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'oceanwp-style' ), $version );
	
}
add_action( 'wp_enqueue_scripts', 'oceanwp_child_enqueue_parent_style' );

นี่เป็นตัวอย่างของคำสั่งพื้นฐานอย่างต่ำที่สุดที่ควรต้องมีตามคำแนะนำของ WordPress (http://codex.wordpress.org/Child_Themes) ซึ่งสั่งให้โหลด style ของธีมแม่มาใช้ในธีมลูก สำหรับธีมอื่นๆที่มีธีมลูกให้มาอาจมีคำสั่งมากกว่านี้ซึ่งเราไม่ควรไปแก้ไขใดๆ เราเพียงแต่เขียนคำสั่งที่เราต้องการต่อท้ายเข้าไปเท่านั้น

ตามตัวอย่าง คำสั่ง wp_enqueue_style ในบรรทัดที่ 11 เป็นการสั่งให้โหลด style.css ในธีมลูก (ในขณะที่ธีมลูก active คำสั่ง get_stylesheet_directory_uri() จะให้ค่า path ของธีมลูก) คำว่า child-style เป็นรหัสอ้างอิงที่ตั้งขึ้นเป็นตัวแทนของคำสั่งนี้ (เรียกว่า handle) พาราเมตเตอร์ array( ‘oceanwp-style’ ) บอกว่าจะทำคำสั่งนี้ก็ต่อเมื่อทำคำสั่งที่มี handle ที่ชื่อ oceanwp-style สำเร็จแล้วเท่านั้น

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

/*
Theme Name: Example Child Theme
Template: themedirectory
*/

/* import default parent styles */
@import url("../themedirectory/style.css");

/* add child theme styles below */

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

Close Menu