Khắc phục soạn thảo lỗi font editor wordpress trong giao diện bài viết

Hôm nay thegioicuatoi 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.

1. 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 !

   

2. Hướng dẫn đơn giản cách khắc phục lỗi font tiếng Việt

   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:

   Link đường dẫn file cần sửa wp-includes/js/tinymce/skins/wordpress/wp-content.css

   1 2	Link đường dẫn file cần sửa wp-includes/js/tinymce/skins/wordpress/wp-content.css

   Sau khi mở file wp-content.css lên bạn có thể tìm đến đoạn sau.

   body { font-family: <span style="color: #ff0000;">Georgia, "Times New Roman", "Bitstream Charter", Times, serif</span>; font-size: 16px; .................

   1 2 3 4

   body {     font-family: <span style="color: #ff0000;">Georgia, "Times New Roman", "Bitstream Charter", Times, serif</span>;     font-size: 16px; .................

   Thực hiện xóa đoạn font màu đỏ Georgia, “Times New Roman”, “Bitstream Charter”, Times, serif

   Và sửa thành font Arial

   

   Kết quả sẽ là như thế này :

   body { font-family: <span style="color: #ff0000;">Arial</span>; font-size: 16px; ...........................

   1 2 3 4

   body { font-family: Arial; font-size: 16px; ...........................

   Ok rồi lưu lại thế là xong rồi đó.
   Ra trình duyệt Ctrl+F5 tải lại website lại là được. Bây giờ bạn quay lại soạn thảo trình soạn thảo sẽ hỗ trợ font tiếng việt.
   Nhược điểm của các 1 sửa file css này là khi nào bạn cập nhật wordpress lên phiên bản mới thì có thể sẽ bị mất. Vì đó bạn nên dùng cách thứ 2 ngay bên dưới đây.

3. Một cách khác không cần sửa core file css mà sửa thông qua function

   Ưu điểm là có cập nhật wordpress phiên bản mới sẽ không bị mất tùy chỉnh sửa lỗi font.
   

   function ngoinhaweb_thietkeweb_thegioicuatoi( $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', 'ngoinhaweb_thietkeweb_thegioicuatoi', 10, 2 ); }

   1 2 3 4 5 6 7 8 9

   function ngoinhaweb_thietkeweb_thegioicuatoi( $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', 'ngoinhaweb_thietkeweb_thegioicuatoi', 10, 2 ); }

   
   Thêm đoạn trên vào file function.php. Lưu lại và kiểm tra lỗi.

   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

Chúc các bạn thành công.