Cách tạo ACF Flexible Content Field với Meta Box

Cách tạo ACF Flexible Content Field với Meta Box

Mình đoán là bạn đã từng nghe ở đâu đó và thậm chí là đã sử dụng Flexible Content Field của Advanced Custom Fields (ACF) plugin. Có đúng vậy không? Nhưng nếu như bạn đang tìm cách để tạo ra các field mà có tính năng tương tự, nhưng lại không muốn dùng ACF thì hãy xem tiếp bài này nhé. Mình sẽ hướng dẫn các bạn cách tạo Flexible Content Field tương tự như của ACF, nhưng lại sử dụng Meta Box plugin để làm việc đó.

Vì mình sử dụng một công cụ không phải ACF, nên sẽ có một số khái niệm hơi khác so với cách gọi mà ACF sử dụng. Vậy nên, trước tiên, hãy cùng tìm hiểu và làm rõ các khái niệm trước nhé.

Meta Box là gì?

Ở bài trước nói về Cách sử dụng Meta Box để tạo một trang FAQ, mình có giới thiệu Meta Box là gì rồi. Bạn có thể đọc bài đó để hiểu thêm nhé.

Ở đây, mình cũng muốn giới thiệu thêm về 2 extenstion của Meta Box plugin (đây cũng chính là 2 công cụ chính mà chúng ta sẽ sử dụng trong bài viết này), đó là: Meta Box Group và Meta Box Conditional Logic.

Meta Box Group

Meta Box Group là một plugin (thực tế là phần mở rộng thêm của Meta Box plugin). Plugin hay extension này cho phép chúng ta nhóm các trường lại với nhau thành một nhóm, tổ chức và sắp xếp các trường tạo thành một bố cục rõ ràng, dễ nhìn, và khoa học. Plugin này cũng giúp bạn nhân bản các trường một cách dễ dàng, hoặc thu gọn / mở rộng cả cụm nhóm cho dễ nhìn khi nhập liệu.

Đây là một tính năng cao cấp của Meta Box, nên để sử dụng được plugin này, bạn cần phải trả phí. Bạn có thể mua riêng extension này, hoặc mua cả 1 gói nhiều extension của Meta Box để được giảm giá.

Meta Box Conditional Logic

Meta Box Conditional Logic, giống như Meta Box group, cũng là một plugin và là một phần mở rộng thêm của Meta Box plugin, nhưng nó cho phép chúng ta đặt điều kiện cho một trường nào đó xuất hiện hay không xuất hiện phụ thuộc vào giá trị của một trường khác.

Đây là cũng là một tính năng cao cấp của Meta Box, nên cũng cần trả phí thì mới được dùng.

Flexible Content Field là gì?

Flexible Content Field của ACF

Flexible Content Field là một loại field cho phép bạn tạo ra một bố cục gồm nhiều section khác nhau và trong mỗi section chứa nhiều trường con khác nhau. Trong số các section đó, bạn có thể nhân bản 1 loại section bất kì bạn muốn.

Bạn có thể xem thêm về những gì mà Flexible Content Field có thể làm ở video này nhé:

Group Field của Meta Box

Thực tế thì Meta Box plugin không có field nào tương đương với Flexible Content Field của ACF. Vì vậy để tạo field tương tự thì mình sẽ sử dụng 1 loại field gần giống là Group Field của Meta Box. Để tạo ra Group Field thì bạn cần sử dụng Meta Box Group mà mình nói ở trên.

Meta Box Group Album example

Group Field này sẽ giúp bạn có thể ghép nhóm các field lại với nhau, hoặc tạo các nhóm con trong chính nhóm đó, và cũng nhân bản được field hay sub-group / group luôn. Tính năng này khá giống với Flexible Content Field của ACF đúng không?

Tuy nhiên, ngoài những tính năng trên thì bản thân Group Field được tạo bởi Meta Box Group lại không thể quy định được là khi nào thì trường nào được xuất hiện, khi nào thì không (cái này Flexible Content Field của ACF có). Nhưng Meta Box plugin lại có 1 extension rất thú vị và hữu ích khác là Meta Box Conditional Logic có thể giúp bạn làm được việc trên.

Khi bạn kết hợp việc sử dụng các plugin Meta Box Group và Meta Box Conditional Logic thì Group Field sẽ có đầy đủ các tính năng giống như Flexible Content Field của ACF, thậm chí còn có thêm cả nhiều tính năng hơn thế nữa. Tôi sẽ giúp các bạn khám phá thêm tính năng của nó khi kết hợp 2 extension này ở những bài sau nhé.

Còn bây giờ, quay trở lại với việc tạo field thôi.

Cách tạo Flexible Content Field tương tự như ACF, nhưng dùng Meta Box

Chuẩn bị

Bạn cần cài đặt và kích hoạt tất cả các plugin sau đây:

Hãy nhớ là phải kích hoạt cả 3 plugin trên nhé.

Ngoài ra, nếu bạn muốn tạo, thiết lập các field trên một giao diện trực quan để đỡ mất công code, thì bạn nên cài thêm Meta Box Builder giống mình nhé.

Xem hướng dẫn cài đặt và kích hoạt các plugin tại đây.

Xây dựng Flexible Content Field

Để các bạn hình dung được bước tranh tổng quan về các bước mình thực hiện, thì mình sẽ nói tóm gọn lại như này:

Đầu tiên, mình sẽ tạo 1 group cha, sau đó tạo 1 field loại Select và các group con nằm trong group cha kia. Cuối cùng, mình sẽ đặt điều kiện để các group con hiển thị dựa trên giá trị của trường Select.

Làm chi tiết nhé:

Bước 1: Tạo 1 group cha

Bước này khá là đơn giản thôi. Trong admin dashboard, các bạn tìm đến tab Meta Box > Custom Fields Tiếp theo, bạn tìm đến tab Specials(xem ảnh) và chọn nút “Group”. Một field có dạng group sẽ xuất hiện ở phía tay phải.

Create group by Meta Box to make flexible content field

Tạo Group Field

 

Mình đặt tên group cha này là Sections và chọn Cloneable (cho phép nhân bản) + Collapsible (Có thể đóng mở hay thu gọn group này lại).

configure the group by Meta Box to create flexible content field

Đặt tên Group Cha

 

Bước 2: Tạo 1 Select Field nằm trong group cha ở bước 1

Tương tự như cách tạo Group Field ở trên, bạn chỉ cần chuyển đến tab Basic Fields và chọn Select.

Create select field by Meta Box to create flexible content field

Tạo Select Field

*Chú ý:
Lúc này, field loại Select mà bạn vừa tạo vẫn chưa nằm trong group cha đâu. Bạn cần phải nhấn chuột vào field đó và kéo rồi thả vào bên trong group cha. Khi này, nó mới là một trường con của group.
Ngoài ra, bạn cũng chưa cần thiết lập gì cho field này đâu. Cái này sẽ để dành đến bước cuối cùng mới làm nhé.

drag and drop field anywhere with Meta Box

Đưa Select Field vào trong group

 

Bước 3: Tạo các sub-group nằm bên trong group cha

Ở đây, mình sẽ tạo 3 group con (sub-group), mỗi group này sẽ tương ứng với 1 lựa chọn ở field Select phía trên nhé.

  •  Sub-group 1 – Services: Cái này mình tạo thêm bên trong bao gồm 1 group cháu để cho phép chúng ta nhân bản lên. Section này đại diện cho các dịch vụ nên sẽ cần lặp đi lặp lại.
  •  Sub-group 2 – Testimonials: Tương tự như section Services mình cũng tạo thêm Group cháu bên trong.
  •  Sub-group 3 – Facts: gồm 2 field text, textarea và 1 group cháu.

Để tạo các field / sub-group này thì bạn chỉ cần chọn loại field tương ứng ở phía cột trái, rồi kéo thả để sắp xếp chúng sao cho khớp với cấu trúc bạn mong muốn là được. Như mình đã làm thì cho ra kết quả này:

fields structure created by Meta Box to create flexible content field

Tạo 3 Group con

Bước 4: Đặt Conditional Logic

Lúc này, mình sẽ cần phải thiết lập các điều kiện để cho các sub-group sẽ chỉ hiển thị khi Select Field có một giá trị tương ứng nào đó.

Đây là bước cuối cùng và cũng là bước khó giải thích nhất. Bạn nên xem ảnh kỹ cho dễ hiểu nhé, đôi khi viết thành lời không diễn đạt hết được.

Bạn hãy quay trở lại field Select mà chúng ta đã tạo lúc trước nhé. Ở phần thiết lập cho field này, bạn thêm cho mình các options tương ứng với tên các sub-group đã tạo ở trên. Ví dụ ở đây mình thêm là Services, Testimonials & Facts như 3 sub-group mà mình đã tạo.

Add options for Select field of Meta Box

Tạo lựa chọn cho Select Field

 

Tiếp là quay lại chỗ Group Services. Bạn chọn tab Advanced, nhấn vào nút +Condition để tạo điều kiện cho group này.

Mình sẽ thiết lập điều kiện như sau:
Chọn Visible when All (All hay Any ở đây thì cũng tương tự với thuật toán AND và OR các bạn nhé). Và việc chọn All hay Any trong trường hợp này như nhau vì chúng ta chỉ đính kèm 1 điều kiện thôi.

Tiếp đến bạn chọn Select = “Giá trị”. Trong đó:
· Select: chính là ID của trường Select.
· “Giá trị”: điền một trong số các giá trị option đã đặt trong trường Select. Và, giá trị này là giá trị tương ứng bạn muốn cho hiển thị sub-group bạn đang thiết lập.

Set condition for a group of custom fields

Đặt điều kiện cho sub-group Services

 

Các bạn làm tương tự cho 2 sub-group còn lại nhé, mình chỉ cần đổi giá trị ở bước thiết lập cuối dùng là được.

Set condition for a group of custom fields

Đặt điều kiện cho sub-group Testimonials

Set condition for a group of custom fields

Đặt điều kiện cho sub-group Facts

 

Đến đây là bạn đã là xong rồi đấy. Nhớ nhấn Save rồi xem lại kết quả nhé.

Kết quả

Create ACF Flexible Content Field with Meta Box Group

Kết quả

Còn đây là đoạn code cho các bước thực hiện ở trên. Các bạn có thể lấy về và xem thử trực tiếp nhé.

 

https://gist.github.com/rilwis/210a664b72fa4e3e6578bff63247554a

Gửi phản hồi