Hướng dẫn sử dụng Advanced Custom Fields (ACF)

Tác giả: Quách Quỳnh - Cập nhật: 02/10/2021

Với một trang web thông thường thì mọi thứ không có gì khó khăn với người mới học làm web WordPress. Nhưng khi xây dựng các website với nhiều tính năng hơn thì lại là một vấn đề.

Chẳng hạn khi nhìn vào bức hình này bạn sẽ làm thế nào để đưa các thông tin giống như vậy?

Với trình soạn thảo thông thường của WordPress sẽ không có tính năng này. Để giải quyết vấn đề bạn cần sử dụng Advanced Custom Fields (ACF). Một plugin thêm trường tùy chỉnh mạnh mẽ được nhiều người sử dụng. Bài viết dưới đây mình sẽ hướng dẫn bạn cách dùng Advanced Custom Fields cụ thể cùng các bước hướng dẫn chi tiết.

Các bước sử dụng Advanced Custom Fields (ACF)

Bước 1: Thêm một Field Group mới

Nhấp vào Field Groups => Add new (Thêm mới)

Ấn vào Add field

Bước 2: Nhập thông tin

Một vài thứ cần điền như:

• Field Label: tên Label hiển thị
• Field Name: tên trường, không đặt name có dấu hay khoảng cách
• Field Type: kiểu nhập dữ liệu, có thể là văn bản, số, email, url …
• Required: yêu cầu có hoặc không

Sau đó ấn public sẽ được như thế này

Bước 3: Chọn nơi hiển thị Custom Field

Chọn trong Post, Page, Custom Post Type hay Sản Phẩm

Bước 4: Tạo một Post, Page hay là một Custom Post Type mới kéo xuống bên dưới

Nhập giá trị vào trường

Bước 5: Khai báo Field ra bên ngoài giao diện của bạn

Thêm đoạn mã dạng vào vòng lặp trong file index.php, archive.php hoặc tập tin mà bạn muốn hiển thị
<?php the_field('gia_ban'); ?>
Hoặc cụ thể hơn

Load lại trang chủ xem kết quả như thế nào

Việc còn lại của bạn là Style CSS để trông nó đẹp hơn thôi.

Với các trường còn lại bạn cũng làm tương tự như hướng dẫn ở trên.

Kết luận: Custom Field được dùng nhiều trong các website dịch vụ, bán hàng như bất động sản, web truyện, xem phim online, web download vv…

Qua ví dụ thực tế trên bạn đã hiểu rõ cách sử dụng Advanced Custom Fields rồi phải không nào. Khi nắm vững bạn hoàn toàn tùy biến giao diện và thêm nhiều tính năng để đáp ứng nhu cầu khách hàng.

>> Đọc thêm: Hướng dẫn tạo Meta Box trong WordPress