Làm cách nào để tắt CSS trong WordPress?

Trong bài đăng này, bạn sẽ tìm hiểu cách tìm và xóa CSS không sử dụng trên trang web của mình và ngăn WordPress chuyển hàng megabyte mã không sử dụng mà không cần bất kỳ plugin nào

Tại sao bạn nên xóa CSS không sử dụng ngay từ đầu?

Thôi nào, hãy nghiêm túc đi, bạn biết tại sao bạn nên làm điều đó.  

Bạn sẽ không ở đây nếu bạn không muốn tối ưu hóa hiệu suất trang web của mình. Bạn có thể đã chạy trang web của mình thông qua trình kiểm tra Tốc độ trang và nhận được đề xuất xóa CSS không sử dụng

Nhiều trang web sử dụng nhiều thư viện của bên thứ 3 hoặc một số chủ đề được tạo sẵn, với nhiều tính năng và mã để giải quyết tất cả các tình huống có thể xảy ra, trong khi chỉ một phần nhỏ trong số đó thực sự được sử dụng. Cuối cùng, bạn chuyển hàng megabyte CSS không sử dụng (mã chết), điều này khiến trang web của bạn tải rất lâu.  

Làm cách nào để tìm CSS không sử dụng?

Nếu bạn sử dụng WordPress, rất tiếc, không có cách nào dễ dàng để tìm CSS không sử dụng, chẳng hạn như chỉ cần cài đặt plugin và nhấp qua một số bước cấu hình. Mặc dù có một số công cụ trực tuyến giúp tìm CSS cần thiết bằng cách gửi URL của bạn.  

Làm sạch. ví dụ: trực tuyến, thu thập dữ liệu trang web của bạn và kiểm tra tất cả các tệp CSS cũng như kiểu nội tuyến. Nhưng thận trọng. nó sẽ xóa tất cả các quy tắc CSS không được sử dụng trên trang đã chỉ định, mặc dù một số trong số chúng có thể được sử dụng trên các trang phụ. Bạn có khả năng chèn nhiều URL, nhưng nếu bạn quản lý một trang web có hàng trăm trang thì việc này có thể khá cồng kềnh

thanh lọc. trực tuyến với nhiều URL và kết quả

từ chối trách nhiệm. thanh lọc. trực tuyến được thực hiện bởi tôi. Thư viện JavaScript purcss, công cụ trực tuyến dựa trên, không

Cách sử dụng mã CSS tinh khiết trên trang web WordPress của bạn

1. Tải lên biểu định kiểu tinh khiết

Bây giờ, nếu bạn đã có mã CSS sạch của mình, hãy sao chép và dán mã đó vào một tệp mới và đặt tên cho nó là kiểu. nguyên chất. css và tải nó lên thư mục chủ đề của bạn (nếu bạn đang sử dụng chủ đề dựng sẵn, tôi hy vọng bạn đã tạo một chủ đề con)

Nếu bạn muốn có các tệp CSS riêng cho từng loại trang, bạn có thể đặt tên cho các tệp của mình là style. trang nhất. nguyên chất. css, phong cách. trang. nguyên chất. css, phong cách. Blog. nguyên chất. css, phong cách. tài liệu lưu trữ. nguyên chất. css, v.v.

2. Xóa các biểu định kiểu hiện có

Bây giờ bạn sẽ phải xóa tất cả các tham chiếu biểu định kiểu khỏi trang web của mình. Bạn có thể làm điều này bằng cách lặp qua tất cả các kiểu được xếp hàng đợi và loại bỏ chúng. Thêm cái này vào functions.php của bạn

// set a variable to make it easy to enable and disable the purifycss feature
// while testing, just append this parameter to your url: http://www.yourwebsite.com/?purifytest
$purifyCssEnabled = array_key_exists('purifytest',$_GET);

// when you're done, set the variable to true - you will be able to disable it anytime with just one change
// $purifyCssEnabled = true;

function dequeue_all_styles() {
    global $wp_styles;
    foreach( $wp_styles->queue as $style ) {
        wp_dequeue_style($wp_styles->registered[$style]->handle);
    }
}

if ($purifyCssEnabled) {
    // this will remove all enqueued styles in head
    add_action('wp_print_styles', 'dequeue_all_styles', PHP_INT_MAX - 1);

    // if there are any plugins that print styles in body (like Elementor),
    // you'll need to remove them as well
    add_action('elementor/frontend/after_enqueue_styles', 'dequeue_all_styles',PHP_INT_MAX);
}

3. Hãy chắc chắn rằng tất cả các phong cách đã được gỡ bỏ

Bây giờ hãy mở URL trang web của bạn với tham số ?purifytest được thêm vào và bạn sẽ chỉ thấy nội dung thô trên trang của mình. Mở trình xem mã nguồn trong trình duyệt của bạn và đảm bảo không còn khối và khối nào

4. Xóa kiểu nội tuyến nếu có

Thật không may, không có hook WordPress nào để loại bỏ các kiểu nội tuyến, vì chúng không được xếp vào hàng đợi như các tham chiếu tệp biểu định kiểu.  

Khả năng duy nhất xuất hiện trong đầu tôi (vui lòng cho tôi biết trong phần nhận xét nếu có cách nào tốt hơn), là xem qua HTML sắp được hiển thị và xóa kiểu nội tuyến bằng biểu thức chính quy. Để nắm bắt toàn bộ HTML, chúng ta cần thực hiện một giải pháp thay thế với bộ đệm đầu ra

Thêm phần này vào tệp functions.php của bạn

/* Remove inline