[WordPress] ลองสร้าง shortcode แบบง่าย ๆ เพื่อสะดวกเวลาใช้งาน

ถ้าเคยใช้งาน plugin มา หลาย ๆ ตัวจะมีสิ่งที่เรียกว่า shortcode เพื่อให้ผู้ใช้สามารถเรียกใช้งานได้อย่างสะดวก ซึ่ง shortcode พวกนี้เราเองก็สามารถสร้างมาเพื่อใช้งานเองก็ได้

แต่สำหรับใครที่ยังนึกไม่ออก อะไรคือ shortcode ผมเคยเขียนไว้ครั้งนึงในหัวข้อ ฉลอง MV SNSD ตัวใหม่ด้วยบทความ ทำ Shortcode สำหรับดึง youtube thumbnail มาใช้ใน WordPress แต่คราวนี้จะมาศึกษาแบบจริงจังขึ้นหน่อย ว่าแต่ละตัวไว้ทำอะไรบ้าง ครั้งนี้ถือว่าฉลองที่ SNSD ครบรอบ 5 ปีแล้วกัน >_<

ทำความรู้จักตัวแปรก่อนสร้าง 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="https://www.youtube.com/watch?v=’.$id.’" target="_blank"><img src="https://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="https://www.youtube.com/watch?v='.$id.'" target="_blank"><img src="https://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[/youtube]

ซึ่งเราจะได้ค่าที่หน้าเว็บเป็น

<h3>Youtube Video

<img src="https://img.youtube.com/vi/6pA_Tou-DPI/0.jpg" alt="" class="aligncenter">


ลองนำไปปรับแล้วใช้งานให้ตรงกับความต้องการของเราดูนะครับ

อ๋อ แต่ถ้าจะง่ายในการเพิ่ม ลด ลบนะครับ ให้สร้าง shortcode.php แล้วเราไป include 'shortcodes.php'; ใน functions.php เพื่อเวลาค้นหาว่าเราสร้าง shortcode อะไรไปบ้าง จะได้มาดูแค่ที่ shortcode.php ที่เดียวก็พอ