Tài Liệu Wordpress

Hướng dẫn sử dụng Advanced Custom Fields toàn tập

Posted on by admin12
30
Th8

4.7/5 – (1462 bình chọn)

Advanced Custom Fields (viết tắt là ACF) là plugin hỗ trợ tạo meta box một cách dễ dàng, hỗ trợ nhiều loại fields khác nhau.

Trong bài viết này, tôi sẽ hướng dẫn sử dụng plugin Advanced Custom Fields toàn tập

Hướng dẫn sử dụng Advanced Custom Fields toàn tập

Download Plugin ACF

Để download plugin ACF, bạn có thể download trên trang chủ của ACF tại đây hoặc tìm trên wordpress.org

Tài liệu đầy đủ về ACF tại: https://www.advancedcustomfields.com/resources/

Hướng dẫn sử dụng Plugin ACF

Tạo field trong trang quản trị

Sau khi cài đặt và kích hoạt plugin xong, bạn truy cập vào Dashboard => Custom Fields

Hướng dẫn sử dụng Advanced Custom Fields toàn tập

Tại đây, bạn cần phải tạo Field Groups trước. Bấm vào Add New để tạo mới

Hướng dẫn sử dụng Advanced Custom Fields toàn tập

Tại đây, bạn nhập các thông tin:

  • Tên nhóm: Nhập tên nhóm cần tạo
  • Danh sách các fields: Danh sách các field của nhóm
  • Location: Vị trí hiển thị của Field Groups. Bạn có thể thiết lập các điều kiện hiển thị thông qua Rules
  • Settings: Các thiết lập nâng cao khác (Trạng thái, style, sắp xếp, ẩn 1 số field,…)

Để thêm field cho nhóm fields bạn hãy bấm vào Add Field

Hướng dẫn sử dụng Advanced Custom Fields toàn tập

Sau đó nhập các thông tin về field:

  • Field Label: Tên field hiển thị trong trang admin
  • Field Name: Khoá của field, dùng để gọi ra ngoài theme, không chứa ký tự đặc biệt và khoảng trắng (Thường sẽ tự động sinh ra từ Field Label)
  • Field Type: Loại field muốn nhập liệu. ACF hỗ trợ rất nhiều field cho bạn lựa chọn (Có 1 số loại field chỉ có trong bản trả phí). Bạn nên tìm hiểu cách sử dụng các field tại link sau: https://www.advancedcustomfields.com/resources/
  • Field Introductions: Phần giải thích về field, tôi thường dùng để hướng dẫn người quản trị nhập liệu
  • Required: Bắt buộc phải nhập field này hay không
  • Default Value: Giá trị mặc định của field khi người dùng không nhập
  • Placeholder Text: Đoạn văn bản mờ hiển thị trong field (Chỉ áp dụng với các field dạng nhập liệu)
  • Prepend: Đoạn văn bản hiển thị ngay trước field
  • Append: Đoạn văn bản hiển thị ngay sau field
  • Character Limit: Giới hạn kỹ tự nhập vào
  • Conditional Logic: Thêm điều kiện hiển thị dựa vào ký tự nhập vào. Thường áp dụng cho những trường hợp phức tạp (Field này chọn giá trị này thì sẽ hiện field khác)

Sau khi chọn xong, bạn bấm nút Đăng để lưu lại.

Lưu ý: Danh sách các field trong 1 nhóm bạn có thể thay đổi thứ tự bằng cách kéo thả

Hiển thị field ra ngoài website

Đây là bước rất quan trọng, có thể sẽ bị lỗi nếu bạn không kiến thức về code. Do vậy, để làm được việc này bạn cần có 1 chút kiến thức về PHP.

Đầu tiên, bạn cần xác định vị trí cần gọi field ra (Xác định trong code)

Để hiển thị field trong ACF ra ngoài website, bạn sử dụng một trong các hàm sau:

  • get_field(): Phải thêm echo nếu muốn hiển thị
  • the_field(): Hiển thị luôn mà không cần echo
  • get_post_meta(): Nếu muốn hiển thị với post
  • get_term_meta(): Nếu muốn hiển thị với taxonomy
  • get_user_meta(): Nếu muốn hiển thị với user

Cấu trúc hàm get_field() và the_field()

 

 

echo get_field('field_name', 'id_post'); ?>

 

 

'field_name', 'id_post'); ?>

Nếu bạn gọi trong loop hoặc trang single của WordPress thì không cần phải truyền id_post. Nếu bạn muốn hiển thị giá trị field của 1 bài viết nào đó hãy thay id_post thành id của bài viết đó.

Shortcode trong ACF

Bạn có thể sử dụng shortcode do ACF cung cấp để hiển thị

Trong đó:

  • field_name: Thay thành key của field bạn đã tạo trong trang quản trị
  • post_id: Thay thành id post bạn cần lấy giá trị của field (Có thể bỏ qua nếu muốn lấy của bài hiện tại)

Cấu trúc hàm get_post_meta(), get_term_meta(), get_user_meta()

Các hàm này có sẵn do WordPress cung cấp, bạn có thể tham khảo nó chi tiết hơn trên https://codex.wordpress.org

 

 

echo get_post_meta(get_the_ID(), 'field_name', true); ?>

 

 

echo get_term_meta($term_id, 'field_name', true); ?>

 

 

echo get_user_meta($user_id, 'field_name', true); ?>

Export – Import Fields

Đây là một tính năng rất hay ho trong ACF giúp chuyển field qua website khác mà không cần phải tạo lại

Export Fields

Bạn truy cập Custom Fields => Tools

Hướng dẫn sử dụng Advanced Custom Fields toàn tập

Tại khu vực Export Field Groups, bạn chọn Field Groups muốn Export => Sau đó bấm Export File => Hệ thống sẽ tự động tải về file JSON

Import Fields

Bạn truy cập Custom Fields => Tools

Tại khu vực Import Field Groups, bạn chọn file JSON đã được Export từ ACF => Sau đó bấm Import File.

Kết luận

Trên đây, tôi đã hướng dẫn các bạn cách làm việc với plugin Advanced Custom Fields. Từ đó sẽ giúp bạn dễ dàng phát triển website theo ý mình.

admin12