Khi viết bài trên Classic Editor của WordPress, nhiều người gặp tình trạng font chữ trong trình soạn thảo khác với font hiển thị ngoài website. Điều này khiến việc căn chỉnh nội dung, heading hoặc bố cục bài viết trở nên khó kiểm soát.
Giải pháp đơn giản và chuẩn WordPress là sử dụng add_editor_style() để áp dụng CSS riêng cho trình soạn thảo. Bài viết dưới đây sẽ hướng dẫn cách đổi font chữ mặc định trong Classic Editor WordPress chỉ trong vài bước.
Vì sao nên đổi font trong Classic Editor?
Mặc định WordPress sử dụng font hệ thống trong trình soạn thảo. Điều này dẫn đến một số vấn đề:
- Font trong editor khác với font ngoài website
- Khó căn chỉnh heading, đoạn văn
- Nội dung khi publish không giống lúc soạn
Khi thêm Editor Style, bạn sẽ:
- Đồng bộ font giữa Editor và Frontend
- Dễ kiểm soát layout bài viết
- Trải nghiệm viết bài tốt hơn cho đội content
Cách đổi font chữ mặc định trong Classic Editor WordPress
Bước 1: Thêm hàm add_editor_style() vào theme
Mở file functions.php của theme và thêm đoạn code sau:
function vietmyusa_editor_style() {
add_editor_style( ‘dist/editor_style.css’ );
}
add_action( ‘after_setup_theme’, ‘vietmyusa_editor_style’ );
Ý nghĩa của đoạn code
add_editor_style(): nạp file CSS riêng cho trình soạn thảodist/editor_style.css: đường dẫn file CSSafter_setup_theme: hook chạy khi theme được khởi tạo
Sau khi thêm code này, WordPress sẽ load file CSS vào Classic Editor.
Bước 2: Tạo file CSS cho Editor
Tạo file:
Trong file này thêm CSS font:
body{
font-family: Helvetica, Arial, sans-serif !important;
font-size: 16px;
}
Giải thích
font-family: font hiển thị trong editorfont-size: kích thước chữ mặc định!important: đảm bảo CSS được ưu tiên
Sau khi lưu lại, font trong Classic Editor sẽ thay đổi ngay.
Một số CSS hữu ích cho Classic Editor
Ngoài font chữ, bạn có thể chỉnh thêm:
body{
font-family: Helvetica, Arial, sans-serif !important;
font-size:16px;
line-height:1.6;
color:#333;
}h1,h2,h3,h4,h5{
font-weight:700;
}p{
margin-bottom:16px;
}
Điều này giúp nội dung trong editor gần giống với giao diện website hơn.
Lưu ý khi đổi font trong WordPress Editor
Để tránh lỗi hiển thị, bạn nên:
- Đảm bảo file CSS đúng đường dẫn
- Xóa cache trình duyệt nếu chưa thấy thay đổi
- Font phải tồn tại trên website hoặc dùng Google Fonts
Ví dụ nếu dùng Google Fonts:
body{
font-family: ‘Roboto’, Arial, sans-serif;
}
Khi nào nên dùng Editor Style?
Phương pháp này đặc biệt phù hợp khi:
-
Website dùng Classic Editor
-
Website có nhiều content writer
-
Muốn đồng bộ trải nghiệm viết bài
Nếu bạn dùng Gutenberg Block Editor, cách cấu hình sẽ khác một chút.
Có thể bạn quan tâm
Đổi font chữ mặc định trong Editor Classic
Hướng dẫn reset thời gian element Countdown trong flatsome đơn giản
Hướng dẫn thêm nút “Edit Layout with UX Builder” cho Custom Post Type trên Flatsome
Hướng Dẫn Khắc Phục Lỗi “Xung Đột Chỉnh Sửa” Trong UXBuilder Khi Nhiều Người Cùng Sửa Một Bài Viết