บางครั้งเราก็ไม่ได้อยากจะ 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”] จะได้ผลลัพธ์ออกมาดังตัวอย่างด้านล่าง
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


![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [1]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress8-1.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [2]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress8-2.jpg)

![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [4]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress8-4.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [5]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress8-5.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [6]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress8-6.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [7]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress8-7.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [8]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress8-8.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [9]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress8-9.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [10]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress8-10.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [11]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress8-11.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [12]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress8-12.jpg)
![[How to] [Plugin] วิธีใช้ All in one SEO สำหรับ WordPress](https://rabbitinblack.com/wp-content/uploads/2011/10/thumbnail12.gif)





![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [1]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress7-1.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [2]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress7-2.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [3]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress7-3.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [4]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress7-4.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [5]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress7-5.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [6]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress7-6.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [7]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress7-7.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [8]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress7-8.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [9]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress7-9.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [10]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress7-10.jpg)

![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [1]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress6-1.jpg)
![รูปอธิบายหัวข้อ WordPress รูปอธิบายหัวข้อ WordPress [2]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress6-2.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [3]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress6-3.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [4]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress6-4.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [5]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress6-5.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [6]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress6-6.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [7]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress6-7-600x502.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [8]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress6-8.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [9]](https://rabbitinblack.com/wp-content/uploads/2011/10/wordpress6-9-600x481.jpg)

![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [1]](https://rabbitinblack.com/wp-content/uploads/2011/10/Wordpress5-1.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [2]](https://rabbitinblack.com/wp-content/uploads/2011/10/Wordpress5-2.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [3]](https://rabbitinblack.com/wp-content/uploads/2011/10/Wordpress5-3.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [4]](https://rabbitinblack.com/wp-content/uploads/2011/10/Wordpress5-4.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [5]](https://rabbitinblack.com/wp-content/uploads/2011/10/Wordpress5-5.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [6]](https://rabbitinblack.com/wp-content/uploads/2011/10/Wordpress5-6-600x168.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [7]](https://rabbitinblack.com/wp-content/uploads/2011/10/Wordpress5-7.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [8]](https://rabbitinblack.com/wp-content/uploads/2011/10/Wordpress5-8.jpg)
![รูปอธิบายหัวข้อ วิธีใช้ WordPress รูปอธิบายหัวข้อ วิธีใช้ WordPress [9]](https://rabbitinblack.com/wp-content/uploads/2011/10/Wordpress5-9-600x204.jpg)