คุณต้องการเรียนรู้วิธีสร้างรหัสย่อใน WordPress หรือไม่?
การเรียนรู้วิธีสร้างรหัสย่อใน WordPress เป็นวิธีที่มีประสิทธิภาพในการปรับแต่งโพสต์และเพจของคุณ อย่างไรก็ตาม หากคุณยังใหม่ต่อกระบวนการนี้ คุณอาจพบว่ามันยากที่จะเข้าใจวิธีใช้คุณลักษณะดังกล่าวบนเว็บไซต์ของคุณ
นั่นเป็นเหตุผลที่เราได้รวบรวมคู่มือเพื่อช่วยคุณในการเริ่มต้น เมื่อพิจารณาว่ารหัสย่อทำงานอย่างไรและใช้งานอย่างไรให้มีประสิทธิภาพ คุณสามารถเริ่มปรับแต่งเนื้อหาตามที่คุณต้องการโดยไม่ต้องใช้ปลั๊กอินเพิ่มเติม
ในบทความนี้ เราจะพูดถึงรหัสย่อของ WordPress และเหตุผลที่คุณอาจพิจารณาใช้ จากนั้นเราจะแสดงวิธีการสร้างของคุณเอง
แต่ก่อนหน้านี้หากคุณไม่เคยติดตั้ง WordPress ให้ค้นพบ วิธีการติดตั้งขั้นตอน 7 บล็อก WordPress et วิธีการหาติดตั้งและเปิดใช้งานธีมเวิร์ดเพรสบนบล็อกของคุณ
จากนั้นกลับไปที่สาเหตุที่เราอยู่ที่นี่
รหัสย่อของ WordPress คืออะไร?
รหัสย่อของ WordPress ทำหน้าที่เป็นทางลัดที่ช่วยให้คุณสามารถฝังองค์ประกอบลงในบทความหรือหน้าได้อย่างรวดเร็ว เหล่านี้มักจะเป็นโค้ดบรรทัดเดียวที่อยู่ในวงเล็บเหลี่ยม ตัวอย่างเช่น :
[exemplecodehortcode]
รหัสนี้จะแสดงคุณลักษณะที่กำหนดไว้ล่วงหน้าที่ส่วนหน้าของเว็บไซต์ของคุณ
WordPress แนะนำรหัสย่อครั้งแรก ด้วยการปล่อย รหัสย่อ API. ซึ่งทำให้ผู้ใช้สามารถเพิ่มองค์ประกอบที่น่าสนใจให้กับโพสต์และเพจของตนได้ง่าย เช่น Google Maps หรือปุ่ม "ถูกใจ" ของ Facebook
มีอยู่ใน WordPress ค่าเริ่มต้นt หกรหัสย่อ :
- คำอธิบายภาพ: ตัดคำบรรยายรอบๆ เนื้อหา
- เฉลียง : แสดงแกลเลอรี่ภาพ
- เสียง: ฝังและเล่นไฟล์เสียง
- วิดีโอ : ฝังและเล่นไฟล์วิดีโอ
- เพลย์ลิส : แสดงคอลเลกชันของไฟล์เสียงหรือวิดีโอ
- ฝัง : ล้อมองค์ประกอบแบบอินไลน์
นอกจากนี้ คุณยังจะพบกับการจัดรูปแบบรหัสย่อพื้นฐานสองประเภท: self-closing
et enclosing
.
รหัสย่อ self-closing
สามารถยืนได้ด้วยตัวเองและไม่ต้องการแท็กปิด
ในขณะเดียวกัน enclosing
ล้อมรอบเนื้อหาที่คุณต้องการแก้ไขและบังคับให้คุณปิดแท็กด้วยตนเอง ตัวอย่างเช่น คุณสามารถฝังวิดีโอ YouTube โดยการตัด URL ระหว่างแท็ก embed
et /embed
:
ตัวอย่างเช่น สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้:
บางส่วนของ ปลั๊กอิน WordPress ที่ดีที่สุด มาพร้อมกับรหัสย่อของตัวเอง ตัวอย่างเช่น แบบฟอร์ม WP et ติดต่อ 7 แบบฟอร์ม มีรหัสย่อที่ให้คุณฝังได้อย่างรวดเร็ว แบบฟอร์มติดต่อ ในโพสต์หรือเพจ คุณยังสามารถใช้ปลั๊กอินเช่น MaxButtons เพื่อเพิ่มรหัสย่อของปุ่มทุกที่ที่คุณต้องการบนเว็บไซต์ของคุณ
ทำไมคุณจึงควรพิจารณาใช้รหัสย่อของ WordPress?
มีหลายสาเหตุที่คุณสามารถใช้รหัสย่อของ WordPress ได้ ตัวอย่างเช่น ง่ายกว่าและเร็วกว่าการเรียนรู้และเขียนโค้ดยาวๆ ใน HTML นอกจากนี้ยังช่วยให้คุณรักษาเนื้อหาของคุณให้สะอาดและเข้าถึงได้
คุณสามารถใช้รหัสย่อเพื่อทำให้คุณลักษณะบางอย่างที่คุณใช้ซ้ำๆ เป็นแบบอัตโนมัติได้ ตัวอย่างเช่น หากคุณใช้ปุ่ม คำกระตุ้นการตัดสินใจ (CTA) ในแต่ละบทความของคุณ การจัดเตรียมรหัสย่อให้พร้อมอาจเป็นวิธีแก้ปัญหาที่สะดวกและรวดเร็ว
ควรกล่าวไว้ว่า บรรณาธิการ Gutenberg ทำงานในลักษณะเดียวกันโดยอาศัยการใช้รหัสย่อ อนุญาตให้ผู้ใช้ WordPress เพิ่มคุณสมบัติเชิงโต้ตอบหลายอย่างผ่านการใช้บล็อก
วิธีการดังกล่าวเหมาะสำหรับผู้เริ่มต้นใช้งานมากกว่ามาก เนื่องจากคุณสามารถเพิ่มเนื้อหาบน UI ได้โดยตรง อย่างไรก็ตาม ตัวแก้ไขบล็อกของ WordPress ยังคงมีข้อจำกัดในสิ่งที่นำเสนอ โชคดีมีบล็อค รหัสผู้ใช้ซึ่งช่วยให้คุณสามารถเพิ่มเนื้อหาที่กำหนดเองลงในเพจของคุณได้
วิธีสร้างรหัสย่อใน WordPress
หากคุณมีความรู้ด้านการเขียนโปรแกรมอยู่แล้ว คุณสามารถสร้างรหัสย่อของคุณเองได้ ซึ่งจะช่วยให้คุณควบคุมรูปลักษณ์และการทำงานของเว็บไซต์ของคุณได้อย่างเต็มที่
มาดูวิธีสร้างรหัสย่อ WordPress แบบกำหนดเอง ในบทช่วยสอนนี้ เราจะเพิ่มลิงก์โซเชียลมีเดียไปยังบทความเป็นตัวอย่าง
ขั้นตอนที่ 1 – สร้างไฟล์ธีมใหม่
ก่อนเริ่มต้น ทางที่ดีควร สำรองข้อมูลเว็บไซต์ WordPress ของคุณอย่างสมบูรณ์. คุณจะต้องสร้างไฟล์แยกต่างหากสำหรับรหัสย่อที่กำหนดเองนอกไฟล์ functions.php ของคุณ ธีม WordPress. วิธีนี้จะช่วยแก้ปัญหาทางเลือกในกรณีที่มีสิ่งผิดปกติเกิดขึ้น
คุณสามารถใช้ไคลเอนต์ FTP (File Transfer Protocol) เช่น FileZilla เพื่อเข้าถึงไฟล์ธีมของเว็บไซต์ของคุณ เมื่อเข้าสู่ระบบเว็บไซต์ของคุณแล้ว ให้ไปที่ wp-content> ธีม และค้นหาโฟลเดอร์ธีมปัจจุบันของคุณ ในตัวอย่างของเรา นี่จะเป็น นกฮูก:
เปิดโฟลเดอร์ของคุณ ธีม WordPress, คลิกขวาที่มันแล้วกด สร้างไฟล์ใหม่.
ตั้งชื่อไฟล์ใหม่ของคุณ custom-shortcodes.php จากนั้นคลิก OK. จากนั้นคุณสามารถแก้ไขได้โดยคลิกขวาที่ไฟล์แล้วเลือกตัวเลือก ดู/แก้ไข :
การดำเนินการนี้จะเปิดไฟล์ในตัวแก้ไขข้อความเริ่มต้นของคุณ จากนั้นคุณเพียงแค่ต้องเพิ่มบล็อกของรหัสต่อไปนี้:
<?php ?>
เพื่อให้แน่ใจว่าไฟล์ใหม่ของคุณจะถูกตีความว่าเป็น PHP ซึ่งเป็นภาษาสคริปต์ที่ WordPress สร้างขึ้น
จากนั้นคุณสามารถบันทึกการเปลี่ยนแปลงและปิดไฟล์ได้ ตรวจสอบให้แน่ใจว่าได้เลือกช่องต่อไปนี้เพื่อให้แน่ใจว่าจะได้รับการอัปเดตบนเซิร์ฟเวอร์และนำไปใช้กับเว็บไซต์ของคุณ:
จากนั้นเปิดไฟล์ functions.php ในโฟลเดอร์ธีมเดียวกัน และเพิ่มบรรทัดโค้ดต่อไปนี้ที่ด้านล่างของเอกสาร:
include('
shortcodes-personnalises
.php');
สิ่งนี้จะบอกระบบให้รวมการเปลี่ยนแปลงใดๆ ที่คุณทำกับไฟล์ custom-shortcodes.php ใน functions.php ในขณะที่อนุญาตให้คุณแยกพวกเขา เมื่อคุณพร้อมแล้ว ให้บันทึกการเปลี่ยนแปลงและปิดไฟล์
ขั้นตอนที่ 2 - สร้างฟังก์ชันรหัสย่อ
ถัดไป คุณจะต้องสร้างฟังก์ชันชอร์ตโค้ด โดยสั่งว่าต้องทำอย่างไร เลือกตัวเลือกอีกครั้ง ดู/แก้ไข ของไฟล์ของคุณ custom-shortcodes.php. ใช้ข้อมูลโค้ดต่อไปนี้เพื่อเพิ่มการดำเนินการเพื่อขอฟังก์ชันของคุณไปที่:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}
ถัดไป คุณจะต้องเพิ่มฟังก์ชันเรียกกลับ ซึ่งจะทำงานเมื่อเปิดใช้งานการดำเนินการของ hook การเพิ่มบรรทัดของโค้ดต่อไปนี้โดยตรงต่อจากที่กล่าวไว้ข้างต้นจะบอก WordPress ว่าฟังก์ชันของคุณคือรหัสย่อ:
add_shortcode('sabonner', 'subscribe_link');
เมื่อคุณสร้างรหัสย่อโดยใช้ฟังก์ชัน add_shortcode
คุณกำหนดแท็กรหัสย่อ “ ($tag)
" และเบ็ดฟังก์ชันที่สอดคล้องกัน " ($func)
ซึ่งจะทำงานทุกครั้งที่ใช้ทางลัด
กล่าวอีกนัยหนึ่งหากแท็กรหัสย่อคือ [สมัครสมาชิก] แสดงว่า hook 'subscribe_link' เปลี่ยนเส้นทางผู้เยี่ยมชมไปยัง URL ที่ให้มา
ดังนั้นรหัสทั้งหมดที่คุณใช้ในไฟล์ของคุณ shortcodes-personnalises.php
จะมีลักษณะดังนี้:
ควรสังเกตว่าเมื่อตั้งชื่อแท็ก คุณควรใช้อักษรตัวพิมพ์เล็กเท่านั้น แม้ว่าจะใช้ขีดล่างได้ก็ตาม ก็สำคัญเช่นกัน หลีกเลี่ยงการใช้ยัติภังค์เนื่องจากอาจรบกวนรหัสย่ออื่นๆ
ขั้นตอนที่ 3 – เพิ่มรหัสย่อปิดตัวเองไปยังเว็บไซต์
ตอนนี้คุณสามารถทดสอบรหัสเริ่มต้นของคุณเป็นรหัสย่อแบบปิดตัวเองบนไซต์ WordPress ของคุณได้ เมื่อใช้ตัวแก้ไขบล็อกของ WordPress คุณสามารถแทรกแท็ก [subscribe] ลงในโพสต์ได้โดยตรง:
ซึ่งจะแสดงเนื้อหาต่อไปนี้แก่ผู้เยี่ยมชมเว็บไซต์ของคุณ:
หากคุณพอใจกับรหัสย่อนี้ คุณไม่จำเป็นต้องดำเนินการใดๆ อย่างไรก็ตาม หากคุณต้องการปรับแต่ง คุณสามารถข้ามไปยังขั้นตอนถัดไปได้
ขั้นตอนที่ 4 - เพิ่มพารามิเตอร์ให้กับรหัสย่อ
คุณสามารถปรับรหัสย่อ "ติดตาม" สำหรับฟังก์ชันเพิ่มเติมเพื่อแสดงลิงก์โซเชียลมีเดียอื่นๆ คุณสามารถทำได้โดยเพิ่มพารามิเตอร์เพื่อแก้ไข URL
เท เพิ่มคุณสมบัติการจัดการคุณต้องเปิดไฟล์ custom-shortcodes.php และเพิ่มรหัสต่อไปนี้:
function subscribe_link_att($atts) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');
ซึ่งจะช่วยให้คุณสามารถปรับแต่งลิงก์ในแท็กรหัสย่อของคุณเพื่อเพิ่มลงในโปรแกรมแก้ไข Gutenberg คุณสามารถวางทับโค้ดก่อนหน้าในไฟล์ได้ กำหนดเอง shortcodes.php. ควรมีลักษณะดังนี้:
การเพิ่ม shortcode_atts() ฟังก์ชั่น จะรวมแอตทริบิวต์ผู้ใช้กับแอตทริบิวต์ที่รู้จักทั้งหมด และข้อมูลใดๆ ที่ขาดหายไปจะถูกแทนที่ด้วยค่าเริ่มต้น เมื่อคุณพร้อมแล้ว ให้บันทึกการเปลี่ยนแปลงและปิดไฟล์
ขั้นตอนที่ 5 - ทดสอบการตั้งค่า
ตอนนี้คุณสามารถทดสอบรหัสย่อที่อัปเดตใน WordPress Block Editor ในตัวอย่างของเรา เรากำลังทดสอบลิงก์ Twitter และ Facebook ด้วยรหัสย่อต่อไปนี้:
[ลิงค์สมัคร='https://www.facebook.com/live.blogpascher']Facebook[/subscribe]
[ลิงค์สมัคร='https://twitter.com/BlogPasCher']Twitter[/subscribe]
สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ที่ส่วนหน้า:
รหัสย่อแบบปิดตัวเองนี้แสดง URL โดยตรงของโปรไฟล์โซเชียลของคุณต่อผู้เยี่ยมชม อย่างไรก็ตาม คุณอาจต้องการให้คุณลักษณะนี้ดูขัดเกลาเล็กน้อย
ตัวอย่างเช่น คุณจะสามารถสร้างเวอร์ชันที่แนบมาซึ่งช่วยให้คุณปรับแต่ง anchor text ที่แสดงต่อผู้ใช้ได้อย่างเต็มที่เมื่อพวกเขากำลังจะคลิก เราจะแสดงวิธีการดำเนินการในขั้นตอนต่อไป
ขั้นตอนที่ 6 – สร้างรหัสย่อที่แนบมา
รหัสย่อที่แนบมาจะถูกจัดรูปแบบเหมือนกับตัวอย่างการปิดอัตโนมัติก่อนหน้านี้ อย่างไรก็ตาม จะมีพารามิเตอร์เพิ่มเติมสำหรับฟังก์ชัน
ก่อนอื่นคุณจะต้องเพิ่ม $content = null
ซึ่งระบุฟังก์ชันนี้เป็นรหัสย่อที่ปิดล้อม จากนั้นคุณสามารถเพิ่ม do_shortcode
จาก WordPress ซึ่งจะค้นหาเนื้อหาสำหรับรหัสย่อ
ในไฟล์ custom-shortcodes.phpให้เพิ่มรหัสย่อที่ล้อมรอบใหม่:
function subscribe_link_att($atts, $content = null) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
$content = do_shortcode($content);
return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');
เมื่อคุณพร้อม ไฟล์ของคุณ custom-shortcodes.php ควรมีลักษณะดังนี้:
รหัสก่อนหน้ามีแอตทริบิวต์ " สไตล์ " เพิ่มเติม ซึ่งจะเปลี่ยน anchor text เป็นสีน้ำเงิน อย่าลืมบันทึกการเปลี่ยนแปลงของคุณเมื่อคุณทำเสร็จแล้ว
ขั้นตอนที่ 7 – เพิ่มรหัสย่อที่แนบมากับเว็บไซต์
ตอนนี้คุณสามารถแทรกรหัสย่อของคุณในตัวแก้ไขบล็อกของ WordPress เพื่อดูผลลัพธ์สุดท้าย:
ดังที่คุณสังเกตเห็น คุณสามารถเปลี่ยน URL ของหน้าโซเชียลมีเดียและ anchor text ที่แสดงต่อผู้เข้าชมได้อย่างง่ายดายโดยใช้รหัสย่อของ wrapper ในกรณีนี้เราเลือก "เฟสบุ๊ค" et "ทวิตเตอร์" :
ที่นั่น ! ตอนนี้คุณได้สร้างรหัสย่อที่กำหนดเองสำหรับลิงก์การสมัครรับข้อมูลในหน้าและโพสต์ของคุณแล้ว โปรดทราบว่าขั้นตอนทั้งหมดที่กล่าวมาข้างต้นสามารถแก้ไขได้เพื่อสร้างองค์ประกอบต่างๆ โดยใช้ฟังก์ชัน WordPress ย่อ.
การเพิ่มฟังก์ชันเพิ่มเติมให้กับเว็บไซต์ WordPress ของคุณนั้นง่ายกว่ามากด้วยรหัสย่อ คุณสามารถใช้สิ่งเหล่านี้เพื่อปรับแต่งเนื้อหาที่มีอยู่ของคุณและเพิ่มคุณสมบัติแบบโต้ตอบ เช่น แบบฟอร์มการติดต่อ แกลเลอรี่ภาพ หรือลิงก์การสมัคร
แหล่งข้อมูลอื่น ๆ ที่แนะนำ
นอกจากนี้เรายังขอเชิญคุณให้ศึกษาข้อมูลด้านล่างเพื่อเพิ่มเติมในส่วนที่จับและควบคุมของเว็บไซต์และบล็อกของคุณ
- วิธีสร้างปุ่มลอยด้วยดัชนี Z ด้วย Elementor
- เมื่อไหร่และวิธีการติดตั้ง WordPress ในไดเรกทอรีย่อย
- วิธีสร้างปลั๊กอิน WordPress บล็อก Gutenberg อย่างง่าย
- วิธีเพิ่มแบบอักษรที่กำหนดเองลงในเว็บไซต์ WordPress
สรุป
ในบทความนี้ เราได้เรียนรู้วิธีสร้างรหัสย่อของคุณเองใน WordPress หากคุณมีข้อกังวลหรือข้อเสนอแนะใด ๆ โปรดแจ้งให้เราทราบภายใน ความเห็น.
อย่างไรก็ตามคุณยังจะสามารถปรึกษาเราได้ บริการสารสนเทศหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
en ผู้ดูแล แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...