คุณเคยสงสัยไหมว่า เว็บไซต์เทพๆ เขาทำ “แบบฟอร์มติดต่อเรา” ที่ซับซ้อน หรือ “ตารางแสดงสินค้าขายดี” ที่อัปเดตอัตโนมัติกันยังไง? ต้องจ้างโปรแกรมเมอร์มาเขียน PHP เป็นร้อยบรรทัดหรือเปล่า?
คำตอบคือ “เปล่าเลยครับ” เขาแค่พิมพ์รหัสสั้นๆ บรรทัดเดียวลงไปในหน้าเว็บ รหัสที่หน้าตาเหมือนเวทมนตร์แบบนี้
[contact-form-7 id=”1234″]
เจ้ารหัสในวงเล็บสี่เหลี่ยมนี้แหละครับ คือฮีโร่เงียบที่เรียกว่า “Shortcode” วันนี้ผมจะพาคุณไปรู้จักวิธีใช้เวทมนตร์ก้นหีบนี้ เพื่อเสกฟังก์ชั่นที่ดูเหมือนยาก ให้กลายเป็นเรื่องง่ายเพียงปลายนิ้วครับ
Shortcode คืออะไร? (อธิบายแบบเห็นภาพ)
Shortcode คือชุดคำสั่งพิเศษที่ถูกครอบด้วยวงเล็บสี่เหลี่ยม [ … ] หน้าที่ของมันคือการบอก WordPress ว่า
“เฮ้ย! ตรงที่ฉันพิมพ์โค้ดนี้ลงไป อย่าโชว์ข้อความนี้นะ แต่ให้ไปเรียกฟังก์ชั่นเจ๋งๆ ที่ซ่อนอยู่หลังบ้านออกมาโชว์แทน”
เปรียบเทียบง่ายๆ เหมือนเวลาคุณไปร้านอาหารตามสั่ง คุณไม่ได้เดินเข้าไปในครัวแล้วบอกเชฟว่า “ตอกไข่ 2 ฟอง ใส่หมูสับ 1 ขีด ผัดไฟแรง…” แต่คุณแค่เขียนลงกระดาษว่า “กะเพราหมูสับ (เมนูที่ 1)” เชฟเห็นรหัสนั้นปุ๊บ ก็จะเสกจานอร่อยออกมาให้คุณทันที
Shortcode ก็ทำงานแบบนั้นครับ แทนที่จะเขียน Code ยาวเหยียด เราใช้ “รหัสเรียก” สั้นๆ แทน
ทำไมยังต้องใช้ Shortcode? (ในเมื่อเรามี Gutenberg แล้ว)
หลายคนถามผมว่า “เดี๋ยวนี้มี Gutenberg Block ลากวางได้แล้ว Shortcode ยังจำเป็นอยู่ไหม?” จำเป็นมากครับ! เพราะ
- ปลั๊กอินดังๆ ยังใช้มันอยู่ ปลั๊กอินระดับโลกอย่าง WooCommerce หรือ Contact Form 7 ยังพึ่งพา Shortcode ในการดึงข้อมูลที่ซับซ้อนมาแสดงผล
- มันแทรกได้ทุกที่ Block อาจจะวางได้แค่ในเนื้อหา แต่ Shortcode สามารถเอาไปแปะใน Sidebar Widget หรือแม้แต่ใน Footer ได้อย่างอิสระ
- ความยืดหยุ่นสูง Shortcode สามารถรับคำสั่งเพิ่มเติม (Parameters) ได้ เพื่อปรับเปลี่ยนการแสดงผลตามใจชอบ
ตัวอย่าง Shortcode ยอดฮิต (เสกอะไรได้บ้าง?)
เพื่อให้เห็นภาพ นี่คือตัวอย่างการใช้ Shortcode ที่คุณอาจจะได้ใช้จริง
- เสกปุ่มกด [button color=”red” size=”large” link=”https//google.com”]กดตรงนี้สิ[/button] (ผลลัพธ์ ได้ปุ่มสีแดงขนาดใหญ่ ลิงก์ไป Google)
- เสกสินค้า (สำหรับคนขายของ) [products limit=”4″ columns=”2″ orderby=”popularity”] (ผลลัพธ์ ดึงสินค้าขายดี 4 ชิ้น มาแสดงแบบ 2 คอลัมน์ โดยอัตโนมัติ)
- เสกแกลเลอรี่ภาพ (ผลลัพธ์ เอารูปภาพตามรหัส ID ที่ระบุ มาเรียงเป็น Gallery สวยงาม)
วิธีใช้งาน Shortcode (ง่ายจนตกใจ)
ไม่ว่าคุณจะใช้ Editor ตัวไหน ก็ใช้ Shortcode ได้ง่ายๆ ครับ
1. ถ้าใช้ Gutenberg (Block Editor)
- กดปุ่มบวก (+)
- ค้นหา Block ชื่อ “Shortcode”
- วางรหัส [ … ] ลงไปในช่องนั้น จบ!
2. ถ้าใช้ Classic Editor
- พิมพ์รหัส [ … ] ลงไปในบรรทัดที่ต้องการได้เลย เหมือนพิมพ์ข้อความปกติ
3. ถ้าใช้ Widget (Sidebar/Footer)
- เลือก Widget แบบ “Shortcode” หรือ “Custom HTML” แล้ววางรหัสลงไป
ข้อควรระวัง! (อ่านก่อนหน้าแตก)
Shortcode มี “จุดตาย” อยู่อย่างหนึ่งที่คุณต้องระวังให้ดีครับ นั่นคือ “Shortcode จะทำงานก็ต่อเมื่อปลั๊กอินต้นทางยังทำงานอยู่”
สมมติคุณใช้ Shortcode ของปลั๊กอินสร้างตาราง [ninja_tables id=”1″] วันหนึ่งคุณเผลอไปกด Deactivate (ปิดใช้งาน) ปลั๊กอิน Ninja Tables…
หน้าเว็บของคุณจะไม่โชว์ตาราง แต่จะโชว์ข้อความดิบๆ ว่า [ninja_tables id=”1″] ให้คนทั้งโลกเห็น! มันดูไม่เป็นมืออาชีพสุดๆ เลยใช่ไหมครับ?
Pro Tip ก่อนลบปลั๊กอินอะไรก็ตาม เช็คให้ชัวร์ก่อนว่าคุณไม่ได้ทิ้ง Shortcode ของมันไว้ตามบทความต่างๆ ในเว็บครับ
กุญแจดอกเล็กที่ไขประตูบานใหญ่
Shortcode อาจดูเป็นแค่ข้อความสั้นๆ ในวงเล็บ แต่เบื้องหลังของมันคือขุมพลังที่ช่วยให้คุณเพิ่มฟีเจอร์ซับซ้อนลงในเว็บได้โดยไม่ต้องแตะโค้ด PHP แม้แต่บรรทัดเดียว มันคือสะพานเชื่อมระหว่าง User ทั่วไป กับ ฟีเจอร์ระดับ Advanced ครับ
ตอนนี้คุณรู้วิธีสร้างเนื้อหา (Gutenberg), วิธีเพิ่มฟีเจอร์ (Plugin/Shortcode), และวิธีจัดหน้าตา (Theme/Widget) แล้ว
แต่มีอีกสิ่งหนึ่งที่สำคัญมากกกกก (ก.ไก่ล้านตัว) สำหรับ SEO มันคือสิ่งที่ Google จะอ่านเป็นอันดับแรกก่อนเข้ามาดูเนื้อหาเว็บคุณด้วยซ้ำ สิ่งนั้นคือ “ชื่อ URL” หรือในภาษา WordPress เรียกว่า “Permalinks”
ฉันเป็นผู้เชี่ยวชาญด้าน Digital Marketing & SEO ที่มีประสบการณ์มากกว่า 4 ปี
ในการสร้างและบริหารกลยุทธ์การตลาดออนไลน์อย่างครบวงจร มีความเชี่ยวชาญพิเศษในการขับเคลื่อน Organic Growth และการสร้าง SEO Content Strategy ที่เน้น Conversion โดยมีผลงานที่พิสูจน์ได้ เช่น การเพิ่ม Organic Traffic ให้กับเว็บไซต์
