Hướng dẫn sử dụng Advanced Custom Fields (ACF)
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
Cảm ơn bài viết, mình làm được rồi. thử mãi cái shortcode mà không được. Dùng đoạn mã này được luôn.
Ngon quá! Thật vui khi bài viết giúp đỡ được cho bạn 🙂
Để sửa Woocommerce bạn dùng plugin What The File để tìm file sau đó chèn mã vào đó nhé!
Cho e hỏi nếu sử dụng woocommerce để thêm thông tin hiển thị ở danh mục sản phẩm thì chèn ở đâu ạ