WordPress được tải sẵn rất nhiều tập lệnh phổ biến – jQuery, Masonry, Underscore. js và hơn thế nữa – và tất cả chúng đều ở đó chờ sẵn, sẵn sàng để bạn kêu gọi chúng hành động. Rõ ràng là không ai muốn trang web của họ bị sa lầy với các tập lệnh mà họ không cần, vì vậy WordPress đăng ký chúng nhưng nó không tự động tải chúng trừ khi bạn yêu cầu nó bằng hàm wp_enqueue_script[]
Xếp hàng tập lệnh và biểu định kiểu là cách được đề xuất để thêm tập lệnh vào chủ đề WordPress của bạn vì ngoài việc cung cấp cho bạn một cách dễ dàng để truy cập danh sách tập lệnh đã đăng ký trước, quy trình xếp hàng còn giúp ngăn xung đột giữa chủ đề và plugin. Nếu bạn thêm jQuery vào đầu tài liệu của mình bằng thẻ script và sau đó sử dụng plugin cũng sử dụng jQuery, bạn có thể sẽ tải jQuery hai lần, điều này không lý tưởng. Enqueueing kịch bản của bạn ngăn chặn điều đó
Một trong những điều tốt nhất về việc sắp xếp các tập lệnh trong WordPress là nó giúp dễ dàng bao gồm các phần phụ thuộc từ danh sách các tập lệnh đã đăng ký trước. Bạn có thể tìm thấy danh sách đầy đủ các tập lệnh trong tham chiếu hàm WordPress. Tất cả những gì bạn phải làm là chuyển điều khiển của phần phụ thuộc vào các đối số của wp_enqueue_script… và thế là xong
Tập lệnh Enqueueing cho giao diện người dùng jQuery
Ví dụ: khi tôi vừa thêm một tiện ích giao diện người dùng jQuery vào một trang web, thay vì truy cập jqueryui. com và tạo một gói tùy chỉnh để chỉ bao gồm một hoặc hai thứ tôi cần, tải chúng xuống và sau đó viết ra một loạt các thẻ tập lệnh để liên kết các tập lệnh khác nhau với phần đầu tài liệu của tôi, tất cả những gì tôi phải làm là thêm 'jquery' và . Chà, gần như tất cả…
WordPress đã tải jQuery và tất cả các tập lệnh giao diện người dùng jQuery được mô-đun menu chọn yêu cầu [bao gồm menu, tiện ích, chuột, vị trí, v.v. – vì vậy bạn có thể thấy lý do tại sao thật tuyệt khi WordPress xử lý việc này]. Nhưng sau khi tìm hiểu một chút, tôi phát hiện ra rằng nó không tải css cần thiết nên menu chọn jQuery của tôi thiếu một số chức năng mặc định như đóng khi người dùng nhấp vào bất kỳ nơi nào khác trên trang
Để giải quyết vấn đề này, tôi đã lấy jquery-ui. cấu trúc. css từ jqueryui. com và liệt kê nó trong các chức năng. php và điều đó đã giải quyết được vấn đề. Tôi có thể đã lấy các bảng định kiểu giao diện người dùng jQuery khác [như một trong những chủ đề mặc định của chúng] nhưng tôi đang viết các kiểu của riêng mình nên không cần bất cứ thứ gì ngoài jquery-ui. cấu trúc. css để sửa chức năng
Vì vậy, mặc dù hơi khó chịu khi các biểu định kiểu giao diện người dùng jQuery bắt buộc không được đăng ký trước và được bao gồm dưới dạng phần phụ thuộc, nhưng việc xếp hàng giao diện người dùng jQuery vẫn hầu như không gây khó khăn và chắc chắn là một cách nhanh chóng để thiết lập và chạy giao diện người dùng jQuery trên một trang web WordPress
Đây là chức năng wp_enqueue_scripts cuối cùng trông như thế nào
function my_add_theme_scripts[] {
// stylesheets
wp_enqueue_style[ 'jquery-structure-css', get_template_directory_uri[] . '/jquery-ui.structure.css' ];
wp_enqueue_style[ 'style', get_stylesheet_uri[] ];
// scripts
wp_register_script[ 'custom.js', get_template_directory_uri[] . '/js/custom.js', array['jquery', 'jquery-ui-selectmenu'], '1.0.0', true ];
wp_enqueue_script['custom.js'];
}
add_action[ 'wp_enqueue_scripts', 'my_add_theme_scripts' ];
Lưu ý về Chế độ không xung đột
Vì WordPress tải jquery ở chế độ không xung đột, bí danh $ sẽ chỉ hoạt động bên trong hàm sẵn sàng cho tài liệu với cú pháp này xuất phát từ một bài báo của Chris Coyier
jQuery[ document ].ready[ function[ $ ] {
// do something
}];
Để sử dụng bí danh $ bên ngoài chức năng sẵn sàng cho tài liệu, thay vào đó hãy bọc nó trong chức năng này
[ function[ $ ] {
// do something
} ][ jQuery ];Bạn cũng có thể sử dụng wp_deregister_script[] để hủy đăng ký jquery mặc định và thêm jquery của riêng bạn, nhưng sau đó bạn sẽ mất lợi ích của chế độ không xung đột
Chỉ xếp hàng đợi các tập lệnh khi bạn cần chúng
Khi bạn sử dụng wp_enqueue_scripts[], thật dễ dàng để tải tập lệnh chỉ trên trang bạn cần. Ví dụ: nếu bạn có tập lệnh hoặc phần phụ thuộc chỉ được yêu cầu trên trang chủ [trong trường hợp này là phần phụ thuộc jQuery UI Selectmenu], thì bạn chỉ có thể đăng ký tập lệnh đó trên trang chủ như vậy
Điều này thật đơn giản và dễ hiểu. Mặc dù điều này rõ ràng là hiệu quả, nhưng sau đó tôi phát hiện ra rằng có một cách tốt hơn để liệt kê các tập lệnh được xây dựng trong lõi WordPress. Trong bài viết này, tôi sẽ chỉ cho bạn cách thức, lý do và thời điểm bạn nên sử dụng wp_enqueue_script[] để tải các tệp JavaScript của mình
Những thứ cơ bản
Để hiểu đầy đủ về cách thức hoạt động của wp_enqueue_script[], chúng ta nên xem qua các hàm wp_head[] và wp_footer[]. Chúng được sử dụng đặt vào tiêu đề của bạn. php và chân trang. php theo cách mà các tệp đó được kết hợp sẽ trông như thế này
wp_head[] và wp_footer[] về cơ bản là những nơi bạn có thể lặp lại mọi thứ thông qua các hook wp_head và wp_footer. Vì vậy, ví dụ này
Và bạn chắc chắn có thể làm một cái gì đó như thế này
- Bạn có thể đặt các phần phụ thuộc cho các tập lệnh bạn tải, vì vậy, ví dụ: bạn có thể thêm jquery làm phần phụ thuộc cho tập lệnh chính của mình. js [không được đề cập trong bài đăng này]
- Bạn có thể sử dụng wp_localize_script để chuyển dữ liệu từ PHP sang JavaScript [xem tại đây để biết thêm thông tin]
wp_enqueue_script[] hoạt động như thế này