Home »

5 thủ thuật sử dụng jQuery với WordPress

13 thg 9, 2013
Thật không khó để sử dụng jQuery trong trang WordPress, hôm nay mình xin chia sẻ với các bạn 5 cách đối phó với jQuery khi bạn sử dụng nó trong WordPress Theme hoặc Plugin.

1 Sử dụng wp_enqueue_script()
Thông thường để chèn jQuery vào trong trang web, chúng ta thường sử dụng các thẻ <script> và đặt nó ở bên trong thẻ <head> hoặc nằm bên dưới footer, tuy nhiên nếu bạn cần phát triển một plugin của riêng bạn thì việc sử dụng này là không khả quan, để chèn jQuery vào trong trang wordpress các bạn chỉ cần làm theo như đoạn code sau :
1function my_init() {
2    if (!is_admin()) {
3        wp_enqueue_script('jquery');
4    }
5}
6add_action('init', 'my_init');
Bạn có thể thay thế tên my_init bằng bất cứ cái tên nào mà bạn muốn, tuy nhiên các bạn nên đặt tên duy nhất để tránh xung đột với những plugins nào đó cũng sử dụng tên này. Các bạn có thể chèn đoạn code trên vào bên trong file functions.php của theme wordpress bạn đang sử dụng, hoặc chèn trực tiếp vào bên trong file plugin mà bạn đang phát triển.
Để hiểu rõ hơn về đoạn code trên các bạn có thể tham khảo :
  • wp_enqueue_script()
  • add_action()
  • is_admin()
2 Load jQuery từ Google AJAX Library
Khi chúng ta sử dụng wp_enqueue_script(‘jquery’); thì WordPress sẽ tự động load jQuery từ thư mục wp-includes/js/jquery/jquery.js .
Tuy nhiên trong một số trường hợp bạn không muốn load từ thư mục này mà bạn muốn lấy jQuery trực tiếp từ  Google AJAX Library thì bạn nên viết lại như thế này :
1function my_init() {
2    if (!is_admin()) {
3        // comment out the next two lines to load the local copy of jQuery
4        wp_deregister_script('jquery');
5        wp_register_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
6        wp_enqueue_script('jquery');
7    }
8}
9add_action('init', 'my_init');
3 Đặt jQuery vào vị trí Footer
Mặc định jQuery sẽ được đặt bên trong thẻ <head> để có thể đặt nó nằm ở phía dưới footer các bạn sử dụng đoạn code như sau :
01function my_init() {
02    if (!is_admin()) {
03        wp_deregister_script('jquery');
04 
05        // load the local copy of jQuery in the footer
06        wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2', true);
07 
08        // or load the Google API copy in the footer
09        //wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);
10 
11        wp_enqueue_script('jquery');
12    }
13}
14add_action('init', 'my_init');
Chìa khóa giải quyết vấn đề ở đây là đặt giá trị true vào vị trí tham số $in_footer (vị trí cuối cùng ) của hàm wp_enqueue_script()
4 Chèn một file jQuery từ folder theme hay folder plugin của bạn
Giả sử bạn có một file .js muốn chèn vào bên trong web từ theme hay plugin thì các bạn có thể làm như sau :
01init() {
02    if (!is_admin()) {
03        wp_deregister_script('jquery');
04        wp_register_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2',true);
05        wp_enqueue_script('jquery');
06 
07        // load a JS file from my theme: js/theme.js
08        wp_enqueue_script('my_script', get_bloginfo('template_url') . '/js/theme.js', array('jquery'), '1.0', true);
09    }
10}
11add_action('init', 'my_init');
Trong đoạn code trên theme.js chính là file JavaScript mà chúng ta muốn chèn vào.
5 Quy ước coding jQuey
Để tránh xung đột với các mã nguồn khác, mặc định WordPress tự động gọi hàm jQuery.noConflict(); , để chuyển đổi biến $ thành jQuery, do đó các bạn có thể viết các câu lệnh jQuery như sau :
1jQuery(function ($) {
2    /* You can safely use $ in this code block to reference jQuery */
3});
như vậy là thay vì đặt kí tự $ ở đằng trước như mọi khi, thì các bạn có thể sử dụng jQuery đứng trước để thay thế, việc làm này sẽ giúp bạn tránh được xung đột với các code khác.
Có thể trong lúc viết bài có thể có nhiều chỗ chưa rõ ràng hoặc gây nhầm lẫn cho người đọc,vì thế nếu có thắc mắc hay góp ý gì về bài viết này, thì mình mong các bạn sẽ để lại lời nhắn dưới dạng comments để cùng nhau thảo luận nhé.
Chúc các bạn thành công !
Tags:

Comments[ 0 ]


Đăng nhận xét