自定义小部件中的图像上传WP

Question

我在wp小部件中上传图像时遇到问题。在下面的functions.php

class about_me extends WP_Widget{ 

    public function __construct(){ 
     parent::__construct('about_me', 'About Me', array(
      'description' => 'This is all about me' 
     )); 
    } 

    public function form($instance){ 
     $title = $instance['title']; 
     $desc = $instance['desc']; 
     $photo = $instance['photo']; 
    ?> 
     <p><label for="<?php echo $this->get_field_id('title'); ?>">Your Name: </label></p> 
     <p> 
      <input class="widefat" type="text" name="<?php echo $this->get_field_name('title'); ?>" id="<?php echo $this->get_field_id('title'); ?>" value="<?php echo $title ?>"> 
     </p> 
     <p><label for="<?php echo $this->get_field_id('desc'); ?>">Your Desc: </label></p> 
     <p> 
      <textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('desc'); ?>" name="<?php echo $this->get_field_name('desc'); ?>"><?php echo $desc ;?></textarea> 
     </p> 
     <p><label for="<?php echo $this->get_field_id('photo'); ?>">Photo </label></p> 
     <p> 
      <input class="widefat image1" type="text" name="<?php echo $this->get_field_name('photo'); ?>" id="<?php echo $this->get_field_id('photo'); ?>" value="<?php echo $photo ;?>"> 
     </p> 
     <p> 
      <button class="image_upload1 widefat">Select Image</button> 
     </p> 



    <?php 
    } 

    public function widget ($args, $instance){ 
     $title = $instance['title']; 
     $desc = $instance['desc']; 
     echo $args['before_widget'].$args['before_title'].$title.$args['after_title']."<div class=\"textwidget\">".$desc."</div>".$args['after_widget']; 

    } 
} // class about_me extends WP_Widget END 



add_action('widgets_init', function(){ 
    register_widget('about_me'); 
}); 




/* 
photo upload option in widget 
*/ 

function photo_upload_option($hook) { 

    if($hook != 'widgets.php') 
     return; 
    wp_enqueue_script('uploadphoto', get_template_directory_uri() . '/js/upload_image.js', array('jquery', 'media-upload', 'thickbox'), '1.0', 'true'); 
    wp_enqueue_script('media-upload'); 
    wp_enqueue_script('thickbox'); 
    wp_enqueue_style ('thickbox'); 

} 
add_action('admin_enqueue_scripts', 'photo_upload_option'); 

现在，在码upload_image.js

jQuery(document).ready(function($){ 
$('button.image_upload1').click(function(){ 
    tb_show('', 'media-upload.php?type=image&TB_iframe=true'); 
    return false; 

}); 

window.send_to_editor = function(){ 
    var imagelink = jQuery('img').attr('src'); 
    jQuery('.image1').val(imagelink); 
    tb_remove(); 
} 

}）;

这给了我一个在文本字段中的gravatar链接。但我想在这里选择图像链接。

我尝试过，但它不工作。可能是Jquery有问题。当我从函数中删除“html”变量并在$（'img'，html）后面时，它会显示图片的链接，它是gravatar。 0.gravatar.com/avatar/...但是当把html变量显示为空白。如何解决此问题

Answer 1

使用新的wp.media API而不是旧的thickbox。

更改photo_upload_option功能如下

/* 
photo upload option in widget 
*/ 

function photo_upload_option($hook) { 

    if($hook != 'widgets.php') 
     return; 

    //enque Javasript Media API 
    wp_enqueue_media(); 

    wp_enqueue_script('uploadphoto', get_template_directory_uri() . '/js/upload_image.js', array('jquery'), '1.0', 'true'); 

} 

替换下面的代码整个upload_image.js

jQuery(function($){ 

    // Set all variables to be used in scope 
    var frame, 
     addImgLink = $('.image_upload1'), 
     imgIdInput = $('.image1'); 

    // ADD IMAGE LINK 
    addImgLink.on('click', function(event){ 

    event.preventDefault(); 

    // If the media frame already exists, reopen it. 
    if (frame) { 
     frame.open(); 
     return; 
    } 

    // Create a new media frame 
    frame = wp.media({ 
     title: 'Select or Upload Image', 
     button: { 
     text: 'Use this Image' 
     }, 
     multiple: false // Set to true to allow multiple files to be selected 
    }); 


    // When an image is selected in the media frame... 
    frame.on('select', function() { 

     // Get media attachment details from the frame state 
     var attachment = frame.state().get('selection').first().toJSON(); 

     // Send the attachment URL to our custom image input field. 
     //imgContainer.append('<img src="'+attachment.url+'" alt="" style="max-width:100%;"/>'); 

     // Send the attachment id to our input field 
     imgIdInput.val(attachment.id); 
    }); 

    // Finally, open the modal on click 
    frame.open(); 
    }); 

});