WordPress แนะนำ JavaScript อย่างถูกต้องอย่างไร?การโหลดไฟล์ JS และ CSS แบบกำหนดเอง

โปรแกรมเมอร์ที่ ใช้WordPress ในการสร้างเว็บไซต์ จะอ้างอิงถึงแหล่งข้อมูลสคริปต์ JavaScript และ CSS บางส่วน เมื่อพัฒนาปลั๊กอิน WordPressหรือปรับแต่งธีม WordPress

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

วิธีการอ้างอิงที่ผิดพลาด

มีวิธีอ้างอิงทั่วไปสองวิธี ไม่เป็นไร แค่ไม่สมบูรณ์หรือสมเหตุสมผล

วิธีที่ 1:การใช้แท็กลิงก์เพื่ออ้างอิงไฟล์ CSS

• แท็กสคริปต์ใช้ไฟล์ JSไม่มีรายละเอียดที่นี่

วิธีที่ 2:ใช้ฟังก์ชัน wp_head

• ฟังก์ชัน wp_head ใช้เพื่อส่งออกเนื้อหาที่กำหนดเองหรือที่กำหนดโดยระบบ
• บางครั้งเราใช้รหัสต่อไปนี้เพื่ออ้างอิงไฟล์นี้:

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• คัดลอกโค้ดด้านบนลงในไฟล์ functions.php เพื่ออ้างอิงไฟล์ที่เกี่ยวข้อง

กลไกทรัพยากร WordPress Enqueue Scripts

อย่างที่เราทราบกันดีว่า WordPress มีปลั๊กอินมากมาย:

• ปลั๊กอินเกือบทุกตัวอ้างอิงไฟล์ทรัพยากรบางไฟล์
• ย่อมจะเกิดข้อขัดแย้งระหว่างทรัพยากรที่อ้างอิงโดยปลั๊กอินสองตัว ซึ่งจะไม่เสถียรและอาจส่งผลต่อประสิทธิภาพ

ใช้ฟังก์ชัน wp_enqueue_script

• ในการอ้างอิงทรัพยากรใน WordPress คุณควรใช้wp_enqueue_scriptฟังก์ชันที่มีคำว่า enqueue ในชื่อของฟังก์ชันที่จัดคิวหรือเรียงลำดับ
• ด้วยวิธีการจัดคิวทรัพยากรของ WordPress (Enqueue Scripts) การอ้างอิงจะถูกแยกออกจากไฟล์และรหัสหลักที่เกี่ยวข้อง
• หากผู้ใช้ต้องการปิดการใช้งานทรัพยากร เขาสามารถลบ แก้ไข และแสดงความคิดเห็นโดยไม่ต้องแก้ไขจากรหัสหลัก

นอกจากนี้ ไลบรารีที่ใช้กันทั่วไป เช่น jQuery, jQuery UI ฯลฯ ถูกสร้างไว้ใน WordPress

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

หากคุณใช้ฟังก์ชันนี้เพื่ออ้างอิงไฟล์ JS และ CSS ของคุณเอง คุณต้องใช้wp_register_scriptฟังก์ชั่นลงทะเบียนตัวระบุ (จัดการ) แล้วใช้wp_enqueue_scriptฟังก์ชันเรียกทรัพยากรที่สอดคล้องกับแฟล็กนี้

วิธีการนำเข้าไฟล์ JS และ CSS ใน WordPress อย่างถูกต้อง?

WordPress มีวิธีการนำเข้าที่สมเหตุสมผลสำหรับวิธี JS และ CSS

คุณสามารถใช้รหัสต่อไปนี้เพื่อนำเข้าไฟล์ plugin.css ลงในปลั๊กอิน ▼

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

ด้านบนใช้ฟังก์ชัน wp_register_script เพื่อสร้างทรัพยากรด้วยตัวระบุ plugin_stylesheet

จากนั้นเพิ่มคำขอที่อยู่ในคิวไปที่wp_enqueue_scriptsกำลังดำเนินการอยู่

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

ฟังก์ชัน wp_register_script นั้นไม่ธรรมดาจริง ๆ มันสามารถมีได้ห้าพารามิเตอร์:

1) $handle:ตัวระบุทรัพยากร

• 由wp_enqueue_scriptโอนย้าย.

2) $src:ตำแหน่งที่ตั้งของทรัพยากร

• ที่อยู่สัมพัทธ์หรือแบบสัมบูรณ์ใช้ฟังก์ชันในตัวของ WordPress เพื่อรับที่อยู่ ฯลฯ
• เรื่องธรรมดาการวางตำแหน่งฟังก์ชั่นมีplugins_url,get_template_directory_uri等

3) $deps:ส่วนประกอบที่จำเป็น (Dependency)

• หากคุณกำลังอ้างอิงถึงปลั๊กอิน jQuery และจำเป็นต้องพึ่งพา jQuery ในการสร้าง คุณต้องกรอก jQuery
• โปรดทราบว่ามันจะถูกส่งผ่านเป็นอาร์เรย์

4) $ver:เวอร์ชันของทรัพยากร (ไม่บังคับ)

5) $in_footer:ควรวางไว้ด้านล่างสุดหรือไม่?

• โดยปกติ ไฟล์ JS ควรวางไว้ที่ด้านล่างของหน้า คุณสามารถตั้งค่าพารามิเตอร์นี้เป็น True เว้นว่างไว้หรือ False เพื่อส่งออกไปด้านบน

มาดูตัวอย่างการอ้างอิงไฟล์ JavaScript ที่สมบูรณ์ยิ่งขึ้น ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

ธีม WordPress ใช้ wp_enqueue_script เพื่อนำเข้าทรัพยากร

โปรแกรมเมอร์ในการพัฒนาธีม WordPress ใช้wp_enqueue_scriptนำเข้าทรัพยากร

• ตัวอย่างข้างต้นเป็นตัวอย่างของแหล่งข้อมูลอ้างอิงสำหรับการพัฒนาปลั๊กอิน WordPress
• วิธีการที่อ้างถึงในหัวข้อมีความคล้ายคลึงกัน

ความแตกต่างหลักคือการใช้ฟังก์ชันที่เกี่ยวข้องเพื่อรับไดเร็กทอรีธีมเพื่อรับที่อยู่ไฟล์ทรัพยากรภายใต้ธีม

你get_template_directory_uriฟังก์ชันเพื่อรับไดเร็กทอรีธีมปัจจุบัน

หากคุณกำลังใช้ธีมลูก คุณจะต้องใช้get_stylesheet_directory_uriฟังก์ชันรับไดเร็กทอรีของธีมพาเรนต์เพื่อรับทรัพยากรที่เกี่ยวข้อง