Hiển thị post có custom field trong WordPress

Giới Thiệu Về Custom Fields Trong WordPress

WordPress, một nền tảng quản lý nội dung (CMS) phổ biến, cung cấp nhiều cách để bạn tạo và quản lý nội dung trang web của mình. Ngoài các trường mặc định như tiêu đề, nội dung và danh mục, WordPress còn hỗ trợ custom fields (trường tùy chỉnh). Custom fields cho phép bạn thêm dữ liệu meta vào các bài viết (posts), trang (pages) và các loại nội dung tùy chỉnh (custom post types).

Custom fields đặc biệt hữu ích khi bạn cần lưu trữ và hiển thị thông tin mà các trường mặc định của WordPress không cung cấp. Ví dụ:

• Giá sản phẩm trong một trang web thương mại điện tử.
• Thông tin tác giả, như chức danh và tiểu sử ngắn, cho bài viết.
• Ngày và địa điểm diễn ra sự kiện.

Trong bài viết này, chúng ta sẽ tìm hiểu cách hiển thị custom fields trong các bài viết WordPress của bạn, sử dụng cả phương pháp thủ công (code) và các plugin phổ biến.

Sử Dụng Code Để Hiển Thị Custom Fields

Đây là phương pháp đòi hỏi bạn phải chỉnh sửa các file template của theme WordPress. Cần cẩn thận khi chỉnh sửa code để tránh gây lỗi cho trang web của bạn. Luôn sao lưu các file trước khi chỉnh sửa.

Bước 1: Xác Định Tên Custom Field

Trước tiên, bạn cần biết tên của custom field mà bạn muốn hiển thị. Tên này được xác định khi bạn tạo custom field trong trình chỉnh sửa bài viết. Ví dụ, nếu bạn sử dụng plugin Advanced Custom Fields (ACF), bạn sẽ đặt tên cho trường đó trong giao diện của plugin.

Bước 2: Chỉnh Sửa File Template

Tiếp theo, bạn cần chỉnh sửa file template phù hợp trong theme WordPress của mình. Thường thì bạn sẽ muốn hiển thị custom fields trong file single.php (cho bài viết đơn) hoặc page.php (cho trang đơn). Nếu bạn sử dụng một custom post type, bạn có thể cần tạo một file template riêng cho post type đó, ví dụ: single-product.php nếu bạn có một post type là “product”.

Bạn có thể tìm thấy các file template này trong thư mục theme của bạn, thường nằm trong /wp-content/themes/ten-theme-cua-ban/.

Bước 3: Sử Dụng Hàm get_post_meta()

Hàm get_post_meta() là hàm chính để truy xuất dữ liệu custom field từ database WordPress. Hàm này nhận ba tham số:

• $post_id: ID của bài viết bạn muốn lấy custom field. Thường bạn có thể sử dụng hàm get_the_ID() để lấy ID của bài viết hiện tại.
• $key: Tên của custom field bạn muốn truy xuất.
• $single: (Tùy chọn) Một giá trị boolean (true/false) cho biết bạn muốn lấy một giá trị đơn hay một mảng các giá trị. Nếu bạn chỉ có một giá trị cho custom field, đặt nó thành true. Mặc định là false (trả về một mảng).

Ví dụ, để hiển thị custom field có tên là gia_san_pham, bạn có thể sử dụng đoạn code sau:


<?php
$gia = get_post_meta( get_the_ID(), 'gia_san_pham', true );

if ( ! empty( $gia ) ) {
echo '<p>Giá sản phẩm: ' . esc_html( $gia ) . '</p>';
}
?>


Trong đoạn code trên:

• get_the_ID() lấy ID của bài viết hiện tại.
• 'gia_san_pham' là tên của custom field.
• true cho biết chúng ta muốn lấy một giá trị đơn.
• esc_html( $gia ) dùng để escape HTML, giúp bảo vệ trang web khỏi các cuộc tấn công XSS.
• Đoạn code kiểm tra xem biến $gia có rỗng hay không trước khi hiển thị.

Bước 4: Thêm Code Vào Template

Chèn đoạn code trên vào file template của bạn, ở vị trí mà bạn muốn hiển thị custom field. Ví dụ, bạn có thể chèn nó sau tiêu đề bài viết:


<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

<?php
$gia = get_post_meta( get_the_ID(), 'gia_san_pham', true );

if ( ! empty( $gia ) ) {
echo '<p>Giá sản phẩm: ' . esc_html( $gia ) . '</p>';
}
?>

<?php the_content(); ?>


Lưu Ý Quan Trọng Khi Sử Dụng Code

Khi chỉnh sửa các file template, hãy nhớ:

• Luôn sao lưu các file trước khi chỉnh sửa.
• Sử dụng một text editor hỗ trợ cú pháp PHP để tránh lỗi.
• Kiểm tra kỹ code sau khi chỉnh sửa để đảm bảo không có lỗi.
• Nếu bạn không chắc chắn về code, hãy nhờ sự giúp đỡ từ một nhà phát triển WordPress có kinh nghiệm.

Sử Dụng Plugin Để Hiển Thị Custom Fields

Nếu bạn không muốn chỉnh sửa code trực tiếp, có nhiều plugin WordPress có thể giúp bạn hiển thị custom fields một cách dễ dàng.

Advanced Custom Fields (ACF)

Advanced Custom Fields (ACF) là một plugin mạnh mẽ và phổ biến cho phép bạn tạo và quản lý custom fields một cách trực quan. ACF cung cấp nhiều loại trường khác nhau, từ text, number, date, đến relationship, gallery, và repeater fields. Nó cũng có một phiên bản Pro với nhiều tính năng nâng cao.

Cài Đặt và Cấu Hình ACF

Sau khi cài đặt và kích hoạt plugin ACF, bạn sẽ thấy một mục “Custom Fields” trong menu quản trị WordPress. Tại đây, bạn có thể tạo các field group, mỗi field group chứa một hoặc nhiều custom fields.

Tạo Field Group

1. Nhấn “Add New” để tạo một field group mới.
2. Đặt tên cho field group, ví dụ: “Thông tin sản phẩm”.
3. Nhấn “Add Field” để thêm các custom fields vào field group.
4. Đối với mỗi field, bạn cần nhập:
   • Field Label: Tên hiển thị của trường (ví dụ: “Giá sản phẩm”).
   • Field Name: Tên duy nhất của trường (ví dụ: gia_san_pham). Tên này sẽ được sử dụng trong code để truy xuất giá trị của trường.
   • Field Type: Loại trường (ví dụ: “Text”, “Number”, “Image”).
5. Trong phần “Location”, bạn có thể xác định nơi field group này sẽ hiển thị (ví dụ: “Post” is equal to “All”, hoặc “Post” is equal to “Product” nếu bạn có một custom post type là “Product”).
6. Nhấn “Publish” để lưu field group.

Hiển Thị Custom Fields Với ACF

ACF cung cấp nhiều cách để hiển thị custom fields, bao gồm:

• Sử dụng hàm get_field() trong template: Hàm này tương tự như get_post_meta(), nhưng được cung cấp bởi ACF và dễ sử dụng hơn.
• Sử dụng shortcode: ACF cho phép bạn tạo shortcode để hiển thị custom fields trong nội dung bài viết.
• Sử dụng các block Gutenberg: ACF Pro cho phép bạn tạo các block Gutenberg tùy chỉnh với các custom fields.

Ví dụ, để hiển thị custom field gia_san_pham bằng hàm get_field(), bạn có thể sử dụng đoạn code sau:


<?php
$gia = get_field( 'gia_san_pham' );

if ( $gia ) {
echo '<p>Giá sản phẩm: ' . esc_html( $gia ) . '</p>';
}
?>


Đoạn code này ngắn gọn và dễ đọc hơn so với việc sử dụng get_post_meta() trực tiếp.

Các Plugin Custom Field Khác

Ngoài ACF, còn có một số plugin custom field khác đáng chú ý:

• Meta Box: Một plugin mạnh mẽ và linh hoạt, cung cấp nhiều tính năng nâng cao.
• Pods: Cho phép bạn tạo custom post types và custom fields một cách dễ dàng.
• Toolset Types: Một phần của bộ công cụ Toolset, tích hợp chặt chẽ với theme và page builder Toolset.

Lời Khuyên Chung

Dù bạn chọn phương pháp nào để hiển thị custom fields, hãy nhớ:

• Lên kế hoạch cho cấu trúc dữ liệu của bạn trước khi tạo custom fields.
• Đặt tên custom fields một cách rõ ràng và nhất quán.
• Sử dụng các hàm escape để bảo vệ trang web của bạn khỏi các cuộc tấn công XSS.
• Kiểm tra kỹ code hoặc cấu hình plugin trước khi đưa lên môi trường production.

Hi vọng bài viết này đã cung cấp cho bạn những kiến thức cần thiết để hiển thị custom fields trong WordPress một cách hiệu quả. Chúc bạn thành công!