Hướng dẫn custom term field trong wordpress

Trong quá trình phát triển website, đôi khi các trường mặc định của WordPress không đủ để đáp ứng nhu cầu quản trị nội dung phức tạp. Sau khi bạn đã làm quen với việc tạo taxonomy, bước tiếp theo quan trọng không kém chính là tìm hiểu về custom term field. Việc hiểu rõ và làm chủ được kỹ thuật này sẽ giúp bạn biến những danh mục đơn điệu thành những kho dữ liệu linh hoạt và chuyên nghiệp hơn rất nhiều.

Vậy custom term field thực chất là gì và tại sao nó lại đóng vai trò quan trọng trong việc tùy biến giao diện? Trong bài viết chuyên sâu này, chúng ta sẽ cùng mổ xẻ từ khái niệm cơ bản đến cách triển khai nâng cao bằng cả mã nguồn lẫn plugin hỗ trợ. Nếu bạn đang tìm cách viết plugin WordPress với AI hướng dẫn siêu tốc cực đỉnh, thì kiến thức về term meta này là nền tảng không thể thiếu.

Custom term field trong WordPress là gì?

Mặc định, khi bạn truy cập vào quản trị chuyên mục (Category) hoặc thẻ (Tag), WordPress chỉ cung cấp một vài trường cơ bản như: Tên, Đường dẫn (Slug), Chuyên mục cha và Mô tả. Những trường dữ liệu này được gọi chung là term field. Tuy nhiên, trong thực tế, bạn có thể cần lưu trữ thêm nhiều thông tin khác cho một danh mục, ví dụ như: màu sắc đại diện, icon, banner hoặc mã SEO riêng biệt.

Tại sao bạn nên sử dụng custom term field?

Việc sử dụng custom term field mang lại khả năng tùy biến vô hạn cho website. Thay vì phải dùng các thủ thuật rườm rà hoặc can thiệp sâu vào code một cách thiếu khoa học, bạn có thể quản lý dữ liệu ngay trong giao diện admin. Điều này đặc biệt hữu ích khi bạn xây dựng các website bán hàng, bất động sản hoặc các trang tin tức đa tầng dữ liệu.

• Tạo ảnh đại diện riêng cho từng danh mục sản phẩm.
• Phân loại màu sắc cho các chuyên mục tin tức để hiển thị ngoài trang chủ.
• Thêm các đoạn mã script hoặc metadata riêng cho mục đích SEO nâng cao.
• Lưu trữ liên kết ngoài hoặc các thông số kỹ thuật đặc thù cho taxonomy.

Cách tạo custom term field bằng mã nguồn thủ công

Để tạo custom term field mà không cần cài thêm plugin, bạn cần can thiệp vào file functions.php của theme. Quy trình này bao gồm hai phần chính: hiển thị giao diện nhập liệu và xử lý lưu dữ liệu vào database. Đây là cách tiếp cận sạch nhất, giúp website giữ được tốc độ tải trang tối ưu.

Bước 1: Hiển thị trường nhập liệu khi thêm mới chuyên mục

Đầu tiên, chúng ta cần tạo một hàm để hiển thị form nhập liệu. Trong ví dụ này, mình sẽ tạo một trường để nhập đường dẫn ảnh đại diện cho chuyên mục. Bạn hãy chèn đoạn code sau vào functions.php:

function add_category_custom_fields($taxonomy) {
    ?>
    <div class="form-field term-group">
        <label for="category_image"><?php _e('Đường dẫn ảnh đại diện'); ?></label>
        <input type="text" name="category_image" id="category_image" value="" />
        <p class="description">Nhập URL hình ảnh cho chuyên mục này.</p>
    </div>
    <?php
}
add_action('category_add_form_fields', 'add_category_custom_fields', 10, 1);

Trong đoạn code trên, action hook category_add_form_fields sẽ chỉ định việc hiển thị trường mới này tại trang thêm mới chuyên mục. Lưu ý rằng nếu bạn dùng taxonomy khác, hãy thay chữ category bằng tên taxonomy của bạn.

Bước 2: Lưu dữ liệu custom term field vào database

Sau khi có form nhập, chúng ta cần một hàm để hứng dữ liệu và lưu vào bảng wp_termmeta. Chúng ta sẽ sử dụng hàm add_term_meta để thực hiện việc này.

function save_category_custom_fields($term_id) {
    if (isset($_POST['category_image']) && '' !== $_POST['category_image']) {
        add_term_meta($term_id, 'category_image', $_POST['category_image'], true);
    }
}
add_action('created_category', 'save_category_custom_fields', 10, 1);

Bước 3: Cập nhật giao diện trong phần chỉnh sửa chuyên mục

Đoạn code ở bước 1 chỉ giúp hiển thị ở trang tạo mới. Để trường custom term field xuất hiện khi bạn vào chỉnh sửa một chuyên mục đã có, bạn cần sử dụng một hook khác là category_edit_form_fields.

function edit_category_custom_fields($term) {
    $image_url = get_term_meta($term->term_id, 'category_image', true);
    ?>
    <tr class="form-field">
        <th scope="row" valign="top"><label for="category_image">Ảnh đại diện</label></th>
        <td>
            <input type="text" name="category_image" id="category_image" value="<?php echo esc_attr($image_url); ?>" />
            <p class="description">Cập nhật URL hình ảnh đại diện.</p>
        </td>
    </tr>
    <?php
}
add_action('category_edit_form_fields', 'edit_category_custom_fields', 10, 1);

Giao diện danh mục có thêm trường link hình ảnh

Sử dụng plugin để tạo custom term field nhanh chóng

Nếu bạn không muốn động chạm nhiều vào code hoặc cần tạo hàng chục trường dữ liệu phức tạp như bộ chọn màu, ngày tháng hay trình tải ảnh, hãy cân nhắc sử dụng các plugin chuyên dụng. Đây là cách tiếp cận phổ biến dành cho các dự án lớn cần triển khai nhanh.

Advanced Custom Fields (ACF) là ứng dụng hàng đầu trong việc tạo custom term field. Plugin này cho phép bạn tạo các nhóm field và gán chúng vào Taxonomy một cách trực quan. Bạn có thể tham khảo thêm tài liệu chính thức của ACF về Taxonomy để hiểu rõ hơn về các hàm API của họ.

Bên cạnh ACF, các plugin như Toolset Types hay Meta Box cũng là những lựa chọn thay thế mạnh mẽ. Tuy nhiên, ACF vẫn là cái tên được cộng đồng lập trình viên WordPress ưu ái nhất nhờ tính ổn định và hệ sinh thái tài liệu phong phú.

Hướng dẫn hiển thị custom term field ra giao diện (Frontend)

Sau khi đã lưu trữ thành công dữ liệu vào custom term field, bước cuối cùng là hiển thị chúng ra ngoài cho người dùng thấy. WordPress cung cấp hàm get_term_meta() rất mạnh mẽ để thực hiện việc này.

Cú pháp hàm get_term_meta

Hàm này nhận vào 3 tham số chính: ID của term, tên key của field và một giá trị boolean để xác định có lấy duy nhất một kết quả hay không.

$value = get_term_meta( $term_id, $key, $single );

Ví dụ hiển thị danh sách chuyên mục kèm ảnh đại diện

Giả sử bạn muốn hiển thị một danh sách các chuyên mục ngoài trang chủ, mỗi chuyên mục sẽ đi kèm với cái ảnh mà bạn đã nhập trong custom term field:

$categories = get_categories(array('hide_empty' => false));
foreach ($categories as $cat) {
    $image_url = get_term_meta($cat->term_id, 'category_image', true);
    echo '<div class="category-item">';
    if ($image_url) {
        echo '<img src="' . esc_url($image_url) . '" alt="' . $cat->name . '" />';
    }
    echo '<h3>' . $cat->name . '</h3>';
    echo '</div>';
}

Những lưu ý quan trọng khi làm việc với custom term field

Khi triển khai custom term field, có một vài quy tắc và kinh nghiệm xương máu mà bạn cần ghi nhớ để tránh gặp lỗi không đáng có:

1. Bảo mật dữ liệu: Luôn sử dụng các hàm như esc_attr(), esc_url() hoặc sanitize_text_field() trước khi lưu hoặc hiển thị dữ liệu để tránh lỗi XSS hoặc SQL Injection.
2. Kiểm tra sự tồn tại: Luôn kiểm tra xem biến meta có dữ liệu hay không trước khi xuất ra HTML để tránh làm vỡ giao diện.
3. Tên Key: Hãy đặt tên key cho custom term field một cách khoa học, tránh trùng lặp với các plugin khác bằng cách thêm tiền tố (prefix) của riêng bạn.
4. Hiệu năng: Nếu bạn hiển thị hàng trăm term cùng lúc trên một trang, việc gọi get_term_meta liên tục trong vòng lặp có thể gây tốn tài nguyên. Hãy cân nhắc sử dụng cache nếu cần thiết.

Tổng kết

Kỹ thuật tạo custom term field là một mảnh ghép quan trọng giúp bạn làm chủ hoàn toàn hệ thống quản trị nội dung của WordPress. Dù bạn chọn cách viết code thuần để tối ưu tốc độ hay sử dụng plugin để linh hoạt trong quản lý, điều quan trọng nhất vẫn là hiểu rõ bản chất của Term Meta và cách nó tương tác với database.

Hy vọng qua bài viết này, bạn đã tự tin hơn trong việc triển khai các trường dữ liệu tùy chỉnh cho chuyên mục của mình. Đừng quên kết hợp các kỹ thuật này với việc tối ưu hóa website để đạt hiệu quả cao nhất. Chúc các bạn thành công trên con đường trở thành một chuyên gia WordPress thực thụ!