自定义小部件 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&amp;TB_iframe=true');
    return false;

});

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

});

这让我在文本字段中有一个头像 link。但我想要这里选择的图像 link.

我试过了，但没有用。 Jquery 中可能存在问题。当我从函数中删除 "html" 变量并在 $('img', html) 之后，它将显示一个 link 图像，即 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();
  });

});

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

Image Upload in Custom Widget WP

javascript

php

wordpress

jquery

widget