5 Thủ Thuật Sử Dụng JQuery Với WordPress
Có thể bạn quan tâm
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 :
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 tipsChuyê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è
TweetCùng Danh Mục
- 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
- 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
- Top 10 Free Blank WordPress Themes
- Hướng dẫn chèn Facebook Author Tag trong WordPress
- 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
- 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
Từ khóa » Cách Thêm Jquery Vào Wordpress
-
Cách Thêm JQuery Vào WordPress - HelpEx
-
Cách Thêm Mã JQuery Trên WordPress - Tạo Blog
-
Làm Cách Nào để Thêm Tập Lệnh JQuery đơn Giản Vào WordPress?
-
Hướng Dẫn Thêm (nhúng) Thư Viện Jquery Vào Website
-
Hướng Dẫn Nâng Phiên Bản JQuery Trên Website WordPress - Code Tốt
-
Thay Thế Thư Viện JQuery Mặc định Trong WordPress - Hoàng An
-
Cách Thêm Tập Lệnh JQuery Vào WordPress đúng Cách
-
Thêm Js Vào Wordpress Bằng Php - Wpuonline
-
5 điều Lưu ý Khi Sử Dụng Jquery Trong Wordpress - Hoàng Web
-
Thêm Script Vào Wordpress Bằng PHP
-
Hướng Dẫn Cách Thêm File Javascript Vào Wordpress - MegaCode
-
Các Lỗi Thường Gặp Với JQuery Trong WordPress Và Cách Khắc Phục
-
Hướng Dẫn Cách Thêm Css Và Javascript Vào Theme Wordpress
-
Load JQuery Từ CDN Cho WordPress - HocWP
thank you ttw