WordPress自定义小部件图像选择器-禁用”​​保存”按钮

我正在尝试创建一个自定义WordPress小部件, 以允许用户选择图像, 链接和标题。该小部件将在侧栏中显示为广告图像。这是代码：

PHP：

<?php


class Ad extends WP_Widget {

public function __construct() {
    parent::__construct(
        'widget-ad', 'Advertisement', array(
            'description' => 'Advertisement Widget', 'classname'   => 'widget-ad', ) );
}

public function widget( $args, $instance ) {
    ...
}

public function form( $instance ) {
    $title       = ! empty( $instance['title'] ) ? $instance['title'] : '';
    $url         = ! empty( $instance['url'] ) ? $instance['url'] : '';
    $image_url         = ! empty( $instance['image_url'] ) ? $instance['image_url'] : '';
    ?>
    <p>
        <label
                for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>">
            Title:
        </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>
        <label
                for="<?php echo esc_attr( $this->get_field_id( 'url' ) ); ?>">
            URL:
        </label>
        <input
                class="widefat"
                id="<?php echo esc_attr( $this->get_field_id( 'url' ) ); ?>"
                name="<?php echo esc_attr( $this->get_field_name( 'url' ) ); ?>"
                type="text"
                value="<?php echo esc_attr( $url ); ?>"
                dir="ltr">
    </p>
    <p>
        <img
             class="image-fluid"
             id="<?php echo esc_attr( $this->get_field_id( 'image_url' ) ) . "-img"; ?>"
             src="<?php echo esc_url( $image_url ); ?>"
             alt="" />
        <input type="text"
               id="<?php echo esc_attr( $this->get_field_id( 'image_url' ) ); ?>"
               name="<?php echo esc_attr( $this->get_field_name( 'image_url' ) ); ?>"
               value="<?php echo esc_url( $image_url ); ?>" />
        <br>
        <a href="#" class="button js-select-media"
           data-target="<?php echo esc_attr( $this->get_field_id( 'image_url' ) ); ?>">
            Select Image
        </a>
        <a href="#" class="button js-remove-media"
           data-target="<?php echo esc_attr( $this->get_field_id( 'image_url' ) ); ?>">
            Remove Image
        </a>
    </p>
    <?php
}

public function update( $new_instance, $old_instance ) {
    $instance                = array();
    $instance['title']       = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
    $instance['url']         = ( ! empty( $new_instance['url'] ) ) ? strip_tags( $new_instance['url'] ) : '';
    $instance['image_url']         = ( ! empty( $new_instance['image_url'] ) ) ? strip_tags( $new_instance['image_url'] ) : '';

    return $instance;
}
}

/**
 * Register Widget
 */
add_action( 'widgets_init', function() {
    register_widget( 'Ad' );
});

JavaScript：

$(document).ready(() => {

    // Open WP media selector
    $(document).on('click', '.js-select-media', (e) => {
        e.preventDefault();
        const target_id = $(e.target).data('target');
        const input_element = $('#' + target_id);
        const img_element = $('#' + target_id + '-img');
        const image = wp.media({
            title: 'Select An Image', multiple: false, library: { 
                type: 'image'
            }, button: {
                text: 'Select'
            }, }).open().on('select', (e) => {
            const image_url = image.state().get('selection').first().toJSON().url;
            input_element.val(image_url).trigger('change');
            img_element.attr('src', image_url);
        });
    });

    // Remove selected Image
    $(document).on('click', '.js-remove-media', (e) => {
        e.preventDefault();
        const element = $(e.target);
        const target_id = element.data('target');
        $('#' + target_id).val('').trigger('change');
        $('#' + target_id + '-img').attr('src', '');
    });

问题：

在WordPress网站的管理区域中, 当我选择图像或删除选定的图像时, 小部件的”保存”按钮未启用(它未检测到图像输入字段的值更改)。我尝试了一切。我不知道怎么了

#1

浏览完WordPress文件(PHP和JS)后, 我遇到了一个似乎负责保存小部件(使用Ajax请求)的函数。

位置：

website-root\wp-admin\js\widgets.js

它在window对象上定义了一个名为wpWidgets的对象, 因此它在全局范围内可用。在529行上, wpWidgets定义了一个带有此签名的函数：

save : function( widget, del, animate, order ) { ... }

widget参数是widget类的div元素。

因此, 在我的JavaScript中, 我这样调用它来手动保存小部件：

wpWidgets.save( input_element.closest('div.widget'), 0, 1, 0 );