Tải có điều kiện các file JS và CSS của plugin WooCommerce.
WooCommerce là một trong những plugin hỗ trợ xây dựng shop bán hàng online trên nền tảng WordPress phổ biến nhất và tốt nhất hiện nay. Theo mặc định, nếu blog/ website WordPress của bạn có cài đặt WooCommerce thì tất cả các trang đều sẽ tải file JS và CSS của plugin này. Điều đó vô tình khiến cho page-size cũng như lượng request của mỗi trang đều tăng lên đáng kể, làm blog/ website của bạn tải chậm hơn, khách hàng phải đợi lâu hơn và nguy cơ mất khách cũng tăng rõ rệt.
Tham khảo thêm:
- Theme Paradise v4.2 chính thức ra mắt, hỗ trợ WooCommerce
- Hướng dẫn sửa lỗi memory limit trong WooCommerce
- Top 10 WooCommerce plugins và extensions miễn phí
Danh sách các file CSS và JS mặc định của WooCommerce
JS của WooCommerce
| http://sitename.com/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js | |
| http://sitename.com/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js | |
| http://sitename.com/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js | |
| http://sitename.com/wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery.cookie.min.js | |
| http://sitename.com/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js |
CSS của WooCommerce
| http://sitename.com/wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css | |
| http://sitename.com/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css | |
| http://sitename.com/wp-content/plugins/woocommerce/assets/css/woocommerce.css |
Để nhìn thấy danh sách các file này, các bạn chỉ cần view source của site trên trình duyệt web hoặc sử dụng các công cụ kiểm tra tốc độ. Nhớ tắt plugin minify hay cache (nếu có) trước khi xem nhé.
Tải có điều kiện các file JS và CSS của WooCommerce
Tải có điều kiện các file JS và CSS của WooCommerce nghĩa là chỉ cho phép chúng tải trên những trang do WooCommerce tạo ra, chẳng hạn như Shop, Cart, Checkout, My Account… Không cho phép chúng tải trên các trang khác (không cần đến CSS và JS của WooCommerce) để tránh làm chậm trang.
Tất cả những gì các bạn cần làm là chèn đoạn code sau đây vào cuối file functions.php của theme (hoặc child theme) mà bạn đang sử dụng:
| //* Conditional load WooCommerce's JS and CSS | |
| function conditionally_load_woc_js_css(){ | |
| if( function_exists( 'is_woocommerce' ) ){ | |
| # Only load CSS and JS on Woocommerce pages | |
| if(! is_woocommerce() && ! is_cart() && ! is_checkout() ) { | |
| ## Dequeue scripts. | |
| wp_dequeue_script('woocommerce'); | |
| wp_dequeue_script('wc-add-to-cart'); | |
| wp_dequeue_script('wc-cart-fragments'); | |
| ## Dequeue styles. | |
| wp_dequeue_style('woocommerce-general'); | |
| wp_dequeue_style('woocommerce-layout'); | |
| wp_dequeue_style('woocommerce-smallscreen'); | |
| } | |
| } | |
| } | |
| add_action( 'wp_enqueue_scripts', 'conditionally_load_woc_js_css' ); |
Lưu lại, xóa cache và minify của web (nếu có), xóa cache trình duyệt và xem kết quả. Chúc các bạn thành công!
Theme Paradise được phát triển bởi WP Căn bản đã mặc định được bổ sung thêm code này từ phiên bản 4.2.2 nên các bạn không cần phải thực hiện thao tác kể trên nữa. Demo chi tiết của giao diện, các bạn có thể xem tại đây:
Mọi thắc mắc và góp ý liên quan đến việc tải có điều kiện các file JS và CSS của plugin WooCommerce xin vui lòng gửi vào khung bình luận bên dưới để được giải đáp.
Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)
Bạn có đang phát triển import demo Shop Style, Blog Style và Magazine Style với 1 click không? Có vậy thì sẽ hoàn hảo và tiện lắm luôn!
Để mình nghiên cứu. Sẽ bổ sung sớm. :D
Theme mình có thể hỗ trợ giao diện full width Layout luôn trong tương lai không? À còn thiếu Porforlio Style nữa?
Full-width có hỗ trợ sẵn rồi mà bạn. Trong phần tùy chọn Layout của từng post/page đó. Portfolio thì để mình nghiên cứu đã. Đã có bản 4.2.4 fix lỗi Landing Page nhé. Bạn update xem sao. :P
Sẵn bạn nghiên cứu tích hợp tùy chỉnh Custom CSS trong customize theme luôn!! :D Mỗi lần update theme là mất hết chỉnh sửa trong style.css.
Cái này mình đang nghiên cứu. Tích hợp tính năng chọn màu rồi. Nhưng chỉ áp dụng được trên file style.css mà không áp được vào file style.min.css. Đang bí. :P Tạm thời bạn tùy biến CSS ở chỗ nào thì copy vào paste vào phần Additional CSS ấy. Update sẽ không bị mất. :P
Lên giao diện 1 menu trên điện thoại trông sáng đẹp hẳn :D
Cái Landing Page nhìn chuyên nghiệp thật, dùng nó để chém nội dung chạy Ads cũng ngon.
Quất 1 bộ ủng hộ mình đi bạn ơi. Hôm nay 15/02 là hạn cuối cùng của khuyến mãi rồi. Giá chỉ 450k – 500k – 600k tùy theo gói thôi. Sau hôm nay về giá gốc là 500k – 600k – 700k. :P
Cảm ơn bạn nhé. Cần ngâm cứu thêm phần này
Cảm ơn bạn nhé. Cần phải nghiên cứu thêm phần này để site chạy nhanh hơn
có cách nào ngoại lệ một js hay css nào trong số đó không bạn?
Bạn bỏ đi đoạn code tương ứng với file JS hoặc CSS đó là được mà. :P
Có thẻ điều kiện nào chỉ áp dụng cho các bài viết ở page 1 không ảnh nhỉ?
Quả này chệu luôn. :D
Em muốn xóa những file js này thì làm sao ạ?
Bạn xóa đi thì WooCommerce hoạt động kiểu gì?
Xóa file css không cần thiết, js hover, slider hình ảnh cho nhẹ ạ! @@
Cái đó là do theme hoặc plugin khác chèn vào chứ WooCommerce mặc định không có đâu bạn nhé.
Đường dẫn là “wp-content/plugins/woocommerce/assets/js/zoom/jquery.zoom.min.js” anh ạ?
Bạn thử dùng plugin Asset CleanUp: Page Speed Booster xem sao.