วิธีการรวมไฟล์ JavaScript ในปลั๊กอิน WordPress

เผยแพร่แล้ว: 2022-10-02

หากต้องการรวมไฟล์ JavaScript ใน ปลั๊กอิน WordPress คุณต้องใช้ฟังก์ชัน wp_enqueue_script() ควรเรียกใช้ฟังก์ชันนี้ภายในไฟล์ PHP หลักของปลั๊กอิน พารามิเตอร์แรกของฟังก์ชัน wp_enqueue_script() คือชื่อของไฟล์ JavaScript พารามิเตอร์ที่สองคือ URL ของไฟล์ พารามิเตอร์ที่สามคืออาร์เรย์ของการพึ่งพา พารามิเตอร์ที่สี่คือหมายเลขเวอร์ชันของไฟล์ พารามิเตอร์ที่ห้าคือค่าบูลีนที่ระบุว่าควรโหลดไฟล์ในส่วนท้ายหรือไม่ นี่คือตัวอย่างวิธีการใช้ฟังก์ชัน wp_enqueue_script() : wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery' ), '1.0', true ); ในตัวอย่างข้างต้น ไฟล์ my-script.js จะถูกโหลดไว้ในส่วนท้าย

WordPress มีปลั๊กอินมากกว่า 33,000 ตัวและธีม 2,600 ธีม พวกเขาสามารถเรียกใช้โปรแกรมได้หลากหลาย และมักใช้ JavaScript ในโปรแกรมเหล่านี้ หากคุณรวมโค้ด JavaScript ไว้ในธีมหรือปลั๊กอิน ก็ทำได้ง่ายๆ สิ่งสำคัญคือต้องจำไว้ว่าหากทุกคนรวมสคริปต์ของตนโดยไม่ได้คิดอะไร พวกเขาจะส่งผลให้มีเพจจำนวนมาก สคริปต์ไปยังคิวโดยเร็วที่สุดโดยใช้ฟังก์ชัน WP_enqueue_script() ด้วยเหตุนี้ แท็กสคริปต์ จะไม่ปรากฏที่ด้านล่างของหน้า สคริปต์ทั้งหมดไม่ว่าจะต้องรวมไว้ในส่วนท้ายหรือไม่ก็ตาม จะต้องมีชื่อ, URL, การขึ้นต่อกัน, หมายเลขเวอร์ชัน และไม่ว่าจะต้องตั้งค่าด้วยลิงก์ไปยัง URL หรือไม่

ฟังก์ชัน WP_enqueue_script() ใช้เพื่อกำหนดประเภทของสคริปต์ที่ควรรวมอยู่ใน WP ความจริงที่ว่ามันจะไม่รวมสคริปต์เดียวกันสองครั้งนั้นมีความสำคัญ คุณจะสามารถใช้สคริปต์ของคุณได้ทุกเมื่อที่คุณลงทะเบียนเป็นการพึ่งพาปลั๊กอินอื่นๆ หากคุณใช้หมายเลขเวอร์ชันสองครั้งในการเรียกครั้งเดียว สคริปต์จะรวมอยู่ด้วย แม้ว่าหมายเลขเวอร์ชันจะเหมือนกันก็ตาม การใช้ฟังก์ชัน WordPress_enqueue_script() ช่วยให้มั่นใจได้ว่าสคริปต์จะไม่ซ้ำกัน และแสดงอย่างถูกต้องในส่วนหัวและส่วนท้าย หากคุณมีสคริปต์สำหรับหน้าเว็บ สคริปต์นั้นต้องทำงานอย่างไรอย่างถูกต้อง เมื่อใช้ Action/Filter API คุณสามารถสร้างฟังก์ชันที่จะเรียกใช้สคริปต์ของคุณตามการกระทำที่มีอยู่

องค์ประกอบบางอย่างสามารถเปลี่ยนเป็นโพสต์ผ่านปลั๊กอินได้ แต่ไม่ใช่ทั้งหมด โดยทั่วไป รหัสย่อเป็นตัวอย่างหนึ่งของสิ่งนี้ ในสถานการณ์สมมตินี้ ปลั๊กอินของคุณจะต้องใช้สคริปต์บางตัวที่แทนที่รหัสย่อ โทร WP_enqueue_script() เพื่อให้แน่ใจว่าสคริปต์ของคุณอยู่ในการโทรกลับ มิฉะนั้นจะไม่ปรากฏให้เห็น WordPress ต้องใช้สองฟังก์ชัน: WP_head() และ WP_footer() เป็นค่าเริ่มต้น ขณะที่คุณพิมพ์แท็ก head ฟังก์ชันเหล่านี้จะเพิ่มบรรทัดที่ส่วนท้ายของเอกสาร ก่อนฟังก์ชันเหล่านี้ คุณควรขอให้เพิ่มสคริปต์ของคุณ ไม่ควรใช้คำเหล่านี้ในหน้าที่ไม่จำเป็น และไม่ควรเพิ่มคำเหล่านี้ลงในหน้าที่ไม่จำเป็น

คุณสามารถอัปโหลดไฟล์ Js ไปยัง WordPress ได้หรือไม่?

เครดิต: www.softaox.info

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

ฉันจะฝังไฟล์ Javascript ได้อย่างไร

เครดิต: YouTube

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

ฉันจะเพิ่มสคริปต์ใน WordPress ได้อย่างไร

การเพิ่มสคริปต์ลงใน WordPress เป็นขั้นตอนง่ายๆ คุณสามารถเพิ่มสคริปต์ลงใน ไฟล์ functions.php ของธีมของคุณหรือสร้างปลั๊กอินสำหรับมัน หากคุณกำลังเพิ่มสคริปต์ลงในไฟล์ functions.php ของธีม คุณจะต้องจัดคิวสคริปต์ก่อน สามารถทำได้โดยการเพิ่มโค้ดต่อไปนี้ในไฟล์ functions.php ของคุณ: wp_enqueue_script( 'script-name', get_template_directory_uri() . ' /js/script-name.js', array(), '1.0.0', true ); เมื่อจัดคิวสคริปต์แล้ว คุณสามารถลงทะเบียนได้ สามารถทำได้โดยการเพิ่มโค้ดต่อไปนี้ลงในไฟล์ functions.php ของคุณ: wp_register_script( 'script-name', get_template_directory_uri() . ' /js/script-name.js', array(), '1.0.0', true ); หลังจากลงทะเบียนสคริปต์แล้ว คุณสามารถเข้าคิวได้ สามารถทำได้โดยการเพิ่มโค้ดต่อไปนี้ในไฟล์ functions.php ของคุณ: wp_enqueue_script( 'script-name' ); หากคุณต้องการสร้างปลั๊กอินสำหรับสคริปต์ของคุณ คุณสามารถทำได้โดยสร้างไฟล์ใหม่ในไดเร็กทอรี wp-content/plugins ของการติดตั้ง WordPress ไฟล์ควรตั้งชื่อบางอย่างเช่น script-name.php ในไฟล์ปลั๊กอิน คุณจะต้องจัดคิวสคริปต์ก่อน ซึ่งสามารถทำได้โดยการเพิ่มโค้ดต่อไปนี้ลงในไฟล์ปลั๊กอิน: wp_enqueue_script( 'script-name', plugins_url( 'js/script-name.js', __FILE__ ), array(), '1.0.0', true ); เมื่อจัดคิวสคริปต์แล้ว คุณสามารถลงทะเบียนได้ ซึ่งสามารถทำได้โดยการเพิ่มโค้ดต่อไปนี้ลงในไฟล์ปลั๊กอิน: wp_register_script( 'script-name', plugins_url( 'js/script-name.js', __FILE__ ), array(), '1.0.0', true ); หลังจากลงทะเบียนสคริปต์แล้ว คุณสามารถเข้าคิวได้ ซึ่งสามารถทำได้โดยการเพิ่มโค้ดต่อไปนี้ลงในไฟล์ปลั๊กอิน: wp_enqueue_script( 'script-name' );


เพิ่มไฟล์ Js และ Css ในปลั๊กอิน

การเพิ่มไฟล์ JS และ CSS ในปลั๊กอินเป็นวิธีที่ยอดเยี่ยมในการขยายฟังก์ชันการทำงานของปลั๊กอินและทำให้ใช้งานง่ายขึ้น โดยการเพิ่มไฟล์เหล่านี้ คุณสามารถเพิ่มฟังก์ชันที่กำหนดเองและการจัดรูปแบบให้กับปลั๊กอินที่ไม่สามารถใช้งานได้ ในการเพิ่มไฟล์เหล่านี้ลงในปลั๊กอิน ให้สร้างโฟลเดอร์ใหม่ในไดเร็กทอรีปลั๊กอินและตั้งชื่อว่า "js" หรือ "css" จากนั้น เพิ่มนามสกุลไฟล์ที่เหมาะสมต่อท้ายชื่อไฟล์ (เช่น “myfile.js” หรือ “myfile.css”) สุดท้าย รวมไฟล์ใน โค้ดปลั๊กอิน โดยอ้างอิงพาธไปยังไฟล์ (เช่น “js/myfile.js” หรือ “css/myfile.css”)

เมื่อโหลดสคริปต์ ให้ใช้ enqueue ที่โหลดใน init แทนที่จะเป็นสไตล์ เช่น 'namespace', '://locationofcss.com/my.css' หรือปลั๊กอิน นอกจากนี้ คุณสามารถใช้ไลบรารี jquery แบบมีเงื่อนไขเพื่อให้แน่ใจว่าสคริปต์ของคุณมีความสมบูรณ์ ทางออกที่ดีที่สุดของฉันคือใช้วิธีที่เข้าใจผิดได้ แต่ฉันใช้เวลานานกว่าจะเจอ คุณสามารถรวมสคริปต์และ CSS ไว้ที่ส่วนหลังและส่วนหน้าโดยใช้รหัสต่อไปนี้ ฟังก์ชั่นของคลาสนี้ถูกจัดระเบียบในลักษณะเชิงวัตถุ อะไรคือคำตอบที่ดีที่สุดสำหรับคำถามนี้? เพิ่มคำถามใน หมวดหมู่ JavaScript JQuery CSS WordPress หรือเรียกดูหัวข้ออื่น ๆ

ฉันสามารถเพิ่ม Javascript ลงในไฟล์ Css ได้หรือไม่

นอกจากการโหลดไฟล์ CSS แล้ว ยังใช้ JavaScript เพื่อแก้ไขเนื้อหาของเอกสารได้อีกด้วย เอกสารเป็นวิธีที่จะไป

กำลังโหลดไฟล์ Css และ Js ด้วย Require() Method

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

ฉันจะเชื่อมโยงไฟล์ Css และ Javascript ได้อย่างไร

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

การรวมไฟล์ Javascript ในเอกสาร Html

นี่คือตัวอย่างของเอกสาร HTML ที่มีไฟล์ JavaScript: [br] HTML br> DOCTYPE html br> DOCTYPE HTML br> DOCTYPE HTML br> DOCTYPE HTML โปรดเลือกตัวเลือกนี้เพื่อบันทึกหน้านี้ **br** เป็นอักษรตัวแรกของ [head] metacharset นี้ใช้การบีบอัดแบบ onutf-8 หน้า HTML ตัวอย่างของฉันสามารถพบได้ที่ลิงค์นี้ ลิงก์ rel=stylesheet rel=stylesheet rel=stylesheet #Script src=js/mySample.js */head/ *brbr> br> [body] หน้า HTML – หน้า HTML ตัวอย่างของฉัน หน้านี้มีไฟล์ HTML แบบง่ายที่มีไฟล์ JavaScript ร่างกายประกอบด้วยสองส่วน

ฉันจะเพิ่มไฟล์ Javascript ลงในปลั๊กอิน WordPress ได้อย่างไร

สร้างไฟล์ JavaScript แยกต่างหากโดยใช้ตัวโหลดสคริปต์ของ WordPress และใช้เพื่อเพิ่ม JavaScript ที่กำหนดเองในเว็บไซต์ของคุณ ในการเพิ่มสคริปต์แบบอินไลน์ ให้ใช้ wp_footer หรือ WP_head hooks เมื่อใช้ปลั๊กอิน คุณสามารถเพิ่ม สคริปต์ส่วนหัวและส่วนท้าย ได้ คุณสามารถรวมสคริปต์ (ในธีมของคุณ) ในทางที่ไม่ดีได้โดยการแก้ไข