วันนี้ @arnondora กลับมาอีกแล้ว หลังจากที่ปล่อยบทความเกี่ยวกับ PaperTheme ไปก็มีหลายคนถามมาว่า ถ้าจะทำ WordPress Theme บ้างต้องรู้อะไรบ้าง? วันนี้เลยจะมาเล่าละกันว่า ถ้าอยากจะทำบ้าง ต้องรู้อะไรบ้าง?
บทความแนะนำ: เล่าเรื่องการทำ WordPress Theme ตั้งแต่เริ่มออกแบบ Case Study: PaperTheme Redux
การทำ Theme WordPress ขึ้นมาใช้สักธีมหนึ่งอาจจะเป็นเรื่องที่หลายคนคิดว่ายาก ในบทความนี้เราจะมารู้จัก 3 เรื่องสำคัญที่แค่เราจับจุดพวกนี้ได้ ก็จะสามารถเริ่มทำธีม WordPress ของตัวเองได้แล้วครับ มาดูกันเลยว่ามีอะไรบ้าง
WordPress Theme Hierarchy
เรื่องนี้สำคัญมาก ไม่รู้ก็ไม่น่าจะทำได้เลยนั่นคือ Theme Hierarchy เพราะ WordPress เป็น CMS ที่มันถูกโปรแกรมมาก่อนแล้วว่าให้ทำอะไรยังไงบ้าง ฉะนั้นถ้าเราจะทำ Theme ที่ใช้ใน WordPress ก็ต้องทำตามที่ WordPress กำหนดไว้
Theme Hierarchy เป็นคล้าย ๆ กับข้อกำหนดของ WordPress ว่าจะให้ตัว WordPress เข้ามาอ่านและแสดงผลหน้าไหนก่อนเป็นหน้าแรก โดยใน Theme Hierarchy มันจะบอกอยู่เลยว่า แต่ละไฟล์มันชื่ออะไร ถ้าเราเข้าไปอ่านใน Document มันจะบอกเลยว่าไฟล์แต่ละไฟล์มันคืออะไร และควรมีอะไร
ในช่วงเริ่มต้นแนะนำให้ทำตามที่ Document บอกมาก่อน แล้วถ้าวิชาเริ่มกล้าแกร่งแล้ว ก็ค่อยพลิกไปเรื่อย ๆ WordPress ถึงตัวมันจะเกิดมาเพื่อ Blogging แต่ด้วยหลาย ๆ ท่ายาก (จริง ๆ ก็ไม่ได้ยาก) ก็ทำให้เราสามารถสร้างเว็บอะไรก็ได้โดยที่เราไม่ต้องเขียนส่วนของหลังบ้านเลย
นอกจากนั้นใน Theme Hierarchy เรายังสามารถทำให้เราทำหน้า Custom สำหรับหมวดหมู่ หรือ Tag นั้น ๆ ได้ด้วย ถ้าเราเข้าไปดูใน Document มันจะอยู่ในส่วนของ Custom Slug ได้เลย
WP Hooks
Hooks จัดว่าเป็นเรื่องสำคัญอีกเรื่องที่ควรจะรู้ มันช่วยทำให้เราสามารถ Custom Theme ของเราได้มาขึ้นเยอะมาก ๆ
Hook คือ Function ที่จะต้องใช้ผ่าน Action และ Filter เพื่อเปลี่ยนค่าบางอย่างในตัว WordPress เช่นการ Import Stylesheet และการแก้ไข Excerpt อะไรทำนองนั้น
อธิบาย Action กับ Filter ง่าย ๆ คือ Action จะถูกทำเมื่อมีเหตุการณ์บางอย่างเกิดขึ้น เช่น เราต้องการที่จะ Import JavaScript เข้าไป จะเป็นแบบ Code ด้านล่างนี้
function papertheme_enqueue_scripts () {
wp_enqeue_script('papertheme-main-script', 'app.js');
}
add_action('wp_enquqeue_scripts', 'papertheme_enqueue_scripts');
จาก Code ด้านบนเราจะเห็นว่า เราทำการสร้าง Function ที่ Import Script ลงไปในหน้าของเรา และด้านล่างเป็นการบอกว่า ถ้า WordPress เรียกคำสั่ง wp_enqueue_scripts ให้เรียก Function papertheme_enqueue_scripts ก่อนทุกครั้ง ซึ่งเวลาที่ WordPress จะเรียก wp_enqueue_scripts คือตอนที่ WordPress จะ Render หน้าใหม่ ผลคือ Script ที่เราใส่เข้าไปก็จะถูกโหลดในทุกหน้า เช่นเดียวกับ Stylesheet เราก็สามารถใช้ Action เรียกได้เช่นกัน
มาที่อีกตัวคือ Filter จะต่างกับ Action ไปเลย เพราะมันไม่ได้ถูกเรียกเมื่อเกิดเหตุการณ์บางอย่างขึ้น แต่มันจะอารมณ์เหมือนกับ เอาตัวเองไปแทน Function นั้น ๆ แทน เช่น เราต้อง Fix ความยาวของ Excerpt เราก็สามารถสร้าง Filter มาจัดการได้ ตามตัวอย่างนี้
function papertheme_excerpt_length( $length ) {
return 15;
}
add_filter( 'excerpt_length', 'papertheme_excerpt_length');
จากตัวอย่างนี้จะคล้าย ๆ กับ Action เมื่อครู่ คือเราสร้าง Custom Function ตัวนึงขึ้นมา และเรียก add_filter ขึ้นมาเพื่อบอก WordPress ว่าเราจะขอแทน excerpt_length() ด้วย papertheme_excerpt_length() เสมอ อารมณ์ของมันคือการ Bind Function ไปทำนองนั้น
ข้อควรระวัง ลองสังเกตชื่อ Function ที่ผมใช้ ผมจะเริ่มต้นด้วย papertheme และตามด้วยชื่อ Function เหตุผลที่เป็นแบบนั้นก็เพราะว่า PHP ไม่สิ ทุกภาษาแหละ ไม่ชอบชื่อซ้ำกัน ลองนึกดูนะครับว่า เวลาเราใช้ชื่อซ้ำกัน หรือคำสงวน (Reserved Word) มันจะเกิดอะไรขึ้น ก็บึ้มไง
นอกจากนั้น WordPress 1 Site คงไม่ได้ลง Theme และ Plugin ตัวเดียวแน่ ถ้ามีใครมาซ้ำก็บึ้มเลย ฉะนั้น เพื่อป้องกันปัญหาที่อาจจะเกิดขึ้น เราจึงเติมชื่อ Theme หรือ Plugin ไว้ข้างหน้า แล้วค่อยใส่ชื่อ Function ตาม เพื่อป้องกันปัญหาดังกล่าวนั่นเอง
The Loop
เรื่องนี้ก็สำคัญ (เออ มันก็สำคัญทุกเรื่องแหละ ไม่งั้นจะเอามาเขียนทำไม!!!) เพราะถ้าเราไม่มี The Loop ละก็ เราจะโยน Content ออกมายังไง ฮ่า ๆ
เอาง่าย ๆ The Loop คือชุดของ Function ที่มากับ WordPress เพื่อให้เราสามารถจัดการ Content บนหน้าได้อย่างง่ายดาย โดยที่เราแทบจะไม่ต้องรู้ PHP เลย อาจจะไม่เห็นภาพ ลองดู Code จริง ๆ กันเลย อันนี้ขอตัดมาจาก Document ของ WordPress
if ( have_posts() ) {
while ( have_posts() ) {
//post Content here!
the_post();
}
}
เรามาลองดูกันทีละบรรทัดกัน มันจะเริ่มจาก If เพื่อเช็คก่อนว่า มี Post มั้ย ? หมายความว่า หน้าที่เราเปิดขึ้นมา เช่นเราเปิดหน้า Tag ขึ้นมา Tag นั้นมีบทความมั้ย ถ้าไม่มีก็ไม่ให้ทำอะไร
แต่ถ้ามีก็ให้วน While Loop ไปเรื่อย ๆ และในแต่ละรอบก็ให้มันพ่น Content ของแต่ละบทความออกมาผ่าน the_post() ก็จะประมาณนั้น จะเห็นว่ามันง่ายมาก ๆ เลย เราแค่รู้ว่า เราจะทำอะไร แล้วก็เรียก Function ได้เลย (ส่วนใหญ่ WordPress มีมาให้หมดแล้วละ)
สรุป
จริง ๆ ยังมีอะไรอีกเยอะเลยที่ต้องรู้ ซึ่งวันนี้ที่หยิบมาให้อ่านกัน 3 อย่างก็เป็นอะไรที่ผมว่า มันจำเป็นมากที่สุดแล้วในการสร้าง Theme สักอันนึงขึ้นมา (นี่ยังไม่นับว่า ควรจะ รู้ PHP, JS, CSS ด้วยก็ดี) และในแต่ละเรื่องที่ยกขึ้นมา มันก็ยังมีท่ายากของมันในการใช้งานอีกนะ อันนี้ก็แนะนำให้ไปอ่านใน Document กันเลย มันเขียนส่วนใหญ่ไว้เกือบหมดแล้วละ ท่ายากกว่านั้นคงต้องอาศัยจินตนาการกันแล้วละ
เพราะการเขียนโปรแกรม รู้แค่ Logic เราก็ไม่ต่างอะไรกับหุ่นยนต์ที่เขียนโปรแกรมได้ แต่ถ้าเรามีจินตนาการ และความคิดสร้างสรรค์ เราก็จะสามารถสรรสร้างสิ่งใหม่ ๆ วิธีใหม่ ๆ ได้เสมอ
บทความนี้น่าจะช่วยให้คนที่อยากเริ่มเขียน WordPress Theme ใช้เอง สามารถเริ่มได้ด้วยความมั่นใจ จริง ๆ มันไม่ได้ยากเลยนะครับ ตอนที่ผมเขียน PaperTheme ครั้งแรก ผมใช้เวลาไม่เกิน 2 วันในการเรียนและเขียน Theme อันแรกออกมาเลย ถ้าใครอยากลองอย่าไปกลัวครับ เริ่มจากวันนี้ได้เลย
สำหรับท่านที่ชอบอ่านบทความด้าน Programming, ประสบการณ์ทำงาน, และรีวิวเทคโนโลยีใหม่ ๆ ต่าง ๆ สามารถอ่านเพิ่มเติมได้ที่ https://www.arnondora.in.th เลยครับผม
