child-theme-1

การใช้งานธีมลูก (Child Theme) ตอนที่ 1

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

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

การสร้างธีมลูก (Child Theme) สามารถทำได้โดยให้เราสร้างโฟลเดอร์ธีมลูก (Child Theme) ขึ้นมาจำนวน 1 โฟลเดอร์และ 2 ไฟล์ เริ่มต้น ได้แก่ functions.php และ style.css ดังขั้นตอนต่อไปนี้

  1. ให้ตั้งชื่อโฟลเดอร์เป็นชื่อธีมของเราตามด้วย –child เช่น ธีมหลักของเราชื่อ Themevilles ดังนั้นธีมลูกของเราจะตั้งชื่อเป็น themevilles-child
  2. ให้นำโฟลเดอร์ Child Theme นั้นใส่ไว้ใน wp-content/themes
  3. ให้สร้างไฟล์ style.css ของธีมลูก (Child Theme) แล้วเปิดไฟล์ดังกล่าว ให้ใส่ข้อมูลเริ่มต้นคล้ายกับธีมหลัก (Parent Theme) ในส่วนหัวของไฟล์ โดยให้เราระบุชื่อ Theme Name, Theme URI, Description และ Text Domain ให้มีคำว่า Child ดังรูป ข้อสำคัญคือในส่วนของ Template: จะต้องมีการระบุชื่อธีมแม่ (Parent Theme) ของเราไว้ด้วย ในที่นี้คือ Themevilles
  4. ขั้นตอนสุดท้ายคือ ให้ธีมลูก (Child Theme) ของเรารู้จักกับไฟล์ style.css ของธีมหลัก (Parent Theme) โดยจะต้องสร้างฟังก์ชั่นแรกขึ้นมาหนึ่งฟังก์ชั่นแล้วให้ใช้ฟังก์ชั่นของเวิร์ดเพรส ชื่อ wp_enqueue_style ดึงไฟล์ style.css ของธีมหลักมาใช้งาน ฟังก์ชั่นแรกนี้จะเหมาะสมในกรณีที่ธีมหลัก (Parent Theme) มีไฟล์ style.css เพียงไฟล์เดียว หากมีหลายไฟล์เราจะต้องทำการทำการดึงมาทั้งหมด

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

 

ถึงขั้นตอนนี้แล้วเราสามารถที่จะเลือกใช้งานธีมลูก (Child Theme) ได้โดยเมื่อเราไปที่ Administration Panels > Appearance > Themes เราก็จะเห็น Child Theme อยู่ในรายการเลือกธีม (Theme list) พร้อมให้เราเลือกใช้งาน

child-theme
Child Theme

สำหรับรูปที่อยู่ในกล่อง Child Theme ที่เราเห็นไม่มีนั้น เราสามารถสร้างขึ้นมาได้ด้วยการบันทึกรูปให้อยู่ในโฟลเดอร์เดียวกันนี้แล้วตั้งชื่อว่า screenshot.png โดยให้มีขนาด 1200×900 pixel เมื่อแสดงผลจะลดขนาดเหลือ 387×290 pixel อัตโนมัติ

child-theme-and-screenshot
Themevilles Child Theme

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

บทความนี้มีประโยชน์สำหรับคุณหรือไม่?

ให้คะแนนบทความนี้

คะแนนเฉลี่ย / 5. จำนวนโหวต:

As you found this post useful...

Follow us on social media!

นายปิ๊ก


ผู้ก่อตั้งเว็บไซต์ Themevilles.com เป็นอาจารย์สอน WordPress และ WooCommerce ในเว็บคอร์สออนไลน์ Skilllane และรับทำเว็บไซต์ ทำการตลาดออนไลน์ เช่น SEO, Facebook และ LINE


Shares
สมัครสมาชิกเพื่อรับข้อมูลข่าวสาร
Get the latest content first.
Read about Privacy Policy.