ถ้าเคยใช้งาน plugin มา หลาย ๆ ตัวจะมีสิ่งที่เรียกว่า shortcode เพื่อให้ผู้ใช้สามารถเรียกใช้งานได้อย่างสะดวก ซึ่ง shortcode พวกนี้เราเองก็สามารถสร้างมาเพื่อใช้งานเองก็ได้
ทำความรู้จักตัวแปรก่อนสร้าง shortcode ในการสร้าง shortcode นั้น จะมีตัวแปรอยู่สามตัวสำคัญ ที่เราน่าจะทำความรู้จักกับมันซะหน่อย
- $atts ตัวนี้ก็แทนค่าที่เราจะใส่ใน shortcode ของเรา
- $content ตัวนี้แทนข้อความที่อยู่ระหว่าง shortcode ของเรา
- $tag ตัวนี้แทนคำที่นำไปใช้เป็น shortcode ของเรา
ยกตัวอย่างเช่น
[myshortcode id=”rabbitinblack” title=”CSS”]Hello World[/myshortcode]
$atts คือ id=”rabbitinblack” title=”CSS” หรือเราจะเขียนได้ว่า $atts = array('id' => 'rabbitinblack', 'title' => 'CSS')
$content คือ Hello World
และ $tag คือ myshortcode
วิธีสร้าง shortcode
ให้เราไปที่ functions.php นะครับ เพื่อที่จะได้เพิ่ม code สำหรับสร้าง shortcode โดยโครงสร้างการเขียน code จะประมาณนี้ครับ ใช้จากตัวเก่าแล้วเพิ่มข้อมูลลงไปอีกนิดหน่อยนะครับ
[php]
function wp_youtube_video_thumbnail($atts, $content = null) {
extract(shortcode_atts(array(
‘id’ => ”,
‘img’ => ‘0’,
‘align’=>’left’
), $atts));
$align_class=’align’.$align;
return ‘<h3>’.$content.'</h3><a href="http://www.youtube.com/watch?v=’.$id.’" target="_blank"><img src="http://img.youtube.com/vi/’.$id.’/’.$img.’.jpg" alt="" class="’.$align_class.’" /></a>’;
}
add_shortcode(‘youtube_thumb’, ‘wp_youtube_video_thumbnail’);
[/php]
มาดูทีละส่วนนะครับ
function wp_youtube_video_thumbnail($atts, $content = null) อันนี้เราสร้าง function ขึ้นมาชื่อ wp_youtube_video_thumbnail โดยที่จะรับค่า $atts และ $content เข้ามา การใส่ $content = null เพื่อเวลาที่เราไม่ได้ใส่ข้อความ
extract(shortcode_atts(array(
'id' => '',
'img' => '0',
'align'=>'left'
), $atts));
คือ ค่าที่จะรับเข้ามาจะมี id, img และ align โดยแต่ละตัว จะมีค่ามาตรฐานตามที่เราตั้ง เช่น align มีค่าเป็น left ถ้าเราไม่ได้ใส่ค่า align อะไรเข้ามา
แล้วหลังจากนั้นเราก็มีการ return ค่ากลับมา โดยค่าที่มีการ return กลับมาก็คือ return '<h3>'.$content.'</h3><a href="
http://www.youtube.com/watch?v='.$id.'" target="_blank"><img src="
http://img.youtube.com/vi/'.$id.'/'.$img.'.jpg" alt="" class="'.$align_class.'" />'; นั่นคือ ข้อความกับรูปภาพ
ก็คือ youtube_thumb
ดังนั้นการใช้งานก็จะประมาณนี้นะครับ
[youtube_thumb id=”6pA_Tou-DPI” img=”0″ align=”center”]Youtube Video
ซึ่งเราจะได้ค่าที่หน้าเว็บเป็น
<h3>Youtube Video
<img src="
http://img.youtube.com/vi/6pA_Tou-DPI/0.jpg" alt="" class="aligncenter">
ลองนำไปปรับแล้วใช้งานให้ตรงกับความต้องการของเราดูนะครับ
อ๋อ แต่ถ้าจะง่ายในการเพิ่ม ลด ลบนะครับ ให้สร้าง shortcode.php แล้วเราไป include 'shortcodes.php'; ใน functions.php เพื่อเวลาค้นหาว่าเราสร้าง shortcode อะไรไปบ้าง จะได้มาดูแค่ที่ shortcode.php ที่เดียวก็พอ
ที่มา:
http://rabbitinblack.com/2012/08/wordpress-shortcode/