woocomerce 的category 怎么实现的

746 阅读2分钟

wordpress中有两个默认的分类category和tag,post类型这两个类型是默认显示的。page类型需要注册显示。

那woocomerce 的产品分类(product category)是怎样实现的?其实是用的wordpress的自定义分类法(Custom Taxonomy)。WooCommerce 使用 WordPress 的自定义分类功能来创建和管理产品分类。以下是 WooCommerce 如何实现产品分类的详细过程,以及你如何使用和扩展这些分类。

1. 注册自定义分类法

WooCommerce 在初始化时使用 register_taxonomy 函数为产品注册自定义分类法。以下是一个简化的示例,展示如何注册自定义分类法:

  function create_product_taxonomies() {
    $labels = array(
        'name' => _x('Product Categories', 'taxonomy general name', 'woocommerce'),
        'singular_name' => _x('Product Category', 'taxonomy singular name', 'woocommerce'),
        'search_items' => __('Search Product Categories', 'woocommerce'),
        'all_items' => __('All Product Categories', 'woocommerce'),
        'parent_item' => __('Parent Product Category', 'woocommerce'),
        'parent_item_colon' => __('Parent Product Category:', 'woocommerce'),
        'edit_item' => __('Edit Product Category', 'woocommerce'),
        'update_item' => __('Update Product Category', 'woocommerce'),
        'add_new_item' => __('Add New Product Category', 'woocommerce'),
        'new_item_name' => __('New Product Category Name', 'woocommerce'),
        'menu_name' => __('Product Categories', 'woocommerce'),
    );

    $args = array(
        'hierarchical' => true,
        'labels' => $labels,
        'show_ui' => true,
        'show_admin_column' => true,
        'query_var' => true,
        'rewrite' => array('slug' => 'product-category'),
    );

    register_taxonomy('product_cat', array('product'), $args);
}

add_action('init', 'create_product_taxonomies', 0);

2. 添加产品分类图像字段

WooCommerce 默认添加了分类图像字段。这个字段用于存储产品分类的缩略图 ID。以下是一个示例,展示如何在产品分类编辑页面中添加图像字段:

// 在产品分类编辑页面添加图像上传字段
function add_product_category_image_field() {
    ?>
    <div class="form-field term-group">
        <label for="category-image-id"><?php _e('Image', 'woocommerce'); ?></label>
        <input type="hidden" id="category-image-id" name="category-image-id" value="">
        <div id="category-image-wrapper"></div>
        <p>
            <input type="button" class="button button-secondary" id="category-image-upload" value="<?php _e('Add Image', 'woocommerce'); ?>" />
            <input type="button" class="button button-secondary" id="category-image-remove" value="<?php _e('Remove Image', 'woocommerce'); ?>" />
        </p>
    </div>
    <?php
}

add_action('product_cat_add_form_fields', 'add_product_category_image_field', 10, 2);
add_action('product_cat_edit_form_fields', 'add_product_category_image_field', 10, 2);

// 保存分类图像字段
function save_product_category_image_field($term_id, $tt_id) {
    if (isset($_POST['category-image-id']) && '' !== $_POST['category-image-id']) {
        $image = absint($_POST['category-image-id']);
        add_term_meta($term_id, 'thumbnail_id', $image, true);
    }
}

add_action('created_product_cat', 'save_product_category_image_field', 10, 2);
add_action('edited_product_cat', 'save_product_category_image_field', 10, 2);

3. 获取和显示产品分类图像

在前端显示产品分类时,你可以使用 get_term_meta 函数来获取分类图像,并使用 wp_get_attachment_url 函数来获取图像 URL。以下是一个示例,展示如何获取并显示产品分类的图像:

<?php
$product_categories = get_terms(['taxonomy' => 'product_cat', 'hide_empty' => false]);

foreach ($product_categories as $category) {
    // 获取产品分类的缩略图 ID
    $thumbnail_id = get_term_meta($category->term_id, 'thumbnail_id', true);
    
    // 获取产品分类图像 URL
    $image_url = wp_get_attachment_url($thumbnail_id);
    
    echo '<div class="product-category">';
    if ($image_url) {
        echo '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($category->name) . '">';
    }
    echo '<h2>' . esc_html($category->name) . '</h2>';
    echo '<p>' . esc_html($category->description) . '</p>';
    echo '</div>';
}
?>

总结

  • 注册自定义分类法:WooCommerce 使用 register_taxonomy 函数注册 product_cat 自定义分类法。
  • 添加图像字段:WooCommerce 添加了分类图像字段,用于存储和管理产品分类的图像。
  • 获取和显示图像:使用 get_term_meta 获取分类图像,并使用 wp_get_attachment_url 获取图像 URL,然后在前端显示。

通过这些步骤,你可以在 WooCommerce 中管理和显示产品分类及其图像。