ฉลอง MV SNSD ตัวใหม่ด้วยบทความ ทำ Shortcode สำหรับดึง youtube thumbnail มาใช้ใน WordPress

บางครั้งเราก็ไม่ได้อยากจะ Embed Video จาก youtube มา เราต้องการแค่ thumbnail เพื่อให้มัน link ไปที่วิดีโอใน youtube ดังนั้นเราเลยสร้าง shortcode ขึ้นมาเลย เพื่อจะได้ง่ายในการนำไปใช้ด้วย

WordPress : Shortcode สำหรับดึง youtube thumbnail มาใช้งาน

ผมได้อ่านบทความอันนี้ WordPress Display Youtube Video Thumbnail แล้ว แต่ผมก็ยังไม่ถูกใจทั้งหมด เลยนำ Code ของเค้ามาปรับ ๆ อีกหน่อยให้เหมาะกับที่ผมจะนำไปใช้

[php]
function wp_youtube_video_thumbnail($atts) {
extract(shortcode_atts(array(
‘id’ => ”,
‘img’ => ‘0’,
‘align’=>’left’
), $atts));
$align_class=’align’.$align;
return ‘<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]

ผมใส่ shortcode แบบนี้นะครับ [youtube_thumb id=”6pA_Tou-DPI” img=”0″ align=”center”] จะได้ผลลัพธ์ออกมาดังตัวอย่างด้านล่าง

[youtube_thumb id=”6pA_Tou-DPI” img=”0″ align=”center”]

WordPress : รูปแบบของ shortcode

[youtube_thumb id=”XXX” img=”YYY” align=”ZZZ”]

id นำมาจาก id ของวิดีโอจาก youtube ที่เราต้องการ thumbnail

img สำหรับ img นั้น มีให้เราเลือกอยู่ 6 แบบ ดังนี้

  • 0 : เป็น thumbnail ขนาด 480×360 pixels (จาก shortcode ที่เราสร้างขึ้น 0 จะเป็นค่ามาตรฐานของ img ในกรณีที่ไม่ได้ใส่ค่าให้ img)
  • 1 หรือ 2 หรือ 3 : เป็น thumbnail ขนาด 120×90 pixels ที่มีรูปแตกต่างกัน
  • default : เป็น thumbnail ขนาด 120×90 pixels รูปเดียวกับ 0
  • hqdefault : เป็น thumbnail ขนาด 480×360 pixels รูปเดียวกับ 0

align นั้นมีให้เลือก 4 แบบ ดังนี้

  • left (จาก shortcode ที่เราสร้างขึ้น left จะเป็นค่ามาตรฐานของ align ในกรณีที่ไม่ได้ใส่ค่าให้ align)
  • right
  • center
  • none

ว่าแล้วก็ฉลองด้วย MV ตัวใหม่แบบไม่เป็น thumbnail เลยแล้วกันครับ >_< https://www.youtube.com/watch?v=6pA_Tou-DPI


Posted

in

by

Comments

4 responses to “ฉลอง MV SNSD ตัวใหม่ด้วยบทความ ทำ Shortcode สำหรับดึง youtube thumbnail มาใช้ใน WordPress”

  1.  Avatar
    Anonymous

    ไทอินตลอดดดดดด

    1.  Avatar
      Anonymous

      เป็นเรื่องปรกตินะครับ แต่ก็มีความรู้ให้นะ >_<

Leave a Reply

Your email address will not be published. Required fields are marked *