Xóa Gutenberg CSS khỏi WordPress

Xóa Gutenberg CSS khỏi WordPress

Kể từ phiên bản WordPress 5.0, trình soạn thảo khối (Gutenberg editor) xuất hiện trên WordPress. Mặc dù bạn có sử dụng hay không thì trình soạn thảo này luôn hiện hữu trong WordPress.

Loại bỏ Gutenberg CSS

Nếu là một webmaster quan tâm đến tốc độ trang web, bạn sẽ thấy rằng mỗi khi tải trang sẽ đính kèm theo CSS của Gutenberg. Bất cứ request dư thừa nào khi tải trang sẽ làm chậm tốc độ trang web của bạn, và nếu bạn không dùng Gutenberg thì hãy xóa nó đi.

Gutenberg stylesheet

Gutenberg stylesheet gồm 2 file CSS là wp-block-library-csswp-block-library-theme-css, được tải trên tất cả các trang wordpress từ phiên bản 5.0. 2 tệp CSS này dùng để hỗ trợ giao diện cho trình soạn thảo khối. Tuy nhiên nếu bạn đang dùng trình soạn thảo Classic Editor thì hãy xóa bỏ chúng để tăng tốc độ.

Khi view-source để kiểm tra mã nguồn của trang, bạn sẽ luôn thấy tệp CSS block-library/style.min.css được tải kèm.

tệp CSS block-library/style.min.css được tải kèm trang
Tệp CSS block-library/style.min.css được tải kèm

Xóa bỏ Gutenberg CSS

Bạn có thể dễ dàng loại bỏ CSS của Gutenberg bằng đoạn code PHP đơn giản bên dưới. Tuy nhiên, nếu bạn đang sử dụng trình soạn thảo khối mặc định của WordPress thì không nên áp dụng đoạn code này.

Các bạn thêm đoạn sau vào file functions.php trong theme đang sử dụng. Ngoài việc xóa CSS mặc định của Gutenberg, đoạn mã dưới còn giúp xóa thêm block CSS của WooCommerce.

Các bạn có thể áp dụng 1 trong 2 đoạn code cung cấp ở bên dưới.

Chỉ xóa Gutenberg CSS ở front-end

Nếu bạn vẫn muốn sử dụng trình soạn thảo khối mặc định và chỉ muốn xóa CSS ở trang front-end. Hãy áp dụng đoạn mã sau:

<?php
//Xoa Gutenberg Block Library CSS khỏi WordPress
function vietrick_remove_wp_block_library_css(){
wp_dequeue_style( 'wp-block-library' );
wp_dequeue_style( 'wp-block-library-theme' );
wp_dequeue_style( 'wc-blocks-style' ); // Remove WooCommerce block CSS
}
add_action( 'wp_enqueue_scripts', 'vietrick_remove_wp_block_library_css', 100 );

Xóa Gutenberg CSS ở trình soạn thảo

Nếu bạn đã cài đặt sẵn plugin Classic Editor, thì hãy áp dụng đoạn mã sau để tắt triệt để trình soạn thảo khối khi soạn thảo bài viết.

// Fully Disable Gutenberg editor.
add_filter('use_block_editor_for_post_type', '__return_false', 10);
// Don't load Gutenberg-related stylesheets.
add_action( 'wp_enqueue_scripts', 'vietrick_remove_block_css', 100 );
function vietrick_remove_block_css() {
wp_dequeue_style( 'wp-block-library' ); // WordPress core
wp_dequeue_style( 'wp-block-library-theme' ); // WordPress core
wp_dequeue_style( 'wc-block-style' ); // WooCommerce Block
wp_dequeue_style( 'storefront-gutenberg-blocks' ); // Storefront theme
}

Nếu một ngày nào đó bạn có định quay lại sử dụng Gutenberg thì nhớ xóa/comment-out đoạn mã trên nhé.

Kiểm tra kết quả

Sau khi áp dụng đoạn mã vào file functions.php, chúng ta có thể quay lại trang chủ/bài viết để kiểm tra kết quả.

block-library/style.min.css đã bị xóa khỏi mã nguồn
block-library/style.min.css đã bị loại bỏ khỏi mã nguồn thành công

Chúc các bạn thực hiện thành công. Nếu có vấn đề hãy để lại bình luận bên dưới nhé.

5/5 - (1 bình chọn)
guest

0 Comments
Inline Feedbacks
Xem tất cả bình luận