imkopkap

การสร้าง Shortcode WordPress

ใช้เวลา 5 นาที 02/08/2014

ความสำคัญของ ShortCode ยังมีอยู่เยอะมากไม่ว่าจะเรื่องอะไรก็ตาม แต่ที่หลักๆเลยก็คือ ShortCode มักจะไว้สำหรับทำ Code ที่ยาวๆให้สั้นลงได้อย่างง่ายดาย สมมุติ

<iframe width="560" height="315" src="//www.youtube.com/embed/VXXKeMNSxKY" frameborder="0" allowfullscreen></iframe>

ตัวนี้คือ Code ฝังวิดีโอของ Youtube ลองเข้าไปตามลิ้งได้นะครับ เพลงเพราะๆ มากๆเลย กลับมาเข้าเรื่อง ก็คือ จากโค้ดยาวๆที่เคยเห็นเนี่ยเราต้องมานั่งแก้ นั่งงมทีละส่วนถ้าเราอยากจะกำหนดความยาว ความสูงของคลิปเองหละ บางทีมือใหม่ที่กำลังลองหัดแกะโค้ดจากข้างบนยังไม่รู้เลยว่า ความสูง ความกว้าง มันอยู่ตรงไหน เราก็เลยจัดทำ ShortCode ไว้ใช้เองและให้คนอื่นใช้ด้วยซะเลยสิ!

 

133

ก่อนอืนเลยเราต้องกำหนด ชื่อของ ShortCode ซะก่อน โดนไปที่ Functions.php ของไฟล์ธีมนะครับ ในที่นี้ผมอยากให้ทุกท่านใช้ธีม twelve ไปก่อนเพราะมันง่ายมาก

add_shortcode('Hello','Hello');

 

อธิบายโค้ดนะครับ

  1. add_shortcode ตัวนี้เป็นการกำหนดว่าเรากำลังจะเพิ่ม shortcode เพิ่อเอามาใช้นะ
  2. Hello ตัวแรกก็คือ ชื่อของ shortcode
  3. Hello ตัวที่สองก็คือ มันเป็น Function ว่าเราจะทำอะไรกับมัน มาดูข้างล่างเลยครับ

 

โค้ดด้านบนเป็นการกำหนดชื่อของ shortcode โดยเราจะเรียกใช้โดยพิมพ์คำว่า [Hello] นะครับ ต่อมาก็จะเป็นกำหนด Function ให้กับ Hello กัน โดยแก๊ปอยากจะให้มันพิมพ์คำว่า Hello World ออกมา เราก็ทำได้แบบนี้ครับ

add_shortcode('Hello','Hello');
function Hello() {
     echo '<h1>Hello World</h1>';
}

เสร็จแล้วครับสั้นๆเลย เวลาจะเรียกใช้ก็เข้าไปพิมพ์ [Hello] ก็จะได้ออกมาครับ

shortcode

ต่อมา ถ้าเราอยากให้เขากำหนดความ กว้างความสูง ของคลิปหละ ? จะทำได้ยังไง … ก่อนอื่นแก๊ปขอให้ทุกคนมี Embed video ของตัวเองสักอันจะเอามาจาก Youtube ก็ได้หรือจะเอาจากข้างบนก็ได้นะครับ

add_shortcode('video_embed','video);
function video(){
return '
<div>
<iframe width="560" height="315" src="//www.youtube.com/embed/VXXKeMNSxKY" frameborder="0" allowfullscreen></iframe>
</div>
}

ตอนนี้เราได้โค้ดของ Embed video แล้วเวลาเราพิมพ์ใช้เราพิมพ์ไปว่า [video_embed] เท่านี้ video ที่ฝังไว้ก็จะวิ่งออกมาแสดงครับผม เอ๊ะ! ถ้าเราอยากจะกำหนด ความมกว้าง ความสูงและไตเติ้ลหละ ไม่ยากเลยครับ

add_shortcode('video_embed','video);
function video($atts){ //เพิ่ม paremeter เข้าไปใน video เพื่อรับค่า
$atts = shortcode_atts(
array(
'src' => '',
'width' => '600',
'height' => '300',
'title' => ''
), $atts); // ประกาศ Array ที่เราอยากจะใช้ซะ
return '
<div>
<iframe width="' . $atts['width'] . '" height="' . $atts['height'] . '" src="' . $atts['src'] . '
"frameborder="0" allowfullscreen></iframe> // $atts['array'] ก็คือตัวที่เราจะใช้นะครับ

<h4>' . $atts['title'] . '</h4>
</div>
}

จะสังเกตุได้ว่ามี Code แปลกๆเพิ่มมาอีกละ T_T มันเป็น Function ที่เขาจำกัดไว้ให้อยู่แล้วไม่มีการเปลี่ยนแปลง ถ้าเราใช้บ่อยๆเดี๋ยวก็จำได้เองครับ

 

ถ้าเราอยากจะใช้ก็แบบนี้เลยครับ

[video_embed src="......" width=" ..... " height = "...." title= "....." ]

ใน function video($atts) ในส่วนนี้จะเป็นการรับค่า Parameter ครับก็ไม่มีอะไรมาก เราสามารถเปลี่ยน $atts เป็นอย่างอื่นได้นะครับเช่น $ok , $wow อะไรแบบนี้ ถ้าตอนเรียกใช้ก็จะเป็น $ok[‘ src ‘ ]  , $wow[ ‘ src ‘ ] แบบนี้นะครับ ตั้งแบบไหนใช้แบบนั้น ตรงไหนที่เป็น $atts ทั้งหมดแล้วเราอยากจะเปลี่ยนเป็น $ok เราก็ลบ $atts ออกแล้วใส่ $ok แทนทั้งหมดเลยครับ

 

ในส่วนนี้เราควรจะกำหนดไว้ดีที่สุด จากนั้นให้เพิ่ม $atts = shortcode_atts เข้าไป แล้วข้างในก็จะมี Array เก็บไว้ซึ่งเราจะสามารถเรียกใช้มันได้ในภายหลัง  วิธีการเรียกใช้ก็คือ ให้ใส่คำว่า $atts[‘ ค่าของ array ‘] เข้าไป เช่น $atts[‘title’] เป็นต้น

 

Credit : Tut+

บันทึกแนะนำ