Hướng dẫn thêm extra field cho Category trong WordPress

Một trang web WordPress cần phải có một vài chỉnh sửa ở màn hình Edit Category để có hình ảnh hiển thị khác nhau cho mỗi trang category.

Hiện nay trong WordPress không có bảng lưu trữ dữ liệu cho category hay meta tag nên để thêm extra field cho category, chúng ta sẽ làm việc với các bảng tùy chọn của WordPress. Trước khi bắt đầu, bạn lưu ý là có thể áp dụng cách làm này tương tự với category, tag hoặc bất kỳ custom taxonomy nào nhưng trong bài viết này chúng ta sẽ làm việc với category mà thôi.

Edit-Category-extra-fileds

Đầu tiên, chúng ta cần thêm các extra field vào form Edit Category bằng cách sử dụng hook edit_category_form_fields, sau đó sử dụng một function đơn giản để in ra các extra field.

<?php
// hook thêm các extra field vào form Edit Category
add_action ( 'edit_category_form_fields', 'nd_extra_category_fields');

// function thêm các extra field vào form Edit Category
function nd_extra_category_fields( $tag )  // kiểm tra sự tồn tại của ID
{
     $t_id = $tag->term_id;
     $cat_meta = get_option('category_'.$t_id);
?>
<tr>
     <th scope="row" valign="top"><label for="cat_Image_url"><?php _e('Category Image Url'); ?></label></th>
     <td>
          <input type="text" name="Cat_meta[img]" id="Cat_meta[img]" size="3" style="width:60%;" value="<?php echo $cat_meta['img'] ? $cat_meta['img'] : ''; ?>"><br />
          <span><?php _e('Image for category: use full url with '); ?></span>
     </td>
</tr>
<tr>
     <th scope="row" valign="top"><label for="extra1"><?php _e('extra field'); ?></label></th>
     <td>
          <input type="text" name="Cat_meta[extra1]" id="Cat_meta[extra1]" size="25" style="width:60%;" value="<?php echo $cat_meta['extra1'] ? $cat_meta['extra1'] : ''; ?>"><br />
          <span><?php _e('extra field'); ?></span>
     </td>
</tr>
<tr>
     <th scope="row" valign="top"><label for="extra2"><?php _e('extra field'); ?></label></th>
     <td>
          <input type="text" name="Cat_meta[extra2]" id="Cat_meta[extra2]" size="25" style="width:60%;" value="<?php echo $cat_meta['extra2'] ? $cat_meta['extra2'] : ''; ?>"><br />
          <span><?php _e('extra field'); ?></span>
     </td>
</tr>
<tr>
     <th scope="row" valign="top"><label for="extra3"><?php _e('extra field'); ?></label></th>
     <td>
          <textarea name="Cat_meta[extra3]" id="Cat_meta[extra3]" style="width:60%;"><?php echo $cat_meta['extra3'] ? $cat_meta['extra3'] : ''; ?></textarea><br />
          <span><?php _e('extra field'); ?></span>
     </td>
</tr>
<?php
}

Như bạn có thể thấy, mình đã thêm 4 field mới và tất cả các field đó đều nằm trong mảng Cat_meta[key] bởi vì chúng ta chỉ tạo các dòng trong bảng tùy chọn để lưu tất cả các extra field của category, một dòng tương ứng với một field.

Tiếp theo, chúng ta cần lưu các extra field vào cơ sở dữ liệu mỗi khi người dùng submit form Edit Category bằng cách sử dụng “edited_category” với một function để duyệt qua mỗi field được submit, sau đó thêm field vào cơ sở dữ liệu bằng function update_option như sau:

<?php
// hook lưu extra category extra field
add_action ( 'edited_category', 'nd_save_extra_category_fileds');

// function lưu extra category extra fields
function nd_save_extra_category_fileds( $term_id )
{
     if ( isset( $_POST['Cat_meta'] ) )
     {
          $t_id = $term_id;
          $cat_meta = get_option('category_'.$t_id);
          $cat_keys = array_keys($_POST['Cat_meta']);

          foreach ($cat_keys as $key)
          {
               if (isset($_POST['Cat_meta'][$key]))
               {
                    $cat_meta[$key] = $_POST['Cat_meta'][$key];
               }
          }

          // lưu mảng tùy chọn
          update_option( "category_$t_id", $cat_meta );
     }
}

Từ đoạn code trên, bạn có thể thấy rằng tất cả các extra field đã được thêm vào lưu trữ trong bảng tùy chọn của cơ sở dữ liệu với tên là ‘category_ID’, ID ở đây là id của một category cụ thể mà bạn cần chỉnh sửa. Bạn có thể gọi dữ liệu này trong các plugin của bạn hoặc trong các file theme dễ dàng bằng cách sử dụng function get_option.

Ví dụ với id category là 25 thì code sẽ như sau:

<?php $cat_data = get_option('category_25'); ?>

Như đã nói ở đầu bài viết, chúng ta cần hiển thị hình ảnh khác nhau cho mỗi category và để làm được việc đó, bạn thêm các dòng code sau vào file category.php trong theme của bạn, ngay sau đoạn code hiển thị tiêu đề của category.

<?php
// đầu tiên lấy ID category hiện tại
$cat_id = get_query_var('cat');

// sau đó lấy dữ liệu từ database
$cat_data = get_option("category_$cat_id");

// và chỉ hiển thị hình ảnh category nếu nó tồn tại
if (isset($cat_data['img']))
{
     echo '<div><img src="'.$cat_data['img'].'"></div>';
}

Thật dễ dàng phải không nào? Chúc các bạn thành công.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

×