วิธีเพิ่มสคริปต์ jQuery ไปยัง WordPress อย่างง่ายดาย

WordPress อยู่รอบตัวเรามานานกว่าทศวรรษแล้ว แม้ว่าแพลตฟอร์มดังกล่าวจะมีชื่อเสียงอย่างกว้างขวางในด้านความง่ายในการเข้าถึง แต่การเพิ่ม jQuery ในธีมและปลั๊กอินของ WordPress นั้นเป็นข้อกังวลสำหรับนักพัฒนาหลายคน

ก่อนหน้านี้เราได้เขียนคำแนะนำเกี่ยวกับการแก้ไขปัญหาต่างๆ เช่น หน้าจอสีขาวแห่งความตายของ WordPress และการทำให้ไซต์ WordPress ของคุณเข้าสู่โหมดการบำรุงรักษา และในส่วนนี้ เราจะอธิบายวิธีเพิ่ม jQuery ลงใน WordPress แต่ก่อนที่เราจะเจาะลึกลงไป ต่อไปนี้คือภาพรวมคร่าวๆ ของโหมดความเข้ากันได้ของ jQuery

โหมดความเข้ากันได้ของ jQuery

สิ่งสำคัญเท่าเทียมกันคือต้องเข้าใจว่าโหมดความเข้ากันได้ของ jQuery คืออะไรก่อนเริ่มใช้ jQuery ใน WordPress

jQuery ใน WordPress มีการโหลดไว้ล่วงหน้า และคุณสามารถใช้ในโค้ดของคุณได้ อย่างไรก็ตาม ประเด็นที่นี่คือมันยังมาพร้อมกับโหมดความเข้ากันได้ของ jQuery ซึ่งหลีกเลี่ยงความขัดแย้งกับไลบรารีอื่น ๆ ของภาษาการเขียนโปรแกรมที่แตกต่างกัน

แม้ว่าสิ่งนี้อาจฟังดูค่อนข้างปกติ แต่มีปัญหาเล็กน้อยกับกลไกการป้องกันนี้ เมื่อใช้ jQuery ใน WordPress คุณจะต้องใช้คำว่า “ jQuery ” แทนเครื่องหมาย $ แบบเก่าของเรา

ลองดูตัวอย่างนี้

/* jQuery ปกติ */

$('.hideable').on('click', function() {

$(นี้).ซ่อน();

})

/* โหมดความเข้ากันได้ */

jQuery('.hideable').on('click', function() {

jQuery(นี้).hide();

})

ตอนนี้ปัญหาที่นี่ไม่ใหญ่นัก แต่ก็ไม่น่าพอใจนัก ก่อนอื่น คุณต้องเขียน “ jQuery ” ทุกครั้ง ซึ่งใช้เวลาค่อนข้างนาน และประการที่สอง ทำให้สคริปต์ของคุณดูรกและอ่านยากขึ้น

แต่อย่ากังวล ด้วยการปรับเปลี่ยนเล็กน้อย คุณสามารถแก้ไขปัญหาความเข้ากันได้และสามารถใช้เครื่องหมาย $ แบบเก่าที่ดีได้

สำหรับการอ้างอิง $ เป็นนามแฝงของ jQuery() และหมายเลขอ้างอิงของฟังก์ชัน

นี่คือลักษณะโครงสร้างพื้นฐาน

$(ตัวเลือก).action()

ในที่นี้ เครื่องหมาย $ หมายถึง jQuery, $(selector) ค้นหาองค์ประกอบ HTML และ action() กำหนดการดำเนินการที่จะดำเนินการกับองค์ประกอบเหล่านี้

นี่คือเทคนิคบางอย่างที่คุณสามารถใช้เพื่อแก้ไขปัญหาความเข้ากันได้ของ jQuery

จะแก้ปัญหาความเข้ากันได้ของ jQuery ได้อย่างไร

1. เข้าสู่โหมด "jQuery Stealth"
2. เข้าสู่โหมด “ไม่มีความขัดแย้ง”

เข้าสู่โหมดซ่อนตัวของ jQuery

แหล่งที่มาของรูปภาพ: Podfeet

วิธีแรกและธรรมดาที่สุดในการแก้ไขปัญหาความเข้ากันได้คือการเข้าสู่โหมดซ่อนตัว (ทำให้รหัสของคุณล่องหน)

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

อ้างถึงตัวอย่างนี้

(ฟังก์ชัน($) {

$('.hideable').on('click', function() {

$(นี้).ซ่อน();

})

})( jQuery );

ตอนนี้ ถ้าคุณต้องการเพิ่มสคริปต์ในส่วนหัว ให้รวมทุกอย่างไว้ในฟังก์ชันที่พร้อมสำหรับเอกสาร และส่ง $ ไปพร้อมกัน

นี่คือตัวอย่าง

jQuery (เอกสาร). พร้อม (ฟังก์ชั่น ( $ ) {

$('.hideable').on('click', function() {

$(นี้).ซ่อน();

})

});

เข้าสู่โหมดไม่มีความขัดแย้ง

ตอนนี้วิธีนี้เป็นวิธีที่ค่อนข้างง่ายในการแก้ไขปัญหาความเข้ากันได้ สิ่งที่คุณต้องทำคือประกาศโค้ดบรรทัดนี้ที่ด้านบนของสคริปต์ และคุณสามารถใช้ $j แทนเครื่องหมาย $ เริ่มต้นได้

var $j = jQuery.noConflict();

เมื่อคุณรู้วิธีใช้ jQuery ใน WordPress แล้ว มาดูหัวข้อหลักของเรากัน – วิธีเพิ่มสคริปต์ jQuery ไปยังไซต์ WordPress ของคุณ

วิธีเพิ่ม jQuery ไปยังไซต์ WordPress

ที่มาของภาพ: fl1digital.com

การเพิ่ม jQuery ลงใน WordPress สามารถทำได้ง่ายๆ ด้วยกระบวนการที่เรียกว่า Enqueueing

เราใช้องค์ประกอบ <link> เพื่อเพิ่มสคริปต์ในเว็บไซต์ HTML ปกติ เราสามารถทำสิ่งเดียวกันใน WordPress ได้เช่นกัน อย่างไรก็ตาม เราต้องเล่นฟังก์ชันพิเศษบางอย่างของ WordPress เพื่อเข้าถึง โปรดทราบว่าการทำเช่นนี้จะจัดการกับการพึ่งพาทั้งหมดสำหรับคุณ

สมมติว่าคุณกำลังใช้ธีม WordPress ใช้ฟังก์ชันนี้ในไฟล์ functions.php ของคุณ

wp_enqueue_script()

นี่คือลักษณะที่ปรากฏ

ฟังก์ชั่น my_theme_scripts () {

wp_enqueue_script( 'my-great-script', get_template_directory_uri() . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', จริง );

}

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

ต่อไปนี้เป็นข้อโต้แย้งห้าข้อที่ฟังก์ชันนี้ใช้

1. $handle: หมายเลข อ้างอิงเฉพาะที่สามารถใช้เพื่ออ้างถึงสคริปต์
2. $src: ตำแหน่งของไฟล์สคริปต์ของคุณ
3. $deps: ใช้เพื่อระบุอาร์เรย์ของการพึ่งพา
4. $ver: หมายเลขเวอร์ชันของสคริปต์
5. $in_footer: เพื่อสั่ง WordPress ว่าจะวางสคริปต์ไว้ที่ใด

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

ที่เกี่ยวข้อง: คู่มือขั้นสูงสุดของคุณเกี่ยวกับวิธีการแก้ไข WordPress – HTML, CSS, PHP, JavaScript

วิธีเพิ่มสคริปต์ jQuery ให้กับผู้ดูแลระบบ WordPress

คุณสามารถเพิ่ม jQuery ให้กับผู้ดูแลระบบ WordPress โดยใช้ฟังก์ชันเดียวกัน สิ่งที่คุณต้องทำที่นี่คือการใช้เบ็ดอื่น

นี่คือตัวอย่าง

ฟังก์ชั่น my_admin_scripts () {

wp_enqueue_script( 'my-great-script', plugin_dir_url( __FILE__ ) . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', จริง);

}

add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );

ตอนนี้เพียงสลับ wp_enqueue_scripts กับ admin_enqueue_scripts และคุณก็พร้อมแล้ว

วิธียกเลิกการลงทะเบียน jQuery ใน WordPress

คุณต้องยกเลิกการลงทะเบียน jQuery ของ WordPress หากคุณต้องการใช้ jQuery เวอร์ชันอื่นจากพรีโหลด

นี่คือตัวอย่างวิธีการยกเลิกการลงทะเบียน jQuery ใน WordPress

// รวม 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');

มันง่าย สิ่งที่คุณต้องทำคือยกเลิกการลงทะเบียน jQuery ของ WordPress โดยใช้ wp_deregister_script() และรวมสคริปต์ที่คุณต้องการ

สิ่งหนึ่งที่ต้องจำไว้คือเราได้เพิ่ม Google โฮสต์ไลบรารี jQuery ในตัวอย่างนี้ คุณต้องสลับด้วย URL ของสคริปต์ของคุณเอง

คุณควรลงทะเบียนสคริปต์ก่อนเข้าคิวหรือไม่

คุณสามารถลงทะเบียนสคริปต์ก่อนหน้านี้ในกระบวนการหากคุณต้องการให้โหลดเมื่อจำเป็นในหน้าเว็บของคุณเท่านั้น

นี่คือตัวอย่าง

add_action( 'wp_loaded', 'register_all_scripts' );

ฟังก์ชัน register_all_scripts()

{

wp_register_script(…);

}

เมื่อคุณทำเสร็จแล้ว ให้จัดคิวสคริปต์เมื่อคุณต้องการ นี่คือวิธีการ

add_action( 'wp_enqueue_scripts', 'enqueue_front_scripts' );

add_action( 'admin_enqueue_scripts', 'enqueue_back_scripts' );

การใช้แท็กแบบมีเงื่อนไข

คุณยังสามารถใช้แท็กแบบมีเงื่อนไขเพื่อโหลด jQuery ของคุณใน WordPress เมื่อจำเป็นเท่านั้น

แม้ว่าโดยทั่วไปจะใช้วิธีนี้ในการดูแลระบบที่คุณต้องการใช้เฉพาะในหน้าเว็บบางหน้าเท่านั้น แต่ก็ช่วยประหยัดแบนด์วิดท์และเวลาในการประมวลผลได้มาก ช่วยเพิ่มความเร็วในการโหลดเว็บไซต์ของคุณในท้ายที่สุด

โปรดดูเอกสารสคริปต์ตัวเข้ารหัสผู้ดูแลระบบของ WordPress สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้แท็กเพิ่มเติม

วิธีเพิ่ม jQuery ไปยัง WordPress โดยใช้ปลั๊กอิน

WordPress มีมากกว่าไดเรกทอรีปลั๊กอินที่มีปลั๊กอินมากกว่า 45,000 ตัว คุณสามารถหาปลั๊กอินสำหรับฟังก์ชันที่คุณต้องการได้บนไซต์ WordPress ของคุณ

เช่นเดียวกับการเพิ่ม jQuery ในหน้าเว็บไซต์ WordPress ธีมและโพสต์ ฯลฯ

ต่อไปนี้คือปลั๊กอินยอดนิยมบางส่วนสำหรับการเพิ่ม jQuery ใน WordPress

• ฟิลด์กำหนดเองขั้นสูง
• CSS แบบกำหนดเองอย่างง่าย และ JS
• สคริปต์ N สไตล์
• การล้างข้อมูลสินทรัพย์

บทสรุป

ดังนั้นคุณไป ตอนนี้คุณรู้วิธีเพิ่มและใช้งาน WordPress jQuery แล้ว

การใช้ความรู้นี้กับโครงการของคุณจะช่วยให้คุณสร้างโครงการที่ยอดเยี่ยมได้ คุณยังสามารถอ่านคำแนะนำขั้นสุดท้ายของเราในหัวข้อต่างๆ เช่น JPG กับ JPEG และ WordPress White Label เพื่อเพิ่มพูนความรู้ของคุณ