Tạo và hiển thị custom field trong WordPress

Trong bài viết hướng dẫn đưa khung soạn thảo bài viết ra trang chủ mình có đề cập đến custom field, trong bài viết này mình sẽ nói rõ hơn về chức năng này trong WordPress. Nếu bạn để ý bên dưới phần soạn thảo bài viết sẽ có mục Custom Fields như hình dưới đây:

custom fields trong wordpress

Nếu như không có mục này, bạn chỉ cần click vào nút Screen Options phía góc trên bên phải và đánh dấu tick vào ô custom fields thì mục này sẽ hiện ra.

hien thi custom fields ben duoi khung soan thao

Custom field là gì?

Custom field là một khung để bạn nhập một dạng dữ liệu đặc biệt nào đó vào trong mỗi bài viết. Ví dụ như mình muốn tạo một trang chia sẽ link download game cho điện thoại thì trong mỗi bài viết giới thiệu game sẽ có các phần như: phát hành, hỗ trợ và button tải về như hình dưới đây.

vi du custom fields trong wordpress

Tất nhiên trong mỗi bài viết bạn có thể gõ các dòng này vào rồi canh chỉnh sao cho giống. Tuy nhiên làm như vậy sẽ mất khá nhiều thời gian, đồng thời nếu bạn muốn các dòng này luôn hiển thị ở một vị trí đặc biệt nào đó trong bài viết như hình bên trên thì sẽ rất khó khăn. Bầy giờ, với custom field, bạn chỉ cần nhập MECORP; IOS, Android; link tải game vào các khung nhập dữ liệu thì nó sẽ hiển thị cho bạn giống như bên trên ngay tại vị trí mà bạn muốn hiển thị.

Tạo custom field trong WordPress

Bây giờ, trong mục Custom Fields bên dưới khung soạn thảo, bạn lick vào Enter new, nhập vào 3 keyvalue như hình dưới đây.

tao custom field trong wordpress

Sau khi nhập 1 key và value, click vào nút Add Custom Field để nhập key khác. Bạn lưu ý nhập key không dấu và không có khoảng trắng.

Hiển thị custom field trong WordPress

Bạn đã nhập được dữ liệu vào custom field, bây giờ công việc tiếp theo là hiển thị dữ liệu này ra bên ngoài bài viết. Bạn chỉ cần chèn đoạn code nhỏ dưới đây vào file single.php hoặc các file khác mà bạn muốn, chẳng hạn như mẫu của mình dưới đây, mình cho hiển thị ở bên dưới tiêu đề và trước nội dung bài viết.

chen meta code

Kết quả mình sẽ được như thế này:

hien thi custom fields

Không đẹp chút nào đúng không, nó hiển thị cả key không dấu. Ngoài ra nếu trên trang của bạn có vài custom field khác do một số plugins tự động tạo ra thì nó cũng sẽ hiển thị luôn ra bên ngoài. Vì vậy, ta sẽ không sử dụng đoạn code trên nữa mà sẽ sử dụng đoạn code dưới đây:

<?php $link=get_post_meta( get_the_ID(), 'download-app', true);
      $ph=get_post_meta( get_the_ID(), 'phat-hanh', true);
      $ht=get_post_meta( get_the_ID(), 'ho-tro', true);
if($ph) {echo '<p class="meta1"><strong>Phát hành:</strong> '.$ph.'</p>';}
if($ht) {echo '<p class="meta1"><strong>Hỗ trợ:</strong> '.$ht.'</p>';}
if($link) {echo '<div class="download"><span class="taive"><a href="'.$link.'">Tải về</a></span></div>';} 
?>

Thêm một số lớp css vào file style.css và ta đã được kết quả như thế này:

ket qua hien thi custom field

Đẹp rồi đúng không nào. Nếu bạn có tạo thêm nhiều custom field khác thì có thể sử dụng code theo cấu trúc như trên, chỉ cần thay key cho phù hợp.

Chỉ cần trong một bài viết, bạn tạo ra các custom field như trên thì các key sẽ tự động lưu lại. Khi viết một bài viết khác, bạn không cần tạo key nữa mà chỉ cần chọn key trong danh sách sẵn có.

Hy vọng bài viết này sẽ giúp bạn hiểu rỏ hơn về chức năng custom field trong WordPress, có thể tạo và hiển thị custom field trong mỗi bài viết hoặc page. Chúc bạn thành công!

Tạo và hiển thị custom field trong WordPress
5 (100%) 1 vote

Tìm trên Google
  • tạo feild và hiển thị feild

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

Comments

  1. {c1} {c1}

  2. Gio Mua Dong :

    Chào AD.
    Mình muốn nhờ chút ví dụ mình muốn tạo field để hiển thị bố cục giống như thế này thì làm ra sao . Mong được hướng dẫn . Cảm ơn ad nhiều .
    Link
    http://subindo.net/download-weird-doll-2016-hdrip/

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!