如何创建自定义图片上传字段或者小工具完整教程（解决无法弹出选择框、update按钮不显示等问题）

---

自定义小工具里面就修改两个地方，一个是widget函数，一个是form函数，form函数是后台上传的地方，

 public function form($instance) {
        $title = !empty($instance['menu_title']) ? $instance['menu_title'] : '';
        $image_url = !empty($instance['image_url']) ? $instance['image_url'] : '';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('menu_title'); ?>"><?php _e('Title:'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id('menu_title'); ?>"
                   name="<?php echo $this->get_field_name('menu_title'); ?>" type="text"
                   value="<?php echo esc_attr($title); ?>"/>
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('image_url'); ?>"><?php _e('Image:'); ?></label>
            <input class="widefat custom_image_widget_upload"
                   id="<?php echo $this->get_field_id('image_url'); ?>"
                   name="<?php echo $this->get_field_name('image_url'); ?>" type="text"
                   value="<?php echo esc_attr($image_url); ?>"/>
            <button class="button custom_image_widget_upload_button" data-target="<?php echo $this->get_field_id('image_url'); ?>"><?php _e('Upload Image'); ?></button>
        </p>
        
        <?php
    }

记住这个按钮和input的class或者id。

然后用Js操作， 因为widget这个东西有点延迟，加载的情况有点特殊，要用到Js的话，要先加载到admin footer， 如果是字段的话正常用admin_enqueue_script加载就可以：

// Enqueue media uploader script
function enqueue_custom_image_widget_scripts() {
  wp_enqueue_media();
  ?>
  <script>
    jQuery(document).ready(($) => {
    console.log('oolooo');
    $('#widgets-editor').on('click', '.custom_image_widget_upload_button', function (e) {
        e.preventDefault();
        
        var button = $(this),
            custom_uploader = wp.media({
                title: 'Choose Image',
                library: {
                    type: 'image'
                },
                button: {
                    text: 'Select Image'
                },
                multiple: false
            }).on('select', function () {
                var attachment = custom_uploader.state().get('selection').first().toJSON();
                $('#widget-tr_qrcode_widget-4-image_url').val(attachment.url);

                $('#widget-tr_qrcode_widget-4-image_url').trigger('change');


            }).open();
    });

    

});
  </script>

  <?php 
   
}
add_action('admin_footer', 'enqueue_custom_image_widget_scripts');

要注意js之前要添加 wp_enqueue_media();

如果当你上传图片并且更改了Input的值的时候，update这个更新按钮不显示， 那是因为图片上传之后不会触发wp的更改或者保存的动作，只要手动添加一个触发就好： $(‘#widget-tr_qrcode_widget-4-image_url’).trigger(‘change’);

---