CHILD THEME สิ่งที่ WORDPRESS DEVELOPER ต้องรู้จักแล้วชีวิตจะง่ายขึ้น

ในการที่จะสร้าง Theme WordPress นั้น สามารถทำได้หลายวิธี

  • สร้างขึ้นมาใหม่ เริ่มจากศูนย์
  • ใช้ Starter Theme เช่น _s (Under Scores) เป็น based theme
  • ใช้ Framework เช่น Gantry Framework , Codestar Framework
  • แก้ไขจาก Theme ที่มีอยู่แล้ว

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

วิธีที่ง่ายๆเลยก็คือ การ Modify แก้ไขพวกไฟล์ต่างๆ เช่น style.css , function.php , header.php ของ Theme โดยตรง

แต่ปัญหาคือ ถ้า Theme นั้นมีการ Update หล่ะ คุณจะทำยังไงในเมื่อคุณแก้ไขไฟล์ต่างๆไปแล้วตั้งมากมาย ก็พอมีทางออกนะครับเพียงแค่เราก็อบปี้ไฟล์ที่เราแก้ไขไว้ก่อนอัพเดต จากนั้นก็ค่อยมาไล่แก้ไขโค๊ดอีกทีหลังอัพเดตแล้ว โอว์…แบบนี้ก็ “งานงอก” สิครับ ฟังดูแล้วมันน่าเศร้าเสียจริง เลือดเนื้อโปรแกรมเมอร์โดยแท้ ): ต้องเสียเวลามาแก้งานเดิมที่เคยทำไปแล้ว

Child Theme เกิดมาเพื่อแก้ปัญหาเหล่านี้คุณสามารถสร้าง Child Theme เพื่อทำการ Overriding parent theme เพื่อใช้งานและปรับแต่งเพิ่มเติมได้ และเมื่อมีการ Update Theme ก็ทำที่ Parent theme เท่านั้น
จึงไม่เกิดความเสียหายต่อ Theme ที่เราสร้างใหม่และไม่ต้องแก้โค๊ดเก่าที่เคยทำไว้

Concept ของ Child Theme คือ ไม่ต้องทำในส่วนที่มีอยู่แล้ว เปลี่ยนแปลงเฉพาะส่วนที่ต้องการเท่านั้น

Parent Theme = พ่อแม่

Child Theme = ลูก

พ่อแม่ หน้าตาเป็นยังไง ลูก ก็มีหน้าตาแบบนั้น แต่เราสามารถปรับแต่งหน้าตาลูกได้ โดยที่บางส่วนยังมีเหมือนพ่อแม่

ถ้าใครเขียนโปรแกรมแบบ OOP อยู่แล้วหลักการก็จะคล้ายๆ Inheritance (การสืบทอด)

มาลองทำกันเลย

คุณสามารถสร้าง Child Theme ได้ 2 วิธี

  • วิธีที่ 1. ใช้ Plugin One-Click Child Theme ดาวน์โหลดที่นี่
  • วิธีที่ 2. ทำด้วยมือ สร้างขึ้นมาเอง

ที่จริงแล้วก็ง่ายๆทั้งสองวิธีผมจะยกตัวอย่างวิธีที่ 2 นะครับ ในตัวอย่างนี้ผมมี Theme ที่ชอบอยู่แล้วชื่อ salient

ใน wp-content/themes สร้างโฟล์เดอร์ขึ้นมา ตั้งชื่อว่า salient-child และภายในโฟล์เดอร์สร้างไฟล์ style.css และ function.php
เขียนโค๊ดในไฟล์ style.css

/*
Theme Name: My Theme 
Template: salient
*/

Theme Name = ชื่อที่แสดงในหน้า Admin
Template = ชื่อ Parent Theme

หลังจากนั้นเขียนโค๊ดในไฟล์ function.php

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style('parentstyle',get_template_directory_uri().'/style.css');
 
}
?>

หลังจากนั้นให้คุณเข้าไปที่หน้า Admin แล้วเปลี่ยน Theme เป็น My Theme
ก็จะพบว่า หน้าตาเว็บไซต์จะเหมือนกันกับ Parent Theme ทุกประการ แต่คุณสามารถที่จะเขียนโค๊ดปรับแต่งได้เลยโดยไม่ต้องยุ่งเกี่ยวกับ Theme แม่
ก็ลองทดสอบปรับแต่ง CSS หรือ เขียนฟังก์ชั่นเพิ่มเติมใน function.php ดูครับ

สรุป! ทำไมต้องใช้ Child Theme

  • ถ้าเราแก้ไขไฟล์ต่างๆใน Theme โดยตรง เมื่อมีการอัพเดต สิ่งที่เราทำไว้อาจเสียหายได้ ต้องทำใหม่(เสียเวลา) แต่ถ้าเราใช้ Child Theme สิ่งที่เราเคยแก้ไขจะยังอยู่เหมือนเดิม
  • ช่วยให้เราใช้เวลาในการพัฒนา Theme ได้เร็วขึ้น
  • เป็นแนวทางที่ดีเยี่ยมในการศึกษาและพัฒนา WordPress theme ที่ถูกวิธี

เข้าสู่ระบบ