Dùng tính năng có sẵn của WordPress để thêm Custom Fields (không dùng plugin)

Trong bài trước, chúng ta đã tìm hiểu khái niệm cơ bản về custom fields và các ứng dụng của nó. Trong bài viết này, hãy cùng tiếp tục tìm hiểu cách thêm custom fields vào một trang web WordPress mà không cần code cũng như không sử dụng plugin nào cả.

Chúng ta đã đề cập trong bài viết trước rằng WordPress có một tính năng mặc định cho phép người dùng cuối quản lý các custom field một cách rất đơn giản. Bạn có thể thêm bao nhiêu field tùy ý và đặt tên fields là gì cũng được.

Bây giờ, cùng tìm hiểu xem cách làm như nào nhé.

Cách kích hoạt tính năng có sẵn giúp tạo custom fields

Bước 1: Bạn vào trang tạo một bài viết mới hoặc chỉnh sửa một bài viết, rồi nhấn Screen Options.

Vào Screen Option để kích hoạt tính năng tạo custom fields.
Trang chỉnh sửa bài viết trong WordPress

Bước 2: Bạn đánh dấu tích vào ô Custom Fields nếu nó vẫn chưa được tích.

Tick vào ô custom fields để kích hoạt tính năng.
Đánh dấu tích vào ô Custom Fields

Bây giờ, bạn sẽ thấy một cụm có tên là Custom Fields (như ảnh dưới đây) xuất hiện ngay phía dưới phần chỉnh sửa bài viết.

Khu vực tạo custom fields xuất hiện dưới phần chỉnh sửa bài viết
Khu vực tạo Custom Fields

Theo mặc định thì tính năng này chỉ hoạt động với Post thôi. Nếu bạn muốn dùng nó cho các custom post types, thì bạn phải khai báo nó luôn ngay trong phần tùy chọn support khi bạn khai báo custom post type.

'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields' )

Bạn tham khảo thêm trong video hướng dẫn này nhé:

Cách tạo custom field

Trong phần Custom Fields mới xuất hiện, bạn sẽ thấy các trường thông tin (field) để điền dữ liệu vào. Form điền thông tin này khá là đơn giản với ý nghĩa của các cột như sau:

  1. Name: Tên riêng của custom field. Tên này sẽ được dùng làm biến $key của custom field nhé.
  2. Value: Là giá trị của field, thông thường sẽ ở dạng text đơn giản.

Mặc dù đây chỉ là một text field đơn giản, nhưng nó khá là linh hoạt. Nó có thể lưu bất kỳ loại dữ liệu nào mà bạn có thể chuyển đổi thành text được, ví dụ như:

  1. Text đơn giản
  2. HTML, XML, SVG
  3. JSON
  4. Dữ liệu hình ảnh hoặc file, … mã hóa ở dạng base64

Dưới đây là một ví dụ cho việc lưu trữ thông tin của một sản phẩm với Giá (Price) và Loại Sản Phẩm (Type) là text và hình ảnh SVG đã được mã hóa ở dạng base64.

Tạo một custom field để lưu trữ thông tin của sản phẩm.
Một ví dụ cho việc lưu các thông tin trong custom fields về một sản phẩm

Lưu trữ nhiều giá trị của một custom field

Sau khi lưu bài viết, bạn sẽ thấy một ô mới xuất hiện để chọn tên từ danh sách các custom field đã tạo thay vì tạo một cái mới. Nếu bạn thêm dữ liệu vào một field đã có sẵn, nó sẽ lưu cả dữ liệu cũ lẫn dữ liệu mới thêm vào.

Lưu trữ nhiều giá trị của một custom fields.
Thêm dữ liệu vào một custom field

Tính năng này tương ứng với cloning fields trong plugin Meta Box mà mình vẫn hay viết hướng dẫn đó, hay còn gọi là repeated fields trong các plugin khác.

Cách hiển thị một custom field ra front-end

Phần này cần các bạn phải code một chút. Nếu bạn không biết code, thì bạn có thể sẽ phải vật lộn với việc này kha khá đó. Vì vậy, có thể bạn sẽ phân vân không biết là cái này có cần thiết và tiện lợi để sử dụng hay không. Nhưng cái gì cũng có giá của nó cả. Việc tự xử lý custom field để lưu trữ dữ liệu tất nhiên là sẽ phức tạp hơn so với dùng UI (do plugin cung cấp) rồi.

Có hai hàm sẽ thường xuyên được sử dụng, đó là:

  • the_meta(): hiển thị danh sách các custom fields ra front-end không theo thứ tự nào cả;
  • get_post_meta($post_id, $key, $single ): lấy dữ liệu của custom field.

Ngoài ra, bạn sẽ cần dùng thêm một số hàm khác như:

  • get_post_custom(): lấy các dữ liệu của các custom field theo một mảng các key hoặc giá trị nào đó;
  • get_post_custom_keys(): trả về một mảng các key của tất cả các custom field;
  • get_post_custom_values( $key ): trả về một mảng các giá trị của một custom field $key.

Bạn sẽ cần gọi các hàm này theo vòng lặp (loop).

Bạn cũng sẽ cần thay đổi code trong theme với 2 cách như sau

Cách 1: Sửa theme trực tiếp:

  • Ưu điểm: nhanh
  • Nhược điểm: Các thay đổi sẽ bị mất đi khi bạn nâng cấp / cập nhật theme

Cách 2: Tạo một child theme:

  • Ưu điểm: Các thay đổi sẽ không bị mất đi khi bạn nâng cấp / cập nhật theme
  • Nhược điểm: Bạn sẽ cần nhiều thời gian hơn để tìm hiểu về child theme và cách nó vận hành.

Bởi vì bạn đang tập trung vào custom fields thôi, nên mình chọn cách là chỉnh sửa theme trực tiếp để bạn đỡ bị rối. Cùng xem nhé!

Hiển thị danh sách các custom fields

Mình sử dụng theme Twenty Seventeen. Mình muốn danh sách các custom fields hiển thị ngay bên dưới Tiêu đề của bài viết ở cả trang archive và trang single, nên mình sẽ thêm hàm the_meta() vào file template-parts/post/content.php như sau:

<?php
the_meta();
?>

Bây giờ, trang chủ của mình sẽ hiển thị như sau:

Hiển thị danh sách custom fields lên trang chủ.
Thông tin hiển thị trên trang chủ sau khi mình thêm custom fields

Trong bài viết Quiet, mình đã thêm 2 giá trị vào custom field có tên là Type, nên ở đây cả hai giá trị này sẽ đều hiển thị và được phân cách với nhau bởi dấu phẩy (,).

Video:

Hiển thị một custom field độc lập

Bạn sẽ phải lấy giá trị của từng custom field và hiển thị nó bằng cách thủ công. Lúc này, bạn sẽ cần dùng đến hàm get_post_meta() để lấy giá trị của custom field:

get_post_meta( $post_id, $key, $single );

Trong đó:

  1. $post_id: là ID của bài viết mà bạn muốn lấy custom field ra;
  2. $key: là key của custom field, đồng thời cũng là giá trị của cột Name (tên) của custom field;
  3. $single: tùy theo loại dữ liệu, nếu là true thì sẽ trả về một giá trị đơn lẻ, và false thì sẽ trả về một mảng các giá trị.

Bạn có thể dùng get_the_ID() để lấy ID của bài viết hiện tại mà bạn đang thực hiện trong vòng lặp (loop).

Ví dụ: bạn thay đoạn code the_meta() bằng đoạn code sau:

<ul class="post-meta">
    <li><span class="post-meta-key">Price:</span> <?php echo esc_html( get_post_meta( get_the_ID(), 'Price', true ) ); ?></li>
    <li><span class="post-meta-key">Image:</span> <?php echo esc_html( get_post_meta( get_the_ID(), 'Image', true ) ); ?></li>
    <li><span class="post-meta-key">Type:</span> <?php echo esc_html( get_post_meta( get_the_ID(), 'Type', true ) ); ?></li>
</ul>

Kết quả là bạn sẽ thấy custom field bạn cần hiển thị như sau:

Hiển thị giá trị của một custom field độc lập.
Hiển thị giá trị của một custom field

Trong bài viết Quiet, vì biến $single của mình là true, nên custom field tên là Type sẽ trả về chỉ một giá trị duy nhất là giá trị đầu tiên (là “Hard”), trong khi nó có tới 2 giá trị. Để hiển thị cả giá trị là Soft, thì chúng ta sẽ cần sửa lại code như sau:

<ul class="post-meta">
    <li><span class="post-meta-key">Price:</span> <?php echo esc_html( get_post_meta( get_the_ID(), 'Price', true ) ); ?></li>
    <li><span class="post-meta-key">Image:</span> <?php echo esc_html( get_post_meta( get_the_ID(), 'Image', true ) ); ?></li>
    <li><span class="post-meta-key">Type:</span> <?php echo implode( ', ', array_map( 'esc_html', get_post_meta( get_the_ID(), 'Type', false ) ) ); ?></li>
</ul>

Và kết quả là:

Hiển thị cả 2 giá trị là Hard và Sofm.
Hiển thị nhiều dữ liệu của cùng một field

Chúng ta cần mã hóa ảnh được nhập vào trường image về dạng base64 bởi vì WordPress chỉ hỗ trợ dữ liệu đầu vào dạng text. Để làm được việc đó, bạn có thể sẽ cần dùng đến một công cụ là base64-image.de. Để upload một bức ảnh, bạn sẽ cần dùng tool để mã hóa nó sang một đoạn text, sau đó copy đoạn text đó vào trong field image là được.

Trong ví dụ trước, mình đã thay đoạn code base64 bằng dấu ba chấm (…) để giúp bạn hình dung được các loại field khác một cách dễ dàng hơn. Trên thực tế thì nó sẽ trông kiểu như thế này:

Thay đoạn code base64 bằng dấu ba chấm (…) để hình dung được các loại custom fields khác một cách dễ dàng hơn.
Hiển thị field dạng image mà không cần base64

Lúc này, nếu bạn muốn hiển thị nó dưới dạng ảnh, bạn vào file single.php và sửa code như sau:

<ul class="post-meta">
    <li><span class="post-meta-key">Price:</span> <?php echo esc_html( get_post_meta( get_the_ID(), 'Price', true ) ); ?></li>
    <li><span class="post-meta-key">Image:</span> <img src="<?php echo esc_html( get_post_meta( get_the_ID(), 'Image', true ) ); ?>"/></li>
    <li><span class="post-meta-key">Type:</span> <?php echo implode( ', ', array_map( 'esc_html', get_post_meta( get_the_ID(), 'Type', false ) ) ); ?></li>
</ul>

Kết quả:

Hiển thị đoạn code base64 dưới dạng ảnh.
Hiển thị hình ảnh nhập vào custom field sau khi đã mã hóa thành base64

Bạn cũng sẽ cần làm tương tự với các loại dữ liệu khác dạng file như là audio, video, pdf, …

Tuy nhiên, đây chỉ là một ví dụ minh họa thôi nhé. Việc lưu trữ dữ liệu dạng base64 như thế này vào database có thể sẽ làm website của bạn bị nặng một cách không cần thiết. Chúng ta sẽ tìm hiểu về cách tạo các custom fields cho phép bạn tải các hình ảnh hay file ở các bài viết sau nhé.

Video:

Lời cuối

Việc tạo và lưu các custom fields bằng tính năng mặc định của WordPress khá là đơn giản. Bạn chỉ cần click vài nút, điền form và dùng một vài hàm đơn giản để hiển thị các dữ liệu của custom fields ra front-end bởi vì WordPress đã giúp bạn làm tất cả rồi.

Đây chính là một phần cốt lõi của WordPress, nhưng như bạn thấy đấy, nó cũng vẫn có những hạn chế nhất định. Tính năng này chỉ cho phép bạn nhập các dữ liệu text mà thôi. Nếu bạn muốn nhiều loại định dạng dữ liệu phức tạp hơn, bạn buộc phải tạo các form field khác, tự xử lý dữ liệu rồi lưu trữ chúng vào database. Nó nghe vừa có vẻ đơn giản, lại vừa có vẻ phức tạp. Chúng ta sẽ cùng tìm hiểu sâu hơn về vấn đề này ở bài viết sau nhé.

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *