wordpress - 管理面板中的自定义分类图像选项

Question

我创建了一个自定义分类法，并希望为每个类别都有一个图像选项。

  function create_product_taxonomies()
  {
     // Add new taxonomy, make it hierarchical (like categories)
     $labels = array(
        'name' => _x('product_categories', 'taxonomy general name'),
        'singular_name' => _x('Product', 'taxonomy singular name'),
        'search_items' => __('Search Product Category'),
        'all_items' => __('All Product Categorie(s)'),
        'parent_item' => __('Parent Product Category'),
        'parent_item_colon' => __('Parent Product Category:'),
        'edit_item' => __('Edit Product Category'),
        'update_item' => __('Update Product Category'),
        'add_new_item' => __('Add New'),
        'new_item_name' => __('New Product Name'),
        'menu_name' => __('Product Categories'),

        );

   $args = array(
       'hierarchical' => true,
       'labels' => $labels,
       'show_ui' => true,
       'show_admin_column' => true,
       'query_var' => true,
       'rewrite' => array('slug' => 'product_categories', 'with_front' =>      true));

  register_taxonomy('product_categories', array('products'), $args);
  flush_rewrite_rules();
  }
  //hooks
  add_action('init', 'create_product_taxonomies', 0);

如何为用户提供为每个类别上传图像的选项？

Answer 1

在 WordPress v4.4.2 之前，为术语制作自定义元字段非常困难但不可能，但现在非常容易和简单。

你想上传图片所以我们创建一个js文件并在functions.php中写一些代码.

但首先我们创建自定义上传元字段。

在您的 function.php或者您在何处编写用于注册自定义分类法的代码并编写以下代码:

First we create custom meta term field

add_action('product_categories_add_form_fields', 'add_term_image', 10, 2);
function add_term_image($taxonomy){
    ?>
    <div class="form-field term-group">
        <label for="">Upload and Image</label>
        <input type="text" name="txt_upload_image" id="txt_upload_image" value="" style="width: 77%">
        <input type="button" id="upload_image_btn" class="button" value="Upload an Image" />
    </div>
    <?php
}

在 _add_form_fields 之前写下您的自定义分类法在 add_action() 就像我上面写的 "product_categories"_add_form_fields

Then we save meta term value

<?php
add_action('created_product_categories', 'save_term_image', 10, 2);
function save_term_image($term_id, $tt_id) {
    if (isset($_POST['txt_upload_image']) && '' !== $_POST['txt_upload_image']){
        $group = '#' . sanitize_title($_POST['txt_upload_image']);
        add_term_meta($term_id, 'term_image', $group, true);
    }
}
?>

与上述相同，在 created_ 后面写上您的分类名称在 add_action 喜欢 created_product_categories

Now we create meta term field for edit

add_action('product_categories_edit_form_fields', 'edit_image_upload', 10, 2);
function edit_image_upload($term, $taxonomy) {
    // get current group
    $txt_upload_image = get_term_meta($term->term_id, 'term_image', true);
?>
    <div class="form-field term-group">
        <label for="">Upload and Image</label>
        <input type="text" name="txt_upload_image" id="txt_upload_image" value="<?php echo $txt_upload_image ?>" style="width: 77%">
        <input type="button" id="upload_image_btn" class="button" value="Upload an Image" />
    </div>
<?php
}

Now save the edited value

add_action('edited_product_categories', 'update_image_upload', 10, 2);
function update_image_upload($term_id, $tt_id) {
    if (isset($_POST['txt_upload_image']) && '' !== $_POST['txt_upload_image']){
        $group = '#' . sanitize_title($_POST['txt_upload_image']);
        update_term_meta($term_id, 'term_image', $group);
    }
}

Now we Move to **JS File for WordPress Media Uploader**

媒体上传器.js

jQuery(document).ready(function($){

    // Instantiates the variable that holds the media library frame.
    var meta_image_frame;

    // Runs when the image button is clicked.
    $('#upload_image_btn').click(function(e){

        // Prevents the default action from occuring.
        e.preventDefault();

        // If the frame already exists, re-open it.
        if ( meta_image_frame ) {
            meta_image_frame.open();
            return;
        }

        // Sets up the media library frame
        meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
            title: meta_image.title,
            button: { text:  meta_image.button },
            library: { type: 'image' }
        });

        // Runs when an image is selected.
        meta_image_frame.on('select', function(){

            // Grabs the attachment selection and creates a JSON representation of the model.
            var media_attachment = meta_image_frame.state().get('selection').first().toJSON();

            // Sends the attachment URL to our custom image input field.
            $('#txt_upload_image').val(media_attachment.url);
        });

        // Opens the media library frame.
        meta_image_frame.open();
    });

});

And now Last Step

转至 functions.php

function image_uploader_enqueue() {
    global $typenow;
    if( ($typenow == 'products') ) {
        wp_enqueue_media();

        wp_register_script( 'meta-image', get_template_directory_uri() . '/js/media-uploader.js', array( 'jquery' ) );
        wp_localize_script( 'meta-image', 'meta_image',
            array(
                'title' => 'Upload an Image',
                'button' => 'Use this Image',
            )
        );
        wp_enqueue_script( 'meta-image' );
    }
}
add_action( 'admin_enqueue_scripts', 'image_uploader_enqueue' );

调用图像

Call the Image

<?php
    $categories = get_terms('product_categories');

    foreach($categories as $term) {
        $upload_image = get_term_meta($term->term_id, 'term_image', true);
?>
        <img src="<?php echo $upload_image ?>">
<?php
    }
?>

它是我的工作代码，所以请谨慎使用。

希望这段代码能帮到你。如果此代码有效，请接受我的回答:)