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?
Liên hệ: 0876-80-84-80
Chuyên gia về Web
Bài viết liên quan

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...
Git

18/12/2022

Xử lý lỗi Git không thể tiến hành merge do merge.renamelimit
Khi bạn tiến hành merge nhánh phụ vào nhánh chính hoặc lên nhánh production, có thể xung đột xảy ra...
Fix lỗi ERR_TOO_MANY_REDIRECTS khi cấu hình tên miền trên CloudFlare

17/12/2022

Fix lỗi ERR_TOO_MANY_REDIRECTS khi cấu hình tên miền trên CloudFlare
Khi các bạn bật biểu tượng đám mây trên DNS của tên miền tại CloudFlare, nhiều bạn sẽ gặp tình...
Hướng dẫn cài extension ioncube trên phần mềm LocalWP

16/11/2022

Hướng dẫn cài extension ioncube trên phần mềm LocalWP
LocalWP là phần mềm tạo web server dành cho fan yêu thích WordPress. Hướng dẫn này bổ sung cách cài...