การเขียน WordPress Shortcode แบบง่าย ๆ

เนื่องจาก Blog ของผมใช้ WordPress เป็นตัวขับเคลื่อน และตอนนี้ผมกำลังพัฒนา Shortcode สำหรับเขียนบทความแบบ Timeline ผมเห็นว่าการเขียน Shortcode นั้นไม่ใช่เรื่องยากอะไร และผมคิดว่าเพื่อน ๆ หลาย ๆ คนคงอยากมี Shortcode เป็นของตัวเองเช่นกัน ดังนั้นบทความนี้ผมเลยอยากจะแบ่งปันวิธีการเขียน Shortcode กันครับ (บทความนี้เหมาะสำหรับคนที่เขียน Theme หรือ Plugin เบื้องต้นเป็นแล้ว)

ใครที่ยังเขียน Theme หรือ Plugin ยังไม่เป็นก็ไม่ต้องน้อยใจไปนะครับ เอาไว้ว่าง ๆ ผมจะเขียนให้ได้อ่านกันแน่นอนครับ พอดีว่าตอนนี้ผมกำลังพัฒนา Shortcode ใช้เองก็เลยอยากเอามาแบ่งปันก็เท่านั้นครับ

WordPress Shortcode คืออะไร ? ก็คือสัญลักษณ์ที่เราจะใช้เวลาเราเขียนบทความเพื่อให้ได้การแสดงผลตามที่ต้องการครับ จากรูปด้านล่างคือตัวอย่าง Shortcode ที่ผมใช้ในการสร้างการแสดงผลแบบ Timeline ที่ผมกำลังพัฒนาอยู่ครับ

การเขียน Shortcode จะมีอยู่ 2 รูปแบบครับ นั้นก็คือการพัฒนา Shortcode บน Theme และการพัฒนา Shortcode บน Plugin ครับ จะต่างกันแค่ส่วนของการ Hooks เพื่อเรียกใช้งานแค่นั้นครับ อย่าเพิ่งงงกับการ Hooks นะครับ ไม่ต้องสนใจอะไรมากครับคัดลอกไปใช้ก็พอครับ

ในการเขียน Shortcode ใช้เอง เราจะต้องทำการลงทะเบียน Shortcode ด้วยการเรียกใช้ฟังก์ชั่น add_shortcode ครับ

  • $tag คือ shortcode ที่เราต้องการใช้ครับ เช่น ผมจะใช้ Shortcode ว่า timeline เป็นต้นครับ
  • $func คือ ชื่อของฟังก์ชั่นที่เราต้องการให้เรียกใช้ เมื่อ WordPress เห็น Shortcode ของเราครับ

ตัวอย่างการเขียน Shortcode บนการพัฒนา Theme ปกติเวลาที่เราเขียน Theme เราจะมีการสร้าง functions.php เราก็ลอง copy ไปวางแล้วก็ใช้ได้เลยครับ

ตัวอย่างการเขียน Shortcode บนการพัฒนา Plugin บนการพัฒนา Plugin นั้นจะแตกต่างจาก Theme นิดหน่อย เพราะว่าถ้าเป็น Plugin นั้นจะต้องสามารถทำงานได้บนทุก Theme ดังนั้นเราจะต้องทำการลงทะเบียน Shortcode ผ่าน init Hooks ตัวอย่างดังนี้เลยครับ

เห็นไหมครับว่าการลงทะเบียน Shortcode นั้นไม่ยากเลย ตอนนี้เพื่อน ๆ ก็สามารถปรับแต่ง Shortcode ของเราต่อได้เลยครับ โดยวิธีการปรับแต่งเราจะปรับแต่งจาก Arguments ที่ฟังก์ชั่น timeline_shortcode ของเราที่อ่านมาครับ โดยเราสามารถนำค่า Attributes และ Content มาใช้ได้ครับ และเมื่อเราปรับแต่งเสร็จเราก็ Return HTML กลับไปให้ WordPress ได้เลยครับ

สำหรับคนที่สงสัยว่าตรงไหนคือ Attributes และ Content ดูได้จากรูปด้านล่างเลยครับ

ตัวอย่างการปรับแต่ง Shortcode แบบง่าย ๆ นะจ๊ะ

ทีนี้เราก็พร้อมจะเอา Shortcode ของเราไปใช้แล้วนะครับ เห็นไหมครับว่าไม่ยากเลย เพียงแต่ว่าต้องมีพื้นฐานการเขียน Theme หรือ Plugin มาบ้าง เอาหล่ะครับเดี๋ยวผมไปปั่น Shortcode Timeline ของผมต่อครับ เพราะว่าต่อไปผมจะเขียนบทความแบบเป็น Series แล้วครับ รอตามอ่านกันยาว ๆ ได้เลยครับ

April 22, 2017