Cách Tắt Hoàn Toàn Gutenberg (Block Editor) Trong WordPress và Quay Về Classic Editor

Trương Xuân Thuận

12 Th03 2025 — 6 min read

Nếu bạn là người dùng WordPress lâu năm và không quen với Block Editor (Gutenberg), hoặc đơn giản là muốn website của mình nhẹ hơn, nhanh hơn bằng cách quay về Classic Editor, thì bài viết này chính là dành cho bạn! Trong hướng dẫn này, tôi sẽ chỉ bạn từng bước để tắt hoàn toàn Gutenberg ở mọi nơi (bài viết, trang, widget), đồng thời loại bỏ các tài nguyên không cần thiết liên quan đến Gutenberg để tối ưu hóa tốc độ website. Tất cả chỉ cần vài đoạn code đơn giản trong file functions.php hoặc một plugin tùy chỉnh.

Hãy cùng bắt đầu nào! 🚀

Tại Sao Bạn Muốn Tắt Gutenberg?

Gutenberg được giới thiệu từ WordPress 5.0 như một bước tiến lớn trong việc chỉnh sửa nội dung. Tuy nhiên, không phải ai cũng thích nó. Dưới đây là một số lý do phổ biến mà người dùng muốn quay lại Classic Editor:

Thói quen cũ: Classic Editor đơn giản, quen thuộc, và dễ sử dụng hơn với những người đã dùng WordPress nhiều năm.
Tốc độ website: Gutenberg tải thêm CSS và JS, có thể làm chậm website nếu bạn không dùng đến.
Tương thích: Một số plugin hoặc theme cũ chưa hoạt động tốt với Block Editor.

Nếu bạn nằm trong số đó, hãy làm theo các bước dưới đây để loại bỏ Gutenberg hoàn toàn.

Các Bước Thực Hiện

1. Tắt Hoàn Toàn Gutenberg & Sử Dụng Classic Editor

Để tắt Gutenberg trên tất cả bài viết và trang, đồng thời bật lại Classic Editor, bạn chỉ cần thêm đoạn code sau vào file functions.php trong thư mục theme của bạn (thường nằm ở wp-content/themes/your-theme/functions.php):

function disable_gutenberg_everywhere() {
    add_filter('use_block_editor_for_post', '__return_false', 10); // Tắt Block Editor cho bài viết và trang
    remove_theme_support('core-block-patterns'); // Xóa block patterns không cần thiết
}
add_action('init', 'disable_gutenberg_everywhere');

Giải thích:

Hàm use_block_editor_for_post trả về false để buộc WordPress sử dụng Classic Editor.
remove_theme_support('core-block-patterns') loại bỏ các mẫu khối (block patterns) mà Gutenberg thêm vào, giúp giảm bớt tài nguyên không cần thiết.

Lưu ý: Nếu bạn không muốn chỉnh sửa trực tiếp file functions.php, hãy tạo một child theme hoặc dùng plugin như Code Snippets để thêm code này an toàn hơn.

Kể từ WordPress 5.8, widget cũng chuyển sang sử dụng Block Editor. Nếu bạn muốn quay lại giao diện widget truyền thống, thêm đoạn code sau:

function disable_gutenberg_widgets() {
    remove_theme_support('widgets-block-editor'); // Vô hiệu hóa Block Editor trong widget
}
add_action('after_setup_theme', 'disable_gutenberg_widgets');

Giải thích:

remove_theme_support('widgets-block-editor') tắt tính năng widget khối và khôi phục giao diện Classic Widgets quen thuộc.
Hook after_setup_theme đảm bảo đoạn code chạy đúng thời điểm khi theme được khởi tạo.

Sau khi thêm code này, khu vực widget trong Appearance > Widgets sẽ trở lại như cũ.

3. Xóa CSS & JS Của Gutenberg Để Tăng Tốc Website

Gutenberg tự động tải một số file CSS và JS trên frontend, ngay cả khi bạn không dùng nó. Để loại bỏ chúng và tăng tốc website, dùng đoạn code sau:

function remove_gutenberg_assets() {
    wp_dequeue_style('wp-block-library'); // Xóa CSS Gutenberg trên frontend
    wp_dequeue_style('wp-block-library-theme'); // Xóa CSS block theme
    wp_dequeue_style('global-styles'); // Xóa Global styles
    wp_dequeue_script('wp-block-library'); // Xóa JS Gutenberg nếu có
}
add_action('wp_enqueue_scripts', 'remove_gutenberg_assets', 100);

Giải thích:

wp_dequeue_style và wp_dequeue_script ngăn WordPress tải các file CSS/JS liên quan đến Gutenberg.
Số 100 trong add_action đảm bảo đoạn code chạy sau khi các file đã được enqueue, để có thể xóa chúng hiệu quả.

Kết quả: Website của bạn sẽ nhẹ hơn, đặc biệt hữu ích nếu bạn đang tối ưu hóa tốc độ tải trang (PageSpeed).

4. Xóa Gutenberg Admin Scripts & Styles

Ngay cả trong khu vực quản trị (admin), Gutenberg vẫn tải một số tài nguyên không cần thiết. Để xóa chúng, thêm đoạn code sau:

function remove_gutenberg_admin_assets() {
    wp_dequeue_style('wp-editor');
    wp_dequeue_script('wp-editor');
    wp_dequeue_script('wp-edit-post');
    wp_dequeue_script('wp-format-library');
}
add_action('admin_enqueue_scripts', 'remove_gutenberg_admin_assets', 100);

Giải thích:

Code này chỉ chạy trong khu vực admin (admin_enqueue_scripts), giúp giảm tải tài nguyên khi bạn quản lý website.
Các file như wp-edit-post hoặc wp-format-library không còn cần thiết khi bạn đã chuyển sang Classic Editor.

5. Xóa Block Editor Khỏi REST API (Tùy Chọn)

Nếu website của bạn sử dụng REST API (ví dụ: ứng dụng mobile hoặc tích hợp bên thứ ba), Gutenberg vẫn có thể gửi dữ liệu khối không cần thiết. Để tắt nó, dùng code sau:

function disable_gutenberg_rest_api($data, $post, $context) {
    unset($data['content']['protected']); // Xóa thông tin block
    return $data;
}
add_filter('rest_prepare_post', 'disable_gutenberg_rest_api', 10, 3);

Giải thích:

Đoạn code này lọc dữ liệu REST API và xóa các thông tin liên quan đến khối, giúp API trả về dữ liệu sạch hơn.
Đây là tùy chọn nâng cao, chỉ cần nếu bạn đang tối ưu REST API.

Đoạn Code Đầy Đủ Để Sao Chép

Dưới đây là toàn bộ đoạn code gộp lại, bạn có thể sao chép và dán trực tiếp vào file functions.php hoặc plugin tùy chỉnh:

<?php
// Tắt hoàn toàn Gutenberg & dùng Classic Editor
function disable_gutenberg_everywhere() {
    add_filter('use_block_editor_for_post', '__return_false', 10);
    remove_theme_support('core-block-patterns');
}
add_action('init', 'disable_gutenberg_everywhere');

// Tắt Gutenberg trong widget
function disable_gutenberg_widgets() {
    remove_theme_support('widgets-block-editor');
}
add_action('after_setup_theme', 'disable_gutenberg_widgets');

// Xóa CSS & JS của Gutenberg trên frontend
function remove_gutenberg_assets() {
    wp_dequeue_style('wp-block-library');
    wp_dequeue_style('wp-block-library-theme');
    wp_dequeue_style('global-styles');
    wp_dequeue_script('wp-block-library');
}
add_action('wp_enqueue_scripts', 'remove_gutenberg_assets', 100);

// Xóa Gutenberg scripts & styles trong admin
function remove_gutenberg_admin_assets() {
    wp_dequeue_style('wp-editor');
    wp_dequeue_script('wp-editor');
    wp_dequeue_script('wp-edit-post');
    wp_dequeue_script('wp-format-library');
}
add_action('admin_enqueue_scripts', 'remove_gutenberg_admin_assets', 100);

// Xóa Block Editor khỏi REST API (tùy chọn)
function disable_gutenberg_rest_api($data, $post, $context) {
    unset($data['content']['protected']);
    return $data;
}
add_filter('rest_prepare_post', 'disable_gutenberg_rest_api', 10, 3);
?>

Cách dùng: Chỉ cần sao chép đoạn code trên, dán vào file functions.php hoặc tạo một plugin tùy chỉnh như hướng dẫn bên dưới.

Cách Thêm Code Vào Website

Qua file functions.php:
- Truy cập hosting qua FTP hoặc File Manager trong cPanel.
- Mở file functions.php trong thư mục theme (wp-content/themes/your-theme/).
- Dán đoạn code trên vào cuối file, trước dấu ?> (nếu có).
Tạo plugin tùy chỉnh:
- Tạo một file mới, ví dụ disable-gutenberg.php, trong thư mục wp-content/plugins/.
- Kích hoạt plugin trong Plugins > Installed Plugins.

Dán đoạn code sau vào file:

<?php
/*
 * Plugin Name: Disable Gutenberg Completely
 * Description: Tắt Gutenberg và quay về Classic Editor, tối ưu tốc độ website.
 * Author: Your Name
 * Version: 1.0
 */
// Dán đoạn code đầy đủ từ trên vào đây
?>

Kết Quả Đạt Được

Sau khi áp dụng các bước trên, bạn sẽ:
✔ Tắt hoàn toàn Gutenberg trên bài viết, trang, và widget.
✔ Khôi phục giao diện Classic Editor và Classic Widgets quen thuộc.
✔ Loại bỏ CSS/JS không cần thiết, giúp website nhẹ hơn và tải nhanh hơn.
✔ Tối ưu REST API (nếu cần).

Lưu Ý Cuối Cùng

Sao lưu trước khi chỉnh sửa: Đảm bảo backup website hoặc file functions.php để tránh lỗi không mong muốn.
Kiểm tra sau khi thêm code: Truy cập website và khu vực admin để đảm bảo mọi thứ hoạt động đúng như kỳ vọng.
Cập nhật WordPress: Các đoạn code này hoạt động tốt với phiên bản WordPress tính đến ngày 11/03/2025, nhưng hãy kiểm tra lại nếu WordPress có bản cập nhật lớn.

Kết Luận

Việc tắt Gutenberg và quay về Classic Editor không chỉ giúp bạn làm việc thoải mái hơn mà còn tối ưu hóa hiệu suất website. Với đoạn code đầy đủ trên, bạn có thể dễ dàng áp dụng mà không cần lo sót bước nào. Nếu bạn gặp khó khăn hoặc có câu hỏi, hãy để lại bình luận bên dưới – tôi sẽ hỗ trợ ngay!

Chúc bạn thành công và website của bạn luôn nhanh như gió! 🚀

Cách Tắt Hoàn Toàn Gutenberg (Block Editor) Trong WordPress và Quay Về Classic Editor

Trương Xuân Thuận

Tại Sao Bạn Muốn Tắt Gutenberg?

Các Bước Thực Hiện

1. Tắt Hoàn Toàn Gutenberg & Sử Dụng Classic Editor

2. Tắt Gutenberg Trong Widget (Quay Về Classic Widgets)

3. Xóa CSS & JS Của Gutenberg Để Tăng Tốc Website

4. Xóa Gutenberg Admin Scripts & Styles

5. Xóa Block Editor Khỏi REST API (Tùy Chọn)

Đoạn Code Đầy Đủ Để Sao Chép

Cách Thêm Code Vào Website

Kết Quả Đạt Được

Lưu Ý Cuối Cùng

Kết Luận

Read more

Hướng Dẫn Toàn Diện Bảo Mật OpenWrt: Bảo Vệ Router Trước Mọi Loại Tấn Công

Hướng Dẫn Sử Dụng API MBBank để Lấy Giao Dịch MBBank Tự Động qua Telegram và Webhook

Hướng dẫn cài đặt OpenVPN trên Proxmox Container Ubuntu