Gỡ CSS và JS Không Cần Thiết Trong WooCommerce Khi Không Phải Trang Cửa Hàng

admin

14/03/2025

6 Phút đọc

4 Lượt xem

Khi bạn sử dụng WooCommerce trên WordPress, các tệp CSS và JS của plugin này thường được tải trên mọi trang của website, kể cả các trang không liên quan đến cửa hàng. Điều này không chỉ làm chậm tốc độ tải trang mà còn gây lãng phí tài nguyên máy chủ. Bài viết dưới đây sẽ hướng dẫn bạn cách gỡ bỏ các tệp CSS và JS của WooCommerce trên các trang không phải cửa hàng, giúp cải thiện hiệu suất và tối ưu hóa trang web của bạn.

Tại Sao Nên Gỡ Bỏ CSS và JS Của WooCommerce?

Mặc dù WooCommerce là một plugin mạnh mẽ, nhưng nó sẽ tải một số tệp CSS và JS trên tất cả các trang của website, kể cả các trang không liên quan đến cửa hàng. Điều này không chỉ làm giảm hiệu suất mà còn ảnh hưởng đến thời gian tải trang, điều này rất quan trọng đối với trải nghiệm người dùng và SEO.

Các lý do nên gỡ bỏ CSS và JS của WooCommerce:

• Tăng tốc độ tải trang: Việc loại bỏ các tệp không cần thiết giúp giảm thời gian tải trang.
• Tiết kiệm tài nguyên hệ thống: Bằng cách không tải các tài nguyên không cần thiết, bạn sẽ tiết kiệm băng thông và tài nguyên máy chủ.
• Cải thiện trải nghiệm người dùng: Website tải nhanh hơn, mang đến trải nghiệm người dùng mượt mà và dễ chịu hơn.

Cách Gỡ Bỏ CSS và JS WooCommerce Trên Các Trang Không Liên Quan Đến Cửa Hàng

Để làm điều này, bạn chỉ cần thêm một đoạn mã vào file functions.php của theme WordPress. Đoạn mã dưới đây sẽ giúp bạn gỡ bỏ CSS và JS của WooCommerce khi người dùng truy cập vào các trang không phải cửa hàng.

1. Thêm Mã Vào File functions.php

2. Giải Thích Chi Tiết Các Hàm Trong Mã

is_woocommerce_page(): Hàm này kiểm tra xem người dùng có đang ở một trong các trang WooCommerce (cửa hàng, giỏ hàng, thanh toán, tài khoản người dùng) hay không. Nếu có, nó sẽ trả về true, ngược lại sẽ trả về false.

remove_wc_assets_on_non_shop_pages(): Đây là hàm chính giúp xóa các tài nguyên (CSS, JS) không cần thiết của WooCommerce trên các trang không phải là trang WooCommerce. Nó đảm bảo rằng WooCommerce chỉ tải tài nguyên khi cần thiết.

conditionally_enqueue_woocommerce_styles(): Hàm này đảm bảo rằng các tệp CSS của WooCommerce chỉ được tải trên các trang của WooCommerce, giảm thiểu việc tải các tài nguyên không cần thiết.

conditionally_enqueue_wc_scripts(): Hàm này giúp đảm bảo rằng các tệp JS của WooCommerce không được tải trên các trang không phải cửa hàng.

remove_woocommerce_unwanted_actions(): Gỡ bỏ một số actions không cần thiết như wc_gallery_noscript giúp giảm tải các tác vụ không cần thiết trong phần head của trang.