Hôm nay, Diều Hâu sẽ giới thiệu đến các bạn một plugin rất hữu dụng, đó là Advanced Custom Field (ACF), cho phép bạn rút ngắn thời gian khi tạo các metabox với những thao tác đơn giản, qua trình gọi custom field để hiển thị ra ngoài theme cũng được thu ngọn lại giúp tiết kiệm rất nhiều thời gian.

Thao tác tạo các metabox thủ công thường mất khá nhiều thời gian, nếu bạn là một người mới bắt đầu học design website thì Diều Hâu khuyên bạn dùng đến sự hỗ trợ của các plugin. Hãy cùng xem qua những tính năng vô cùng tiện lợi của plugin này nhé!

Tại sao nên dùng Advanced Custom Field?

Advanced Custom Field là một plugin chuyên về Custom Field, cho phép bạn thực hiện hầu hết các thao tác với custom field. Không những thế ACF còn được hỗ trợ một thư viện addon khổng lồ, vô cùng hữu dụng nếu website của bạn sử dụng nhiều custom field.

ACF là một plugin được sử dụng rất nhiều trong cộng đồng WordPress và khuyến khích dùng bởi rất nhiều coder. Bạn không cần là một website designer chuyên nghiệp để sử dụng plugin này. Plugin hỗ trợ bạn export các field bạn đã tạo thành code riêng từ trước, để sau đó thêm các field này vào các project tương lai.

Xây dựng một Custom Field metabox trong WordPress

Để kích hoạt tính năng custom field trong trang WordPress của mình, bạn chỉ cần kích hoạt hiển thị custom field bằng cách sử dụng menu Screen Options ở góc phải của màn hình admin. Màn hình hiển thị lúc đó sẽ có dạng như sau:

Hiện tại khung menu này chưa đưa ra một đường dẫn đến bất kì post nào hoặc dạng data nào bạn muốn sử dụng. Để sử dụng custom field được hiệu quả, bạn cần thêm một khung meta box vào màn hình post editing để giúp quá trình nhập liệu được thuận tiện hơn. Dưới đây là một ví dụ:

Tạo một khung metabox không cần sử dụng quá nhiều code, đoạn code bạn sử dụng cần phải chỉ chính xác đoạn HTML nhập cho mỗi mục, đúng với định dạng của dữ liệu.

Các tính năng của ACF

Advanced Custom Field cho phép bạn tạo các giao custom field phức tạp mà không cần sử dụng nhiều code. Thay vì tốn nhiều giờ để gõ code, giờ đây bạn chỉ cần vài cú click chuột là đã có cho mình một custom field đẹp và chuyên nghiệp.

ACF sử dụng Field Groups để đính Custom Field bạn chọn vào các post. Field Groups cho phép bạn thay đổi thứ tự của các custom Fields và quyết định xem những dạng post nào bạn muốn gắn các field editing screen.

Sau khi đã tạo xong một field group bạn có thể nhập vào các dạng custom field mà mình mong muốn. Advanced Custom Field cho phép bạn chỉ định rõ những field label và field name được sử dụng, những từ khóa này sẽ được lưu dưới dạng meta_key trong database của WordPress.

Bạn có thể chọn các loại định dạng khác nhau như text box, WYSIWYG editor, date picker, image upload, checkbox, image gallery, oEmbed object, Google Map location. Những field có định dạng như email, URL hoặc số được hỗ trợ kiểm tra để đề phòng trường hợp các thông tin có định dạng sai được lưu vào database.

Ngoài ra, bạn còn có thể thêm các hướng dẫn vào từng field, làm cho editing screen trông chuyên nghiệp hơn với những thông tin gợi ý cho người dùng.

Hiển thị custom field trên website

Một khi bạn đã xây dựng xong Field Group và người dùng đã nhập các thông tin cần thiết, bạn cần phải hiển thị các thông tin lên website một cách hiệu quả. Lúc này, bạn cần phải cân nhắc xem bạn sẽ sử dụng các thông tin trên custom field này ra sao. Có một số lưu ý khi hiển thị custom field trên website, bạn sẽ có các lựa chọn sau:

• Field Label: tên của field hiển thị ra khi nhập liệu.
• Field Name: Tên của Field, được dùng khi bạn gọi ra ngoài, không được có khoảng trắng và kí tự đặc biệt.
• Field Type: Loại field, còn được gọi là kiểu nhập kiệu.
• Field Introductions: Giới thiệu về Field, hiển thị bên dưới khung nhập.
• Default Value: giá trị mặc định nếu như người dùng nhập sai format của thông tin.
• Required: Tùy chọn để xem mục thông tin này có bắt buộc phải điền không.
• Placeholder Text: Chữ gợi ý được hiển thị khi chưa nhập thông tin, chữ sẽ biến mất khi thông tin được nhập.
• Prepend: Phần chữ được hiển thị trước khung nhập field.
• Append: Tương tự như Prepend, nhưng nằm ở phía sau.
• Formating: Tùy chọn xem có thực thi HTML từ giá trị không.
• Character Limit: Giới hạn số lượng ký tự.
• Conditional Logic: Thêm các điều kiện logic dựa vào dữ liệu của các field khác.

Sau khi nập xong, nếu muốn nhập thêm các field khác, nhấn nút Add Field. Ở mục Location, bạn có thể tùy chỉnh sao cho phù hợp với mục đích sử dụng. Nếu bạn chỉ tạo custom field cho post thì tốt nhất là để theo default.

Tiếp theo, ở mục Options, bạn cần lưu ý các giá trị sau:

• Position: Vị trí của nhóm field.
• Order No: Thứ tự hiển thị trong phần viết bài
• Style: Chọn kiểu field, nên để là standard
• Hide On Screen: cũng để theo standard

Sau khi chọn xong, bấm nút publish để hoàn thành quá trình tạo Field. Sau đó, khi vào trang viết bài, các nhóm field mà bạn đã tạo từ trước sẽ được gọi ra.

Kết Luận

Advanced Custom Field là một plugin được sử dụng rộng rãi trong cộng đồng WordPress, với hơn 1 triệu lượt cài đặt. ACF được phát triển và hỗ trợ bởi công ty phát hành cùng với cộng đồng người sử dụng WordPress vô cùng lớn mạnh. Nếu website của bạn liên quan nhiều đến mảng custom meta data thì ACF là một plugin nhất định phải có.

Ngoài ra bạn có thể tham khảo thêm: 12 Hướng Dẫn Custom Post Type Hữu Ích Nhất

Nếu bạn đã sử dụng qua ACF và có những trải nghiệm muốn chia sẻ với Diều Hâu, thì hãy để một comment bên dưới nhé!