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:
|
1 |
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é !
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* 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:
|
1 |
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:
|
1 |
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
Hocban.vn
Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, một thanh niên mà khi người ta đối diện với bạn ấy chỉ có thể thốt lên rằng "Ối dồi ôi, đẹp ZAI quá ! " 😂
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.
Bác có làm về cái này không nhỉ ? Nếu bác có bài này cứ chèn link vào bình luận để ae tiện tham khảo luôn nhé !
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/
Ok bác Cường, em sửa lại link của bác thành link gốc chứ không dùng link rút gọn vì Google sắp đóng cửa dịch vụ này, thứ 2 là để cho đường dẫn minh bạch người dùng yên tâm click vào hơn.
Googl sắp đóng cửa nhưng link đã rút gọn vẫn redirect về link gốc bình thường.
Thế thì theo vế thứ 2 đi bác, e luôn để link gốc để nó hiện ra cho người truy cập thấy rằng họ sẽ được đưa đến đâu 😀
Đâ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 😐
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/
Mình xem qua và không thấy lỗi font bạn nhé !
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ế @@
Oke, bạn !
Cảm ơn bạn nhé. Hay đấy.
Hề hề, ko cóa chi. Welcome to Hocban.vn
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 😀
Ồ ồ, chào mừng bác đã quay trở lại với Hocban.vn
Cái visual edit của text widget này mới có trên WordPress 4.8 nên anh em chắc cũng chưa quan tâm lắm. Với lại tước giờ có lẽ anh em thường soạn thảo dưới dạng HTML rồi dán code vào nên sẽ ko thấy khó chịu mấy.
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é.
Hay hay, đây cũng là một mẹo đơn giản mà không cần sửa đổi gì cả.
Like
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.
Ai lại đi sửa trong mã nguồn bao giờ @@
Đạo tặc cho mình xin cách khác với, mình cũng muốn có giải pháp tối ưu hơn, dễ thực hiện hơn 🙂
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ề
Ò ò, hỏi câu này đó hử bạn Cao Hiếu ?