Hướng dẫn thêm custom style cho Block Editor trong WordPress

Rate this post

Sử dụng Gutenberg, trình soạn thảo Block Editor mới, trên những giao diện WordPress không tương thích có thể khiến bạn hơi nhức mắt khi dùng font mặc định.

Hãy thử lấy ví dụ với một giao diện chưa hỗ trợ Block Editor. Khi ấy bạn sẽ thấy giao diện nhập như sau:

Block Editor khi sử dụng với giao diện không tương thích
Block Editor khi sử dụng với giao diện không tương thích

Điều này có thể điều chỉnh rất đơn giản. Ta hãy lấy thử ví dụ bộ font mặc định của Twenty Twenty.

Đầu tiên, bạn nên tạo 1 child theme cho giao diện hiện tại. Nếu bạn đang dùng theme riêng, thì ta có thể bắt đầu luôn.

Trong thư mục theme hiện tại, ví dụ wp-content/themes/codetot, ta cần tạo 1 file mới

style-editor.css (chứa style của block editor), nội dung như sau.

Tiếp đến, ta cần mở file functions.php ra đề thêm 1 đoạn code sau:

// Load style into a backend editor
function codetot_site_block_editor_styles() {
	wp_enqueue_style( 'site-block-editor-styles', get_theme_file_uri( '/style-editor.css' ), false, '1.0', 'all' );
}
 add_action( 'enqueue_block_editor_assets', 'codetot_site_block_editor_styles' );

Kết quả là khi nhập nội dung và hiển thị trong khu vực soạn thảo, ta đã thấy có font chữ từ giao diện đang sử dụng.

Load font thành công trong Block Editor WordPress
Load font thành công trong Block Editor WordPress

Hi vọng mẹo thêm vào dòng code trong giao diện WordPress sẽ giúp bạn sử dụng Block Editor thích hơn.

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...