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

Advanced Editor Tools (trước đây là TinyMCE Advanced) là một công cụ quen thuộc với mọi trình soạn thảo. Plugin cung cấp các tính năng mạnh mẽ giúp bạn tạo các bài viết với bố cục hấp dẫn hơn.

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

Hiện tại, có rất ít plugin hỗ trợ điều này, vì vậy tôi sẽ hướng dẫn bạn qua chủ đề con.

Thêm phông chữ và kích thước phông chữ trong TinyMCE

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

Theo mặc định, trình soạn thảo WordPress hỗ trợ 17 loại phông chữ (Adale Mono, Arial, Book Antiqua, Impact, Tahoma …). Đây là những phông chữ được hỗ trợ mặc định của hầu hết mọi trình duyệt ngày nay.

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

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

Vui lòng mở tệp functions.php Trong chủ đề trẻ em và thêm mã như dưới đây.

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 mã trên, tôi thêm một phông chữ mới là “Fira Sans“của Google Fonts. Vui lòng thay thế nó bằng phông chữ của bạn.

Bây giờ quay trở lại khu vực bài viết, bạn sẽ thấy kết quả sau:

Thêm phông chữ trong tinymce

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

Cũng giống như trên, thêm mã bên dưới vào tệp functions.php theo chủ đề trẻ em

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:

Thêm kích thước phông chữ trong tinymce

Kích thước phông chữ mặc định của WordPress là Points (pt), nếu bạn muốn thay thế bằng Pixel (px) hoặc Em (em), bạn có thể thay đổi đơn vị pt.

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

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

4. Kết luận

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

Đối với người mới bắt đầu, có thể tùy chỉnh thông qua cài đặt plugin. Trong khi 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ách thủ công.