Cách dùng field custom html để output đoạn text có style đẹp, hoặc output custom CSS

Những lúc bạn cần hiển thị một dòng thông báo khi người dùng nhập liệu trong backend, bạn sẽ làm thế nào? Nếu bạn đang dùng plugin Meta Box, có một cách khá đơn giản để bạn tạo dòng thông báo đó là sử dụng field loại Custom HTML, sau đó style để field này hiển thị như một dòng thông báo là xong.

Trong bài viết này, mình sẽ lấy một ví dụ về việc nhập thông tin cho một sản phẩm thực phẩm chức năng để các bạn tham khảo nhé.

Nhập thông tin cho một sản phẩm thực phẩm chức năng

Để làm được như ví dụ này, mình cần sử dụng các plugin sau:

  1. Plugin Meta Box: framework để bạn tạo các custom fields. Plugin này miễn phí và có trên wordpress.org.
  2. Meta Box Conditional Logic: đây là một extension của plugin Meta Box. Vì ở đây mình đặt điều kiện để thông báo chỉ hiện ra khi người nhập liệu chọn là Có ở phần Chống chỉ định, nên mình cần extension này. Nếu dòng thông báo của bạn hiển thị không phụ thuộc điều kiện nào thì bạn có thể bỏ qua nó.
  3. Meta Box Group: cũng là một extension của plugin Meta Box. Trong ví dụ này, mình nhóm field lại thành group để hiển thị các field cho đẹp. Nếu bạn có nhiều custom fields hiển thị đi kèm với dòng thông báo, thì bạn cũng nên sử dụng Meta Box Group, nhưng nếu chỉ có một field thì có thể bỏ qua.
  4. Ngoài ra, ở đây mình có sử dụng thêm Meta Box Builder để có giao diện UI cho việc tạo custom field ngay trong backend. Nếu bạn không có extension này, thì bạn có thể sử dụng Online Generator (miễn phí) của Meta Box để tạo field nhé.

Bây giờ, cùng tạo field nào.

Bước 1: Tạo custom fields cho sản phẩm

Trước tiên mình tới menu Meta Box > Custom Fields > Add New để tạo một meta box chứa các custom field như sau:

Tạo custom fields cho sản phẩm

Trong đó:

  • Field loại custom_html chính là field được dùng để hiển thị dòng thông báo;
  • Field “Đối tượng” là field dạng text, cho phép người dùng nhập tên các nhóm đối tượng không nên sử dụng sản phẩm;

Mình đặt cả hai field này vào một group để lát nữa đặt điều kiện hiển thị cho tiện. Cụ thể cách tạo và thiết lập các field này như sau:

Tạo field “Chống chỉ định”

Trong phần Edit Field Group, bạn tìm và nhấn chọn Radio ở cột bên trái để tạo một field dạng radio, sau đó đặt tên cho field và điền vào mục Choices như sau.

Tạo custom field "Chống chỉ định"

Tạo field cho dòng thông báo

Để tạo thành dòng thông báo, mình cần field dạng Custom HTML. Tương tự như cách tạo field “Chống chỉ định”, bạn tìm và chọn loại field là Custom HTML sau đó, điền nội dung sau vào ô Content (HTML allowed).

<div class="alert alert-info"><span class="dashicons dashicons-warning"></span> Bạn hãy ghi rõ các đối tượng chống chỉ định sử dụng thuốc. Mỗi đối tượng điền vào 1 ô dưới đây</div>
Tạo custom field cho dòng thông báo

Bạn lưu ý là ở đây, mình đặt class cho phần nội dung của field này là <div class="alert alert-info">. Chúng ta sẽ cần dùng đến class này ở bước sau để style cho dòng thông báo được đẹp mắt hơn.

Tạo field “Đối tượng”

Mình chọn tạo field dạng text cho “Đối tượng” với thiết lập là cho phép người dùng nhân bản field (Cloneable) để thêm nhiều loại đối tượng và có thể thay đổi thứ tự các đối tượng (Sortable). Đồng thời, đặt label cho nút “Add more”“Thêm đối tượng”.

Tạo custom field "Đối tượng"

Tạo group và điều kiện hiển thị field

Mình tạo một group và đặt field của dòng thông báo và field “Đối tượng” vào group này. Bạn chỉ cần chọn field dạng Group ở bên cột trái để tạo một group, sau đó kéo thả 2 field kia vào là được.

Tạo group và điều kiện hiển thị custom field

Sau đó, bạn vào phần thiết lập cho group, chọn tab Advanced và thiết lập điều kiện ở mục Conditional Logic như ảnh dưới đây.

Thiết lập group  ở mục Conditional Logic

Trong đó:

  • radio: là ID của field “Chống chỉ định” được tạo ở trên
  • radio = yes: tức là ô Chống chỉ định được chọn là “Có”

Bạn lưu lại các thiết lập trên và chuyển qua chỉnh sửa thông tin một sản phẩm bất kỳ, bạn sẽ thấy các field được hiển thị như sau:

Các custom field sẽ được hiển thị thế này

Lúc này dòng thông báo hiển thị chưa được đẹp mắt lắm, nên chúng ta sẽ cần style cho nó một chút nhé.

Bước 2: Style cho field Custom HTML

Trong thư mục css của theme, bạn tạo thêm một file là admin.css với nội dung như sau:

.alert-info {
    background-color: #d9edf7;
    border-color: #bcdff1;
    color: #31708f;
}
.alert {
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    font-weight: bold;
    line-height: 2;
    display: flex;
    align-items: center;
}

Đây là các quy định về style chúng ta thiết lập cho 2 class là alertalert-info được đặt cho field Custom HTML.

Tiếp theo, bạn vào file functions.php và thêm đoạn code sau để khai báo file admin.css.

add_action( 'rwmb_enqueue_scripts', 'enqueue_custom_style' );
function enqueue_custom_style() {
    wp_enqueue_style( 'custom-css', get_template_directory_uri() . '/css/admin.css' );
}

Đến đây, bạn sẽ thấy dòng thông báo được hiển thị với bố cục và màu sắc khác hoàn toàn so với khi mới tạo xong ở bước 1.

Output đoạn text có style đẹp

Lời cuối

Hy vọng với tip này, bạn sẽ có thêm cách để định dạng và hiển thị các nội dung trong backend một cách đẹp mắt hơn và giúp người dùng nhập liệu dễ dàng hơn. Nếu bạn có thắc mắc nào, hãy để lại comment nhé. Và nhớ theo dõi các bài hướng dẫn sau của mình nhé.

Trả lời

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 *