imkopkap

ศึกษา Child Theme และ โมธีมเวิร์ดเพลส

ใช้เวลา 7.43 นาที 28/08/2014

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

 

สำหรับขั้นตอนการสร้าง Child Theme ก็จะมีง่ายๆดังนี้เลยครับ เริ่มแรกให้เราสร้าง Folder สำหรับ Theme WordPress ซะก่อนนะครับ ตั้งชื่อได้ตามใจชอบเลย ( ใน wp-content > themes )

 

 

สร้าง Child Theme

 

เมื่อเราสร้าง Folder เสร็จเรียบร้อยแล้ว ข้างใน Folder เราจำเป็นต้องสร้างไฟล์ style.css ขึ้นมาเพื่อกำหนดชื่อ Theme และอื่นๆ

สร้าง Child Theme

จากนั้นให้เรา Copy โค้ดด้านล่างนี้ไปใส่ในไฟล์ style.css

/*
  Theme Name: Child Theme
  Theme URI: http://wordpress.org/themes/twentytwelve
  Author: the WordPress team
  Author URI: http://wordpress.org/
  Description: child Theme
  Template: twentytwelve
  version: 1.0
*/

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

@import url("../twentytwelve/style.css");

 

เราก็จะได้แล้วครับการสร้าง Child Theme ที่พร้อมสำหรับการดัดแปลงแล้ว ถ้าเราอยากจะเพิ่ม Css เราก็สามารถหาโค้ดใน Inspect ของ Chrome หรือ Firefox ได้ เมื่อเราได้ตำแหน่ง Css มันเราก็นำมาเขียนได้ในไฟล์ style.css กับ Child Theme ของเรา

 

นอกจากนี้แล้วเรายังสามารถนำไฟล์ Theme ของ Template แม่มาใช้ได้ด้วย และยังสามารถแก้ไขให้เป็นไปตามที่เราต้องการด้วยอีกนะครับ

 

สร้าง Child Theme
ตัวอย่างการแก้ไขในไฟล์ header.php ที่อยู่ใน Folder ของ Child Theme

 

หากอยากรู้อะไรเพิ่มเติมนอกจากนี้สามารถสอบถามแก๊ปได้ใน Fanpage นะครับ

บันทึกแนะนำ

  • Puwadon Sricharoen

    ขอบคุณครับ กำลังอยากลองใช้ Atom เหมือนกัน!

  • Rat Jantaraksa

    พี่อ่านว่า ไช ทีม