วิธีเพิ่มรหัสย่อใน WordPress

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

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

รหัสย่อคืออะไร?

รหัสสั้นจะเรียกส่วนของรหัสที่ระบุโดยชื่อของรหัสย่อ ซึ่งอยู่ในวงเล็บเหลี่ยมดังนี้ [shortcode-name]

รหัสที่แต่ละรหัสทำงานขึ้นอยู่กับวิธีการสร้างรหัสย่อ ปลั๊กอินจำนวนมากมีรหัสย่อของตัวเอง และ WordPress ยังรวมบางส่วนไว้ตามค่าเริ่มต้น และส่วนที่ดีที่สุดคือ WP shortcode API ช่วยให้คุณสร้างชอร์ตโค้ดที่กำหนดเองได้

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

นอกจากนี้ รหัสย่อสามารถรับค่าบางอย่าง ซึ่งทำงานคล้ายกับพารามิเตอร์ของฟังก์ชัน

[ shortcode val1='hi' val2='ok' ]

และยังสามารถใช้เป็นแท็ก HTML เมื่อเปิดและปิดรหัสย่อเช่นนี้ [ shortcode ] some text [ /shortcode ]

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

สุดท้าย มีรหัสย่อหลายประเภท: เพื่อแทรกแกลเลอรี ผลิตภัณฑ์ WooCommerce แบบฟอร์ม รูปภาพ และอื่นๆ อีกมากมาย รหัสย่อแต่ละอันแตกต่างกันและทำสิ่งที่แตกต่างกัน

หากคุณต้องการข้อมูลเพิ่มเติม โปรดดูคู่มือฉบับสมบูรณ์เกี่ยวกับรหัสย่อนี้

ตอนนี้เราเข้าใจมากขึ้นแล้วว่ามันคืออะไร มาดู วิธีเพิ่มรหัสย่อในไซต์ WordPress ของคุณ

วิธีเพิ่มรหัสย่อใน WordPress

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

ดังที่เราได้กล่าวไว้ก่อนหน้านี้ มีรหัสสั้นหลายประเภท และรหัสย่อของ WooCommerce เป็นรหัสทั่วไปบางส่วน ตัวอย่างเช่น รหัสย่อ [ woocommerce_cart ] จะแสดงรถเข็น WooCommerce ทุกที่ที่คุณวาง

หากต้องการทดสอบ เพียงวางรหัสย่อบนโพสต์หรือหน้าหรือพิมพ์ดังนี้: [ woocommerce_cart ] จากนั้นให้ดูที่ส่วนหน้าแล้วคุณจะเห็นรถเข็น WC ตรงที่คุณใส่รหัสย่อ

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

เพิ่มรหัสย่อ WordPress ด้วยค่า

ตอนนี้ ลองใช้รหัสย่อ WordPress ของแกลเลอรีเริ่มต้นเพื่อเรียนรู้วิธีเพิ่มรหัสย่อด้วยค่า

รหัสย่อของแกลเลอรีแสดงแกลเลอรีรูปภาพที่ดูดีและรองรับค่าต่างๆ คุณต้องใส่ค่า ID เพื่อระบุภาพที่คุณต้องการแสดงในแกลเลอรี พารามิเตอร์นี้ใช้ ID และแสดงภาพเฉพาะเหล่านั้น

ตัวอย่างเช่น หากเราต้องการแสดงรูปภาพที่มีรหัส 720, 729, 731 และ 732 เราเพิ่มรหัสย่อในโพสต์หรือหน้าดังนี้: [ gallery ids=”729,732,731,720” ]

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

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

Gutenberg

บรรณาธิการคลาสสิก

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

การใช้รหัสย่อในไฟล์เทมเพลต

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

คุณสามารถใช้รหัสย่อในไฟล์เทมเพลตด้วย do_shortcode() PHP นี่คือฟังก์ชันเริ่มต้นของ WordPress ที่คุณสามารถใช้ได้ในทุกไฟล์

หากต้องการเรียกใช้รหัสย่อจากไฟล์ ให้เพิ่มข้อมูลต่อไปนี้:

echo do_shortcode(' [ gallery ids=”21,42,32,11” ] ');

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

ในแดชบอร์ด WordPress ของคุณ ให้เพิ่มรหัสย่อไปที่ส่วนหัวของคุณ โดยไปที่ ลักษณะที่ ปรากฏ > ตัวแก้ไขธีม และเปิด ไฟล์ header.php ไปที่ส่วนท้ายของไฟล์แล้ววางโค้ดตามที่แสดงด้านล่าง:

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

การใช้รหัสย่อกับ WordPress hooks

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

ในการใช้รหัสย่อกับ hooks คุณต้องมี do_shortcode() เช่นเดียวกับที่เราเห็นในส่วนก่อนหน้า

สคริปต์ต่อไปนี้จะทำงานกับไฟล์ functions.php ของธีมลูก เราใช้ wp_footer() hook ดังนั้นสิ่งนี้จะถูกพิมพ์ที่ส่วนท้ายของไซต์

/* Shortcode with wp_footer hook*/
add_action('wp_footer','QuadLayers_footer_shortcode');
function QuadLayers_footer_shortcode(){
echo do_shortcode(' /* Shortcode with wp_footer hook*/
add_action('wp_footer','QuadLayers_footer_shortcode');
function QuadLayers_footer_shortcode(){
echo do_shortcode(' [ products ids="623" ] ');
} ');
}

รหัสย่อนี้มาพร้อมกับ WooCommerce โดยค่าเริ่มต้น และใช้สำหรับแสดงผลิตภัณฑ์ ในกรณีนี้ เราใช้เพื่อแสดงผลิตภัณฑ์เดียว โดยมี ID = 623

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

วิธีสร้างรหัสย่อที่กำหนดเองใน WordPress

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

WordPress ให้ add_shortcode() แก่เราเพื่อสร้างและเพิ่มรหัสย่อของเราเอง มาดูวิธีใช้ฟังก์ชันนี้เพื่อสร้างรหัสย่อที่กำหนดเองพร้อมสคริปต์ตัวอย่าง

แสดงข้อความอื่นสำหรับผู้ใช้ที่เข้าสู่ระบบและออกจากระบบ

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

 /* รหัสย่อเข้าสู่ระบบ*/
add_shortcode('เข้าสู่ระบบ','QuadLayers_shortcode_loggedin');
ฟังก์ชัน QuadLayers_shortcode_loggedin($atts){
    ถ้า(is_user_logged_in()==จริง){
        $response='คุณเข้าสู่ระบบแล้ว';
    }
    อื่น{
        $response='คุณออกจากระบบ';
    }
ส่งคืนการตอบกลับ $;
}

ใช้ if เพื่อตรวจสอบว่าผู้ใช้ลงชื่อเข้าใช้หรือไม่ และแสดงข้อความว่า "คุณเข้าสู่ระบบแล้ว" หากเป็นเรื่องจริง และ "คุณออกจากระบบ" เป็นอย่างอื่น

แสดงกระทู้เดียวโดย ID

อีกทางเลือกหนึ่งคือการเพิ่มรหัสย่อของ WordPress ที่แสดงโพสต์ที่ระบุซึ่งเราจะส่งต่อเป็นค่าในรหัสย่อ

 add_shortcode('get-post','QuadLayers_shortcode_post');
ฟังก์ชัน QuadLayers_shortcode_post($atts) {
    $a = shortcode_atts( array('id' => '',), $atts ); 
    $args = array('post_type' => 'post','p' => $a['id']); 
    $query = ใหม่ WP_Query($args); 
    $query->the_post();
    $string = '<h3>'.get_the_title().'</h3>' ; 
    $string.=the_post_thumbnail();
    $string .= get_the_content();
    ส่งคืน $string;
}

ในตัวอย่างนี้ เราได้เพิ่มรหัสย่อ [ get-post ] และมีลักษณะดังนี้:

เรียกใช้รหัสย่อที่แตกต่างกันในเงื่อนไขตรรกะ

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

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

 add_shortcode('รูปแบบการแสดง','QuadLayers_custom_shortcode');
ฟังก์ชัน QuadLayers_custom_shortcode(){
    ถ้า(is_user_logged_in()==จริง){
        $response='<h3>ติดต่อเรา</h3>';
        $response.='[wpforms]';
    }
    อื่น{
        $response='<h3>สมัครรับจดหมายข่าวของเรา</h3>';
        $response.='[wpforms]';
    }
    echo do_shortcode($ ตอบกลับ);
}

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

หมายเหตุ

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

บทสรุป

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

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

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับรหัสย่อและวิธีปรับแต่งไซต์ของคุณ โปรดดูโพสต์ต่อไปนี้:

• รหัสย่อ WooCommerce: The Ultimate Guide
• วิธีปรับแต่งหน้าร้านค้า WooCommerce
• ปรับแต่งหน้าผลิตภัณฑ์ใน WooCommerce

คุณได้เพิ่มรหัสย่อในไซต์ WordPress ของคุณหรือไม่? คุณมีปัญหาใด ๆ ในการปฏิบัติตามคู่มือนี้หรือไม่? แจ้งให้เราทราบในความคิดเห็นด้านล่าง!