WordPress เป็นส่วนหนึ่งในชีวิตของเรามานานกว่า 16 ปี แต่วิธีการเพิ่มสคริปต์ในธีมและปลั๊กอินยังคงเป็นปริศนาสำหรับนักพัฒนาหลายคน ในบทความนี้เราได้ยุติความสับสนในที่สุด
เนื่องจากเป็นหนึ่งในไลบรารี JavaScript ที่ใช้กันอย่างแพร่หลาย วันนี้เรากำลังพูดถึงวิธีเพิ่มสคริปต์ jQuery ให้กับธีมของคุณหรือ ปลั๊กอิน WordPress.
เกี่ยวกับโหมดความเข้ากันได้ของ jQuery
ก่อนที่คุณจะเริ่มเพิ่มสคริปต์ใน WordPress สิ่งสำคัญคือต้องเข้าใจโหมดความเข้ากันได้ของ jQuery
อย่างที่คุณอาจจะรู้ว่า WordPress มาพร้อมกับ jQuery แล้ว
เวอร์ชันของ jQuery บน WordPress ยังมี " โหมดที่เข้ากันได้ ซึ่งเป็นกลไกในการหลีกเลี่ยงความขัดแย้งกับไลบรารี javascript อื่น ๆ
ส่วนหนึ่งของกลไกการป้องกันนี้หมายความว่าคุณ ne pouvez pas ใช้ $ลงนามโดยตรงเช่นเดียวกับที่คุณทำในโครงการอื่น ๆ
เมื่อเขียนโค้ด jQuery สำหรับ WordPress คุณควรใช้ไฟล์ jQuery.
นี่คือตัวอย่างของรหัสนั้น:
/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})
ปัญหาคือการเขียน jQuery เป็นล้านครั้งใช้เวลานานขึ้นทำให้อ่านยากขึ้นและอาจทำให้สคริปต์ของคุณลดลง
ข่าวดีหรือไม่?
ด้วยการปรับเปลี่ยนเล็กน้อยคุณสามารถใช้สัญลักษณ์ดอลลาร์ตัวน้อยน่ารักของเราได้อีกครั้ง
โดยวิธีการถ้าคุณเป็น ใหม่กับ jQuery เครื่องหมาย $ เป็นเพียงนามแฝงสำหรับ jQuery () จากนั้นนามแฝงสำหรับฟังก์ชั่น
โครงสร้างพื้นฐานมีลักษณะดังนี้: $(selector).action(). เครื่องหมายดอลลาร์กำหนด jQuery …การสืบค้น“ (ตัวเลือก)” หรือค้นหาองค์ประกอบ HTML …และสุดท้าย“ jQuery () action” คือการดำเนินการกับองค์ประกอบ
กลับไปที่วิธีที่เราสามารถแก้ไขปัญหาความเข้ากันได้ของเรา ... นี่คือตัวเลือกที่ทำงานได้:
1. ป้อนโหมดซ่อนตัว jQuery
วิธีแรกในการหลีกเลี่ยงโหมดความเข้ากันได้คือการแอบดูโค้ด
ตัวอย่างเช่นถ้าคุณโหลดสคริปต์ของคุณในส่วนท้ายคุณสามารถล้อมโค้ดของคุณในฟังก์ชั่นที่ไม่ระบุชื่อซึ่งจะแมป jQuery $.
ดังตัวอย่างด้านล่าง:
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
หากคุณต้องการเพิ่มสคริปต์ของคุณในส่วนหัว (ซึ่งคุณควรหลีกเลี่ยงหากเป็นไปได้ดูข้อมูลเพิ่มเติมที่ด้านล่าง) คุณสามารถรวมทุกอย่างไว้ในฟังก์ชันพร้อมเอกสารโดยส่งผ่าน $ระหว่างทาง
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. เข้าสู่โหมด "ไม่ขัดแย้ง"
อีกวิธีง่ายๆในการหลีกเลี่ยงการสะกด jQuery คือการเปลี่ยนเป็นโหมด "ปราศจากความขัดแย้ง" และใช้ทางลัดอื่น
ในกรณีนี้: $jแทนค่าเริ่มต้น $.
สิ่งที่คุณต้องทำคือประกาศมันที่ด้านบนสุดของสคริปต์ของคุณ:var $j = jQuery.noConflict();
โอเค ตอนนี้คุณรู้เพิ่มเติมเกี่ยวกับการเขียนโค้ด jQuery ที่ถูกต้องสำหรับ WordPress แล้ว มาเพิ่มในของเรา เว็บไซต์เว็บ.
วิธีเพิ่มสคริปต์ jQuery ลงใน WordPress
วิธีที่ง่ายที่สุดวิธีหนึ่งในการเพิ่มสคริปต์ jQuery ไปยัง WordPress คือผ่านกระบวนการที่เรียกว่า 'การตั้งค่า' รอสาย '
สำหรับ a เว็บไซต์เว็บ HTML แบบคลาสสิก เราจะใช้ตัว <link> รายการเพื่อเพิ่มสคริปต์ WordPress จบลงด้วยการทำเช่นเดียวกัน แต่เราจะใช้ฟังก์ชัน WP พิเศษเพื่อให้บรรลุสิ่งนี้
ด้วยวิธีนี้จัดการการอ้างอิงทั้งหมดของเราสำหรับเรา (ขอบคุณ WP!)
หากคุณกำลังทำงานกับธีมคุณสามารถใช้ฟังก์ชันได้ wp_enqueue_script() ในของคุณ functions.php ไฟล์
นี่คือสิ่งที่ดูเหมือนว่า:
function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
ฟังก์ชั่นนี้ใช้ ห้าข้อโต้แย้ง:
- $ handle - หมายเลขอ้างอิงเฉพาะที่คุณสามารถใช้เพื่ออ้างถึงสคริปต์
- $src – ตำแหน่งของไฟล์สคริปต์
- $ deps - ระบุอาร์เรย์ของการอ้างอิง
- $ ver - หมายเลขเวอร์ชันของสคริปต์ของคุณ
- $ in_footer - ช่วยให้ WordPress ทราบว่าจะวางสคริปต์ไว้ที่ใด
* สิ่งหนึ่งที่ควรทราบ $in_footer หมายความว่าตามค่าเริ่มต้นสคริปต์จะถูกโหลดในส่วนหัว
นี่เป็นการปฏิบัติที่ไม่ดีและอาจทำให้ไซต์ของคุณช้าลงอย่างมาก ดังนั้นหากคุณต้องการวางสคริปต์ของคุณในส่วนท้ายตรวจสอบให้แน่ใจว่าพารามิเตอร์นี้ถูกตั้งค่าเป็นจริง
การเพิ่มสคริปต์ให้กับผู้ดูแลระบบ WordPress
คุณยังสามารถเพิ่มสคริปต์ให้กับผู้ดูแลระบบ ฟังก์ชั่นที่ใช้เหมือนกันทุกประการคุณต้องใช้เบ็ดอื่น
ตัวอย่างเช่น:
ฟังก์ชัน my_admin_scripts () {
wp_enqueue_script ('my-great-script', plugin_dir_url (__ไฟล์__) '/js/my-great-script.js', อาร์เรย์ ('jquery'), '1.0.0', จริง);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');
แทนที่จะเข้าสู่ระบบ wp_enqueue_scriptsเราต้องใช้ admin_enqueue_scripts.
วิธียกเลิก jQuery จาก WordPress
แต่ถ้าคุณต้องการใช้ jQuery รุ่นอื่นที่ไม่ใช่ WordPress ที่โหลดไว้ล่วงหน้าล่ะ
คุณสามารถจัดคิวได้ ... แต่นั่นหมายความว่าจะมี jQuery สองเวอร์ชันในหน้า
เพื่อหลีกเลี่ยงปัญหานี้เราจำเป็นต้องยกเลิกการลงทะเบียนเวอร์ชันของ WP
นี่คือสิ่งที่ดูเหมือนว่า:
// รวม jQuery ที่กำหนดเอง
shapeSpace_include_custom_jquery () ฟังก์ชัน {
wp_deregister_script ('jquery');
wp_enqueue_script(
'jquery',
'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',
array(),
null,
true);
}
add_action ('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');ง่ายเหมือนการใช้ไฟล์ wp_deregister_script () สำหรับ ยกเลิกการลงทะเบียน jQuery จาก WP จากนั้นรวมถึงสคริปต์ jQuery ที่คุณต้องการเพิ่ม
ในตัวอย่างด้านบนเราใช้ไฟล์ ห้องสมุด jQuery โฮสต์โดย Google แต่คุณจะแทนที่ด้วย URL ของสคริปต์ของคุณเอง
คุณไม่ควรบันทึกสคริปต์ก่อนเข้าคิวใช่หรือไม่
หากคุณต้องการโหลดสคริปต์ของคุณตามต้องการแทนที่จะโหลดลงในเพจของคุณโดยตรงคุณสามารถบันทึกสคริปต์ก่อนหน้านี้ได้
ตัวอย่างเช่นบน wp_loaded:
add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}
เมื่อคุณทำเสร็จแล้วคุณสามารถจัดคิวสคริปต์ได้เมื่อคุณต้องการ:
| add_action ('wp_enqueue_scripts', 'enqueue_front_scripts'); |
| add_action ('admin_enqueue_scripts', 'enqueue_back_scripts'); |
อย่าลืมใช้ชื่อเดียวกันเพื่อหลีกเลี่ยงการชนกับสคริปต์อื่น
ใช้แท็กตามเงื่อนไข
ใช้แท็กเงื่อนไขเพื่อโหลดสคริปต์ของคุณเมื่อจำเป็นเท่านั้น
สิ่งนี้ถูกใช้บ่อยกว่าในผู้ดูแลระบบ โดยที่คุณต้องการใช้สคริปต์บนเพจใดเพจหนึ่งเท่านั้น (และไม่ใช้กับผู้ดูแลระบบทั้งหมด) นอกจากนี้ยังช่วยประหยัดแบนด์วิธและเวลาประมวลผล ซึ่งหมายถึงเวลาในการโหลดที่เร็วขึ้นสำหรับคุณ เว็บไซต์เว็บ.
ลองดูที่ เอกสารของสคริปต์การจัดคิว ใน WordPress Codex สำหรับข้อมูลเพิ่มเติม
เพิ่ม jQuery ไปยัง WordPress โดยใช้ปลั๊กอิน
ไดเร็กทอรีปลั๊กอิน WP ยังมีปลั๊กอินที่น่าสนใจมากมายที่คุณสามารถใช้เพื่อแทรกสคริปต์ลงในบทความ หน้า หรือ ธีม WordPress.
ตัวอย่างของปลั๊กอิน JavaScript / jQuery ที่รู้จักกันดีมีดังนี้ ฟิลด์ที่กำหนดเองขั้นสูง , CSS และ JS แบบกำหนดเองอย่างง่าย , ลักษณะสคริปต์ n et การทำความสะอาดทรัพยากร
สร้างโครงการ jQuery ของคุณเอง
ความเข้าใจที่ดีขึ้นเกี่ยวกับ jQuery จะทำให้งานของคุณมีประสิทธิภาพมากขึ้นเท่านั้น ไม่ว่าจะเป็นเว็บไซต์ของคุณเองหรือสำหรับโครงการของลูกค้า
jQuery เป็นที่รู้จักกันดีในเรื่องความเรียบง่ายและในขณะที่คุณ (หวังว่า) ได้เรียนรู้ในบทความนี้การเพิ่มสคริปต์ jQuery อย่างง่ายให้กับ WordPress นั้นง่ายเหมือนพายเมื่อคุณรู้วิธี
ใช่มีค่าใช้จ่ายเล็กน้อยเมื่อเทียบกับการใช้วานิลลา HTML แต่ยังมีประโยชน์เพิ่มเติมของการจัดการการพึ่งพาและความชัดเจน
ไม่เพียงแค่นั้นการใช้เทคนิคเล็ก ๆ น้อย ๆ เช่นการข้ามความเข้ากันได้เริ่มต้นของ jQuery WP คุณจะช่วยคุณประหยัดเวลาความพยายามและโค้ดที่ป่องได้มาก
