ACF – Advanced Custom Fields một plugin quan trọng mà hầu như Dev WordPress nào cũng sử dụng, để hiểu hơn một chút về ACF mình đã viết bài viết này để chia sẽ tới mọi người sử dụng ACF một cách dễ dàng hơn.
Hiển thị nội dung ngoài Frontend
Sau khi bạn cài đặt và kích hoạt ACF, bạn có thể sử dụng để lấy các nội dung từ field bạn nhập bằng function get_field() và the_field(). Đây là function của riêng ACF, nên nếu bạn đang chưa activate plugin này lên thì có thể báo lỗi nhé. Cụ thể cách dùng mình sẽ qua phần tiếp theo.
Với mỗi loại field type, bạn nên tìm trên Google bằng cú pháp “ACF + field type name“, ví dụ “ACF select field” là sẽ ra kết quả tài liệu cho phần này.
Debug dữ liệu từ các field của ACF
Bạn luôn luôn có thể debug dữ liệu từ các function get_field như 1 function PHP bình thường nhé:
$title = get_field('hero_title'); var_dump($title);
Lấy dữ liệu từ các field ACF thông thường
Phần lớn các field đều có thể gọi thông qua the_field() (nếu bạn muốn hiển thị), và get_field() nếu bạn muốn lấy giá trị (và check giá trị có rỗng hay true/false).
Thông thường nhiều developer lười sẽ chỉ làm như thế này:
<h2 class="hero__title"><?php the_field('title'); ?></h2>
Cách của 1 developer làm ra Code Tốt là luôn check giá trị có không để output (thay vì output 1 cụm HTML nhưng không có content) như dưới đây. Để code không lặp, bạn cần đặt giá trị trước khi gọi tới các field:
$title = get_field('title);
if( !empty($title) ) :
echo '<h2 class="hero__title">' . $title . '</h2>';
endif;
Lấy dữ liệu field nằm trong Theme Options
ACF cung cấp khả năng add field sau khi bạn tạo page Theme Options.
Để lấy dữ liệu từ các field này, bạn cần thêm attribute options vào sau. Lúc này hàm gọi sẽ như sau:
$facebook_link = get_field('facebook_link', 'options');
Lấy dữ liệu field nằm trong Theme Options và Hiển thị ở Blog Page
ACF cung cấp khả năng add field sau khi bạn tạo page Theme Options.
Để lấy dữ liệu từ các field này, bạn cần thêm id vào sau options. Lúc này hàm gọi sẽ như sau:
$facebook_link = get_field('facebook_link', 'options', ID);
Làm việc với ACF Field tương tác WP_Query
Các field dữ liệu nhập tay thông thường rất đơn giản, yêu cầu chính là làm theo document. Tuy nhiên, để tiện cho việc tra cứu, ta nên tìm cách sử dụng một cách thông minh. Chẳng hạn, ta nên tìm cách để chuyển các dữ liệu này đồng bộ dưới dạng array của PHP
Một ví dụ cụ thể để bạn nắm rõ hơn:
Ta cần hiển thị 5 bài viết mới nhất trên trang chủ bằng cách trong template Home ta có 1 field để chọn 5 bài viết từ danh sách các bài viết đã đăng.
Tạo field Relationship trong Backend
Đầu tiên, trong phần Field Groups, ta tạo 1 field có type là “Relationship” (cái này chỉ có trong bản ACF Pro nhé). Ta đánh dấu Post Type là “post”.
Tạo function để capture dữ liệu và biến nó thành PHP Array
Trong file functions.,php của giao diện WordPress, ta tạo 1 function mới đặt tên là mytheme_get_homepage_list như dưới đây. Nhiệm vụ của function này là convert dữ liệu của Relationship thành 1 PHP Array và trả về khi được gọi.
function mytheme_get_homepage_list() {
$list = array(); // Tạo 1 array trống
$posts = get_field('homepage_list'); // Field relationship
if( $posts ) {
foreach( $posts as $post ) : setup_postdata($post);
$item = array(
'title' => get_the_title(),
'link' => get_the_permalink(),
);
$list[] = $item; // Thao tác này thêm $item vào làm 1 array của $list
endforeach;
wp_reset_postdata();
}
return $list;
}
Hiển thị markup
Giờ, nếu bạn muốn hiển thị danh sách bài viết chẳng hạn, thì chỉ cần làm như thế này:
$posts = mytheme_get_homepage_list();
if( !empty($posts) ) {
echo '<ul class="post__list">';
foreach($posts as $post) {
echo '<li class="post__item"><a href="' . $post['link'] . '">" . $post['title'] . '</a></li>';
}
echo '</ul>';
}
Đây chính là ví dụ điển hình giúp việc markup luôn luôn nhận đầu vào là 1 PHP Array và sử dụng nó, thay vì bạn cần phức tạp quá trình tìm bài post và chạy Query ngay trên markup.
Thêm vào đó, nếu bạn làm việc với các dữ liệu phức tạp như Post Type, Terms và Taxonomy, bạn nên chuyển các loại dữ liệu này ra như function độc lập giúp lọc dữ liệu và chỉ trả về 1 PHP Array.
Kết luận
Advanced Custom Fields xứng đáng là một plugin được tin tưởng sử dụng, trước hết là bởi giao diện UI tương tác người dùng trong Backend tương đối thân thiện, và hiển thị ngoài website cũng không quá khó. Nếu bạn muốn giảm thiểu thời gian coding cho việc hiển thị dữ liệu backend ngoài frontend, đây là plugin tốt nhất hiện nay.
