Hướng dẫn style các custom fields của Meta Box bằng CSS

Các custom fields sau khi được tạo sẽ có hiển thị mặc định với khoảng cách, màu sắc, border, font chữ, … có thể sẽ chưa phù hợp với giao diện trong backend hay cả frontend của bạn, lúc này bạn sẽ muốn thay đổi cách chúng hiển thị. Hoặc đơn giản là bạn muốn các field hiển thị đẹp mắt hơn, dễ nhìn hơn, tạo hiển thị khác biệt cho field nào đó, … Bạn sẽ cần style (làm đẹp) cho các custom fields đó cho phù hợp với nhu cầu của bạn.

Với các custom fields tạo bởi Meta Box cũng vậy. Bạn hoàn toàn có thể style theo cách bạn muốn. Ở bài này, mình sẽ hướng dẫn bạn sử dụng CSS để style lại các field sao cho đẹp mắt hơn.

Nhưng trước hết, bạn cần có các custom fields trước đã. Để tạo các custom fields (sử dụng Meta Box plugin), bạn tham khảo hướng dẫn ở bài viết này nhé.

Bây giờ, chúng ta cùng bắt tay vào việc làm đẹp cho các field nào!

Bước 1: Tạo file CSS

Thường thì chúng ta sẽ tạo file CSS nằm ngay trong thư mục theme. Nhưng nếu bạn có nhiều file CSS thì theo mình, chúng ta nên tạo riêng một folder để chứa tất cả các file CSS này cho dễ quản lý.

Vì vậy, mình sẽ tạo một thư mục có tên là CSS, và tạo một file có tên là style.css nằm trong thư mục này.

Create a folder to hold all the CSS file - Style Custom Fields — *Tạo thư mục có tên là “css” trong thư mục theme để chứa tất cả các file CSS*

Create a file named style.css — *Tạo file `style.css`*

File style.css này sẽ được sử dụng để viết CSS cho các custom fields của Meta Box nhé.

Bước 2: Enqueue file CSS vừa tạo

Bạn thêm đoạn code này vào file functions.php của theme để enqueue file CSS mà bạn vừa tạo nhé:

/**
 * Enqueue CSS file.
**/
add_action( ‘rwmb_enqueue_scripts’, function() {
    wp_enqueue_style(‘custom-meta-box-style’, get_template_directory_uri(). ‘/css/style.css’);
} );

Bước 3: Viết CSS

Cấu trúc CSS của Meta Box

Để style cho các field của Meta Box bằng CSS, chúng ta cần biết Meta Box sử dụng các class và ID nào cho các element. Hãy xem bảng tham chiếu dưới đây:

Class/ID	Miêu tả
`.rwmb-meta-box`	Class của thẻ div bao bọc ngoài toàn bộ 1 meta box
`.rwmb-field`	Class của thẻ div bao bọc ngoài mỗi field
`.rwmb-{$field_type}-wrapper`	Class của thẻ div bao bọc ngoài từng loại field khác nhau
`.rwmb-label`	Class của thẻ div bao bọc ngoài phần field label
`.rwmb-input`	Class của thẻ div bao bọc ngoài phần nhập dữ liệu của field
`.rwmb-clone`	Class của thẻ div bao bọc mỗi clone của field nếu field đó cloneableClass của thẻ div bao bọc mỗi clone của field nếu field đó cloneable
`.rwmb-{$field_type}-clone`	Class của thẻ div bao bọc mỗi clone của field theo từng loại field khác nhau
`.rwmb-{$field_type}`	Class cho các thẻ input, textarea, select của field theo từng loại field khác nhau
`#{$field_id}`	IID cho các thẻ input, textarea, select của field. Tuy nhiên, nếu field cloneable thì sẽ không có thuộc tính ID này.
`.rwmb-button.add-clone`	Class cho nút thêm clone
`.rwmb-button.remove-clone`	Class cho nút xóa clone

Để dễ hiểu hơn, các bạn có thể xem hình mô tả sau đây:

Tùy vào việc bạn muốn style cho các custom fields của bạn như thế nào, thì mình sẽ chọn các class và ID tương ứng để thực hiện nhé.

Dưới đây là một số ví dụ style các field dựa trên cấu trúc CSS ở trên.

Ví dụ

Tăng khoảng cách giữa các field

Nếu bạn thấy khoảng cách giữa các field hiện tại hơi nhỏ, khiến việc đọc và thêm nội dung khá khó thì bạn có thể tăng khoảng cách giữa các field như sau:

Trong file style.css, bạn thêm đoạn code sau:

.rwmb-field:not(:last-of-type) {
    margin-bottom: 25px;
}

Trước khi thêm CSS:

Sau khi thêm CSS:

Style cho field Select

Trước khi style, field Select của mình hiển thị như này:

Mình sẽ thêm đoạn code sau vào file style.css:

.rwmb-select.rwmb-select {
    padding: 10px;
    width: 200px;
    background: #f0f0f0;
    border-color: #ddd;
    border-radius: 0;
}

Và kết quả là field Select của mình sẽ hiển thị như sau:

Style cho field Text

Field dạng Text của Meta Box có hiển thị mặc định như này:

Bây giờ, mình sẽ viết thêm CSS để tăng padding và thêm background cho field này (field của mình có tên là “name”. Mình thêm đoạn code sau vào file style.css:

#name {
    padding: 5px 10px;
    width: 100%;
    background: #f0f0f0;
}

Và kết quả là field Name này sẽ hiển thị như sau:

Lời kết

Bạn có thể áp dụng cách viết CSS như trên cho tất cả các custom fields được tạo bởi Meta Box khác của bạn nhé. Đồng thời, bạn cũng có thể áp dụng cách này để style cho custom fields hiển thị ở cả backend và frontend.

Với việc style lại các custom fields thay vì để hiển thị như mặc định, mình hy vọng người dùng của bạn sẽ có một trải nghiệm tốt hơn trong quá trình sử dụng và nhập liệu lên các field.

Rất cảm ơn bạn đã quan tâm theo dõi, và nhớ đón đọc các bài hướng dẫn tiếp theo của mình nhé.