การเขียน 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 ครับ

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

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

function timeline_shortcode($atts = [], $content = null)
{
    // do something to $content
 
    // always return
    return $content;
}
add_shortcode('timeline', 'timeline_shortcode');

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

function timeline_shortcode_init(){
	function timeline_shortcode($atts = [], $content = null)
	{
    		// do something to $content
 
    		// always return
    		return $content;
		}
	add_shortcode('timeline', 'timeline_shortcode');
}
add_action('init', 'timeline_shortcode_init');

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

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

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

function timeline_shortcode($atts = [], $content = null)
{
	$number = (isset($atts['number'])) ? $atts['number'] : 0;
 
    	$content = '<div>' . $number . '</div><div>' . $content . '</div>';
    	return $content;
}
add_shortcode('timeline', 'timeline_shortcode');

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