ใครที่ใช้ Page Builder อย่าง Elementor, Divi หรือ Bricks ส่วนใหญ่จะมี Widgets ที่มาพร้อมกับปลั๊กอินหรือธีมแบบจัดเต็ม ส่วนใครที่ใช้ธีมอื่นๆ บางทีพวก Widgets หรือของที่จะมาสร้างสรรค์เติมแต่งเว็บช่างน้อยเหลือเกิน อย่าเพิ่งน้อยใจนะครับ ลองปลั๊กอิน Shortcodes Ultimate ดูก่อน เผื่อจะได้อะไรมาแต่งเว็บให้ดูดีขึ้นได้ครับ
Shortcodes Ultimate คืออะไร
Shortcodes Ultimate คือปลั๊กอินที่รวมเอาคอลเลกชันพวกองค์ประกอบภาพและการทำงานต่างๆ ที่สามารถใช้ในตัวแก้ไขโพสต์ วิดเจ็ตข้อความ หรือแม้แต่ในไฟล์เทมเพลต การใช้ Shortcodes Ultimate ช่วยให้เราสร้างแท็บ ปุ่ม กล่อง แถบเลื่อนและภาพหมุน วิดีโอแบบตอบสนอง และอื่นๆ อีกมากมายได้อย่างง่ายดาย อะไรเหมือนใช้ Widgets Addons เสริมต่างๆ ใน Elementor ครับ แต่ปลั๊กอินตัวนี้จะมาในรูปแบบของการใช้ Shortcode ที่แปะตรงไหนก็แสดงผลตรงนั้นได้เลย เท่ากับว่ามันสามารถทำงานกับธีมไหนก็ได้ครับ
Shortcodes Ultimate เป็นปลั๊กอินของ Vova Anokhin มียอดติดตั้ง Active มากกว่า 600,000 ครั้ง และมีการโหวตในระดับ 5/5 ดาวเต็ม เรียกว่าสร้างความประทับใจให้แก่ผู้ใช้เป็นจำนวนมากครับ
ฟีเจอร์สำคัญ
– มี Shortcodes สวยๆ ให้เลือกใช้ถึง 50 แบบ
– ใช้วิธีการแทรก Shortcode ใช้งานง่าย
– รองรับ Gutenberg
– รองรับทุกธีม
– แสดงผลแบบ Responsive design
– มีบทความสอนการใช้งาน
– สามารถปรับแต่ง CSS ได้
– สามารถปรับแต่ง widget ได้
– รองรับการแปลภาษา
– สนับสนุน RTL
– เป็นมิตรกับนักพัฒนาเว็บ
Shortcodes ที่ใช้ได้
มีอยู่ประมาณ 50 รายการด้วยกันครับ เรียกว่ามีของน่าใช้เพียบเลย
Heading, Spoiler, Accordion, Divider, Pullquote
Highlight, Label, Quote, Dropcap, Columns
List, Service, Box, Note, Lightbox
Tooltip, Private, Audio, Video, Table
Permalink, Members, Guests, RSS, Menu
Sub pages, Siblings, Document, Google map, Image carousel
Slider, Carousel, Gallery, Posts, Animation
Dummy text, Dummy image, User data, Post data, Template
QR code, Tabs, Spacer, Button, Expand
YouTube, Vimeo, Dailymotion, Meta data, Scheduler
การติดตั้งและการตั้งค่าเบื้องต้น
ไปที่เมนู Plugins ค้นหาคำว่า “Shortcodes Ultimate” จากนั้นกดปุ่ม Install และ Activate ได้เลยครับ
หลังจาก Activate เรียบร้อย ลองกดที่ปุ่ม View All Shortcodes ดูสักหน่อย
กลุ่ม Content
กลุ่ม Box
กลุ่ม Box และ Gallery
กลุ่ม Developer
กลุ่ม Other
กลุ่ม Deprecated
อันนี้สำหรับผู้ที่ใช้เวอร์ชั่น Pro ครับ ก็จะได้อะไรพิเศษขึ้นมาหน่อย
การตั้งค่าเบื้องต้น
ไปที่เมนู Shortcodes > Settings
Custom CSS Code
สามารถเพิ่มโค้ด CSS สำหรับ Shortcodes ได้ตามต้องการ สไตล์เหล่านี้จะมีลำดับความสำคัญสูงกว่าเมื่อเทียบกับสไตล์ดั้งเดิมของ Shortcodes เราสามารถใช้ตัวแปรในโค้ด CSS ได้ โดยตัวแปรเหล่านี้จะถูกแทนที่ด้วยค่าตามลำดับ
ตัวแปรที่ใช้ได้
%home_url% ตัวแปรสำหรับ URL homepage
%theme_url% ตัวแปรสำหรับธีมที่ใช้อยู่
%plugin_url% ตัวแปรสำหรับไดเร็คทอรี่ปลั๊กอิน
ตัวอย่างการใช้ CSS แบบมีตัวแปร
.my-custom-spoiler .su-spoiler-title {
background-image: url( ‘%theme_url%/images/custom-spoiler.png’ );
}
Supported blocks
กำหนดการแสดงปุ่มแทรก Shortcode ที่ใดบ้าง เช่น Paragraph, Shortcode หรือ Classic Editor
Enable shortcodes in
กำหนดให้ใช้ Shortcodes ในที่ที่ถูกปิดกั้นตามค่าปกติ เช่น Categories, Tags, Custom Toxonomies) ค่าปกติคือ Term descriptions ส่วนอีกตัวเลือกคือ Text widgets
ทดลองใช้งาน
สร้าง Page สำหรับทดสอบการใช้งาน จากนั้นลองเพิ่ม Shortcode
กดที่ไอคอน Shortcode Ultimate ได้เลยครับ
ปลั๊กอินจะแสดงรายการ Shortcodes ที่เราใช้ได้ แต่ตรงด้านล่างที่มีไอคอนสีส้มๆ เวอร์ชั่นฟรีใช้ไม่ได้นะจ๊ะ กลุ่มนั้นสำหรับผู้ที่ใช้เวอร์ชั่น Pro
เลือกที่ Heading
จะแสดงส่วนของการกำหนดค่าของ Heading ออกมาครับ
ด้านล่างจะใส่ข้อความสำหรับหัวข้อ Heading ได้ ให้ลองตั้งค่าต่างๆ จากนั้นกด Insert Shortcode ได้เลย
ตัว Block editor จะแสดงให้เห็นคำสั่ง Shortcode แบบนี้ครับ
ถ้าของใครมีการตั้งค่าอื่นๆ ด้วย ก็จะแสดงประมาณนี้
ลองกด Preview ดู
ทีนี้เราจะลองเพิ่มปุ่ม ให้กดไอคอน + เพื่อเพิ่ม Shortcode อีกครั้ง
กดที่ไอคอน Shortcode Ultimate เหมือนเดิม
คราวนี้เลือกเป็น Button เพื่อเพิ่มปุ่ม
ตั้งค่าตามต้องการได้เลยครับ
ใส่ข้อความที่จะให้แสดงบนปุ่ม จากนั้นกด Insert Shortcode
Shortcode ของปุ่มจะแสดงคำสั่งประมาณนี้ครับ
เมื่อลอง Preview หน้าเว็บใหม่ จะได้ปุ่มที่เราเพิ่งเพิ่มเข้าไปเมื่อครู่
สรุป
ใครที่มองหาตัวช่วยในการสร้างสรรค์เว็บที่ง่ายและรวดเร็วและใช้ได้กับทุกธีม ลองหา Shortcode Ultimate มาลงดูนะครับ เผื่อจะช่วยให้เพื่อนๆ ทำงานได้ไวขึ้น ที่สำคัญใช้ฟรีครับ
Related Posts
