Bài viết này mình sẽ hướng dẫn cho bạn cách khắc phục lỗi font Tiếng Việt trong widget Text chế độ visual. Đối với WordPress phiên bản mới thì widget Text có thêm chế độ trình soạn thảo visual. Đây là chế độ cho phép bạn soạn thảo cách trực quan, thay vì chỉ dùng mã HTML như trước đây.
Tuy nhiên, khi soạn thảo chế độ visual thì bạn sẽ bị lỗi font Tiếng Việt như hình bên trên. Lỗi này chỉ có trong editor thôi nhé, hiển thị bên ngoài vẫn bình thường. Nếu bạn không sửa thì vẫn không sao, sửa lại chỉ để nhìn đẹp mắt mà thôi.
Khắc phục lỗi font Tiếng Việt trong widget Text chế độ visual
Nguyên nhân dẫn đến lỗi font Tiếng Việt là do editor sử dụng font không hỗ trợ chữ có dấu. Nếu bạn biết xem source code thì bạn sẽ để ý thấy css của trình soạn thảo trong widget Text sẽ như sau:
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;
}
Lỗi font cách khắc phục đơn giản là thay font. Bạn chỉ cần thay lại thành font có hỗ trợ Tiếng Việt có dấu là được. Nhưng thay lại font bằng cách nào? Đoạn css này là skin dành riêng cho WordPress của TinyMCE.
wp-includes/js/tinymce/skins/wordpress/wp-content.css
Trong mọi trường hợp, bạn không được chỉnh sửa code trong core của WordPress. Nếu bạn sửa sau khi update thì sẽ vẫn vậy. Giải pháp bạn nên làm đó là sử dụng hook để thay đổi. Sở dĩ WordPress phát triển tới giờ này là nhờ có hỗ trợ các hook cực mạnh.
Code sửa lỗi font cho widget Text
Đầu tiên bạn mở tập tin functions.php của giao diện lên hoặc bất kỳ tập tin PHP nào chạy được. Bạn sửa tập tin functions.php của giao diện cũng là phương pháp tạm thời. Nếu như giao diện bạn tự viết hoặc không cập nhật thì không sao. Nếu là giao diện hay có bản vá lỗi, bạn update lên thì code sẽ mất. Bạn phải thực hiện lại như thế rất mất công.
Xem thêm: Cách tạo plugin cho WordPress
Cách đúng nhất đó là bạn viết một plugin riêng. Mọi chỉnh sửa sau này bạn đều bỏ vào trong plugin này để sử dụng. Đảm bảo sẽ không bao giờ mất code chỉnh sửa của bạn. Nếu bạn chèn code vào giao diện hoặc plugin của người khác thì khi cập nhật sẽ mất code giống như thay đổi trực tiếp trong nhân của WordPress nhé.
function hocwp_theme_custom_the_editor_content_filter( $content, $default_editor ) {
if ( 'tinymce' == $default_editor ) {
$content = '<div style="font-family: Arial, Helvetica, sans-serif">' . $content . '</div>';
}
return $content;
}
if ( is_admin() ) {
add_filter( 'the_editor_content', 'hocwp_theme_custom_the_editor_content_filter', 10, 2 );
}
Bạn thêm đoạn hook PHP trên vào tập tin functions.php của giao diện hoặc vào plugin như mình nói. Sau khi thêm xong thì bạn lưu code để thử lại. Công dụng đoạn code trên chỉ đơn giản là bọc một thẻ div bên ngoài nội dung của widget Text. Bên trong thẻ div này mình sử dụng style font-family để override lại css của thẻ body. Bạn có thể sử dụng bất kỳ font nào hỗ trợ Tiếng Việt. Ở đây mình dùng font Arial nhé.
Xem thêm: Hướng dẫn xóa cache trình duyệt web
Nếu bạn vẫn còn thấy lỗi font Tiếng Việt thì xóa cache trình duyệt để thử lại. Như vậy, qua bài viết này mình đã hướng dẫn cho bạn cách khắc phục lỗi font Tiếng Việt trong widget Text ở chế độ soạn thảo rich text. Hãy để lại bình luận của bạn dù cho bạn làm được hay chưa nhé. Chúc bạn thành công.
