Top1Vietnam
Một trong những tính năng mang lại cho developer khả năng tùy biến cao nhất để tạo thêm nhiều tính năng cho một website WordPress chính là Custom Fields. Mặc dù hầu hết chúng ta không sử dụng custom fields một cách riêng lẻ mà thường kết hợp nó với một tính năng nào đó, nhưng nó vẫn là một nền tảng quan trọng trong WordPress mà chúng ta nên tìm hiểu sâu.
Để hiểu thêm về custom field là gì, bạn có thể tham khảo thêm ở bài viết này nhé.
Với các developer và những người mới dùng WordPress thì việc tạo custom field một cách thủ công (không dùng plugin) như trong bài viết này thì có vẻ hơi khó và hơi mất công. Vì vậy, bạn có thể tham khảo thêm một cách khác dễ dàng hơn là dùng plugin. Ở đây, mình sẽ dùng plugin Meta Box đi kèm với 1 extension của nó là Meta Box Builder.
Contents
Giới thiệu về Meta Box và Meta Box Builder
Meta Box là một plugin cung cấp cho bạn một framework để bạn tạo và làm việc với hơn 40 loại custom field khác nhau. Mình sẽ giới thiệu chi tiết về plugin này trong các bài viết sắp tới, bạn hãy đón đọc để hiểu thêm về Meta Box nhé.
Meta Box Builder là một extension của Meta Box. Nó cung cấp cho chúng ta một giao diện trực quan để tạo một hoặc nhiều meta box vào bài viết để người dùng nhập các thông số. Với giao diện này, bạn có thể tạo tùy chọn một trong số 40 loại custom fields mà Meta Box hỗ trợ, đồng thời được kéo, thả, và sắp xếp các loại chúng rất đơn giản. Quan trọng hơn cả là giao diện này sẽ giúp bạn thực hiện tất cả các thao tác trên chỉ trong nháy mắt và kết quả trực quan luôn.
Meta Box Builder mang lại cho bạn khá nhiều lợi ích giá trị mà bạn chắc chắn sẽ cần như là:
- Cho phép bạn tạo meta box và custom field chỉ với vài click chuột đơn giản, tiết kiệm khá nhiều thời gian;
- Giúp bạn làm việc với custom field như những chuyên gia thực thụ mặc dù có thể là bạn vẫn chưa biết gì về PHP đi nữa;
- Hỗ trợ thiết lập đầy đủ các thông số cho custom fields.
Cách tạo và thiết lập custom fields
Vì là một phần của plugin Meta Box, nên Meta Box Builder cũng hỗ trợ đầy đủ với hơn 40 loại dữ liệu khác nhau cho custom fields. Các loại field này có thể chia ra thành 2 nhóm là:
- Không có các lựa chọn để người dùng chọn, mà chỉ điền thông tin vào thôi, ví dụ: text, number, textarea, …
- Có các lựa chọn đi kèm, cho phép người dùng chọn các phương án, ví dụ: radio, checkbox, select advanced, …
Sau khi cài đặt plugin Meta Box và Meta Box Builder, bạn sẽ thấy một menu tên là Meta Box xuất hiện trong Admin Dashboard. Bạn tìm đến mục Custom Fields để bắt đầu tạo field nhé.
Mục Custom Fields bên trong menu Meta Box
Trong giao diện chính của mục Custom Fields, có 3 khu vực chính như sau:
- Danh sách các field để bạn chọn loại field cần tạo;
- Khu vực thiết lập các thông số cho toàn bộ field group (mỗi field group chính là một meta box;
- Các thông tin chi tiết về một field khi đã được tạo, bạn sẽ thiết lập cho từng field ở đây.
Chúng ta sẽ làm việc với từng khu vực này để thiết lập đầy đủ các yếu tố nhé.
Tạo custom field và field group (hay còn gọi là meta box)
Ở tạo Fields (khu vực 1), bạn nhập tên của field group vào ô Title. Tên này chỉ dùng cho mục đích quản lý thôi, nên bạn đặt thế nào cũng được.
Đặt tên cho field group
Lúc này, bạn có thể chuyển sang luôn tab Settings (khu vực số 2) để thiết lập thông số cho cả field group (meta box). Bạn đừng nhầm lẫn khái niệm “meta box” và tên của plugin Meta Box nhé. Meta box (khái niệm chung) là nơi chứa các custom field, bạn có thể đọc thêm về nó ở đây.
Sau đó, quay trở về tab Fields ở khu vực 1, chọn loại field mà bạn muốn tạo trong danh sách các field được liệt kê ở cột phía bên trái. Ở đây bạn sẽ có khá nhiều lựa chọn vì Meta Box hỗ trợ bạn tới hơn 40 loại field (như mình đã nói khá nhiều), tức là hỗ trợ gần như đầy đủ tất cả các loại field cần thiết trong WordPress rồi đó.
Bạn chỉ cần click vào tên của loại custom field bạn muốn, thì một field mới sẽ xuất hiện ngay ở khu vực phía bên phải.
Thiết lập các thông số cho custom fields
Khi bạn đã chọn và tạo ra đầy đủ các custom field mà bạn muốn, sẽ là lúc cần phải thiết lập cho từng field đó. Chúng ta sẽ làm việc này ở khu vực số 3 nhé.
Phần này sẽ cung cấp cho bạn khá nhiều các lựa chọn khác nhau, và được chia thành 1 vài nhóm thiết lập kiểu như sau:
Các thuộc tính mà loại field nào cũng có
- ID: Thuộc tính này là bắt buộc và là duy nhất. Nó sẽ được sử dụng như là
meta_keykhi lưu dữ liệu. Bạn nên nhập số, ký tự và dấu gạch dưới để đặt ID. - Label: Đây là tên hiển thị ra ngoài của field. Phần này không bắt buộc nhưng nếu bạn để trống, field sẽ chỉ hiển thị mỗi ô để nhập dữ liệu thôi (như ảnh dưới đây) thì người dùng sẽ không biết là ô gì để nhập thông tin gì đâu.
- Description: Đây là chỗ để bạn viết mô tả cho field. Phần này sẽ hiển thị ra ngay bên dưới ô nhập liệu để hướng dẫn người dùng cách nhập. Dù vậy, phần này cũng không bắt buộc.
- Default value: Đây là giá trị mặc định mà bạn muốn hiển thị ở ô nhập liệu. Nó không cần thiết lắm nên bạn có thể đặt, có thể không.
Bạn có thể đọc thêm về các thiết lập cho field ở trong tài liệu hướng dẫn của plugin ở đây nhé.
Các thuộc tính chỉ có một số loại field nhất định mới có
- Step: Step là bước nhảy giá trị của field ở dạng number (số). Thuộc tính này cho phép bạn cài đặt việc tăng / giảm số khi người dùng nhấn nút tăng / giảm. Mỗi một click sẽ tương ứng với một bước nhảy số mà bạn đã đặt. Bạn có thể đặt bước nhảy là số nguyên hoặc số thập phân đều được.
- Minimum / Maximum value: Là giá trị tối thiểu / tối đa mà người dùng được phép nhập vào field. Thuộc tính này không bắt buộc.
- Post type: Đây là một chuỗi (cho cùng 1 loại bài viết) hoặc là một mảng (cho các loại bài viết khác nhau).
- Field type: là cách mà các bài viết được hiển thị.
- Taxonomy: Là chuỗi hoặc mảng cho các phân mục.
- Image size: Là kích thước của các hình ảnh được hiển thị trong phần chỉnh sửa bài viết
- Google Maps API key (chỉ dành cho bản đồ): là thông tin về Google Maps API.
- Address field: chọn tên của các field muốn sử dụng.
- Language: chọn loại ngôn ngữ.
Lưu ý là các thuộc tính là không phải lúc nào cũng có cho các field. Chúng được dùng cho một số loại field đặc biệt thôi. Bạn nên đọc thêm tài liệu hướng dẫn của plugin để biết thêm về từng loại field và hiểu cách sử dụng cũng như ý nghĩa của chúng nhé.
Các thuộc tính đi kèm với một số loại field đặc biệt như radio, image select, text list, …
- Options: Chúng được dùng để hiển thị các lựa chọn khác nhau cho người dùng. Các giá trị này sẽ được lưu ở trong phần cấu hình của field.
- Add option: Các giá trị được lưu trong phần cấu hình của field và các đường dẫn của hình ảnh sẽ được sử dụng để hiển thị ảnh.
- Add input: được sử dụng như là key của mảng chứa các giá trị được lưu trong database.
Bạn cần thiết lập hết các thông tin của field ở trên để có một custom field hoàn chỉnh như bạn mong muốn nhé. Dưới đây, mình sẽ hướng dẫn bạn thiết lập cho một số field loại cơ bản để bạn tham khảo nhé.
Cách thiết lập một số custom field cơ bản
Custom field dạng Text
Trong phần thiết lập cho từng custom field (khu vực số 3), chúng ta làm như sau:
Và field dạng Text của bạn sẽ hiển thị như sau:
Custom field dạng Number
Với loại custom field này, bạn sẽ có thêm một vài lựa chọn như là step, minimum value, maximum value nhé.
Bạn có thể thiết lập như sau:
Và field sẽ hiển thị như này:
Custom field dạng Text List
Loại field này cũng có thêm một vài thiết lập đặc biệt ví dụ như là Add input.
Sau khi thiết lập, custom field sẽ hiển thị như sau:
Custom field dạng Checkbox List
Bạn sẽ có thêm các thiết lập dạng text area để thêm các lựa chọn cho danh sách checkbox như sau:
Custom field này hiển thị như sau:
Custom field dạng Post
Bạn có thể thiết lập field này như sau:
Kết quả là field sẽ hiển thị như dưới đây:
Custom field dạng Image Upload
Bạn có thể thiết lập field này như sau:
Và field sẽ hiển thị như này:
Lời cuối
Tổng kết lại, bạn thấy đấy, Meta Box Builder cung cấp cho bạn đầy đủ tất cả các lựa chọn cần thiết để thiết lập cho các custom field. Tất cả những gì bạn cần lúc này chỉ là nhó nhập các thông tin theo đúng cấu trúc mà thôi. Nó thực sự rất đơn giản phải không? Với cách tạo và thiết lập custom field như này, Meta Box Builder chắc chắn sẽ giúp bạn tiết kiệm được kha khá thời gian và công sức đấy. Bạn hãy thử dùng nó cho các dự án tiếp theo nhé.
