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();
}

}）;

这为我提供了文本字段中的gravatar链接。但我想在这里选择图像链接。

我尝试过，但它不起作用。可能是Jquery有问题。当我删除＆＃34; html＆＃34;来自函数的变量和$（＆＃39; img＆＃39;，html）之后，它将显示图像的链接。 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中的图像上载

1 个答案: