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.

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-css và wp-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.

Trước khi thực hiện, các bạn nên sao lưu lại trang web.

Xem top 6 Plugin Backup WordPress tốt nhất

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 );

view raw wp-remove-gutenberg-block-library-css.php hosted with ❤ by GitHub

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
	}