การสร้าง Shortcode Function เบื้องต้นใน WordPress

Shortcode ใน WordPress คือโค้ดสั้นๆ ที่ช่วยให้คุณสามารถเพิ่มฟังก์ชันการทำงานต่างๆ ลงในโพสต์ เพจ หรือวิดเจ็ตได้อย่างง่ายดาย โดยไม่ต้องเขียนโค้ดยาวๆ เอง

ความหมายและหลักการทำงาน:

• โค้ดสั้นๆ: Shortcode จะอยู่ในรูปแบบของวงเล็บเหลี่ยม เช่น [my_shortcode]
• แทนที่ด้วยเนื้อหา: เมื่อ WordPress ประมวลผลเนื้อหาที่มี shortcode มันจะแทนที่ shortcode นั้นด้วยเนื้อหาหรือฟังก์ชันที่กำหนดไว้
• ฟังก์ชันการทำงาน: Shortcode สามารถใช้เพื่อเพิ่มฟังก์ชันการทำงานต่างๆ เช่น แสดงแกลเลอรีรูปภาพ ฝังวิดีโอ หรือแสดงเนื้อหาจากปลั๊กอิน

ประโยชน์ของ Shortcode:

• ความสะดวก: ช่วยให้เพิ่มฟังก์ชันการทำงานที่ซับซ้อนได้ง่ายๆ โดยไม่ต้องเขียนโค้ดเอง
• ความยืดหยุ่น: สามารถปรับแต่งการทำงานของ shortcode ได้โดยการเพิ่มพารามิเตอร์
• ความเป็นระเบียบ: ช่วยให้เนื้อหาดูเป็นระเบียบและง่ายต่อการจัดการ

ตัวอย่างการใช้งาน:

• ปลั๊กอินบางตัวจะให้ Shortcode มาด้วย เพื่อให้ง่ายต่อการนำเนื้อหาจากปลั๊กอินมาแสดงผลบนหน้าเว็บไซต์
• การสร้างตารางแสดงราคา
• การสร้างปุ่มกดที่สวยงาม

Shortcode เป็นเครื่องมือที่มีประโยชน์มากใน WordPress ช่วยให้คุณเพิ่มฟังก์ชันการทำงานต่างๆ ลงในเว็บไซต์ได้อย่างง่ายดายและยืดหยุ่น

Shortcode ใน WordPress สามารถสร้างได้ 3 รูปแบบ คือ

Shortcode พื้นฐาน (แสดงข้อความ)

PHP Code

function my_custom_shortcode() {
    return 'สวัสดี! นี่คือ shortcode ของฉัน';
}
add_shortcode('my_shortcode', 'my_custom_shortcode');

• คำอธิบาย:
  • my_custom_shortcode(): คือฟังก์ชันที่เราสร้างขึ้นเพื่อกำหนดการทำงานของ shortcode
  • return 'สวัสดี! นี่คือ shortcode ของฉัน';: คือข้อความที่เราต้องการให้แสดงเมื่อเรียกใช้ shortcode
  • add_shortcode('my_shortcode', 'my_custom_shortcode');: คือฟังก์ชันที่ใช้ลงทะเบียน shortcode โดย ‘my_shortcode’ คือชื่อของ shortcode ที่เราจะใช้ในโพสต์หรือเพจ และ ‘my_custom_shortcode’ คือชื่อฟังก์ชันที่เราสร้างขึ้น
• วิธีใช้งาน:
  • เพิ่มโค้ดข้างต้นลงในไฟล์ functions.php ของธีม หรือใช้ปลั๊กอิน Code Snippets
  • ในโพสต์หรือเพจ ให้พิมพ์ [my_shortcode]

ตัวอย่างการเรียกใช้จาก Post / Page

Shortcode ที่รับพารามิเตอร์

PHP

function greeting_shortcode($atts) {
    $atts = shortcode_atts(array(
        'name' => 'ผู้เยี่ยมชม',
    ), $atts);

    return 'สวัสดี, ' . esc_html($atts['name']) . '!';
}
add_shortcode('greeting', 'greeting_shortcode');

• คำอธิบาย:
  • $atts: คือตัวแปรที่รับพารามิเตอร์ที่ส่งเข้ามาใน shortcode
  • shortcode_atts(): คือฟังก์ชันที่ใช้กำหนดค่าเริ่มต้นให้กับพารามิเตอร์ และรวมค่าที่ส่งเข้ามา
  • esc_html(): คือฟังก์ชันที่ใช้ป้องกันการแทรกโค้ด HTML ที่ไม่พึงประสงค์
• วิธีใช้งาน:
  • เพิ่มโค้ดข้างต้นลงในไฟล์ functions.php หรือใช้ปลั๊กอิน Code Snippets
  • ในโพสต์หรือเพจ ให้พิมพ์ [greeting name="ชื่อของคุณ"] หรือ [greeting] (ถ้าไม่ระบุชื่อ จะใช้ค่าเริ่มต้น)

ตัวอย่างการเรียกใช้งาน

Enclosing Shortcodes คืออะไร?

Enclosing shortcodes คือ shortcode ที่มีแท็กเปิดและแท็กปิด เช่น [my_box]เนื้อหาภายในกล่อง[/my_box] ซึ่งเนื้อหาที่อยู่ระหว่างแท็กเปิดและแท็กปิดจะถูกนำไปประมวลผลโดยฟังก์ชันของ shortcode

ตัวอย่างการสร้าง Enclosing Shortcodes:

PHP

function my_box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => 'lightgray',
    ), $atts);

    $output = '<div style="background-color: ' . esc_attr($atts['color']) . '; padding: 10px;">';
    $output .= do_shortcode($content); // ประมวลผล shortcode ที่อยู่ภายใน
    $output .= '</div>';

    return $output;
}
add_shortcode('my_box', 'my_box_shortcode');

• คำอธิบาย:
  • $content = null: คือตัวแปรที่รับเนื้อหาที่อยู่ระหว่างแท็กเปิดและแท็กปิด
  • do_shortcode($content): คือฟังก์ชันที่ใช้ประมวลผล shortcode ที่อาจมีอยู่ภายในเนื้อหา
• วิธีใช้งาน:
  • เพิ่มโค้ดข้างต้นลงในไฟล์ functions.php หรือใช้ปลั๊กอิน Code Snippets
  • ในโพสต์หรือเพจ ให้พิมพ์ [my_box color="lightblue"]เนื้อหาภายในกล่อง[/my_box] หรือ [my_box]เนื้อหาภายในกล่อง[/my_box] (ถ้าไม่ระบุสี จะใช้สีเริ่มต้น)

ประโยชน์ของ Enclosing Shortcodes:

• ความยืดหยุ่น: ช่วยให้กำหนดเนื้อหาภายใน shortcode ได้หลากหลาย
• การจัดรูปแบบ: สามารถใช้เพื่อจัดรูปแบบเนื้อหา เช่น สร้างกล่องข้อความ หรือเน้นข้อความ
• การซ้อน shortcode: สามารถซ้อน shortcode อื่นๆ ไว้ภายใน enclosing shortcode ได้

ข้อควรระวังเพิ่มเติม:

• เมื่อใช้ do_shortcode($content) ต้องระวังเรื่องการซ้อน shortcode ที่อาจทำให้เกิดปัญหา infinite loop ได้
• การตั้งค่าสี หรือค่าต่าง ๆ ที่รับมา ควรใช้ฟังค์ชั่น esc_attr เพื่อป้องกันการโจมตีทางเว็บไซด์

ตัวอย่างการเรียกใช้งาน

Shortcode เป็นเครื่องมือที่มีประโยชน์มากใน WordPress ช่วยให้คุณเพิ่มฟังก์ชันการทำงานต่างๆ ลงในเว็บไซต์ได้อย่างง่ายดายและยืดหยุ่น