Thêm phông chữ và kích cỡ chữ trong TinyMCE

Advanced Editor Tools (previously TinyMCE Advanced) là công cụ quen thuộc với mọi editor. Plugin mang đến những tính năng mạnh mẽ giúp bạn tạo ra những bài viết có bố cục thu hút người đọc hơn.

Tuy nhiên với một số người dùng, tính năng đó vẫn chủ đáp ứng đủ nhu cầu của họ. Mình đã nhận được một số câu hỏi về việc làm thế nào để thêm phông chữ và kích thước chữ vào trong TinyMCE.

Hiện tại, có rất ít plugin hỗ trợ việc này nên mình sẽ hướng dẫn bạn thông qua child theme.

1. Thêm phông chữ mới vào website

Mặc định, WordPress editor hỗ trợ 17 loại font như (Adale Mono, Arial, Book Antiqua, Impact, Tahoma…). Đây là những font được hỗ trợ mặc định của hầu hết trên mọi trình duyệt ngày nay.

Vì vậy, bạn hãy xem hướng dẫn thêm font chữ vào website để khai báo font mới với các trình duyệt.

2. Thêm phông chữ trong TinyMCE

Bạn hãy mở file functions.php trong child theme và thêm đoạn code như bên dưới.

add_filter( 'tiny_mce_before_init', 'dieuhau_mce_custom_font_family' );
function dieuhau_mce_custom_font_family( $init ) {
$theme_advanced_fonts = "Andale Mono=andale mono,times;" .
"Arial=arial,helvetica,sans-serif;" .
"Arial Black=arial black,avant garde;" .
"Book Antiqua=book antiqua,palatino;" .
"Comic Sans MS=comic sans ms,sans-serif;" .
"Courier New=courier new,courier;" .
"Georgia=georgia,palatino;" .
"Helvetica=helvetica;" .
"Impact=impact,chicago;" .
"Fira Sans=Fira Sans, sans-serif;" . /* Đây là font chữ mới của bạn */
"Symbol=symbol;" .
"Tahoma=tahoma,arial,helvetica,sans-serif;" .
"Terminal=terminal,monaco;" .
"Times New Roman=times new roman,times;" .
"Trebuchet MS=trebuchet ms,geneva;" .
"Verdana=verdana,geneva;" .
"Webdings=webdings;" .
"Wingdings=wingdings,zapf dingbats";
$init['font_formats'] = $theme_advanced_fonts;
return $init;
}

Trong đoạn code trên, mình thêm font chữ mới là “Fira Sans” của Google Fonts. Bạn hãy thay nó bằng font chữ của bạn nhé.

Giờ thì quay lại khu vực bài viết, bạn sẽ thấy kết quả như sau:

3. Thêm kích thước chữ trong TinyMCE

Cũng giống như trên, bạn hãy thêm đoạn code bên dưới vào file functions.php của child theme

add_filter( 'tiny_mce_before_init', 'dieuhau_mce_custom_font_size' );
function dieuhau_mce_custom_font_size($init){
   $init['fontsize_formats'] = "9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 19pt 20pt 36pt 72pt";
   return $init;
}

Và chúng ta sẽ có kết quả như sau:

Kích thước chữ mặc định của WordPress được tính theo Points (pt), nếu bạn muốn thay bằng Pixel (px) hay Em (em) thì hãy thay đổi đơn vị pt là được.

CSS cho phép 4 đơn vị đo kích thước khác nhau của văn bản, cụ thể:

• Em (em): hay được sử dụng trên nền tảng web. 1em = 12 points
• Pixels (px): Được sử dụng trên các màn hình. 1px = 1 chấm trên màn hình máy tính.
• Points (pt): Được sử dụng trong lĩnh vực in ấn. 1pt = 1/72 inch
• Percent (%): Mặc định là 100%, sẽ thay đổi khi thu nhỏ hay phóng to kích thước màn hình hiển thị.

4. Kết luận

WordPress cung cấp những tùy chọn tuyệt vời để tùy chỉnh mọi thứ sẵn có. Với phông chữ và kích thước chữ hoàn hảo, nội dung của bạn sẽ hấp dẫn hơn.

Với những người mới bắt đầu, có thể tùy chỉnh thông qua việc cài đặt plugin. Trong khi với một số người dùng có kiến thức về lập trình có thể tùy chỉnh theo các cách thủ công.