ใช้ Shortcode ใน WordPress อย่างมืออาชีพ

WordPress Shortcode คืออะไร

Shortcode คือ Placeholder สั้นๆ ในรูปแบบ [shortcode-name] หรือ [shortcode-name attribute="value"] ที่เมื่อแสดงผลบนหน้าเว็บ WordPress จะแทนที่ด้วย HTML หรือ Content ที่ซับซ้อน ตัวอย่างที่เห็นบ่อย:

• [gallery ids="1,2,3"] — แสดง Gallery รูปภาพ
• [contact-form-7 id="123"] — แสดง Form จาก Plugin
• [woocommerce_cart] — แสดงหน้า Cart ของ WooCommerce
• [caption] — ใส่ Caption ใต้รูปภาพ

Shortcode ช่วยให้ใส่ Functionality ซับซ้อนลงในบทความหรือ Page โดยไม่ต้องเขียน HTML เอง เพียงแค่รู้ Shortcode ที่ถูกต้อง

Shortcode ที่ Built-in มาใน WordPress

[gallery] — แสดง Gallery รูปภาพ

[gallery ids="10,11,12" columns="3" size="medium"]

# Attributes ที่ใช้บ่อย
ids="ID,ID,ID"   ← รหัส Attachment ของรูป
columns="3"      ← จำนวนคอลัมน์
size="thumbnail" ← ขนาดรูป (thumbnail/medium/large/full)
link="file"      ← ลิงก์ไปไฟล์จริง (ไม่ใช่ Attachment Page)

[audio] และ [video] — เล่นไฟล์มีเดีย

[audio src="https://yoursite.com/podcast.mp3"]

[video src="https://yoursite.com/intro.mp4" width="640" height="360"]

[caption] — Caption รูปภาพ

[caption id="attachment_123" align="aligncenter" width="600"]
  <img src="photo.jpg" width="600" height="400" />
  คำอธิบายรูปภาพ
[/caption]

Shortcode ที่ได้มาจาก Plugin ยอดนิยม

Contact Form 7

[contact-form-7 id="123" title="Contact form"]

WooCommerce

[woocommerce_cart]             ← หน้าตะกร้า
[woocommerce_checkout]         ← หน้า Checkout
[woocommerce_my_account]       ← หน้า My Account
[products limit="8" columns="4"] ← แสดงสินค้า 8 ชิ้น

Elementor

[elementor-template id="456"] ← แสดง Template บนหน้าอื่น

สร้าง Custom Shortcode ใน Child Theme

การสร้าง Shortcode เองช่วยให้เพิ่ม Feature พิเศษโดยไม่ต้องติดตั้ง Plugin ใส่ Code ต่อไปนี้ใน functions.php ของ Child Theme เสมอ (ไม่ใช่ Parent Theme)

<?php
// Shortcode แบบง่าย — ไม่มี Parameter
function my_current_year_shortcode() {
  return date('Y');
}
add_shortcode('current_year', 'my_current_year_shortcode');
// ใช้: [current_year] → แสดง "2026"

// Shortcode แบบมี Attribute
function my_button_shortcode($atts) {
  $atts = shortcode_atts(array(
    'text'  => 'คลิกที่นี่',
    'url'   => '#',
    'color' => 'green',
  ), $atts, 'button');

  return '<a href="' . esc_url($atts['url']) . '"
    class="btn btn-' . esc_attr($atts['color']) . '">'
    . esc_html($atts['text']) . '</a>';
}
add_shortcode('button', 'my_button_shortcode');
// ใช้: [button text="ติดต่อเรา" url="/contact/" color="blue"]

// Shortcode แบบมี Content (Enclosing)
function my_highlight_shortcode($atts, $content = null) {
  return '<span class="highlight">' . do_shortcode($content) . '</span>';
}
add_shortcode('highlight', 'my_highlight_shortcode');
// ใช้: [highlight]ข้อความสำคัญ[/highlight]

ใช้ Shortcode ใน Widget และ Page Builder

ใน WordPress Widget (Classic Widget)

Widget "Text" รองรับ Shortcode โดยตรง แค่วาง [shortcode] ลงใน Text Widget WordPress 5.0+ ยัง Support Shortcode ใน Block "Shortcode" ที่มีใน Block Editor (Gutenberg)

ใน Elementor

ใช้ Element "Shortcode" วาง Shortcode ลงใน Widget ได้เลย หรือใน Text Editor Element ก็รองรับ Shortcode โดยตรง

ใน PHP Template

<?php echo do_shortcode('[contact-form-7 id="123"]'); ?>

ตรวจสอบว่า Shortcode ทำงานถูกต้อง

# ตรวจสอบว่า Shortcode Register แล้ว
# ใส่ใน functions.php ชั่วคราว (Debug เท่านั้น)
add_action('init', function() {
  global $shortcode_tags;
  // ดูว่า Shortcode ที่ต้องการมีในลิสต์ไหม
  if (isset($shortcode_tags['my-shortcode'])) {
    error_log('Shortcode registered OK');
  }
});

# ทดสอบ Output ของ Shortcode
# สร้าง Page ทดสอบแล้วใส่ [shortcode-name]
# Preview แล้วดูว่า HTML ออกมาถูกต้อง

# ตรวจสอบ Error Log
cPanel → Error Log หรือ debug.log ใน wp-content/
หา PHP Error ที่เกี่ยวกับ shortcode

แก้ปัญหาที่พบบ่อย

Error: Shortcode แสดงเป็นข้อความ [shortcode] แทนที่จะทำงาน

สาเหตุที่ 1: Plugin ที่สร้าง Shortcode นั้น Deactivate อยู่หรือถูกลบไปแล้ว ตรวจสอบ Plugins → Installed Plugins สาเหตุที่ 2: Shortcode เขียนผิด เช่น ใส่ Space ผิดตำแหน่ง หรือ Quote ไม่ถูกต้อง ลอง Copy Shortcode จาก Plugin Documentation อีกครั้ง

Custom Shortcode ที่สร้างเองไม่แสดงผล

ตรวจสอบว่า add_shortcode() อยู่ใน functions.php ของ Active Theme (Child Theme ถ้ามี) ไม่ใช่ Plugin ที่ Deactivate อยู่ ตรวจ Syntax PHP ว่าไม่มี Error ด้วย PHP Syntax Check เปิด WP_DEBUG เพื่อดู Error Message

Shortcode ใน Widget ไม่ทำงาน

WordPress 5.8+ เปลี่ยนมาใช้ Block Widget แทน Classic Widget ถ้าใช้ Block Widget ให้ใช้ Block "Shortcode" แทน "Text Widget" หรือติดตั้ง Plugin "Classic Widgets" เพื่อกลับไปใช้ Widget เดิมที่รองรับ Shortcode โดยตรง

Shortcode ทำงานใน Post แต่ไม่ทำงานใน Theme Template

ใน PHP Template ต้อง Wrap ด้วย do_shortcode(): echo do_shortcode('[your-shortcode]'); ถ้าไม่ใช้ do_shortcode() WordPress จะแสดง Shortcode เป็น Text ธรรมดาโดยไม่ Process

คำถามที่พบบ่อย

Q: Shortcode ต่างจาก Gutenberg Block อย่างไร?

A: Shortcode เป็นระบบเก่าที่ใส่ในเนื้อหา Text ตรงๆ ใช้ได้กับ Classic Editor และ Block Editor Gutenberg Block เป็นระบบใหม่ที่มี Visual Editor และ Settings Panel ใน Sidebar Plugin สมัยใหม่มักใช้ Block แต่หลาย Plugin เก่ายังใช้ Shortcode

Q: Shortcode ทำให้เว็บช้าลงไหม?

A: ขึ้นอยู่กับ Shortcode นั้นทำอะไร Shortcode ที่ Query Database หรือดึง External Data ทุกครั้งที่โหลดหน้า อาจทำให้ช้าได้ แนะนำให้ Cache Output ของ Shortcode ที่ใช้บ่อยด้วย WordPress Transients API

Q: ลบ Plugin ที่สร้าง Shortcode ออก Shortcode เก่าจะเป็นอย่างไร?

A: Shortcode จะแสดงเป็นข้อความ [shortcode-name] ไม่ถูก Process อีกต่อไป เนื้อหาใน Database ยังเก็บ Shortcode ไว้อยู่แต่ไม่มีฟังก์ชันมา Handle แล้ว ถ้าจะถอน Plugin ต้องแก้เนื้อหาทุกหน้าที่ใช้ Shortcode นั้นก่อน