Toàn tập về Advanced Custom Fields – Plugin dành cho WordPress

Nếu bạn đã đôi lần nghĩ tới việc nhập 1 field trong bài viết của WordPress và cần nó hiện ra ngoài website, Advanced Custom Fields là một trong những plugin thực hiện việc đó xuất sắc nhất. Code Tốt xin giới thiệu những tình huống sử dụng WordPress dành cho các bạn lập trình viên.

Tải về máy Advanced Custom Fields (ACF)

Phiên bản Advanced Custom Fields miễn phí có thể tải về từ đây.

Phiên bản trả phí bạn cần mua tại đây, cung cấp nhiều tính năng hơn, chẳng hạn như bạn có thể chọn danh sách bài viết hoặc chuyên mục chứa bài viết (để thực hiện các query phức tạp hơn).

Bắt đầu với ACF

ACF có cung cấp tất cả tài liệu sử dụng tại đây với nội dung cũng khá chi tiết. Trong bài viết này, Code Tốt sẽ điểm qua các tình huống sử dụng dành cho lập trình viên mới làm quen với ACF.

Khởi tạo field

Việc đầu tiên bạn cần làm là khởi tạo các field. Trong Bảng quản trị, bạn tìm menu “Custom Fields” và chọn “Field Groups”. Click “Add New” để thêm mới một field group mới.

Field Groups là gì?

Đây là tập hợp các field sẽ hiển thị trong backend theo một điều kiện nào đó. Ví dụ cụ thể nhé:

Ta muốn nếu là Posts (Bài viết), thì ở trong mỗi bài viết đều hiển thị một mục tên là “Nguồn tin” (loại field là text bình thường), và thêm một field để nhập “Tác giả” thay vì tên tác giả của WordPress.

Như vậy, đây là 2 fields có cùng một điều kiện là hiện trên Single Post. Nó sẽ nên nằm cùng Field Group để bạn set điều kiện đúng không nào? Đó là cách Field Groups hoạt động!!!

Field là gì?

Field chính là một loại nhập dữ liệu đầu vào như ta thường thấy. Field trong ACF (đặc biệt là bản Pro) cung cấp rất nhiều kiểu (document gọi là Field Type). Dưới đây là các field thường được sử dụng:

Field Type cơ bản

• Text
• Number
• Email
• Textarea
• Select
• Radio Button
• True/False

Field Type làm việc với WP_Query

• Page Link
• Post Object
• Relationship
• Taxonomy
• User

Field Type chứa các field hoặc lớp con (nhiều tầng dữ liệu)

• Repeater
• Flexible Content
• Field Type chỉ hiển thị trong backend
• Message
• Tab

Bạn thấy đấy, với từng ấy thứ, ACF bản Pro rất đáng để mua và dùng cho các dự án sử dụng WordPress nhờ khả năng tuỳ biến cao của mình.

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.

Code Tốt khuyến khích bạn đọc document và làm theo chính xác. 60% phần lỗi ACF chủ yếu đến từ việc developer lười tìm kiếm tài liệu nên sử dụng sai.

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à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. Đọc thêm Sử dụng Array trong PHP và WP_Query trong WordPress.

Đây là các thao tác nắm rõ WP_Query nâng cao thì mới hiểu bản chất của phần query backend này.

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.

Nguyễn Minh Khôi

Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.