
ชอร์ตโค้ด (Shortcode) เป็นหนึ่งในจุดเด่นที่สำคัญที่สุดของ WordPress ชอร์ตโค้ดเปรียบเสมือนสะพานเชื่อมระหว่างนักพัฒนากับผู้สร้างเว็บไซต์ ซึ่งช่วยให้ผู้คนสามารถวางชิ้นส่วนเนื้อหาที่ซับซ้อนได้เกือบทุกที่ที่ต้องการ ผู้สร้างปลั๊กอินชอบชอร์ตโค้ดเพราะช่วยเพิ่มความยืดหยุ่นในการที่ผู้ใช้จะแสดงผลเนื้อหาของพวกเขาอย่างไรและที่ไหน
หากคุณยังไม่ทราบว่าชอร์ตโค้ดคืออะไรและมีหน้าตาอย่างไร ชอร์ตโค้ดก็คือข้อความคล้ายโค้ดโบราณที่อยู่ในวงเล็บเหลี่ยม หน้าตาจะประมาณนี้:
อันนี้โดยเฉพาะเรียกว่า embed shortcode และมีมาให้เป็นค่าเริ่มต้นใน WordPress โดยจะฝังวิดีโอจาก URL เข้าไปในเนื้อหาของคุณ เพียงแค่คัดลอกและวางชอร์ตโค้ดด้านบนลงในไซต์ของคุณหากคุณต้องการทดลองใช้งาน
เบื้องหลังการทำงานก็คือ เมื่อ WordPress พบชอร์ตโค้ดในเนื้อหาของคุณ มันจะถูกประมวลผลและแปลงเป็นอย่างอื่น ในกรณีตัวอย่างของเราด้านบน เมื่อใดก็ตามที่ตรวจพบชอร์ตโค้ด
WordPress จะนำ URL ในชอร์ตโค้ดไปตรวจสอบกับผู้ให้บริการเนื้อหาต่างๆ ที่มีอยู่ เมื่อพบแล้ว ก็จะดึงโค้ดฝัง iframe ที่เหมาะสมมาแสดงผลแทน
แล้วปัญหาคืออะไรล่ะ? ฟังดูง่ายมาก แค่ใส่ข้อความสั้นๆ พร้อมวงเล็บก็เสร็จแล้ว
นี่คือที่มาของ Shortcode API..
ชอร์ตโค้ดมากมายก่ายกอง
Shortcode API เปิดโอกาสให้นักพัฒนาสามารถสร้างชอร์ตโค้ดได้เอง ด้วยเหตุนี้ นักพัฒนาจึงสามารถเพิ่มชอร์ตโค้ดของตนเองลงในปลั๊กอินได้
นี่เป็นเรื่องที่ยอดเยี่ยมมาก ตอนนี้เพียงแค่ใช้ตัวอย่างโค้ดสั้นๆ (จึงเป็นที่มาของชื่อ “ชอร์ตโค้ด”) ทั้งผู้เริ่มต้นและผู้ใช้ระดับสูงก็สามารถวางเนื้อหาแทบทุกประเภทตามที่ต้องการได้ทุกที่
โดยค่าเริ่มต้นแล้ว WordPress มีชอร์ตโค้ดเพียงไม่กี่ตัวเท่านั้น จึงง่ายที่จะพิมพ์ออกมาจากความจำเพราะมีอยู่แค่นิดเดียว แต่ถ้าคุณติดตั้งปลั๊กอินเพิ่มไม่กี่ตัว จำนวนชอร์ตโค้ดจะเพิ่มขึ้นเป็นสิบตัวหรือมากกว่านั้นอย่างรวดเร็ว และในบางกรณีอาจมากกว่าร้อยตัวเลยทีเดียว ชอร์ตโค้ดแต่ละตัวมีชุดแอตทริบิวต์และคำแนะนำในการใช้งานเป็นของตัวเอง แต่ละปลั๊กอินมักจะมีเอกสารประกอบบางอย่างที่อธิบายการทำงานของชอร์ตโค้ดทั้งหมดและระบุพารามิเตอร์ทั้งหมดที่มีในแต่ละตัว แต่คุณคงเป็นบ้าแน่ๆ หากพยายามจำชอร์ตโค้ดทั้งหมดพร้อมแอตทริบิวต์ของมัน
ปัญหาคือไม่มีพื้นที่ส่วนกลางที่คุณสามารถดูชอร์ตโค้ดทั้งหมดที่มีอยู่ในไซต์ของคุณและวิธีใช้งานได้เลย
บางเจ้าพยายามแก้ปัญหานี้
ปลั๊กอินบางตัวพยายามแก้ปัญหานี้โดยการแสดงชอร์ตโค้ดทั้งหมดของตนเองในเมนูดรอปดาวน์ที่เข้าถึงได้ง่าย จากนั้นการคลิกที่รายการใดรายการหนึ่งจะพิมพ์ชอร์ตโค้ดออกมา พร้อมด้วยแอตทริบิวต์ที่เป็นไปได้ทั้งหมดสำหรับชอร์ตโค้ดนั้น ไม่จำเป็นต้องจำอีกต่อไป ซึ่งถือเป็นเรื่องดี

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

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

กล่าวอีกนัยหนึ่ง แต่ละปลั๊กอินต่างคนต่างทำและใช้วิธีแก้ปัญหาของตัวเองสำหรับชอร์ตโค้ดของตนเอง ปลั๊กอินบางตัวเพิ่มปุ่มใหม่ข้างปุ่ม “Add Media” หรือเพิ่มปุ่มใหม่เข้าไปข้างใน TinyMCE
ตอนนี้คุณอาจกำลังคิดว่า “ทำไมไม่รวบรวมชอร์ตโค้ดของปลั๊กอินอื่นๆ เข้ามาไว้ในดรอปดาวน์ / ตัวเลือกชอร์ตโค้ดของคุณด้วยล่ะ?” นั่นคือสิ่งที่ฉันคิดเป๊ะเลย แต่พูดง่ายกว่าทำ เดี๋ยวฉันจะอธิบายเหตุผลให้ฟัง แต่ก่อนอื่นเรามาดูว่าทางออกในอุดมคติควรมีหน้าตาเป็นอย่างไร
ทางออกในอุดมคติ
แผนการที่สมบูรณ์แบบคือการสร้างปลั๊กอินที่รวบรวมชอร์ตโค้ดทั้งหมดที่มีอยู่ในไซต์ของคุณ จากนั้นนำเสนอรายการและช่วยคุณกรอกแอตทริบิวต์ทั้งหมด และทุกครั้งที่คุณติดตั้งปลั๊กอินใหม่ ชอร์ตโค้ดที่เพิ่งเพิ่มเข้ามาทั้งหมดก็จะถูกนำเสนอให้คุณเห็นด้วยเช่นกัน
ลองจินตนาการถึงพื้นที่ส่วนกลางที่รวบรวมชอร์ตโค้ดทั้งหมดของคุณไว้เพื่อให้เข้าถึงได้ง่าย ชอร์ตโค้ดแต่ละตัวจะอธิบายว่าทำหน้าที่อะไรและเป็นของปลั๊กอินใด จากนั้นสำหรับแต่ละแอตทริบิวต์ที่มีอยู่ ลองนึกภาพว่าแต่ละรายการจะมีป้ายกำกับ วิธีการเลือกค่าที่เหมาะสม และคำอธิบาย คุณจะเห็นดรอปดาวน์ ตัวเลือกสี ปุ่มตัวเลือก สวิตช์สลับ และอื่นๆ อีกมากมาย
อะไรแบบนี้จะทำให้ชีวิตของเราในฐานะผู้สร้างเว็บไซต์และเนื้อหาง่ายขึ้นมาก ไม่ต้องไปคอยเปิดดูเอกสารต่างๆ หรือส่วนต่างๆ ของหน้าผู้ดูแลระบบอีกต่อไปเพียงเพื่อจะคัดลอกชอร์ตโค้ดที่สร้างไว้สำหรับสไลเดอร์ที่คุณต้องการใช้
ข้อจำกัด
น่าเสียดายที่ในตอนนี้การทำแบบนั้นค่อนข้างยาก ไม่มีวิธีที่แน่นอนในการรู้รายละเอียดทั้งหมดของชอร์ตโค้ด คุณสามารถดูรายชื่อชอร์ตโค้ดทั้งหมดได้ แต่จะเห็นเฉพาะแท็ก/ชื่อจริงของมันเท่านั้น คุณไม่สามารถรับรายละเอียดเพิ่มเติมเกี่ยวกับมันได้ เช่น รายการแอตทริบิวต์ สิ่งที่มันทำ และประเภทของมัน เช่น สตริง สี หรือตัวเลข และคุณก็ไม่สามารถดูคำอธิบายโดยสังเขปสำหรับแต่ละแอตทริบิวต์ได้เช่นกัน
หมายเหตุสำหรับเหล่านักพัฒนา: ใช่แล้ว มีการเพิ่มอาร์กิวเมนต์ที่สามลงในฟังก์ชัน shortcode_atts แต่ไม่ใช่ฟังก์ชันที่จำเป็นต้องใส่ ดังนั้น เว้นแต่นักพัฒนาปลั๊กอินทุกคนในโลกจะนำไปปรับใช้ เราก็ยังคงไม่มีวิธีที่แน่นอนในการระบุแอตทริบิวต์ทั้งหมดของชอร์ตโค้ดอยู่ดี
Shortcode API ไม่มีฟังก์ชันรองรับสำหรับการเพิ่มคำอธิบายชอร์ตโค้ด การระบุประเภทของแอตทริบิวต์ หรือคำอธิบายของแอตทริบิวต์ และตราบใดที่ตัว WordPress เองยังไม่ได้เพิ่มพื้นที่ส่วนกลางสำหรับเข้าถึงชอร์ตโค้ด ฉันก็สงสัยว่าฟังก์ชันนี้จะถูกสร้างขึ้นมาหรือไม่
บทสรุป
ในตอนนี้ หน้าที่ในการจัดการชอร์ตโค้ดตกเป็นของนักพัฒนาแต่ละคน เว้นแต่จะมีการพัฒนาวิธีที่เป็นศูนย์กลางขึ้นมาภายใน WordPress คุณก็จะต้องเตรียมพบกับปุ่ม “Add Shortcode” หลายๆ ปุ่มในหน้าหลังบ้านของคุณต่อไป ส่วนเรื่องที่ว่าควรเพิ่มอะไรแบบนี้เข้าไปใน WordPress Core หรือไม่นั้น ก็เป็นอีกหนึ่งการอภิปรายครั้งใหญ่ในตัวเอง
ทางเลือกอื่น
มีปลั๊กอินเพจบิลเดอร์บางตัวที่จัดการเรื่องนี้แตกต่างออกไป แทนที่จะใช้โปรแกรมตรวจหาชอร์ตโค้ด พวกเขากลับมี shortcode mapper ที่ผู้ใช้สามารถป้อนรายละเอียดทุกอย่างของชอร์ตโค้ดได้ด้วยตนเอง เมื่อเสร็จแล้ว มันก็จะพร้อมใช้งานภายในเพจบิลเดอร์ แม้ว่า วิธีนี้จะได้ผล แต่ก็ใช้ได้เฉพาะในไซต์ของคุณเองเท่านั้น
พวกเราที่ Page Builder Sandwich กำลังสร้างบางสิ่งบางอย่างที่หวังว่าจะช่วยแก้ปัญหาปริศนาชอร์ตโค้ดนี้ได้ สมัครรับจดหมายข่าวของเราด้านล่างเพื่อรับการแจ้งเตือนเกี่ยวกับความคืบหน้าของเรา
ตอนนี้คุณสามารถวางแผนที่ในการออกแบบหน้าเว็บของคุณได้แล้วโดยใช้ Page Builder Sandwich!
หากคุณเพิ่งเริ่มต้นสร้างเว็บไซต์ใหม่ๆ มีโอกาสสูงที่คุณอาจยังไม่คุ้นเคยกับข้อถกเถียงยอดฮิตระหว่าง WordPress.com กับ WordPress.org คุณอาจไม่เคยรู้ด้วยซ้ำว่ามีทั้งสองแบบนี้อยู่ และแต่ละแบบมีข้อดีข้อเสียแตกต่างกันอย่างไร แล้วการถกเถียงครั้งใหญ่ระหว่างการใช้ WordPress.com กับ WordPress.org คืออะไรกันแน่? อีกอันหนึ่งเป็นแค่ของลอกเลียนแบบราคาถูกที่รอวันโดนฟ้องหรือเปล่า?
หากคุณสังเกตเห็น หนึ่งในกฎเหล็กของ WordPress คือการทำให้สิ่งต่างๆ ง่ายขึ้นสำหรับทุกคนอยู่เสมอ ทั้งมือใหม่และนักพัฒนาที่มีประสบการณ์ และหนึ่งในวิธีที่พวกเขาใช้เพื่อให้บรรลุเป้าหมายนี้ก็คือการใช้ชอร์ตโค้ด
ฟังดูค่อนข้างเรียบง่าย คราวนี้ หากคุณไม่เคยได้ยินเกี่ยวกับชอร์ตโค้ดมาก่อนบทความนี้ และคุณไม่รู้ว่าหน้าตาของมันเป็นอย่างไร ชอร์ตโค้ดก็คือข้อความที่ดูคล้ายโค้ดโบราณซึ่งครอบด้วยวงเล็บเหลี่ยมนั่นเอง

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




สิ่งสำคัญประการหนึ่งที่ต้องพิจารณาเมื่อสร้างเว็บไซต์แรกของคุณ ไม่ว่าคุณจะเป็นธุรกิจ ฟรีแลนซ์ หรืออะไรก็ตามและใครก็ตาม ก็คือไม่ใช่ทุกคนที่จะเชี่ยวชาญในภาษาโค้ดและการพัฒนาซอฟต์แวร์ ตัวอย่างเช่น คุณอาจเป็นเชฟที่ต้องการเผยแพร่สูตรอาหารของตนทางออนไลน์ คุณอาจเป็นนักศึกษาปริญญาตรีสาขาวิจิตรศิลป์ที่ต้องการพอร์ตโฟลิโอที่ดูเป็นมืออาชีพ หรือเป็นธุรกิจสตาร์ทอัพที่ต้องการเว็บไซต์เป็นของตัวเอง ไม่ว่าจะเป็นอย่างใดอย่างหนึ่งหรืออะไรก็ตาม ความจริงยังคงอยู่ว่าแม้พวกเราบางคนอาจคุ้นเคยกับพื้นฐานของโค้ด แต่เราไม่ได้เป็นนักพัฒนาเต็มเวลาทุกคน และไม่ใช่ทุกคนที่ต้องการเว็บไซต์จะรู้วิธีสร้างขึ้นมาตั้งแต่ต้น นี่คือจุดที่ WordPress มีประโยชน์ นำมาสู่คำถามที่ว่า: “ทำไมต้องเป็น WordPress?”

มีโอกาสที่คุณอาจจะมาอยู่ที่นี่เพราะได้ยินมาว่า PBS น่าจะเป็น
When I started getting further into software development and WordPress, I noticed that not a lot of page builders I come across with have that “page builder standard” I was looking for: 


In general, one thing that most people tend to overlook is today’s demand for functional design and aesthetics. While not all of us may be aware of the 





Click
Under the
Increase the top and bottom margin by hovering the cursor on the arrow pointing to the margin you want to adjust. When the cursor turns into a double-headed arrow, click and drag down to your desired margin height. Its important to put Whitespace (also called Negative Space) between elements in a composition to create flow and help draw focus to the content on the page.
To add a background image with text and element overlays, simply click the
Tip #1: For Premium users, using the
Type in the message for your header. See
You can also add buttons by clicking on