我试图用WordPress媒体上传器简化我的小部件。当我点击按钮时Upload 它打开了媒体上传程序,但在我点击save, 该按钮不再工作,如果我有一个活动的小部件,然后添加另一个,同样的行为,媒体上传按钮在第二个小部件中不工作。控制台中没有JS错误。有人能指出我错在哪里吗?
PHP
class Inka_Profile_Widget extends WP_Widget {
// setup the widget name, description etc.
function __construct() {
$widget_options = array(
\'classname\' => esc_attr( "inka_profile_widget", \'inka\' ),
\'description\' => esc_html__( \'Custom Profile Widget\', \'inka\' ),
\'customize_selective_refresh\' => true
);
parent::__construct( \'inka_profile\', \'Inka Profile\', $widget_options);
}
// back-end display of widget
function form( $instance ) {
$title = ! empty( $instance[\'title\'] ) ? $instance[\'title\'] : esc_html__( \'About Me\', \'inka\' );
$image = ! empty( $instance[\'image\'] ) ? $instance[\'image\'] : \'\';
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id(\'title\') ); ?>"><?php esc_attr_e( \'Title\', \'inka\' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( \'title\' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( \'title\' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
</p>
<p>
<img src="<?php echo esc_attr( $image ); ?>" alt="" class="deo-image-holder" style="width: 100%;">
</p>
<p>
<input type="hidden" class="deo-image-hidden-field" name="<?php echo $this->get_field_name( \'image\' ); ?>" id="<?php echo $this->get_field_id( \'image\' ); ?>" value="<?php echo esc_attr( $image ); ?>"/>
<input type="button" class="deo-image-upload-button button button-primary" value="Upload">
<input type="button" class="deo-image-delete-button button" value="Remove Image">
</p>
<?php
}
// front-end display of widget
function widget( $args, $instance ) {
echo "Hey";
}
// update of the widget
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance[\'title\'] = ( ! empty( $new_instance[\'title\'] ) ) ? strip_tags( $new_instance[\'title\'] ) : \'\';
$instance[\'image\'] = ( ! empty( $new_instance[\'image\'] ) ) ? strip_tags( $new_instance[\'image\'] ) : \'\';
return $instance;
}
}
add_action( \'widgets_init\', function() {
register_widget( \'Inka_Profile_Widget\' );
});
JS
(function($){
/* WordPress Media Uploader
-------------------------------------------------------*/
var addButton = $(\'.deo-image-upload-button\');
var deleteButton = $(\'.deo-image-delete-button\');
var hiddenField = $(\'.deo-image-hidden-field\');
var imageHolder = $(\'.deo-image-holder\');
var mediaUploader;
addButton.on(\'click\', function(e) {
e.preventDefault();
if ( mediaUploader ) {
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: \'Select an Image\',
button: {
text: \'Use This Image\'
},
multiple: false
});
mediaUploader.on(\'select\', function() {
var attachment = mediaUploader.state().get(\'selection\').first().toJSON();
hiddenField.val(attachment.url);
imageHolder.attr(\'src\', attachment.url);
});
mediaUploader.open();
});
})(jQuery);