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
- 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.
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.
Good ! bài viết đầy đủ quá 🙂
Viết bài về Meta Box đi em 🙂
Mình đang dùng custom field để tạo thêm 1 đoạn văn bản mô tả thứ 2 ở dưới danh mục.
Đã tạo hàm trong Custom Fields: motadanhmuc2
và chọn vị trí : Taxonomy -> Danh mục
trong file: category.php chèn code: ” ”
Nhưng nó không hiện cái mô tả. Ad biết cái lỗi này không giúp mình với
Nếu nó là taxonomy thì code bạn phải ghi khác đấy:
get_field('category_description', 'category_' . $category_id);
Bạn tham khảo thêm ở đây: https://support.advancedcustomfields.com/forums/topic/get-custom-taxonomy-field-value/