ผู้เขียน หัวข้อ: ลองสร้าง shortcode แบบง่าย ๆ เพื่อสะดวกเวลาใช้งาน  (อ่าน 797 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ smf

  • [color=green][i]"ถ้าคุณไม่สามารถอธิบายอย่างง่ายๆ ให้คนอื่นเข้าใจได้แล้วล่ะก็ แสดงว่าคุณยังเข้าใจมันไม่ดีพอ"[/i][/color]
  • Administrator
  • Hero Member
  • *****
  • กระทู้: 1,368
  • พอยท์: 5
    • ดูรายละเอียด
    • pordoo.com
    • อีเมล์
ถ้าเคยใช้งาน 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 จะประมาณนี้ครับ ใช้จากตัวเก่าแล้วเพิ่มข้อมูลลงไปอีกนิดหน่อยนะครับ

โค๊ด: [Select]
[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/



« แก้ไขครั้งสุดท้าย: 10 สิงหาคม 2016, 16:19:48 โดย smf »