WordPress的 - 小工具在不同的侧边栏，每一个不同的内容(Wordpress - Widge

我编写了一个小工具，可以让我上传一些文件。问题是，如果我想使用该插件在一个以上的侧边栏，当我上传新文件时，它会覆盖它的其他实例。

下面是一些代码。

<?php 
error_reporting(E_ALL);
/*
Plugin Name: Dulkre Widgets
Plugin URI: xxx
Description: xxx
Version: 1.0
Author: Pablo Bertran
Author URI: http://www.pablobertran.com
*/

class InfoProducto extends WP_Widget {

    /**
     * Register widget with WordPress.
     */
public function __construct() {
        parent::__construct(
            'InfoProducto', // Base ID
            'Información lateral de producto', // Name

            array( 'description' => __( 'Permite cargar tabla nutricional, PDF para descargar y descripción al pie del lateral.', 'iuw' ), ) // Args
        );
    }

    /**
     * Front-end display of widget.
     *
     * @see WP_Widget::widget()
     *
     * @param array $args     Widget arguments.
     * @param array $instance Saved values from database.
     */
    public function widget( $args, $instance ) {
        extract( $args );
        /*
        // Imagen previa al pdf
        $imagen1 = apply_filters('imagen1', $instance['imagen1'] );

        // PDF
        $pdf = apply_filters('pdf', $instance['pdf'] );

        // Imagen posterior al pdf
        $imagen2 = apply_filters('imagen2', $instance['imagen2'] );

        /*$name = apply_filters( 'widget_name', $instance['name'] );
        $link = apply_filters( 'widget_link', $instance['link'] );
        $imagen2 = apply_filters( 'widget_image_uri', $instance['image_uri'] );*/
        echo $before_widget; ?>
            <img src="<?php echo esc_url( $instance['imagen1'] ); ?>" />
            <a href="<?php echo esc_url( $instance['pdf'] ); ?>">Descargar informaci&oacute;n Nutricional</a>
            <img src="<?php echo esc_url( $instance['imagen2'] ); ?>" />

    <?php
        echo $after_widget;
    }

    /**
     * Sanitize widget form values as they are saved.
     *
     * @see WP_Widget::update()
     *
     * @param array $new_instance Values just sent to be saved.
     * @param array $old_instance Previously saved values from database.
     *
     * @return array Updated safe values to be saved.
     */
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['imagen1'] = ( ! empty( $new_instance['imagen1'] ) ) ? strip_tags( $new_instance['imagen1'] ) : '';
        $instance['imagen2'] = ( ! empty( $new_instance['imagen2'] ) ) ? strip_tags( $new_instance['imagen2'] ) : '';
        $instance['pdf'] = ( ! empty( $new_instance['pdf'] ) ) ? strip_tags( $new_instance['pdf'] ) : '';
        return $instance;
    }

    /**
     * Back-end widget form.
     *
     * @see WP_Widget::form()
     *
     * @param array $instance Previously saved values from database.
     */
    public function form( $instance ) {
        if ( isset( $instance[ 'imagen1' ] ) ) {
            $imagen1 = $instance[ 'imagen1' ];
        }
        else {
            $imagen1 = __( 'Imagen Previa', 'iuw' );
        }
        if ( isset( $instance[ 'imagen2' ] ) ) {
            $imagen2 = $instance[ 'imagen2' ];
        }
        else {
            $imagen2 = __( 'Imagen Pie', 'iuw' );
        }
        if ( isset( $instance[ 'pdf' ] ) ) {
            $pdf = $instance[ 'pdf' ];
        }
        else {
            $pdf = __( 'PDF Info. Nutricional', 'iuw' );
        }

        ?>
    <p>
      <label for="<?php echo $this->get_field_id('imagen1'); ?>">Imagen Previa</label><br />
        <img class="custom_media_image" src="<?php echo $imagen1; ?>" style="margin:0;padding:0;max-width:100px;float:left;display:inline-block" />
        <input type="text" class="widefat custom_media_url" name="<?php echo $this->get_field_name('imagen1'); ?>" id="<?php echo $this->get_field_id('imagen1'); ?>" value="<?php echo $imagen1; ?>">
       </p>
       <p>
        <input type="button" value="<?php _e( 'Cargar Imagen', 'iuw' ); ?>" class="button custom_media_upload" id="custom_image_uploader1"/>
    </p>

    <p>
      <label for="<?php echo $this->get_field_id('pdf'); ?>">PDF Info. Nutricional</label><br />
        <a href="<?php echo $pdf; ?>">PDF</a><br/>
        <input type="text" class="widefat custom_media_url2" name="<?php echo $this->get_field_name('pdf'); ?>" id="<?php echo $this->get_field_id('pdf'); ?>" value="<?php echo $pdf; ?>">
       </p>
       <p>
        <input type="button" value="<?php _e( 'Cargar Imagen', 'iuw' ); ?>" class="button custom_media_upload2" id="custom_image_uploader2"/>
    </p>

    <p>
      <label for="<?php echo $this->get_field_id('imagen2'); ?>">Imagen Pie</label><br />
        <?php if( isset($imagen2 ) ) { ?><img class="custom_media_image3" src="<?php echo $imagen2; ?>" style="margin:0;padding:0;max-width:100px;float:left;display:inline-block" /><?php } ?>
        <input type="text" class="widefat custom_media_url3" name="<?php echo $this->get_field_name('imagen2'); ?>" id="<?php echo $this->get_field_id('imagen2'); ?>" value="<?php echo $imagen2; ?>">
       </p>
       <p>
        <input type="button" value="<?php _e( 'Cargar Imagen', 'iuw' ); ?>" class="button custom_media_upload3" id="custom_image_uploader3"/>
    </p>
        <?php 
    }

}
add_action( 'widgets_init', create_function( '', 'register_widget( "InfoProducto" );' ) );
function wdScript(){
  wp_enqueue_media();
  wp_enqueue_script('adsScript', plugins_url( '/js/image-upload-widget.js' , __FILE__ ));
}
add_action('admin_enqueue_scripts', 'wdScript');

 ?>

而打开媒体库和JS插入图像到小工具的形式：

// JavaScript Document
jQuery(document).ready( function(){
 function media_upload( button_class, input_class) {
    var _custom_media = true,
    _orig_send_attachment = wp.media.editor.send.attachment;
    jQuery('body').on('click',button_class, function(e) {
        var button_id ='#'+jQuery(this).attr('id');
        /* console.log(button_id); */
        var self = jQuery(button_id);
        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = jQuery(button_id);
        var id = button.attr('id').replace('_button', '');
        _custom_media = true;
        wp.media.editor.send.attachment = function(props, attachment){
            if ( _custom_media  ) {
               //jQuery('.custom_media_id').val(attachment.id); 
               jQuery('.custom_media_url' + input_class).val(attachment.url);
               console.log( 'custom_media_image' + input_class );
               jQuery('.custom_media_image' + input_class ).attr('src',attachment.url).css('display','block');   
            } else {
                return _orig_send_attachment.apply( button_id, [props, attachment] );
            }
        }
        wp.media.editor.open(button);
        return false;
    });
}
media_upload( '.custom_media_upload', '');
media_upload( '.custom_media_upload2', '2');
media_upload( '.custom_media_upload3', '3');
});

所以，让我们假设我有这些边栏：