自定義小部件中的圖像上傳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(); 
    }); 

});