ACF (Advanced Custom Fields) là plugin WordPress cho phép bạn tạo và quản lý các trường dữ liệu tùy chỉnh (custom fields) một cách trực quan. Thay vì phụ thuộc vào nội dung mặc định của WordPress, ACF mở rộng khả năng lưu trữ thông tin cho bài viết, trang, sản phẩm WooCommerce hay bất kỳ loại nội dung tùy chỉnh nào.
Bài viết này sẽ giải thích cách ACF hoạt động, các khái niệm cốt lõi như field group và location rules, các loại field phổ biến, cách hiển thị dữ liệu trong builder và code, cùng với ví dụ thực tế về dự án, sản phẩm và thông tin đội ngũ. Cuối cùng, bạn sẽ hiểu tại sao việc thiết kế cấu trúc dữ liệu trước khi tạo trường là yếu tố quyết định thành công của dự án.
ACF hoạt động như thế nào trong WordPress
WordPress mặc định chỉ cung cấp tiêu đề, nội dung, đoạn trích và một số trường cơ bản. Khi bạn cần lưu thêm thông tin như giá sản phẩm, diện tích dự án bất động sản, hoặc chức danh thành viên đội ngũ, bạn phải dùng custom fields.
ACF đơn giản hóa quy trình này bằng giao diện kéo-thả. Thay vì viết code PHP để đăng ký meta box, bạn tạo field group (nhóm trường), chọn location rules (quy tắc vị trí) để xác định nơi hiển thị, sau đó thêm các field cụ thể.
Dữ liệu ACF được lưu vào bảng wp_postmeta của WordPress dưới dạng key-value. Điều này có nghĩa là dữ liệu vẫn tồn tại ngay cả khi bạn tắt plugin, mặc dù cần code tùy chỉnh để hiển thị lại.
Field group và location rules: Nền tảng của ACF
Field group là gì
Field group là container chứa một hoặc nhiều trường dữ liệu có liên quan. Ví dụ: nhóm thông tin dự án bất động sản có thể bao gồm giá, diện tích, số phòng ngủ, hướng nhà, và hình ảnh 360 độ.
Mỗi field group có:
- Tiêu đề: Tên nhóm hiển thị trong admin
- Fields: Các trường dữ liệu cụ thể
- Location rules: Điều kiện hiển thị nhóm
- Settings: Tùy chọn như vị trí hiển thị (normal, side, advanced)
Location rules xác định nơi hiển thị
Location rules cho phép bạn kiểm soát chính xác nơi field group xuất hiện. Bạn có thể kết hợp nhiều điều kiện với logic AND/OR.
| Điều kiện | Ví dụ ứng dụng |
|---|---|
| Post type | Chỉ hiển thị với Custom Post Type “Dự án” |
| Page template | Chỉ với template “Landing Page” |
| Taxonomy term | Chỉ khi chọn danh mục “Căn hộ cao cấp” |
| User role | Chỉ admin mới thấy field cấu hình nâng cao |
| Post status | Chỉ với bài viết đã xuất bản |
Ví dụ thực tế: Bạn tạo field group “Thông số kỹ thuật” chỉ hiển thị khi Post type = Sản phẩm AND Taxonomy = Điện tử. Điều này tránh làm rối giao diện admin cho sản phẩm thuộc danh mục khác.
Các loại field phổ biến và ứng dụng thực tế
ACF cung cấp hơn 30 loại field. Dưới đây là những loại được sử dụng nhiều nhất trong dự án thực tế:
| Loại field | Dữ liệu lưu trữ | Ví dụ ứng dụng |
|---|---|---|
| Text | Chuỗi ngắn | Tên dự án, mã sản phẩm |
| Textarea | Chuỗi dài mô tả | Giới thiệu ngắn, ghi chú |
| WYSIWYG | HTML định dạng | Mô tả chi tiết sản phẩm |
| Number | Số nguyên/thập phân | Giá, diện tích, năm xây dựng |
| Image | ID attachment | Ảnh đại diện, gallery |
| Gallery | Mảng ID ảnh | Thư viện hình dự án |
| Select | Giá trị từ danh sách | Trạng thái: Đang bán/Đã bán |
| True/False | Boolean (0/1) | Nổi bật trang chủ, còn hàng |
| Repeater | Mảng lặp lại | Danh sách tiện ích, đội ngũ |
| Flexible Content | Layout động | Trang landing với block tùy chọn |
| Relationship | Mảng post ID | Sản phẩm liên quan, dự án tương tự |
Repeater field: Linh hoạt cho dữ liệu lặp lại
Repeater là field mạnh mẽ cho phép người dùng thêm nhiều hàng dữ liệu cùng cấu trúc. Ví dụ: danh sách thành viên đội ngũ, mỗi người có tên, chức danh, ảnh đại diện và mô tả.
Khi hiển thị, bạn dùng vòng lặp để duyệt qua từng hàng. Trong Bricks Builder, sử dụng element Query Loop với nguồn dữ liệu là Repeater field.
Flexible Content: Xây dựng layout động
Flexible Content cho phép biên tập viên chọn và sắp xếp các layout khác nhau theo thứ tự tùy ý. Mỗi layout là một nhóm field độc lập.
Ví dụ: Trang giới thiệu công ty có thể bao gồm các layout: Hero banner → Đội ngũ → Con số ấn tượng → Khách hàng nói về chúng tôi → CTA. Biên tập viên có thể thêm, xóa, hoặc đổi thứ tự mà không cần developer.
Ví dụ thực tế: Cấu trúc dữ liệu cho dự án bất động sản
Giả sử bạn xây dựng website cho công ty bất động sản. Mỗi dự án cần lưu trữ thông tin phức tạp mà WordPress mặc định không hỗ trợ.
Thiết kế cấu trúc trước khi tạo field
Trước khi mở ACF, bạn cần trả lời:
- Dự án cần những thông tin gì?
- Thông tin nào là bắt buộc, tùy chọn?
- Cấu trúc nào tối ưu cho việc lọc và tìm kiếm?
- Dữ liệu nào cần đồng bộ với hệ thống bên ngoài (CRM, ERP)?
Ví dụ cấu trúc cho Custom Post Type “Dự án”:
Field group: Thông tin cơ bản
- Tên dự án (Text)
- Chủ đầu tư (Text)
- Địa chỉ (Text)
- Tỉnh/Thành phố (Select – taxonomy hoặc custom)
Field group: Thông số kỹ thuật
- Tổng diện tích (Number + đơn vị m²)
- Số tòa nhà (Number)
- Số căn hộ (Number)
- Năm bàn giao (Number)
- Pháp lý (Select: Sổ hồng/Sổ đỏ/Hợp đồng)
Field group: Tiện ích (Repeater)
- Icon (Image/SVG)
- Tên tiện ích (Text)
- Mô tả (Textarea)
Field group: Mặt bằng (Gallery)
- Hình ảnh mặt bằng các loại căn hộ
Field group: Vị trí
- Bản đồ (Google Map field)
- Mô tả vị trí (WYSIWYG)
Cách hiển thị dữ liệu ACF trong builder và code
Hiển thị bằng Bricks Builder
Bricks Builder tích hợp native với ACF, cho phép bạn truy cập field mà không cần code.
Cách thiết lập:
- Tạo template cho Post type cần hiển thị
- Thêm element (Heading, Text, Image, v.v.)
- Trong Dynamic Data, chọn nguồn “ACF Field”
- Chọn tên field tương ứng
Ví dụ: Hiển thị giá dự án
- Thêm element Heading
- Dynamic Tags → ACF Field → Chọn field
gia_du_an - Format:
{field} tỷ VNĐ→ kết quả: “5.2 tỷ VNĐ”
Hiển thị Repeater với Query Loop:
- Thêm element Container làm wrapper
- Bật Query Loop
- Query Type: ACF Repeater Field
- Chọn tên repeater (ví dụ:
tien_ich) - Bên trong, các element con truy cập sub-field bằng
{acf_sub_field:tien_ich_icon}
Xử lý điều kiện (Conditional Display):
Bricks cho phép ẩn/hiện element dựa trên giá trị ACF. Ví dụ: chỉ hiển thị badge “Đang mở bán” khi field trang_thai = “mo_ban”.
Hiển thị bằng code PHP
Khi cần tùy chỉnh cao hoặc tích hợp vào theme tự viết, sử dụng các hàm ACF:
// Lấy giá trị đơn giản
$gia = get_field('gia_du_an');
echo number_format($gia, 1) . ' tỷ VNĐ';
// Lấy ảnh với kích thước cụ thể
$anh_dai_dien = get_field('anh_du_an');
if ($anh_dai_dien) {
echo wp_get_attachment_image($anh_dai_dien['ID'], 'large');
}
// Lặp qua Repeater
if (have_rows('tien_ich')) {
while (have_rows('tien_ich')) {
the_row();
$ten = get_sub_field('ten_tien_ich');
$icon = get_sub_field('icon_tien_ich');
// Hiển thị...
}
}
// Lấy field từ option page
$hotline = get_field('hotline', 'option');
Lưu ý hiệu suất: get_field() thực hiện query database. Trong vòng lặp lớn, dùng get_fields() để lấy tất cả field một lần, hoặc cache kết quả.
ACF kết hợp với Bricks Builder: Workflow tối ưu
Sự kết hợp ACF + Bricks Builder tạo ra workflow mạnh mẽ cho việc xây dựng website WordPress phức tạp:
| Giai đoạn | Công việc | Công cụ |
|---|---|---|
| 1. Thiết kế dữ liệu | Xác định cấu trúc field, loại dữ liệu, quan hệ | Bảng, sơ đồ, Notion |
| 2. Tạo field | Xây dựng field group, location rules | ACF Pro |
| 3. Nhập nội dung mẫu | Thêm 3-5 bài viết với đầy đủ dữ liệu | WordPress admin |
| 4. Thiết kế giao diện | Tạo template, binding dữ liệu động | Bricks Builder |
| 5. Tinh chỉnh | Conditional display, responsive, animation | Bricks + CSS tùy chỉnh |
Ưu điểm của workflow này:
- Tách biệt dữ liệu và giao diện: Thay đổi design không ảnh hưởng dữ liệu
- Dễ bảo trì: Khách hàng tự cập nhật nội dung qua field quen thuộc
- Mở rộng linh hoạt: Thêm field mới không phá vỡ cấu trúc cũ
- Tái sử dụng: Export field group dùng cho dự án khác
Khi nào nên sử dụng ACF
ACF phù hợp khi:
- Website có nhiều loại nội dung khác nhau cần cấu trúc riêng (dự án, sản phẩm, đội ngũ, tuyển dụng…)
- Cần giao diện nhập liệu thân thiện cho khách hàng/không chuyên kỹ thuật
- Dữ liệu cần hiển thị đồng nhất trên nhiều vị trí (trang chi tiết, trang danh sách, trang chủ)
- Có kế hoạch tích hợp với hệ thống bên ngoài qua API
ACF không phải lựa chọn tốt nhất khi:
- Chỉ cần thêm 1-2 trường đơn giản → dùng custom fields mặc định của WordPress
- Dữ liệu phức tạp với quan hệ nhiều-nhiều → xem xét Custom Post Type với taxonomy
- Yêu cầu tìm kiếm/lọc phức tạp trên nhiều field → cần giải pháp như FacetWP hoặc ElasticSearch
Các câu hỏi thường gặp
ACF miễn phí và Pro khác nhau thế nào?
Bản miễn phí cung cấp các field cơ bản: Text, Textarea, Image, Select, v.v. ACF Pro ($49/năm) bổ sung Repeater, Flexible Content, Gallery, Clone field, và Option Page. Với dự án thực tế, Pro là lựa chọn cần thiết.
Dữ liệu ACF có bị mất khi gỡ plugin không?
Không. Dữ liệu lưu trong wp_postmeta vẫn tồn tại. Tuy nhiên, cấu trúc field group sẽ mất nếu không export trước. Để khôi phục hiển thị, bạn cần tái tạo field group hoặc dùng code tùy chỉnh để đọc meta trực tiếp.
Có nên dùng ACF cho website có hàng nghìn bài viết không?
Có, với lưu ý về hiệu suất. Tránh dùng quá nhiều field cho mỗi bài viết. Nếu cần query phức tạp (ví dụ: tìm sản phẩm có giá từ X đến Y), cân nhắc lưu dữ liệu vào custom table hoặc dùng plugin tối ưu query như Meta Box hoặc giải pháp headless CMS.
ACF có hoạt động với WooCommerce không?
Có. ACF thêm field cho sản phẩm WooCommerce, nhưng cần lưu ý: dữ liệu ACF không tự động đồng bộ với hệ thống biến thể, giỏ hàng, thanh toán của WooCommerce. Với dữ liệu ảnh hưởng giá hoặc tồn kho, nên dùng custom product attributes của WooCommerce thay vì ACF.
Làm sao di chuyển field group từ local sang production?
ACC Pro hỗ trợ Local JSON: field group được lưu dưới dạng file JSON trong theme, tự động đồng bộ khi deploy. Đây là cách tốt nhất để quản lý field trong môi trường development có version control (Git).
Kết luận
ACF là công cụ không thể thiếu khi xây dựng website WordPress với cấu trúc dữ liệu phức tạp. Thành công với ACF không nằm ở việc biết tạo nhiều loại field, mà ở khả năng thiết kế cấu trúc dữ liệu phù hợp trước khi bắt tay vào thực hiện.
Kết hợp ACF với Bricks Builder tạo ra workflow hiệu quả: bạn tập trung vào kiến trúc thông tin, khách hàng dễ dàng quản lý nội dung, và giao diện hiển thị linh hoạt theo yêu cầu thiết kế.
Nếu bạn đang lên kế hoạch cho dự án WordPress tiếp theo, hãy dành thời gian vẽ sơ đồ cấu trúc dữ liệu trước. Việc này sẽ tiết kiệm hàng giờ chỉnh sửa sau này và tạo nền tảng vững chắc cho việc mở rộng website trong tương lai.
