เป็นวิธีที่ดีที่สุดในการเพิ่ม js ภายนอกที่กำหนดเองลงใน wordpress อะไร

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

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

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

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

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

เอาล่ะ!

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

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

wp_enqueue_script ($ handle, $ src, $ deps, $ ver, $ in_footer) ใช้เวลาใน params ต่อไปนี้:

$ จับ

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

$ src

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

ค่าเริ่มต้น: false

$ deps

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

ค่าเริ่มต้น: อาร์เรย์ ()

$ เวอร์ชั่น

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

ค่าเริ่มต้น: false

$ in_footer

(บูล) (ไม่บังคับ) เลือกว่าจะจัดคิวสคริปต์ก่อนหรือไม่ หรือก่อน . เริ่มต้น 'เท็จ' ยอมรับ 'เท็จ' หรือ 'จริง'

ค่าเริ่มต้น: 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 ” เป็นเส้นทางของไฟล์ที่เขียนไฟล์ ดัชนี ของ เทมเพลต

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

ดังนั้น ฟังก์ชั่น สุดท้าย php ดูเหมือนว่า:

เดี๋ยวก่อนเราเกือบเสร็จแล้ว! เพียงบันทึกตอนนี้และกดรีเฟรชบนเว็บไซต์ของคุณ … คุณควรเห็น JS ใช้งานได้! นี่คือของฉัน:

เนื่องจากเราตั้งค่าตัวเลือก $ in_footer เป็นเท็จสคริปต์จะโหลดก่อนที่จะโหลดหน้าเว็บ แต่หลังจากโหลด JQuery ตามที่ถูกเพิ่มเป็นการอ้างอิง!

และ .. Voila! ไปเลย .. คุณรวมไฟล์ JS ที่กำหนดเองภายนอกในธีม WP ของคุณเรียบร้อยแล้ว!

Happy Coding !!

การอ้างอิง: ฟังก์ชั่น Enqueue: WordPress Codex