ตามที่อ้างสิทธิ์โดยชุมชน 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 สุดท้ายดูเหมือนว่า:
อยู่ที่นั่นเราเกือบเสร็จแล้ว! เพียงบันทึกเดี๋ยวนี้และกดรีเฟรชบนเว็บไซต์ของคุณ ... คุณจะเห็น JS ทำงาน! นี่คือฉัน:
เนื่องจากเราตั้งค่าตัวเลือก $ in_footer เป็น false สคริปต์จะโหลดก่อนโหลดหน้าเว็บ แต่หลังจากโหลด JQuery ตามที่เพิ่มไว้ในการพึ่งพาแล้ว!
และ .. Voila! นี่คุณไป .. คุณได้รวมไฟล์ JS แบบกำหนดเองภายนอกไว้ในชุดรูปแบบ WP ของคุณแล้ว!
แฮปปี้โค้ด!
อ้างอิง: Enqueue Function: WordPress Codex
