Child Theme มันเอาไว้ทำอะไรเหรอ

ในการทำ Theme WordPress นั่น คิดว่าต้องเจอกับคำว่า Child Theme บ้างละ แล้ว Child Theme มันคืออะไรละ แล้วมีไว้ทำอะไร เรามาทำความเข้าใจกับ Child Theme กันนะครับ

Child Theme คืออะไร

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

สร้าง Child Theme ต้องทำยังไง

สร้าง Folder ที่จะเป็น Child Theme ของเราไว้ใน Path wp-content >> themes จะตั้งชื่อ Folder ว่าอะไรก็ได้ตามใจเรา สิ่งที่จำเป็นใน Child Theme นั้นคือ style.css ถ้าอ่านมาจากหัวข้อที่แล้ว เราก็จะทราบว่า style.css เนี่ยทำหน้าที่บอกว่า Parent Theme หรือ Theme ที่เราจะใช้ยึดหลักเพื่อเป็นโครงสร้างให้ Child Theme

style.css สำหรับ Child Theme

โดยส่วนใหญ่เราก็จะดึง CSS จากตัว Parent Theme มาเพื่อใช้งานด้วย สมมติเราจะใช้ Twenty Eleven Theme ตัว style.css เราจะเขียนประมาณนี้

[css]
/*
Theme Name: Twentyeleven Child
Description: Child theme for the twentyeleven theme
Author: My Name
Template: twentyeleven
*/

@import url("../twentyeleven/style.css"); /* นำ style.css จากตัว Theme หลักมาใช้งานด้วย */

/* Stylesheet เพิ่มเติมจากตัว style.css จากตัว Twenty Eleven Theme */
#site-title a {
color: #009900;
}
[/css]

ข้อสำคัญของ style.css คือ Theme Name กับ Template โดย Theme Name นั้นคือชื่อของ Child Theme และ Template คือชื่อ Folder ของ Theme ที่เราจะใช้เป็นหลัก หรือ Parent Theme

นอกจาก style.css ใน Child Theme เราทำอะไรได้บ้าง

ใน Folder ของ Child Theme นั้น นอกจาก style.css แล้ว ถ้าเราอยากจะแก้ หรือเพิ่มอะไร ก็สามารถเพิ่มใน Folder ของ Child Theme ได้เลย เช่นพวก functions.php page.php หรือ index.php อะไรแบบนั้น

พื้นฐานของ Child Theme คือ สร้าง Theme อันใหม่ที่ยึดหลัก Theme อันใดอันหนึ่ง โดยที่ไม่ได้ไปแก้อะไรใน Theme หลักเลย


Posted

in

by

Comments

5 responses to “Child Theme มันเอาไว้ทำอะไรเหรอ”

  1. yotaka Avatar
    yotaka

    พวก functions.php page.php index.php หรือ ตัวอื่นที่เรามีการแก้ไขแล้วเราไม่อยากให้มีการเปลี่ยนแปลงส่วนที่เรา
    เพิ่มเข้าไปเราต้องทำยังไงค่ะรบกวนด้วยไม่เข้าใจจริงๆๆค่ะ

    1. rabbitinblack Avatar
      rabbitinblack

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

      ถ้าใน Child Theme ยังไม่มี index.php มันจะใช้ index.php ใน Theme หลักครับ
      แต่ถ้าเราอยากแก้ไขอะไร index.php ไม่ใช่เราไปแก้ที่ Theme หลัก แต่ให้ copy มันมาวางไว้ที่ Child Theme ของเรา
      แล้วแก้ไขที่ index.php ใน Child Theme ของเราครับ

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

  2. Warun Avatar
    Warun

    สวัสดีครับ ตอนนี้ WordPress แนะนำให้ใช้รูปแบบอื่นแทนการใช้ @import ด้วยการให้ WordPress Handling ผ่าน wp_enqueue_style() แทนครับ. เนื้อหาสามารถติดตามอ่านเพิ่มเติมได้จาก https://warun.in.th/143-best-practice-to-modify-wordpress-theme ครับ

    1. rabbitinblack Avatar
      rabbitinblack

      ใช่ครับ ตัว Codex ที่อัพเดตแล้ว ก็แนะนำในรูปแบบนั้นครับ

      https://codex.wordpress.org/Child_Themes

Leave a Reply to Style.css กับหน้าที่ที่มากกว่าแค่ตกแต่งหน้าเว็บ Wordpress | Rabbitinblack Cancel reply

Your email address will not be published. Required fields are marked *