ปัญหาที่ไม่มีใครพูดถึงของชอร์ตโค้ด

เขียนโดย

ใน

The-Unspoken-Problem-of-Shortcodes

ชอร์ตโค้ด (Shortcode) เป็นหนึ่งในจุดเด่นที่สำคัญที่สุดของ WordPress ชอร์ตโค้ดเปรียบเสมือนสะพานเชื่อมระหว่างนักพัฒนากับผู้สร้างเว็บไซต์ ซึ่งช่วยให้ผู้คนสามารถวางชิ้นส่วนเนื้อหาที่ซับซ้อนได้เกือบทุกที่ที่ต้องการ ผู้สร้างปลั๊กอินชอบชอร์ตโค้ดเพราะช่วยเพิ่มความยืดหยุ่นในการที่ผู้ใช้จะแสดงผลเนื้อหาของพวกเขาอย่างไรและที่ไหน

หากคุณยังไม่ทราบว่าชอร์ตโค้ดคืออะไรและมีหน้าตาอย่างไร ชอร์ตโค้ดก็คือข้อความคล้ายโค้ดโบราณที่อยู่ในวงเล็บเหลี่ยม หน้าตาจะประมาณนี้:

อันนี้โดยเฉพาะเรียกว่า embed shortcode และมีมาให้เป็นค่าเริ่มต้นใน WordPress โดยจะฝังวิดีโอจาก URL เข้าไปในเนื้อหาของคุณ เพียงแค่คัดลอกและวางชอร์ตโค้ดด้านบนลงในไซต์ของคุณหากคุณต้องการทดลองใช้งาน

เบื้องหลังการทำงานก็คือ เมื่อ WordPress พบชอร์ตโค้ดในเนื้อหาของคุณ มันจะถูกประมวลผลและแปลงเป็นอย่างอื่น ในกรณีตัวอย่างของเราด้านบน เมื่อใดก็ตามที่ตรวจพบชอร์ตโค้ด

WordPress จะนำ URL ในชอร์ตโค้ดไปตรวจสอบกับผู้ให้บริการเนื้อหาต่างๆ ที่มีอยู่ เมื่อพบแล้ว ก็จะดึงโค้ดฝัง iframe ที่เหมาะสมมาแสดงผลแทน

แล้วปัญหาคืออะไรล่ะ? ฟังดูง่ายมาก แค่ใส่ข้อความสั้นๆ พร้อมวงเล็บก็เสร็จแล้ว

นี่คือที่มาของ Shortcode API..

ชอร์ตโค้ดมากมายก่ายกอง

Shortcode API เปิดโอกาสให้นักพัฒนาสามารถสร้างชอร์ตโค้ดได้เอง ด้วยเหตุนี้ นักพัฒนาจึงสามารถเพิ่มชอร์ตโค้ดของตนเองลงในปลั๊กอินได้

นี่เป็นเรื่องที่ยอดเยี่ยมมาก ตอนนี้เพียงแค่ใช้ตัวอย่างโค้ดสั้นๆ (จึงเป็นที่มาของชื่อ “ชอร์ตโค้ด”) ทั้งผู้เริ่มต้นและผู้ใช้ระดับสูงก็สามารถวางเนื้อหาแทบทุกประเภทตามที่ต้องการได้ทุกที่

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

ปัญหาคือไม่มีพื้นที่ส่วนกลางที่คุณสามารถดูชอร์ตโค้ดทั้งหมดที่มีอยู่ในไซต์ของคุณและวิธีใช้งานได้เลย

บางเจ้าพยายามแก้ปัญหานี้

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

Screen-Shot-2016-06-22-at-11.27.09-AM

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

Screen-Shot-2016-06-22-at-11.28.54-AM

วิธีแก้ปัญหานี้ก็พอใช้ได้ในระดับหนึ่ง อย่างไรก็ตาม แต่ละปลั๊กอินจะแจกแจงเฉพาะชอร์ตโค้ดของตัวเองเท่านั้น ดังนั้นหากแต่ละปลั๊กอินสร้างตัวเลือกชอร์ตโค้ดในรูปแบบของตัวเอง คุณก็ต้องเจอกับช่วงเวลาที่มีตัวเลือกชอร์ตโค้ดหลายตัวปรากฏอยู่บนหน้าจอของคุณ (เรื่องนี้เคยเกิดขึ้นกับฉันมาก่อน)

Screen-Shot-2016-06-22-at-11.22.41-AM

กล่าวอีกนัยหนึ่ง แต่ละปลั๊กอินต่างคนต่างทำและใช้วิธีแก้ปัญหาของตัวเองสำหรับชอร์ตโค้ดของตนเอง ปลั๊กอินบางตัวเพิ่มปุ่มใหม่ข้างปุ่ม “Add Media” หรือเพิ่มปุ่มใหม่เข้าไปข้างใน TinyMCE

ตอนนี้คุณอาจกำลังคิดว่า “ทำไมไม่รวบรวมชอร์ตโค้ดของปลั๊กอินอื่นๆ เข้ามาไว้ในดรอปดาวน์ / ตัวเลือกชอร์ตโค้ดของคุณด้วยล่ะ?” นั่นคือสิ่งที่ฉันคิดเป๊ะเลย แต่พูดง่ายกว่าทำ เดี๋ยวฉันจะอธิบายเหตุผลให้ฟัง แต่ก่อนอื่นเรามาดูว่าทางออกในอุดมคติควรมีหน้าตาเป็นอย่างไร

ทางออกในอุดมคติ

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

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

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

ข้อจำกัด

น่าเสียดายที่ในตอนนี้การทำแบบนั้นค่อนข้างยาก ไม่มีวิธีที่แน่นอนในการรู้รายละเอียดทั้งหมดของชอร์ตโค้ด คุณสามารถดูรายชื่อชอร์ตโค้ดทั้งหมดได้ แต่จะเห็นเฉพาะแท็ก/ชื่อจริงของมันเท่านั้น คุณไม่สามารถรับรายละเอียดเพิ่มเติมเกี่ยวกับมันได้ เช่น รายการแอตทริบิวต์ สิ่งที่มันทำ และประเภทของมัน เช่น สตริง สี หรือตัวเลข และคุณก็ไม่สามารถดูคำอธิบายโดยสังเขปสำหรับแต่ละแอตทริบิวต์ได้เช่นกัน

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

Shortcode API ไม่มีฟังก์ชันรองรับสำหรับการเพิ่มคำอธิบายชอร์ตโค้ด การระบุประเภทของแอตทริบิวต์ หรือคำอธิบายของแอตทริบิวต์ และตราบใดที่ตัว WordPress เองยังไม่ได้เพิ่มพื้นที่ส่วนกลางสำหรับเข้าถึงชอร์ตโค้ด ฉันก็สงสัยว่าฟังก์ชันนี้จะถูกสร้างขึ้นมาหรือไม่

บทสรุป

ในตอนนี้ หน้าที่ในการจัดการชอร์ตโค้ดตกเป็นของนักพัฒนาแต่ละคน เว้นแต่จะมีการพัฒนาวิธีที่เป็นศูนย์กลางขึ้นมาภายใน WordPress คุณก็จะต้องเตรียมพบกับปุ่ม “Add Shortcode” หลายๆ ปุ่มในหน้าหลังบ้านของคุณต่อไป ส่วนเรื่องที่ว่าควรเพิ่มอะไรแบบนี้เข้าไปใน WordPress Core หรือไม่นั้น ก็เป็นอีกหนึ่งการอภิปรายครั้งใหญ่ในตัวเอง

ทางเลือกอื่น

มีปลั๊กอินเพจบิลเดอร์บางตัวที่จัดการเรื่องนี้แตกต่างออกไป แทนที่จะใช้โปรแกรมตรวจหาชอร์ตโค้ด พวกเขากลับมี shortcode mapper ที่ผู้ใช้สามารถป้อนรายละเอียดทุกอย่างของชอร์ตโค้ดได้ด้วยตนเอง เมื่อเสร็จแล้ว มันก็จะพร้อมใช้งานภายในเพจบิลเดอร์ แม้ว่า วิธีนี้จะได้ผล แต่ก็ใช้ได้เฉพาะในไซต์ของคุณเองเท่านั้น

พวกเราที่ Page Builder Sandwich กำลังสร้างบางสิ่งบางอย่างที่หวังว่าจะช่วยแก้ปัญหาปริศนาชอร์ตโค้ดนี้ได้ สมัครรับจดหมายข่าวของเราด้านล่างเพื่อรับการแจ้งเตือนเกี่ยวกับความคืบหน้าของเรา