Đổi phông chữ trang soạn thảo WordPress

CSS Script

Chương của ngày hôm nay định viết linh tinh lang gì đó nhưng gặp phải cảnh ‘gai mắt’ vì bộ phông chữ (font) của trang soạn thảo WordPress 😑

Nội dung này thiên về kỹ thuật nên bạn có thể trở về Trang chủ nhé 😅



Vừa vào đến trang tạo bài viết mới thì ẹc, sao phông chữ vừa nhỏ éc vừa lệch dấu Tiếng Việt tùm lum. Mình đã lại vọc phá gì nữa rồi 😑

Trang soạn thảo WordPress
Phông chữ nhỏ xíu, lại còn lỗi hiển thị dấu Tiếng Việt.

Hoá ra việc thay đổi ngôn ngữ trang quản trị từ Tiếng Anh sang Tiếng Việt đã giúp tạo ra hiện tượng khó coi này. Mà hiện tại không thể đổi lại như cũ vì sẽ làm Google hiểu là… bạn đang viết blog bằng Tiếng Anh ha 😶

Phông chữ hở? Có liên quan đến CSS rồi đây.

Cascading Style Sheets (CSS) với tên Tiếng Việt rất ‘chuối’Tập tin định kiểu theo tầng. Đây là tập tin quan trọng giúp xác định kiểu dáng cho một trang web (webpage) và cả trang mạng (website) – Wikipedia.

Ngâm cứu Inspect Element một lúc thì phát hiện ra thẻ dưới đây gây lỗi. Gì mà 4 bộ font quen thuộc đi nhét vào dấu ngoặc đơn thì trình duyệt bị ‘loạn não’ là đúng rồi 😷

.editor-styles-wrapper {
    font-family: 'Helvetica, Helvetica Neue, Arial';
}

Thay đổi bằng Giao diện > Tuỳ biến

WordPress luôn khuyến khích chúng ta thay đổi các thẻ CSS tại mục Tuỳ biến này. Mình cũng dùng vì ‘mì ăn liền’ hơn cách phải chỉnh sửa trong tập tin CSS riêng của bộ giao diện (theme).

Tuy vậy mục Tuỳ biến lại không thay đổi được cho trang quản trị. Mình đã thử và… thất vọng tràn trề. Nên thôi chia tay!


Thay đổi bằng Plugin

Plugin cho WordPress: Add Admin CSS

Đây là giải pháp ‘mì ăn liền’ cho bạn. Chỉ cần tìm và cài đặt plugin Add Admin CSS của Scott Reilly rồi thêm đoạn dưới đây vào mục Admin CSS là xong.

.editor-styles-wrapper {font-family: "Noto Serif", serif !important;}
Plugin cho WordPress: Add Admin CSS
(có thể bấm vào hình để xem phóng lớn)

Mình không hào hứng với việc cài thêm plugin nên ‘chôm’ đỡ hình minh hoạ từ tác giả. Nhưng lý thuyết là phải được nha 😅


Thay đổi bằng dòng lệnh

Dùng đến dòng lệnh thì ‘củ khoai’ rồi đây! Nhưng mình lại đang dùng cách này vì thích… khoai 😅

Nguyên lý sẽ là bạn tạo một tập tin CSS dành riêng cho khu vực quản trị. Sau đó dùng functions.php yêu cầu WordPress gọi tập tin đó lên và thực thi.

Đầu tiên, dùng File Manager của Control Panel (hoặc FTP Manager tuỳ hỉ) tạo 1 tập tin có tên wp-admin.css đặt tại thư mục /wp-content/themes/ đi cho tiện. Trong tập tin chỉ cần chứa đoạn sau:

.editor-styles-wrapper {font-family: "Noto Serif", serif !important;}

Sau đó bạn vào tập tin funtions.php của theme đang dùng rồi thêm các dòng dưới đây (lưu ý phần màu đỏ là đường dẫn của tập tin CSS. Nếu bạn để tập tin này ở chỗ khác thì tuỳ chỉnh cho phù hợp nhé):

function adminStylesCSS() {
    $url = get_settings('siteurl');
    $url = $url . '/wp-content/themes/wp-admin.css';
    echo '<!-- Admin CSS styles -->
          <link rel="stylesheet" type="text/css" href="' . $url . '" />
          <!-- /end Admin CSS styles -->';
}
add_action('admin_head', 'adminStylesCSS');

Kiểm tra lại thì đã thấy trang soạn thảo đẹp đẽ như cũ rồi. Yay!

Trang soạn thảo WordPress
Đẹp lại như cũ rồi nè, ahihi..

Nội dung có thể chưa được cập nhật. Nếu bạn có những cách thức hơn, hãy chia sẻ ngay dưới phần bình luận nhé.


GÓC BÌNH LUẬN