5 điều lưu ý khi sử dụng jquery trong wordpress

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài 5 điều lưu ý khi sử dụng jquery trong wordpress

Bạn đang sử dụng jQuery và wordpress cùng theo với những plugins + themes, tương lai là một vài gợi ý khi bạn tích hợp jQuery trong wordpress để né gây nên lỗi đáng tiếc.
Chèn jquery vào  wordpress

Sử dụng wp_enqueue_script()

Đây là cách phổ biến nhất để thêm thư viện jquery nói riêng và file javascript nói chung với tag script .
Khi làm việc với wordpress bạn không nên nhúng thẳng thẻ script vào header.php . Để tránh xung đột và các lỗi khác, chúng ta sử dụng hàm wp_enqueue_script('jquery'); , thêm đoạn code sau trong functions.php

 function my_init() { if (!is_admin()) { wp_enqueue_script('jquery'); } } add_action('init', 'my_init');  

Hàm template tag is_admin() sẽ kiểm tra và loại bỏ thêm thừa jquery trong wordpress admin. Hàm callback my_init chạy bởi hook init .

Load jQuery từ host Google Ajax Library

jQuery là thư viện mặc định có bổ trợ trong gói wordpress, bạn sẽ gọi file jquery chứa trong folder hệ thống của wordpress bằng hàm.

 wp_enqueue_script('jquery');  

nó sẽ tự động load jQuery file toạ lạc wp-includes/js/jquery/jquery.js
Tuy nhiên bạn cũng có thể có thể loại bỏ bất kỳ thư viện có sẵn trong wordpress, với hàm wp_deregister_script , chỉ định tên thư viện muốn xóa và cũng có thể có thể thêm mới thư viện từ bên ngoài. Ví dụ sau đây, mình sẽ bỏ sử dụng jquery cũ và khai báo jquery của google ajax.

 function my_init() { if (!is_admin()) { // comment out the next two lines to load the local copy of jQuery wp_deregister_script('jquery'); wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2'); wp_enqueue_script('jquery'); } } add_action('init', 'my_init');  

Có biết bao bạn sử dụng link jquery trực tiếp từ google, chắc hẳn có nhiều điểm lợi. Ngoài ra, nếu bạn yêu thích các thư viện của google thì hãy xem wordpress plugin Use Google Libraries

Load jQuery ở cuối trang

Sử dụng code ở trên, jQuery mặc định sẽ chèn vào trong thẻ head của trang web. Nếu thích jquery chèn ở cuối trang bạn sẽ cần sử dụng thêm tham số $in_footer=true cho hàm wp_enqueue_script() . Sửa lại code như thế này:

 function my_init() { if (!is_admin()) { wp_deregister_script('jquery'); // load the local copy of jQuery in the footer wp_register_script('jquery', '/includes/js/jquery/jquery.js', false, '1.3.2', true); // or load the Google API copy in the footer //wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true); wp_enqueue_script('jquery'); } } add_action('init', 'my_init');  

Chú ý: nếu website đang sử dụng “Google AJAX Library” thì bạn nên đặt jquery ở cuối trang.

Thư viện đòi hỏi jQuery nạp trước

Một vài thư viện tải về hoặc file js bạn tự viết có sử dụng jQuery và có thể có các thư viện khác, như vậy trước khi nạp các thư viện này phải đảm bảo jQuery (và những thư viện khác nếu có) được load trước chúng.
Bạn đừng lo vì wp_enqueue_script cung cấp thêm tham số $deps , wordpress sẽ tự động quản lý thứ tự các thẻ scripts được thêm nữa trang theo ý của bạn. Bằng cách khai báo các thư viện DEPENDENCIES (là các thư viện độc lập được yêu cầu cài đặt trước).
Ví dụ: file javascript trong wordpress theme bạn có dùng jQuery, đoạn code sau đây sẽ đáp ứng không có lỗi khi tải trang.

function my_init() {
if (!is_admin()) {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’, false, ‘1.3.2’, true);
wp_enqueue_script(‘jquery’);

// load a JS file from my theme: js/theme.js
wp_enqueue_script(‘my_script’, get_bloginfo(‘template_url’) . ‘/js/theme.js’, array(‘jquery’), ‘1.0’, true);
}
}
add_action(‘init’, ‘my_init’);

Có thể khai báo nhiều dependencies vào mảng $deps .

jQuery Coding

Hầu hết những phiên bản jQuery đều bắt đầu truy cập với biến $ . Tuy nhiên trong tình huống hiện hữu biến jQuery $ không định vị hoặc bạn sử dụng được cả $ jQuery .
Nếu $ trả về undefined, có thể đã có thêm 1 bản jQuery khác chạy cùng theo với jquery tồn tại trên website, để tiếp tục sử dụng biến $ chúng ta thêm hàm jQuery.noConflict();
, vào page sau khi nạp jquery.

Cách khác, nếu tồn tại biến jQuery bạn có thể sử dụng $ một cách tốt nhất như sau:

 jQuery(function ($) { /* You can safely use $ in this code block to reference jQuery */ });  

Bài viết 5 điều lưu ý khi sử dụng jquery trong wordpress được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang