Advanced Custom Fields thực sự rất linh hoạt để tạo và quản lý các trường tùy chỉnh trong bài viết, trang hoặc sản phẩm trong wordpress. ACF Pro chủ yếu tập trung vào việc tạo và quản lý các trường tùy chỉnh trong backend. Điều này bao gồm tạo các trường, quy tắc hiển thị, và lưu trữ dữ liệu tùy chỉnh.
Tuy nhiên, để hiển thị dữ liệu từ các trường tùy chỉnh được tạo bằng ACF Pro trên frontend, bạn sẽ cần tự code hoặc tùy chỉnh giao diện của mình. Trong bài biết này ItsmeIT chia sẻ cách sử dụng và hiển thị dữ liệu Advanced Custom Fields (ACF) ngoài Frontend như trên bài viết hoặc sản phẩm…
Cách sử dụng & hiển thị dữ liệu Advanced Custom Fields (ACF) trên bài viết hoặc sản phẩm
Bước 1: Cài đặt plugin và tạo các field của riêng bạn
Tải và cài đặt plugin Advanced Custom Fields Pro (ACF) mới nhất. Sau đó bấm vào ACF trong menu và bắt đầu tạo các field tùy chỉnh. Trong hướng dẫn này ItsmeIT sẽ ví dụ để tạo một trường “Link download”
Sau khi tạo field và lưu lại bạn sẽ có một trường tùy chỉnh trong bài viết có field name là “link_download”, chúng ta sẽ dựa vào nó để có thể hiển thị dữ liệu Advanced Custom Fields ra frontend. Vì một liên kết sẽ phải đi kèm với tiêu đề cho nó. Vậy ItsmeIT sẽ bấm “Add Field” để tiếp tục tạo thêm một trường để lưu cho tiêu đề:
Tiếp tục, mục “Settings”. Bạn có thể cấu hình điều kiện chỉ sử dụng “Group Field” này sẽ được sử dụng hiển thị dữ liệu Advanced Custom Fields cho post hoặc product hoặc trang mà bạn muốn.
Bước 2: Cách sử dụng Advanced Custom Fields (ACF) để thêm dữ liệu
Sau khi hoàn thành bước 1, bây giờ bạn có thể mở chỉnh sửa hoặc thêm mới bài viết hoặc sản phẩm. kéo xuống dưới cuối bạn sẽ thấy “Field Group” của ACF. Tại đây bạn có thể thêm dữ liệu tùy chỉnh của mình.
Lưu ý rằng đây là một ví dụ minh họa để lấy và hiển thị dữ liệu từ các trường tùy chỉnh Advanced Custom Fields (ACF) ra ngoài frontend như bài viết hoặc sản phẩm. Nó tương tự như các trường khác. Bạn có thể tạo ra các “Field Type” như textarea, select, checkbox, WYSIWYG Editor…
Bước 3: Hiển thị các Field ACF ra ngoài trang sản phẩm hoặc bài viết
Trong hướng dẫn này ItsmeIT sẽ sử dụng mã PHP và tận dụng một hook the_content có sẵn trong wordpress để chèn dữ liệu tùy chỉnh (custom) vào bài viết Wordpress.
Mở file functions.php trong theme bạn đang sử dụng và bắt đầu viết mã (code). Bây giờ hãy nhìn lại bước 1, sau khi tạo “Field Group” thì ItsmeIT đã có 2 field name là link_download và link_title. Qua đó chúng ta sẽ sử dụng hàm get_field để gọi đến nó và hển thị dữ liệu như sau:
<?php
// Add custom Theme Functions here
add_filter('the_content', 'render_html_post_content');
function render_html_post_content($content) {
$post_id = get_the_ID();
if (!isset($post_id)) {
return $content;
}
$link_download = get_field('link_download', $post_id);
$link_title = get_field('link_title', $post_id);
if (!empty($link_download) && !empty($link_title)) {
$link_html = '<h3>Link download: ';
$link_html .= '<a href="' . esc_url($link_download) . '">' . esc_html($link_title) . '</a>';
$link_html .= '</h2>';
return $content . $link_html;
}
return $content;
}
Đoạn mã trên ItsmeIT đã sử dụng the_content và thêm nội dung tùy chỉnh từ Advanced Custom Fields (ACF) vào cuối bài viết. Cùng với các điều kiện chỉ thực thi mã nếu như ACF có dữ liệu trong bài viết và chỉ hiển thị theo bài viết đó Mục đích để nó không bị ảnh hưởng hiệu suất đến các bài viết khác. Và ảnh chụp màn hình dưới đây là kết quả.
Với Advanced Custom Fields Pro, bạn có khả năng linh hoạt để tạo và quản lý các trường tùy chỉnh, và hiển thị dữ liệu tùy chỉnh trên trang web WordPress của mình. Điều này giúp bạn tạo ra các trang web tùy chỉnh và mở rộng khả năng của hệ thống quản lý nội dung CMS.
Link download: Advanced Custom Fields Pro | Full tài liệu (ACF)
– Advertising –
