5 Thủ Thuật Sử Dụng JQuery Với WordPress

5 thủ thuật sử dụng jQuery với WordPress 11/09/2013 webmaster

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.

5 thủ thuật sử dụng jQuery với WordPress 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 :

function my_init() { if (!is_admin()) { wp_enqueue_script('jquery'); } } add_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 :

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', 'https://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');

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 :

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', 'https://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ì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 :

init() { if (!is_admin()) { wp_deregister_script('jquery'); wp_register_script('jquery', 'https://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');

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 :

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

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: jQuery thu thuat wordpress wordpress cơ bản wordpress tips

Chuyên Mục: WordPress

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !

Chia sẻ cho bạn bè

Tweet

Cùng Danh Mục

  • Vô hiệu hóa chỉnh sửa code cho Theme và Plugin từ trang Admin WordPress Vô hiệu hóa chỉnh sửa code cho Theme và Plugin từ trang Admin WordPress
  • Cách tạo vị trí menu và widget trong Theme WordPress Cách tạo vị trí menu và widget trong Theme WordPress
  • Vô hiệu hóa Disqus trên Custom Post Types trong WordPress Vô hiệu hóa Disqus trên Custom Post Types trong WordPress
  • Cách chèn thêm Class cho Menu Item trong WordPress Cách chèn thêm Class cho Menu Item trong WordPress
  • Top 10 Free Blank WordPress Themes Top 10 Free Blank WordPress Themes
  • Hướng dẫn chèn Facebook Author Tag trong WordPress Hướng dẫn chèn Facebook Author Tag trong WordPress
  • Cách phân trang (Paginate) bên trong  WordPress Posts Cách phân trang (Paginate) bên trong WordPress Posts
  • WordPress cơ bản : Chèn logo / hình ảnh vào trong template WordPress cơ bản : Chèn logo / hình ảnh vào trong template
  • Cách nhúng code PHP vào WordPress Text Widget Cách nhúng code PHP vào WordPress Text Widget
  • Cách hiển thị địa chỉ IP người dùng trong WordPress Cách hiển thị địa chỉ IP người dùng trong WordPress
  • Tori Tran

    thank you ttw

Từ khóa » Cách Thêm Jquery Vào Wordpress