WordPress đã là một phần của cuộc sống của chúng ta hơn 16 năm, nhưng phương pháp thêm tập lệnh vào các chủ đề và plugin vẫn còn là một bí ẩn đối với nhiều nhà phát triển. Trong bài viết này, chúng tôi cuối cùng đã chấm dứt sự nhầm lẫn.
Vì nó là một trong những thư viện JavaScript được sử dụng rộng rãi nhất, nên hôm nay chúng ta sẽ thảo luận về cách thêm các tập lệnh jQuery vào các chủ đề của bạn hoặc plugin WordPress.
Giới thiệu về chế độ tương thích jQuery
Trước khi bạn bắt đầu thêm tập lệnh vào WordPress, điều quan trọng là phải hiểu chế độ tương thích của jQuery.
Như bạn có thể biết, WordPress đi kèm với jQuery đã được bao gồm.
Phiên bản của jQuery trên WordPress cũng có " chế độ tương thích Đó là cơ chế tránh xung đột với các thư viện javascript khác.
Một phần của cơ chế bảo vệ này có nghĩa là bạn ne pouvez pas sử dụng $ký trực tiếp như bạn làm trong các dự án khác.
Thay vào đó, khi viết mã jQuery cho WordPress, bạn nên sử dụng jQuery.
Đây là một ví dụ về mã đó:
/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})
Vấn đề là, việc viết jQuery hàng triệu lần mất nhiều thời gian hơn, khiến nó khó đọc hơn và có thể làm nặng tập lệnh của bạn.
Tin tốt?
Với một vài sửa đổi, bạn lại có thể sử dụng biểu tượng đô la nhỏ dễ thương của chúng tôi.
Nhân tiện, nếu bạn là mới đối với jQuery , dấu $ chỉ là bí danh cho jQuery (), sau đó là bí danh cho hàm.
Cấu trúc cơ bản trông như thế này: $(selector).action(). Ký hiệu đô la định nghĩa jQuery… các truy vấn “(selector)” hoặc tìm các phần tử HTML… và cuối cùng là “jQuery () action” là hành động được thực hiện trên các phần tử.
Quay lại cách chúng ta có thể giải quyết vấn đề tương thích của mình, đây là một số tùy chọn khả thi:
1.Nhập chế độ tàng hình jQuery
Cách đầu tiên để có được chế độ tương thích là lẻn vào mã.
Ví dụ: nếu bạn tải tập lệnh của mình ở chân trang, bạn có thể bọc mã của mình trong một hàm ẩn danh, nó sẽ ánh xạ jQuery $.
Như trong ví dụ dưới đây:
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
Nếu bạn muốn thêm tập lệnh của mình vào tiêu đề (bạn nên tránh nếu có thể, hãy tìm hiểu thêm về điều đó bên dưới), bạn có thể gói mọi thứ trong một hàm sẵn sàng cho tài liệu, chuyển $dọc đường
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. Vào chế độ "Không xung đột"
Một cách dễ dàng khác để tránh viết sai jQuery là chuyển sang chế độ "Xung đột miễn phí" và sử dụng một phím tắt khác nhau.
Trong trường hợp này: $jthay vì mặc định $.
Tất cả bạn phải làm là khai báo nó ở đầu tập lệnh của bạn:var $j = jQuery.noConflict();
Được rồi, bây giờ bạn đã biết thêm về cách viết mã jQuery hợp lệ cho WordPress, hãy thêm nó vào Website.
Cách thêm tập lệnh jQuery vào WordPress
Một trong những cách dễ nhất để thêm tập lệnh jQuery vào WordPress là thông qua một quy trình có tên là 'thiết lập hàng đợi '.
Đối với một Website HTML cổ điển, chúng tôi sẽ sử dụng <link> mục để thêm tập lệnh. WordPress cuối cùng cũng làm như vậy, nhưng chúng tôi sẽ sử dụng các chức năng WP đặc biệt để đạt được điều này.
Theo cách này, nó quản lý tất cả các phụ thuộc của chúng tôi cho chúng tôi (cảm ơn WP!).
Nếu bạn đang làm việc trên một chủ đề, bạn có thể sử dụng chức năng wp_enqueue_script() trong functions.php tập tin.
Đây là những gì nó trông giống như:
function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
Chức năng này mất năm đối số:
- $ handle - một xử lý duy nhất mà bạn có thể sử dụng để tham chiếu đến tập lệnh.
- $ src - vị trí của tệp script.
- $ deps - chỉ định một mảng phụ thuộc.
- $ ver - số phiên bản của tập lệnh của bạn.
- $ in_footer - cho phép WordPress biết nơi đặt tập lệnh.
* Một điều cần lưu ý $in_footer có nghĩa là theo mặc định các tập lệnh sẽ được tải trong tiêu đề.
Đây là một thực tiễn không tốt và có thể làm chậm trang web của bạn đáng kể. Do đó, nếu bạn muốn đặt tập lệnh của mình ở chân trang, hãy đảm bảo thông số này được đặt thành true.
Thêm tập lệnh vào quản trị viên WordPress
Bạn cũng có thể thêm tập lệnh cho quản trị viên. Các chức năng sử dụng hoàn toàn giống nhau, bạn chỉ cần sử dụng một móc khác.
dụ Mệnh giá:
hàm my_admin_scripts () {
wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', array ('jquery'), '1.0.0', true);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');
Thay vì đăng nhập, wp_enqueue_scriptschúng ta phải sử dụng admin_enqueue_scripts.
Cách hủy đăng ký jQuery khỏi WordPress
Nhưng nếu bạn muốn sử dụng một phiên bản jQuery khác với phiên bản được tải sẵn bởi WordPress thì sao?
Bạn có thể xếp hàng đợi nó… nhưng điều đó có nghĩa là sẽ có hai phiên bản jQuery trên trang.
Để ngăn điều này xảy ra, chúng tôi cần hủy đăng ký phiên bản WP.
Đây là những gì nó trông giống như:
// bao gồm jQuery tùy chỉnh
Hàm shapeSpace_include_custom_jquery () {
wp_deregister_script ('jquery');
wp_enqueue_script(
'jquery',
'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',
array(),
null,
true);
}
add_action ('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');Nó dễ dàng như sử dụng wp_deregister_script () vì unregister jQuery từ WP, sau đó bao gồm tập lệnh jQuery mà bạn muốn thêm.
Trong ví dụ trên, chúng tôi đã sử dụng Thư viện jQuery được lưu trữ bởi Google , nhưng rõ ràng bạn sẽ thay thế nó bằng URL của tập lệnh của riêng bạn.
Bạn không nên lưu các tập lệnh trước khi xếp hàng đợi chúng?
Nếu bạn muốn tải các tập lệnh của mình khi cần thay vì tải chúng trực tiếp vào các trang của mình - bạn có thể lưu tập lệnh trước đó.
Ví dụ: trên wp_loaded:
add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}
Khi bạn đã hoàn thành việc đó, bạn có thể xếp các tập lệnh vào hàng đợi khi cần:
| add_action ('wp_enqueue_scripts', 'enqueue_front_scripts'); |
| add_action ('admin_enqueue_scripts', 'enqueue_back_scripts'); |
Nhớ sử dụng các tên giống nhau để tránh đụng hàng với các script khác.
Sử dụng thẻ có điều kiện
Sử dụng các thẻ có điều kiện để chỉ tải các tập lệnh của bạn khi cần thiết.
Điều này được sử dụng thường xuyên hơn trong quản trị viên, nơi bạn chỉ muốn sử dụng tập lệnh trên một trang cụ thể (chứ không phải trên toàn bộ quản trị viên). Nó cũng tiết kiệm băng thông và thời gian xử lý, nghĩa là thời gian tải nhanh hơn cho Website.
Hãy nhìn vào tài liệu về tập lệnh xếp hàng trong Codex WordPress để biết thêm thông tin.
Thêm jQuery vào WordPress bằng các plugin
Thư mục plugin WP cũng chứa nhiều plugin thú vị mà bạn có thể sử dụng để chèn tập lệnh vào bài viết, trang của mình hoặc Chủ đề WordPress.
Dưới đây là một số ví dụ về các plugin JavaScript / jQuery nổi tiếng: trường tùy chỉnh nâng cao , CSS và JS tùy chỉnh đơn giản , kịch bản kiểu n et làm sạch tài nguyên.
Tạo dự án jQuery của riêng bạn
Hiểu rõ hơn về jQuery sẽ chỉ làm cho công việc của bạn có tác động hơn. Cho dù cho trang web của riêng bạn hay cho các dự án của khách hàng.
jQuery nổi tiếng vì sự đơn giản của nó và như bạn (hy vọng) đã học được trong bài viết này, việc thêm các tập lệnh jQuery đơn giản vào WordPress sẽ dễ dàng như miếng bánh khi bạn biết cách.
Có, có một chút chi phí so với việc sử dụng HTML vani, nhưng cũng có lợi ích bổ sung là quản lý phụ thuộc và rõ ràng.
Không chỉ vậy, bằng cách sử dụng các thủ thuật nhỏ như bỏ qua khả năng tương thích mặc định của jQuery WP, bạn sẽ tiết kiệm cho mình rất nhiều thời gian, công sức và mã cồng kềnh.
