Hướng dẫn Custom Field của WordPress

Hướng dẫn Custom Field của WordPress

Video hướng dẫn sử dụng tính năng custom field trong WordPress và cách viết code hiển thị custom field. Mời các bạn xem tại đây!

https://www.youtube.com/watch?v=-uooNCcKkg0

Hôm trước mình nhớ có một bạn nào đó yêu cầu mình viết bài về Custom Field để bạn ấy tham khảo vì hiện nay tính năng này luôn được ứng dụng rất rộng rãi từ các người dùng phổ thông đến các tay developer chuyên nghiệp. Vậy nhân tiện mình mở hàng một bài liên quan đến code thì mình xin hướng dẫn sơ qua cách ứng dụng Custom Field để các bạn…..muốn làm sao thì làm.

Custom Field là gì?

Giải thích ngắn gọn thì đó là một dữ liệu bổ sung để thêm vào mỗi bài viết hay page. Mình lấy ví dụ thực tế như sau, nếu bạn muốn chèn một nội dung sau đây vào cuối bài viết:

  • Thời gian: 24 giờ
  • Địa điểm: Vũng Tàu
  • Lời nhắn: Hãy đến đây!

Dĩ nhiên là bạn sẽ gõ các dòng đó vào bài, sau đó thêm màu, tô đậm cho nó, cũng không quá phức tạp. Nhưng khi ứng dụng custom field thì bạn chỉ cần điền 24 giờ, Vũng Tàu, Hãy đến đây vào khung nhập field thôi thì ở bài viết nó sẽ tự động định dạng như thế kia. Còn chèn ở đâu, làm như thế nào, thì mời bạn theo dõi tiếp phần hướng dẫn dưới đây.

Hướng dẫn ứng dụng Custom Field

Các bạn vào Posts -> Add New và nhìn xuống dưới sẽ thấy cái khung Custom Field này

custom-field-wordprses

Nếu không thấy thì các bạn nhìn tít lên trên, bấm vào chữ Screen Options và tick dấu vào Custom Field

Hướng dẫn custom field trong WordPress

Bây giờ các bạn thử thêm 3 KEY với 3 VALUE như sau:

custom-field-wordpress4

custom-field-wordpress3

Giải thích:

  • Key: Một khóa để phân biệt của từng field, dùng để gọi field ra để hiển thị. Chút nữa bạn sẽ được hiểu sâu về nó.
  • Value: Là giá trị của key, giá trị này chúng ta có thể thay đổi hoặc đặt một quy ước chung. Giải thích mơ hồ lắm, chút nữa sẽ có ví dụ cụ thể.

Xong rồi, bây giờ các bạn tiến hành chèn đoạn này vào file single.php (hoặc content.php, hoặc content-single.php)

Tốt nhất là nên chèn dưới đoạn loop <?php the_content (); ?>

Đây là mẫu của mình

custom-field-wordpress5

Sau đó bạn vào xem bài viết chứa custom field thì sẽ thấy nó như thế này

custom-field-wordpress6

Nhìn rất chuối đúng không nào, nó in luôn cả cái key không có dấu lên. Mình dùng Key không dấu bởi vì trong môi trường code PHP, một giá trị của chuỗi (string) không nên chứa khoảng trắng, rất dễ gây hiểu lầm . Cái này nếu bạn nào có học lập trình PHP thì sẽ biết, ít ai lại đi gán một từ có dấu cho giá trị bao giờ.

Nhưng vấn đề sẽ được đặt ra, ta xác định Key là không có dấu thì làm sao ta có thể thay thế Key đó thành một chữ có dấu khi được in ra ngoài bài viết? Ok, vậy bây giờ chúng ta sẽ không dùng the_meta() nữa mà sẽ dùng một hàm khác được gọi là get_post_meta().

Hàm này có cấu trúc đầy đủ mặc định là như sau:

Giải thích:

  • $post_id: Chuỗi xác định ID của bài viết được kích hoạt custom field. Thông thường chúng ta hay đặt giá trị cho chuỗi này là bài viết hiện tại, vậy chúng ta sẽ gán giá trị cho chuỗi này là $post_id->ID.
  • $key: Tên của Key muốn gọi ra.
  • $single: Đây là một giá trị kiểu boolean. Chuỗi này chỉ có thể thiết lập một trong hai giá trị đó là true hoặc false. Nếu giá trị là true thì nó sẽ hiển một giá trị duy nhất của Key mà ta đã gán cho nó. Còn đặt là False thì nó sẽ xuất ra giá trị kiểu Array.

Được rồi, bây giờ bạn vào lại file single.php xóa đoạn <?php the_meta(); ?> đi và thay thế bằng đoạn sau

¨
Bây giờ bạn đã được kết quả như thế này

custom-field-wordpress7

Tương tự với các Key còn lại, các bạn nên viết theo giống mẫu trên. Nhớ hàm if nữa nhé vì nếu không có hàm if ở trên thì ở các bài viết khác sẽ hiện nội dung HTML có trong code mặc dù không chứa custom field nào.

Như vậy là về custom field thì đến đây đã hết rồi đấy, đó là những vấn đề cơ bản mà bạn cần nên biết. Nếu tư duy lập trình của bạn tốt thì có thể ứng dụng được nó để làm rất nhiều việc đấy.

Trên thực tế khi làm việc với custom field, ít ai làm thủ công như thế này mà họ sẽ kết hợp với meta box để tạo thêm 1 số khung nhập liệu đẹp mắt dưới khung viết bài. Nếu bạn muốn tạo, có thể xem qua hướng dẫn ACF để làm nhé.

Các bài viết nên tham khảo:

  • Custom Field WordPress 101 – Tips, Tricks & Hacks
  • WordPress Custom Field – Part I, Part II

Một số plugin nên dùng kèm khi sử dụng Custom Field

Hy vọng với bài hướng dẫn cùi bắp này sẽ làm một số bạn chưa hiểu Custom Field là gì sẽ hình dung ra được phần nào. Nếu bạn có bất cứ thắc mắc gì thì hãy để lại bình luận nhé.

WordPress FAQ  » Học WordPress > Lập trình WordPress > WordPress API


 WordPress FAQ   |   Hoc WordPress   |   Su dung WordPress   |   Lap trinh WordPress |   Plugin WordPress  |  Thuat ngu WordPress    |  Theme WordPress  |  Lap trinh Themes |  Lap trinh plugin

Hướng dẫn Custom Field của WordPress
Hướng dẫn Custom Field của WordPress

Chia sẻ bài viết

Bình luận