ความเป็นมาของ Shortcode ในเวิร์ดเพรส และการนำไปใช้งาน

[Prog Man]

   สอบถาม AI แล้ว ได้ความประมาณนี้

ช่วยอธิบายในเรื่อง Shortcode ใน Wordpress ด้วยครับว่าเป็นมายังไง นำไปใช้งานยังไง

Shortcode ใน WordPress คือฟังก์ชันที่ช่วยให้ผู้ใช้สามารถใส่ลูกเล่น ฟีเจอร์ หรือเนื้อหาที่ซับซ้อนลงในหน้าเว็บได้ง่ายๆ เพียงแค่พิมพ์ข้อความสั้นๆ ในวงเล็บเหลี่ยม เช่น [gallery] หรือ [contact-form] โดยไม่ต้องมีความรู้เรื่องการเขียนโค้ดภาษา HTML หรือ PHP เลยครับ
นี่คือเรื่องราวความเป็นมา วิธีการทำงาน และวิธีนำไปใช้งานอย่างละเอียดครับ

📜 ความเป็นมาของ Shortcode

ในอดีต (ช่วงก่อนปี 2008) หากผู้ใช้งาน WordPress ต้องการจะใส่ฟีเจอร์อย่างเช่น แกลเลอรีรูปภาพ, แบบฟอร์มติดต่อ, หรือตารางข้อมูล ลงในโพสต์หรือหน้าเว็บ (Pages) พวกเขาจำเป็นต้องเขียนโค้ด HTML หรือใช้โค้ดภาษา PHP ที่ซับซ้อน ซึ่งสร้างความยุ่งยากให้กับผู้ใช้งานทั่วไปอย่างมาก
เพื่อแก้ปัญหานี้ WordPress เวอร์ชัน 2.5 (ปล่อยตัวในปี 2008) จึงได้เปิดตัว Shortcode API ขึ้นมาอย่างเป็นทางการ
• แรงบันดาลใจ: ได้รับแนวคิดมาจากระบบ "BBCode" (Bulletin Board Code) ที่นิยมใช้ในเว็บบอร์ดสมัยก่อน (เช่น ข้อความตัวหนา)
• เป้าหมาย: เพื่อเปลี่ยนโค้ดโปรแกรมมิ่งที่ยาวและเข้าใจยาก ให้กลายเป็น "คำสั่งสั้นๆ" ที่ใครก็พิมพ์ได้ โดยเมื่อระบบหลังบ้านของ WordPress ตรวจเจอคำสั่งนี้ มันจะแปลงผลลัพธ์เป็นหน้าตาเว็บที่สวยงามให้ทันที

⚙️ รูปแบบการใช้งาน Shortcode

Shortcode ใน WordPress ส่วนใหญ่จะแบ่งออกเป็น 2 รูปแบบหลักๆ ดังนี้ครับ
1. Shortcode แบบเปิด-ปิดตัวเอง (Self-closing Shortcodes)
เป็นคำสั่งเดี่ยวๆ ที่ใส่ลงไปเพื่อดึงฟีเจอร์นั้นมาแสดงทันที
   • ตัวอย่าง: [current_date] (สมมติว่าเป็น Shortcode สำหรับแสดงวันที่ปัจจุบัน)
   • แบบใส่คุณลักษณะ (Attributes): [gallery id="123" size="medium"] (ส่งค่าระบุเพิ่มว่าให้ดึงรูปจากอัลบั้มไหน ขนาดเท่าไหร่)
2. Shortcode แบบครอบเนื้อหา (Enclosing Shortcodes)
เป็นคำสั่งที่มีทั้งตัวเปิดและตัวปิด เพื่อปรับแต่งเนื้อหาที่อยู่ตรงกลาง
   • ตัวอย่าง: [caption]นี่คือรูปภาพวันหยุดของฉัน[/caption]
   • แบบใส่คุณลักษณะ: [button url="https://google.com"]คลิกที่นี่[/button]

🚀 วิธีนำ Shortcode ไปใช้งานจริง

คุณสามารถนำ Shortcode ไปใช้ใน WordPress ได้หลากหลายจุดตามความต้องการ ดังนี้ครับ

1. ใช้ใน Block Editor (Gutenberg)

ถ้าคุณใช้ WordPress เวอร์ชันปัจจุบันที่เป็นระบบบล็อก:
• กดปุ่ม + (Add Block) ในหน้าแก้ไขโพสต์/หน้าเว็บ
• ค้นหาบล็อกที่ชื่อว่า "Shortcode" (หรือ "รหัสสั้น")
• พิมพ์รหัส Shortcode เช่น [contact-form-7 id="123"] ลงในช่องนั้น แล้วกดบันทึก

2. ใช้ใน Classic Editor

หากคุณยังใช้ตัวแก้ไขหน้าเว็บแบบเก่า:
• คุณสามารถพิมพ์คำสั่ง Shortcode เช่น [your-shortcode] ลงไปในช่องพิมพ์ข้อความปกติได้โดยตรงเลย

3. ใช้ใน Widget (แถบข้าง หรือ ฟุตเตอร์)

• ไปที่ Apperance (รูปแบบบล็อก) > Widgets
• เพิ่มบล็อก Shortcode หรือบล็อก Text (ข้อความ) เข้าไปในพื้นที่ที่ต้องการ
• วางรหัส Shortcode ลงไป

4. ใช้ในไฟล์ธีม (สำหรับสายพัฒนา/เขียนโค้ด)

ถ้าคุณกำลังแต่งธีม WordPress เองและต้องการให้ Shortcode แสดงผลในไฟล์ PHP (เช่น single.php หรือ page.php) ให้ใช้ฟังก์ชัน do_shortcode() แบบนี้ครับ:
php
<?php echo do_shortcode('[รหัส_shortcode]'); ?>
ใช้โค้ดอย่างระมัดระวัง

💡 ตัวอย่างการสร้าง Shortcode ใช้เอง (สำหรับผู้เริ่มต้น)

นอกจาก Shortcode ที่ติดมากับระบบหรือมากับปลั๊กอินต่างๆ แล้ว คุณยังสามารถสร้าง Shortcode ของตัวเองได้ง่ายๆ โดยนำโค้ดด้านล่างนี้ไปใส่ในไฟล์ functions.php ของธีมที่ใช้งานอยู่ครับ
โจทย์: อยากสร้าง Shortcode คำว่า [welcome_msg] เพื่อแสดงข้อความต้อนรับ
php
// 1. สร้างฟังก์ชันการทำงาน
function wporg_welcome_message() {
    return "ยินดีต้อนรับเข้าสู่เว็บไซต์ของเราครับ!";
}

// 2. ลงทะเบียนฟังก์ชันนี้ให้เป็น Shortcode
add_shortcode('welcome_msg', 'wporg_welcome_message');
ใช้โค้ดอย่างระมัดระวัง
เมื่อคุณพิมพ์ [welcome_msg] ในหน้าเว็บ ระบบก็จะแสดงคำว่า "ยินดีต้อนรับเข้าสู่เว็บไซต์ของเราครับ!" ออกมาให้ทันทีครับ
(หมายเหตุ: ในปัจจุบันแม้ว่า WordPress จะเปลี่ยนผ่านเข้าสู่ยุค Block Editor (Gutenberg) ที่เน้นการลากวางบล็อกภาพจำลองแล้ว แต่ Shortcode ก็ยังเป็นเครื่องมือสำคัญที่ปลั๊กอินดังๆ หลายตัว เช่น Contact Form 7, WooCommerce ยังคงใช้อยู่เพราะมันยืดหยุ่นและสะดวกรวดเร็วครับ)