Khắc phục lỗi font tiếng Việt khi soạn thảo ở text widget WordPress 4.8

Hôm nay Hocban.vn sẽ chia sẻ một mẹo nhỏ để anh em sửa lỗi font chữ tiếng việt trong trình soạn thảo, mà cụ thể ở đây là cái Text widget ở chế độ  soạn thảo visual  của bản WordPress 4.8 mới ra mắt gần đây.

Cái lỗi font tiếng Việt này nó trông như thế nào nhỉ ?

Vấn đề lỗi font tiếng Việt này thì xưa cũ lắm rồi, ở các phiên bản WordPress trước đây rất hay bị lỗi này trong trình soạn thảo bài viết. Nhưng các bản cập nhật gần đây mình không thấy lỗi nữa, tuy nhiên bản 4.8 nó lại lỗi ở trình soạn thảo trong Text widget visual editor (chế độ soạn thảo trực quan trong text widget).

Để hình dung nó lỗi thế nào thì các bạn có thể vào phần widget và thêm một cái text widget, soạn thảo một đoạn văn bản bằng tiếng Việt với chế độ visual (trực quan). Thì cái lỗi nó sẽ như hình dưới đây !

Lỗi font tiếng Việt trong trình soạn thảo Text widget visual editor

Cách khắc phục lỗi font tiếng Việt ở chế độ visual editor trong text widget

Trước khi đi sửa lỗi thì mình nói thêm: Cái lỗi này là do mặc định trình soạn thảo tinymce nó không dùng font hỗ trợ tiếng Việt. Do đó, để sửa lỗi ta chỉ cần thay thế font soạn thảo mặc định thành font hỗ trợ tiếng Việt là được, ví dụ Arial.

Để thay thế font soạn thảo mặc định thì các bạn mở cái file css của trình soạn thảo theo đường dẫn dưới đây:

wp-includes/js/tinymce/skins/wordpress/wp-content.css

Sau khi mở nó lên bạn có thể copy toàn bộ code trong file đó, đem dán vào trình soạn thảo code, ví dụ như Sublime text chẳng hạn. Vì mặc định có thể nó sẽ mở bằng công cụ soạn thảo text thông thường, rất khó nhìn.

Lưu ý là ở đây mình copy một đoạn đầu của file CSS kia ra để các bạn hình dung. Còn khi thực hiện các bạn nhớ copy hết code trong file nhé !

/* Additional default styles for the editor */

html {
	cursor: text;
}

html.ios {
	width: 100px;
    min-width: 100%;
}

body {
	font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
	font-size: 16px;
	line-height: 1.5;
	color: #333;
	margin: 9px 10px;
	max-width: 100%;
	-webkit-font-smoothing: antialiased !important;
	overflow-wrap: break-word;
	word-wrap: break-word; /* Old syntax */
}

Xem cái đoạn code trên, ác bạn dò từ trên xuống dưới, nó nằm ở dòng 11, 12 gì đó. Cái đoạn như sau:

font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;

Bây giờ các bạn sẽ xóa hết mấy cái  tên font trong đó đi và thay bằng font Arial, kết quả được như sau:

font-family: Arial;

Đấy, không cần chi nhiều font, chỉ cần một mình font Arial là được rồi. Bây giờ chúng ta chỉ việc copy cái file đã sửa và dán vào lại cái file wp-content.css và nhấn lưu là xong.

À, vẫn chưa xong, sau khi ra tạo widget mà nó vẫn còn lỗi thì có thể bị lưu cache trình duyệt, bạn xóa cache đi là được, nếu không thì đăng nhập trong trình duyệt ẩn danh để kiểm tra. Xong rồi đấy :v

Bài viết này chia sẻ nhanh một cái mẹo để khắc phục lỗi font tiếng Việt của chế độ soạn thảo visual trong text widget. Anh em nào làm chưa được thì cứ để lại bình luận bên dưới hoặc đề xuất cho mình giải pháp tối ưu hơn nhé, cảm ơn anh em !

Bài viết cùng chuyên mục

• Nén ảnh không giới hạn với plugin TP Image Optimizer
• Nhúng video YouTube để hiển thị Responsive trên WordPress