Cách tùy chỉnh màu nền của WordPress Block Editor

Tác giả sysadmin, T.Tư 11, 2023, 04:05:32 CHIỀU

« Chủ đề trước - Chủ đề tiếp »

0 Thành viên và 1 Khách đang xem chủ đề.

Cách tùy chỉnh màu nền của WordPress Block Editor


Bạn có muốn thay đổi màu nền của trình chỉnh sửa khối WordPress dành cho quản trị viên không?

Đôi khi, khi làm việc trên một dự án khách hàng tùy chỉnh, bạn có thể muốn thay đổi màu nền của trình soạn thảo Gutenberg trong WordPress để phù hợp với màu sắc thương hiệu của họ.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng tùy chỉnh màu nền của trình chỉnh sửa khối WordPress cho khu vực quản trị.

Lưu ý: Hướng dẫn này đề cập đến việc thay đổi màu trình chỉnh sửa trong quản trị viên WordPress. Nếu bạn đang tìm cách thay đổi màu nền trong giao diện người dùng WordPress, vui lòng xem hướng dẫn của chúng tôi về cách thay đổi màu nền trong WordPress.

1. Tại sao thay đổi màu nền của Trình chỉnh sửa khối trong WordPress?

Bạn có thể muốn thay đổi màu nền của trình chỉnh sửa khối WordPress vì một số lý do.

Chẳng hạn, hầu hết các chủ đề WordPress hiện đại sử dụng cùng một màu nền cho trình chỉnh sửa khối như trang web trực tiếp bao gồm Astra, OceanWP, GeneratePress, v.v.

Tuy nhiên, nếu chủ đề WordPress của bạn không sử dụng cùng màu, thì hình thức bài đăng của bạn bên trong trình chỉnh sửa sẽ trông khá khác so với những gì người dùng của bạn sẽ thấy trên trang web trực tiếp.

Một lý do khác để thay đổi màu nền có thể là sở thích cá nhân.

Chẳng hạn, theo mặc định, trình chỉnh sửa khối sử dụng nền trắng trơn. Một số người dùng có thể cảm thấy hơi căng thẳng khi nhìn vào màn hình trắng trong nhiều giờ. Mỏi mắt có thể là một vấn đề thực sự đối với nhiều người và nền trắng mặc định không dễ nhìn.


Nói như vậy, hãy xem cách bạn có thể dễ dàng thay đổi màu nền của trình soạn thảo WordPress.

2. Cách thay đổi màu nền của trình soạn thảo WordPress

Bạn có thể dễ dàng thay đổi màu nền của trình soạn thảo WordPress bằng cách thêm mã tùy chỉnh vào tệp tin functions.php của chủ đề.

Tuy nhiên, hãy nhớ rằng ngay cả lỗi nhỏ nhất trong mã cũng có thể phá vỡ trang web của bạn và khiến nó không thể truy cập được. Đó là lý do tại sao chúng tôi khuyên bạn nên sử dụng plugin WPCode. Đó là plugin đoạn mã WordPress tốt nhất trên thị trường và là cách dễ nhất và an toàn nhất để thêm mã tùy chỉnh vào trang web WordPress của bạn.

Trước tiên, bạn cần cài đặt và kích hoạt plugin WPCode miễn phí. Để biết thêm hướng dẫn, vui lòng xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

Sau khi kích hoạt, bạn cần truy cập trang Đoạn mã » + Thêm đoạn mã từ thanh bên quản trị.

Từ đây, bạn phải nhấp vào nút 'Sử dụng đoạn mã' bên dưới tùy chọn 'Thêm mã tùy chỉnh của bạn (Đoạn mã mới)'.


Điều này sẽ đưa bạn đến trang 'Tạo đoạn mã tùy chỉnh' nơi bạn có thể bắt đầu bằng cách nhập tên cho đoạn mã của mình. Điều này chỉ dành cho bạn và có thể là bất kỳ thứ gì giúp bạn xác định mã.

Tiếp theo, bạn cần chọn 'Đoạn mã PHP' làm 'Loại mã' từ menu thả xuống bên phải.


Sau đó, bạn cần sao chép và dán đoạn mã sau vào hộp 'Xem trước mã'.
   
Mã nguồn [Chọn]
add_action( 'admin_footer', function() {
    ?>
    <style>
       .editor-styles-wrapper {
            background-color: #bee0ec;
        }
    </style>
    <?php
});

Tiếp theo, bạn cần tìm đoạn mã sau trong đoạn mã PHP mà bạn vừa dán.

Mã nguồn [Chọn]
background-color: #bee0ec;
Sau đó, bạn phải thêm mã hex của màu ưa thích bên cạnh tùy chọn màu nền. Nếu không muốn sử dụng mã hex, bạn có thể sử dụng một số tên màu cơ bản như "trắng" hoặc "xanh dương" để thay thế.


Sau đó, bạn cần cuộn xuống phần 'Chèn' và chọn tùy chọn 'Chèn tự động'.

Tiếp theo, bạn cần chọn 'Vị trí' của đoạn mã là 'Chỉ dành cho quản trị viên' từ trình đơn thả xuống.


Sau đó, bạn cần cuộn trở lại đầu trang và chuyển nút 'Không hoạt động' thành 'Hoạt động'.

Cuối cùng, đừng quên nhấp vào nút 'Save Snippet' để lưu các thay đổi của bạn.


Bây giờ, hãy truy cập trình chỉnh sửa khối từ thanh bên quản trị.

Đây là giao diện của trình chỉnh sửa khối trên trang web của chúng tôi sau khi thêm đoạn mã CSS.


Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ dàng thay đổi màu nền của trình soạn thảo WordPress. Bạn cũng có thể muốn xem hướng dẫn cuối cùng của chúng tôi về hơn 85 phím tắt tiết kiệm thời gian cho WordPress hoặc xem các lựa chọn hàng đầu của chúng tôi về các plugin trình tạo trang WordPress tốt nhất.