วิธีที่ดีที่สุดในการเพิ่ม External Custom JS ลงใน WordPress คืออะไร

ตามที่อ้างสิทธิ์โดยชุมชน CMS ชั้นนำ 25% ของอินเทอร์เน็ตใช้ WordPress เมื่อเห็นแนวโน้มเราไม่มีทางเลือกอื่นนอกจากเชื่อว่าเกือบทุกบล็อกที่ 2 และทุกไซต์ที่ 4 ดูเหมือนจะใช้ CMS ที่มีประสิทธิภาพและเป็นมิตรกับผู้ใช้มากที่สุด มองไปข้างหน้านี้คนและนักพัฒนาได้เริ่มขยับเว็บไซต์ของตนไปยัง WordPress Platform

ในความพยายามที่จะเปลี่ยนเว็บไซต์แบบหวานและเรียบง่ายของคุณไปยังไซต์ CMS ที่มีประสิทธิภาพสูงไซต์ที่มีประสิทธิภาพสูงผู้คนกำลังดำเนินการตามขั้นตอนพื้นฐานและตั้งคำถาม: สำหรับความรักฉันจะได้รับไฟล์ JavaScript (.js) ภายนอกนี้อย่างไร ทำงานในรูปแบบ WordPress นี้หรือไม่? คุณเป็นคนเดียวกันที่ถามคำถามเดียวกันหรือไม่? ดี amigos คุณเป็นที่สุดที่ถูกที่: ฉันอยู่ที่นี่เพื่อแนะนำคุณทีละขั้นตอนผ่านวิธีที่ง่ายที่สุดที่เป็นไปได้เพื่อให้บรรลุงานนี้!

ตอนนี้สมมติว่าคุณมี WordPress ทั้งหมดติดตั้งและยิงขึ้นพร้อม JS ภายนอกพร้อมให้ได้รับในงานของรวมทั้งไฟล์!

หมายเหตุ: ฉันใช้ไฟล์ต่อไปนี้ (testrun.js) สำหรับบทแนะนำนี้และธีมที่ฉันกำลังทำงานอยู่คือ WordPress's Twenty 16

 alert ( 'สวัสดี');

เอาล่ะ!

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

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

wp_enqueue_script ($ handle, $ src, $ deps, $ ver, $ in_footer) ใช้ พารามิเตอร์ ต่อไปนี้:

$ จับ

(สตริง) (จำเป็น) ชื่อของสคริปต์

$ src

(สตริง | bool) (ไม่บังคับ) เส้นทางไปยังสคริปต์จากไดเรกทอรีรากของ WordPress ตัวอย่าง: '/js/myscript.js'

ค่าดีฟอลต์: false

$ deps

(อาร์เรย์) (ไม่บังคับ) อาร์เรย์ของการจัดการที่ได้รับการจัดการสคริปต์นี้ขึ้นอยู่กับ

ค่าดีฟอลต์: array ()

$ เวอร์ชั่น

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

ค่าดีฟอลต์: false

$ in_footer

(bool) (ไม่บังคับ) ไม่ว่าจะเป็นการต่อสคริปต์ก่อนหรือก่อน ค่าเริ่มต้น 'false' ยอมรับ 'false' หรือ 'true'

ค่าดีฟอลต์: false

คุณสามารถละเว้นฟังก์ชัน wp_register_script () สำหรับบทแนะนำนี้ วัตถุประสงค์ของเราคือการรวม JS ภายนอกเท่านั้น ควรทำงานได้ดีโดยไม่ได้!

ดังนั้นถ้าฉันต้องการตั้งชื่อสคริปต์ว่า "test" โปรดจำไว้ว่า param ($ handle) นี้ไม่จำเป็นต้องเป็นชื่อของไฟล์จริงและไฟล์ของฉันมีการพึ่งพาภายนอกมากกว่า jquery และเวอร์ชัน 1.0 และโหลดก่อนโหลดหน้า แล้วฟังก์ชันของฉันจะมีลักษณะดังนี้

wp_enqueue_script ('tutorial', get_template_directory_uri () '/js/testrun.js', อาร์เรย์ ('jquery'), '1.0', เท็จ);

ถ้าคุณสังเกตเห็นว่าฉันได้ใช้ get_template_directory_uri () ดังนั้นสตริงที่ต่อกันหลังจากฟังก์ชันนั่นคือ " /js/testrun.js " เป็นเส้นทางของไฟล์ wrt ไฟล์ ดัชนี ของ เทมเพลต

แอตทริบิวต์ $ src ซึ่งเป็นแหล่งที่มาของไฟล์ js ของคุณจะกลายเป็น: get_template_directory_uri () 'path_to_js_wrt_index_of_template'

ดังนั้น functions.php สุดท้ายดูเหมือนว่า: