Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

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

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

ในบทช่วยสอนนี้ฉันจะแสดงวิธีเพิ่มอินเทอร์เฟซรหัสย่อบน WordPress เพื่อลดความซับซ้อนในการเพิ่มบทความและหน้า

Shortcake คืออะไร?

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

ตัวอย่างเช่นด้วยธีม WordPress พื้นฐานหากมีรหัสย่อให้แทรกปุ่มผู้ใช้อาจต้องกรอกพารามิเตอร์ประมาณห้าตัวสำหรับรหัสย่อดังนี้:

[url button = "http://example.com" title = "เรียนรู้เพิ่มเติม" color = "purple" target = "newwindow"]

นี่คือจุดที่ Shortcake เข้ามาซึ่งจะช่วยให้คุณจัดการรหัสย่อได้ดีขึ้น

เบเกอรี่ Shortcake ปลั๊กอิน

ขั้นตอนแรก

บทช่วยสอนนี้มีไว้สำหรับผู้ใช้ที่ยังไม่คุ้นเคยกับการพัฒนา WordPress ผู้ใช้ที่ต้องการปรับแต่งธีมของพวกเขาจะพบว่าบทช่วยสอนนี้น่าสนใจ

สิ่งที่คุณต้องทำอันดับแรกคือติดตั้งและเปิดใช้งานส่วนขยาย Shortcace (ย่อ IU).

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

add_shortcode ('cta-button', 'cta_button_shortcode'); ฟังก์ชัน cta_button_shortcode ($ atts) {extract (shortcode_atts (array ('title' => 'Title', 'url' => ''), $ atts)); กลับ ' ' $ title. ' '; }

คุณอาจต้องใช้โค้ด CSS สำหรับปุ่ม

.cta ปุ่ม {padding: 10px; font-size: 18px; ชายแดน: ของแข็ง 1px # fff; border-radius: 7px; สี: # fff; สีพื้นหลัง: #50A7EC; }

นี่คือวิธีแสดงปุ่มดังกล่าวผู้ใช้จะต้องพิมพ์รหัสย่อต่อไปนี้:

[cta-button title = »ดาวน์โหลดเดี๋ยวนี้» url = » http://example.com »]

ตอนนี้คุณมีรหัสย่อที่ยอมรับพารามิเตอร์เราจะสร้างส่วนต่อประสานให้กับมัน

วิธีการลงทะเบียนติดต่อไปยังรหัสกับ ShortCacke

API ของ Shortcake ให้คุณลงทะเบียนรหัสย่อในส่วนต่อประสานผู้ใช้ คุณต้องเขียน รหัสย่อยอมรับแอตทริบิวต์ใด ประเภทของฟิลด์ และรูปแบบโพสต์ใดที่จะแสดง UI (ส่วนต่อประสานผู้ใช้)

นี่คือตัวอย่างของโค้ดที่คุณสามารถใช้เพื่อลงทะเบียนรหัสย่อในอินเทอร์เฟซผู้ใช้ Shortcake

shortcode_ui_register_for_shortcode (/ ** รหัสย่อของคุณ * / 'cta-button', / ** ป้ายกำกับของรหัสย่อและไอคอน * / array (/ ** จำเป็นต้องใช้ป้ายกำกับ * / 'label' => 'เพิ่มปุ่ม', / ** Icone. src หรือ dashicons- $ icon. * / 'ListItemImage' => 'dashicons-lightbulb', / ** Shortcode Attributes * / 'attrs' => array (/ ** * ฟิลด์ทั้งหมดที่จะรับค่า ผู้ใช้จะกำหนดอาร์เรย์ของตนเองดังต่อไปนี้ * รหัสย่อนี้ยอมรับสองพารามิเตอร์คือ url และชื่อเรื่อง * เราจะกำหนด UI สำหรับหัวเรื่อง * / array (/ ** ป้ายกำกับนี้จะแสดงบนอินเทอร์เฟซผู้ใช้ * / 'label' => 'Title', / ** นี่คือแอตทริบิวต์ที่ใช้สำหรับรหัสย่อ * / 'attr' => 'title', / ** กำหนดประเภทของฟิลด์ได้รับการสนับสนุน: text , ช่องทำเครื่องหมาย, textarea, วิทยุ, เลือก, อีเมล, url, หมายเลขและวันที่ * / 'type' => 'text', / ** Add description 'description' => 'Description',), / ** เรา ตอนนี้ให้กำหนด UI สำหรับฟิลด์ลิงก์ * / array ('label' => 'URL', 'attr' => 'url', 'type' = > 'text', 'description' => 'Full URL',),),), / ** รูปแบบโพสต์ที่จะแสดง UI * / 'post_type' => array ('post', 'page' ),));

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

insertpostelement

ค้นพบเครื่องมือที่ดีที่สุดสำหรับเว็บไซต์ของคุณ

ดาวน์โหลดปลั๊กอินและธีม WordPress ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

เมื่อคลิกที่ไอคอนคุณจะเห็น UI ที่ให้คุณปรับแต่งรหัสย่อ

shortcodeui

วิธีการเพิ่มรหัสที่มีหลายสาขา

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

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

add_shortcode ('mybutton', 'my_button_shortcode'); ฟังก์ชัน my_button_shortcode ($ atts) {extract (shortcode_atts (array ('color' => 'blue', 'title' => 'Title', 'url' => ''), $ atts)); กลับ ' ' $ title. ' '; }

เนื่องจากรหัสย่อของเราแสดงปุ่มที่มีสีต่างกันเราจะต้องอัปเดตโค้ด CSS ของเราด้วย

.mybutton {padding: 10px; font-size: 18px; ชายแดน: ของแข็ง 1px # fff; border-radius: 7px; สี: # fff; } .blue ปุ่ม {สีพื้นหลัง: #50A7EC; } .orange ปุ่ม {สีพื้นหลัง: #FF7B00; } เขียวปุ่ม {สีพื้นหลัง: #29B577; }

นี่คือลักษณะของปุ่มนี้

ปุ่มที่มีสีสันย่อ

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

shortcode_ui_register_for_shortcode (/ ** หมายเลขอ้างอิงรหัสย่อของคุณ * / 'mybutton', / ** ป้ายกำกับ Shortcode และไอคอนของคุณ * / array (/ ** ป้ายกำกับสำหรับส่วนติดต่อผู้ใช้แบบย่อส่วนนี้จำเป็น ปุ่มสีสันสดใส ', / ** ไอคอนหรือไฟล์แนบรูปภาพสำหรับรหัสย่อไม่บังคับ. src หรือ dashicons- $ icon. * /' listItemImage '=>' dashicons-flag ', / ** แอตทริบิวต์รหัสย่อ * /' attrs '=> อาร์เรย์ (/ ** * แต่ละแอตทริบิวต์ที่ยอมรับการป้อนข้อมูลของผู้ใช้จะมีอาร์เรย์ของตัวเองที่กำหนดไว้เช่นนี้ * รหัสย่อของเรายอมรับพารามิเตอร์หรือแอตทริบิวต์สองรายการชื่อเรื่องและ URL * ก่อนอื่นให้กำหนด UI สำหรับฟิลด์หัวเรื่อง * / array (/ ** นี้ ป้ายกำกับจะปรากฏในส่วนติดต่อผู้ใช้ * / 'label' => 'Title', / ** นี่คือ Attr จริงที่ใช้ในรหัสที่ใช้สำหรับรหัสย่อ * / 'attr' => 'title', / ** กำหนดประเภทการป้อนข้อมูล ประเภทที่รองรับ ได้แก่ ข้อความช่องทำเครื่องหมายพื้นที่ข้อความวิทยุเลือกอีเมล url หมายเลขและวันที่ * / 'Type' => 'text', / ** เพิ่มคำอธิบายที่เป็นประโยชน์สำหรับผู้ใช้ * / 'description' => ' กรุณาใส่ข้อความปุ่ม ',), / ** ตอนนี้เรา จะกำหนด UI สำหรับช่อง URL * / array ('label' => 'URL', 'attr' => 'url', 'type' => 'text', 'description' => 'Full URL',), / ** สุดท้ายเราจะกำหนด UI สำหรับ Color Selection * / array ('label' => 'Color', 'attr' => 'color', / ** เราจะใช้ฟิลด์ที่เลือกแทนข้อความ * / 'type' => 'select', 'options' => array ('blue' => 'Blue', 'orange' => 'Orange', 'green' => 'Green',),),), / ** คุณ สามารถเลือกประเภทโพสต์ที่จะแสดงรหัสย่อ UI * / 'post_type' => array ('post', 'page'),));

ดาวน์โหลดเครื่องมือมากกว่า 11 ล้านรายการ

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

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

postelements

เมื่อคลิกที่รหัสย่อใหม่อินเทอร์เฟซการปรับแต่งรหัสย่อจะปรากฏขึ้นและคุณสามารถระบุค่าได้

colorui

สำหรับบทช่วยสอนนี้ หวังว่าจะช่วยให้คุณสร้างอินเทอร์เฟซที่ดีขึ้นสำหรับรหัสย่อบน WordPress สวัสดีปีใหม่!

%d บล็อกเกอร์ชอบหน้านี้: