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

Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, một thanh niên đến từ Gia Lai, lai rai hay đi comment dạo 😂

avatar
7 Comment threads
16 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
9 Comment authors
CườngTruong DaoLung LinhViệt HùngVNTIEN Blog Recent comment authors
Cường <span class="wpdiscuz-comment-count">114 bình luận </span>

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 class="wpdiscuz-comment-count">114 bình luận </span>

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/

Cường <span class="wpdiscuz-comment-count">114 bình luận </span>

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 class="wpdiscuz-comment-count">114 bình luận </span>

Đâ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 😐

Truong Dao <span class="wpdiscuz-comment-count">2 bình luận </span>

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 class="wpdiscuz-comment-count">2 bình luận </span>

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 class="wpdiscuz-comment-count">2 bình luận </span>

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

VNTIEN Blog <span class="wpdiscuz-comment-count">25 bình luận </span>

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 class="wpdiscuz-comment-count">2 bình luận </span>

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

Lung Linh <span class="wpdiscuz-comment-count">1 bình luận </span>
Lung Linh 1 bình luận

Like

Cường <span class="wpdiscuz-comment-count">114 bình luận </span>

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.

Đạo tặc comment <span class="wpdiscuz-comment-count">31 bình luận </span>

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

Cao Hiếu <span class="wpdiscuz-comment-count">29 bình luận </span>

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ề