自定义分类字段add和edit页面添加图片上传

// Hook to add the meta box
add_action('fenlei_add_form_fields', 'fenlei_taxonomy_add_image_field', 10, 2);
add_action('fenlei_edit_form_fields', 'fenlei_taxonomy_edit_image_field', 10, 2);

// Hook to save the meta box data
add_action('created_term', 'fenlei_taxonomy_save_image_field', 10, 3);
add_action('edited_term', 'fenlei_taxonomy_save_image_field', 10, 3);

/**
 * Add the image upload field to the taxonomy term add form.
 *
 * @param string $taxonomy The taxonomy slug.
 */
function fenlei_taxonomy_add_image_field($taxonomy) {
    ?>
    <div class="form-field term-image-wrap">
        <label for="term-image"><?php esc_html_e('Image', 'taxonomy-image-upload'); ?></label>
        <input type="hidden" id="term-image" name="term_image" class="term-image-id" value="">
        <img class="term-image-preview" src="" style="max-width: 200px; display: none;">
        <button class="term-image-upload button"><?php esc_html_e('Upload Image', 'taxonomy-image-upload'); ?></button>
        <button class="term-image-remove button" style="display: none;"><?php esc_html_e('Remove Image', 'taxonomy-image-upload'); ?></button>
    </div>
    <?php
}

/**
 * Add the image upload field to the taxonomy term edit form.
 *
 * @param object $term      The term object.
 * @param string $taxonomy  The taxonomy slug.
 */
function fenlei_taxonomy_edit_image_field($term, $taxonomy) {
    $image_id = get_term_meta($term->term_id, 'term_image', true);
    $image_url = wp_get_attachment_url($image_id);
    ?>
    <tr class="form-field term-image-wrap">
        <th scope="row">
            <label for="term-image"><?php esc_html_e('Image', 'taxonomy-image-upload'); ?></label>
        </th>
        <td>
            <input type="hidden" id="term-image" name="term_image" class="term-image-id" value="<?php echo esc_attr($image_id); ?>">
            <img class="term-image-preview" src="<?php echo esc_url($image_url); ?>" style="max-width: 200px; <?php echo empty($image_url) ? 'display: none;' : ''; ?>">
            <button class="term-image-upload button"><?php esc_html_e('Upload Image', 'taxonomy-image-upload'); ?></button>
            <button class="term-image-remove button" style="<?php echo empty($image_url) ? 'display: none;' : ''; ?>"><?php esc_html_e('Remove Image', 'taxonomy-image-upload'); ?></button>
        </td>
    </tr>
    <?php
}

/**
 * Save the term image meta data when a term is created or edited.
 *
 * @param int    $term_id   The term ID.
 * @param int    $tt_id     The term taxonomy ID.
 * @param string $taxonomy  The taxonomy slug.
 */
function fenlei_taxonomy_save_image_field($term_id, $tt_id = '', $taxonomy = '') {
    if (isset($_POST['term_image']) && is_numeric($_POST['term_image'])) {
        update_term_meta($term_id, 'term_image', absint($_POST['term_image']));
    } else {
        delete_term_meta($term_id, 'term_image');
    }
}

JS

jQuery(document).ready(($) => {

	var frame,
            imageInput = $('.term-image-id'),
            previewImage = $('.term-image-preview'),
            uploadButton = $('.term-image-upload'),
            removeButton = $('.term-image-remove');

        // Open the media uploader when the upload button is clicked
        uploadButton.on('click', function(e) {
            e.preventDefault();

            if (frame) {
                frame.open();
                return;
            }

            frame = wp.media({
                title: 'Select or Upload an Image',
                button: {
                    text: 'Use this image'
                },
                multiple: false
            });

            frame.on('select', function() {
                var attachment = frame.state().get('selection').first().toJSON();
                imageInput.val(attachment.id);
                previewImage.attr('src', attachment.url).show();
                removeButton.show();
            });

            frame.open();
        });

        // Remove the image when the remove button is clicked
        removeButton.on('click', function(e) {
            e.preventDefault();
            imageInput.val('');
            previewImage.attr('src', '').hide();
            removeButton.hide();
        });

});