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 !

Loi font tieng viet trong trinh soan thao Text widget visual editor

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

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, là người thường đăng bài và comment dạo trên Hocban.vn

Không biết bạn đã từng đọc qua các nội dung dưới đây chưa nhỉ ?

guest
23 Comments
Inline Feedbacks
View all comments
Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #e91e63;">) </span>
Friend

Trong mọi trường hợp không nên chỉnh sửa trực tiếp core. Bạn nên dùng hook để làm việc này.

Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Cường

Đây là một trong những lý do khiến Goo.gl đóng cửa :D, hacker gửi link có virus vào goo.gl, người dùng ko biết đâu mà lần 😐

Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Cường

Googl sắp đóng cửa nhưng link đã rút gọn vẫn redirect về link gốc bình thường.

Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Cường

Sau khi đọc xong bài của bạn thì mình làm luôn 😀

https://hocwp.net/blog/khac-phuc-loi-font-tieng-viet-trong-widget-text-che-do-visual/

Truong Dao <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #e91e63;">) </span>
Friend

Chào bác, bác cho mình hỏi với. Website của mình lại bị lỗi font giống như bài trên nhưng lại lỗi khi hiển thị ra ngoài. Bạn có thể chỉ mình hướng dẫn khắc phục được không?
http://xuhuonglamdep.online/xu-huong-lam-dep-xuan-he-2018/

Truong Dao <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Truong Dao

Cám ơn bác. Em vừa đổi font sang Time News Roman thì không bị lỗi. Nhưng nếu em để font Arial thì lại bị lỗi cách dấu kiểu như thế @@

Việt Hùng <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #e91e63;">) </span>
Friend

Cảm ơn bạn nhé. Hay đấy.

VNTIEN Blog <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">25</span><span style="color: #e91e63;">) </span>
Friend

Lâu quá mới ghé thăm :).
Cái này thì kệ nó chứ có sao đâu. Hiển thị ra ngoài vẫn bình thường thì cứ để thế thôi 😀

Hoang Lam <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #e91e63;">) </span>
Friend

Cái này khá đơn giản. Trước mình cũng bị nhưng vô tình 1 lần nghĩ ra. Bạn chuyển ngôn ngữ về tiếng việt. Thế là nhìn nó đẹp ngay nhé. 🙂
Ko có phải sửa code gì hết. Các bác tham khảo nhé.

Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Hoang Lam

Nếu bạn vẫn muốn dùng Tiếng Anh thì vẫn có cách để thực hiện mà không cần sửa css trong core.

Lung Linh <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>
Friend
Lung Linh (1)
Đã trả lời  Hoang Lam

Like

Đạo tặc comment <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">32</span><span style="color: #e91e63;">) </span>
Friend

Ai lại đi sửa trong mã nguồn bao giờ @@

Cao Hiếu <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">29</span><span style="color: #e91e63;">) </span>
Friend

Vừa bị lỗi, tính đăng lên hội WP VN hỏi sẵn câu view. Nhưng mà fix được rồi hề hề