คุณต้องการเรียนรู้วิธีสร้างรหัสย่อใน 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

ตัวอย่างเช่น สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้:

สร้างรหัสย่อใน wordpress

บางส่วนของ ปลั๊กอิน WordPress ที่ดีที่สุด มาพร้อมกับรหัสย่อของตัวเอง ตัวอย่างเช่น แบบฟอร์ม WP et ติดต่อ 7 แบบฟอร์ม มีรหัสย่อที่ให้คุณฝังได้อย่างรวดเร็ว แบบฟอร์มติดต่อ ในโพสต์หรือเพจ คุณยังสามารถใช้ปลั๊กอินเช่น MaxButtons เพื่อเพิ่มรหัสย่อของปุ่มทุกที่ที่คุณต้องการบนเว็บไซต์ของคุณ

ทำไมคุณจึงควรพิจารณาใช้รหัสย่อของ WordPress?

มีหลายสาเหตุที่คุณสามารถใช้รหัสย่อของ WordPress ได้ ตัวอย่างเช่น ง่ายกว่าและเร็วกว่าการเรียนรู้และเขียนโค้ดยาวๆ ใน HTML นอกจากนี้ยังช่วยให้คุณรักษาเนื้อหาของคุณให้สะอาดและเข้าถึงได้

คุณสามารถใช้รหัสย่อเพื่อทำให้คุณลักษณะบางอย่างที่คุณใช้ซ้ำๆ เป็นแบบอัตโนมัติได้ ตัวอย่างเช่น หากคุณใช้ปุ่ม คำกระตุ้นการตัดสินใจ (CTA) ในแต่ละบทความของคุณ การจัดเตรียมรหัสย่อให้พร้อมอาจเป็นวิธีแก้ปัญหาที่สะดวกและรวดเร็ว

ควรกล่าวไว้ว่า บรรณาธิการ Gutenberg ทำงานในลักษณะเดียวกันโดยอาศัยการใช้รหัสย่อ อนุญาตให้ผู้ใช้ WordPress เพิ่มคุณสมบัติเชิงโต้ตอบหลายอย่างผ่านการใช้บล็อก

สร้างรหัสย่อใน wordpress

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

วิธีสร้างรหัสย่อใน WordPress

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

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

ขั้นตอนที่ 1 – สร้างไฟล์ธีมใหม่

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

คุณสามารถใช้ไคลเอนต์ FTP (File Transfer Protocol) เช่น FileZilla เพื่อเข้าถึงไฟล์ธีมของเว็บไซต์ของคุณ เมื่อเข้าสู่ระบบเว็บไซต์ของคุณแล้ว ให้ไปที่ wp-content> ธีม และค้นหาโฟลเดอร์ธีมปัจจุบันของคุณ ในตัวอย่างของเรา นี่จะเป็น นกฮูก:

สร้างรหัสย่อใน wordpress

เปิดโฟลเดอร์ของคุณ ธีม WordPress, คลิกขวาที่มันแล้วกด สร้างไฟล์ใหม่.

ตั้งชื่อไฟล์ใหม่ของคุณ custom-shortcodes.php จากนั้นคลิก OK. จากนั้นคุณสามารถแก้ไขได้โดยคลิกขวาที่ไฟล์แล้วเลือกตัวเลือก ดู/แก้ไข :

สร้างรหัสย่อใน wordpress

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

<?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 จะมีลักษณะดังนี้:

สร้างรหัสย่อใน wordpress

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

ขั้นตอนที่ 3 – เพิ่มรหัสย่อปิดตัวเองไปยังเว็บไซต์

ตอนนี้คุณสามารถทดสอบรหัสเริ่มต้นของคุณเป็นรหัสย่อแบบปิดตัวเองบนไซต์ WordPress ของคุณได้ เมื่อใช้ตัวแก้ไขบล็อกของ WordPress คุณสามารถแทรกแท็ก [subscribe] ลงในโพสต์ได้โดยตรง:

สร้างรหัสย่อใน wordpress

ซึ่งจะแสดงเนื้อหาต่อไปนี้แก่ผู้เยี่ยมชมเว็บไซต์ของคุณ:

หากคุณพอใจกับรหัสย่อนี้ คุณไม่จำเป็นต้องดำเนินการใดๆ อย่างไรก็ตาม หากคุณต้องการปรับแต่ง คุณสามารถข้ามไปยังขั้นตอนถัดไปได้

ขั้นตอนที่ 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. ควรมีลักษณะดังนี้:

สร้างรหัสย่อใน wordpress

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

ขั้นตอนที่ 5 - ทดสอบการตั้งค่า

ตอนนี้คุณสามารถทดสอบรหัสย่อที่อัปเดตใน WordPress Block Editor ในตัวอย่างของเรา เรากำลังทดสอบลิงก์ Twitter และ Facebook ด้วยรหัสย่อต่อไปนี้:

[ลิงค์สมัคร='https://www.facebook.com/live.blogpascher']Facebook[/subscribe]

[ลิงค์สมัคร='https://twitter.com/BlogPasCher']Twitter[/subscribe]

สร้างรหัสย่อใน wordpress

สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ที่ส่วนหน้า:

รหัสย่อแบบปิดตัวเองนี้แสดง 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 ควรมีลักษณะดังนี้:

สร้างรหัสย่อใน wordpress

รหัสก่อนหน้ามีแอตทริบิวต์ " สไตล์ " เพิ่มเติม ซึ่งจะเปลี่ยน anchor text เป็นสีน้ำเงิน อย่าลืมบันทึกการเปลี่ยนแปลงของคุณเมื่อคุณทำเสร็จแล้ว

ขั้นตอนที่ 7 – เพิ่มรหัสย่อที่แนบมากับเว็บไซต์

ตอนนี้คุณสามารถแทรกรหัสย่อของคุณในตัวแก้ไขบล็อกของ WordPress เพื่อดูผลลัพธ์สุดท้าย:

ดังที่คุณสังเกตเห็น คุณสามารถเปลี่ยน URL ของหน้าโซเชียลมีเดียและ anchor text ที่แสดงต่อผู้เข้าชมได้อย่างง่ายดายโดยใช้รหัสย่อของ wrapper ในกรณีนี้เราเลือก "เฟสบุ๊ค" et "ทวิตเตอร์" :

สร้างรหัสย่อใน wordpress

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

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

แหล่งข้อมูลอื่น ๆ ที่แนะนำ

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

สรุป

ในบทความนี้ เราได้เรียนรู้วิธีสร้างรหัสย่อของคุณเองใน WordPress หากคุณมีข้อกังวลหรือข้อเสนอแนะใด ๆ โปรดแจ้งให้เราทราบภายใน ความเห็น.

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

en ผู้ดูแล แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.   

...