Cách thêm icon vào tiêu đề custom fields của Meta Box

Nếu bạn muốn làm đẹp thêm cho các meta box hay custom fields tạo bởi plugin Meta Box thì ngoài việc căn chỉnh kích thước, khoảng cách, màu sắc,… như đã hướng dẫn ở bài trước, bạn có thể thêm các icon vào tiêu đề của chúng. Hoặc thay vì đặt tên field / meta box bằng chữ, thì bạn cũng có thể dùng các biểu tượng icon để thay thế hoàn toàn. Việc này khá là đơn giản thôi, cùng xem cách làm nhé.

Bước 1: Enqueue CSS và font của thư viện icon bạn muốn sử dụng

Chắc bạn đã biết là có nhiều thư viện icon khác nhau. Bạn muốn sử dụng bộ thư viện nào, thì bạn cần phải thêm bộ thư viện đó vào theme của bạn.

Nếu bạn dùng các thư viện như FontAwesome, Elusive, hoặc Genericons thì bạn cần làm các thao tác sau:

  1. Tải bộ thư viện từ trang chủ về
  2. Copy file CSS và các file font và đặt vào trong thư mục theme trên server của bạn
  3. Thêm đoạn code như dưới đây vào file functions.php
function your_prefix_enqueue_admin_style() {
    wp_enqueue_style( 'admin_css', get_stylesheet_directory_uri() . 'đường_dẫn_tới_file_css_trong_thư_mục_theme' );
}
add_action( 'admin_enqueue_scripts', 'your_prefix_enqueue_admin_style' );

Tuy nhiên, nếu bạn dùng icon trong thư viện Dashicons thì bạn có thể bỏ qua bước này hoàn toàn. Dashicons là thư viện icon do WordPress phát triển nên nó đã được tích hợp sẵn, bạn không cần làm gì cả mà vẫn có thể sử dụng luôn.

Vì sử dụng Dashicons tiện hơn nên trong bài viết này mình sẽ hướng dẫn với code của Dashicons nhé.

Bước 2: Thêm icon vào tiêu đề các field / meta box

Có 2 cách để thêm icon vào tiêu đề các field / meta box có sẵn, đó là thêm trực tiếp vào code, hoặc thêm trong UI của Meta Box. Tuy nhiên, bạn chỉ thêm icon trong UI khi bạn có sử dụng Meta Box Builder thôi nhé.

Mình đã có sẵn một meta box chứa 3 custom fields bên trong như sau:

Thêm icon vào tiêu đề các field / meta box

Bây giờ, mình sẽ thêm icon cho meta box và các field này nhé.

Nhưng trước tiên, bạn vào thư viện của Dashicons và lấy mã HTML của icon bạn muốn nhé.

thư viện của Dashicons và lấy mã HTML của icon

Icon này của mình có mã là: <span class="dashicons dashicons-admin-users"></span>

Tiếp theo, bạn chọn một trong 2 cách làm sau đây nhé.

Cách 1: Thêm trực tiếp vào code

Bạn thêm đoạn mã HTML trên vào thuộc tính title của meta box hoặc là thuộc tính name của field mà bạn muốn.

Ví dụ như đây là đoạn code nguyên bản của một meta box mà mình tạo bằng plugin Meta Box:

Thêm trực tiếp vào code

Mình sẽ thêm mã HTML của các icon vào các vị trí trên như sau:

thêm mã HTML của các icon vào các vị trí

Quay trở lại trang chỉnh sửa một bài viết bất kỳ, các fields của mình hiển thị với tiêu đề có thêm các icon ở bên cạnh như sau:

Các icon mới hiển thị theo tiêu đề

Cách 2: Thêm icon từ UI của Meta Box

Để làm được theo cách này, bạn bắt buộc phải cài thêm 1 extension của Meta Box, đó là Meta Box Builder. Đây là một extension cao cấp nên bạn phải mua nó nhé.

Sau khi cài xong Meta Box Builder, bạn sẽ có một giao diện như sau để chỉnh sửa các custom fields ngay từ giao diện admin.

Thêm icon từ UI của Meta Box

Bây giờ, mình thêm các đoạn mã HTML của các icon vào Title của meta box và Label của các field.

thêm các đoạn mã HTML của các icon vào Title của meta box và Label của các field

Cuối cùng, bạn nhấn nút Update để lưu thay đổi, bạn sẽ thấy kết quả cho ra giống hệt như cách 1 ở trên.

Còn ở ngoài frontend, các field này cũng hiển thị khá ổn như sau:

Các field hiển thị bên ngoài frontend

Lời cuối

Tuy Dashicons dễ dùng nhưng lại có nhược điểm là số lượng icon khá ít, nên bạn không có quá nhiều lựa chọn. Nếu bạn muốn sự đa dạng và muốn các icon hấp dẫn khác, thì nên cân nhắc dùng các thư viện khác. Việc sử dụng icon của thư viện nào thì cũng đều cho hiển thị tốt như nhau trên các field được tạo bởi Meta Box.

Và một điều nữa, để các field của bạn hiển thị một cách hoàn hảo, thì cũng đừng quên dùng thêm code CSS để style cho chúng nhé.

Chúc các bạn sẽ có những trải nghiệm thú vị với custom fields từ Meta Box!

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *