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

Bạn đang sử dụng jQuery và wordpress cùng với các plugins + themes, sau đây là một vài gợi ý khi bạn tích hợp jQuery trong wordpress để tránh gây ra lỗi đáng tiếc.

Sử dụng wp_enqueue_script()

Đây là cách thông dụng 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ó hỗ 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 nằm tại wp-includes/js/jquery/jquery.js
Tuy nhiên bạn 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ó 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ó rất nhiều 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ì nên 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', '/wp-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 yêu cầu 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 vào 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ẽ đảm bảo 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 các phiên bản jQuery đều bắt đầu truy cập với biến $. Tuy nhiên trong trường hợp tồn tại biến jQuery mà $ không xác định hoặc bạn sử dụng được cả $ và jQuery.
Nếu $ trả về undefined, có thể đã có thêm một bản jQuery khác chạy cùng 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 */
});

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook