Question

我正在尝试创建一个自定义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网站的管理区域中，当我选择图像或删除选定的图像时，小部件的保存按钮未启用（它不会检测到图像的值更改图像输入字段）。我尝试了一切。我不知道怎么了。

Answer 1

遇到同样的问题。我最终做的是使用 JavaScript 在更新输入框的同一功能中更改管理页面上保存按钮的值和状态。

var save_Button = document.getElementById("widget-downloader_widget-2-savewidget");
save_Button.disabled = false;
save_Button.value = "Save";

这可能不是最好的解决方案，但只是在更新图像 url 的 JS 函数中启用保存按钮对我有用。

Answer 2

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

位置：

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

它在wpWidgets对象上定义了一个名为window的对象，因此可以全局使用。第529行wpWidgets定义了一个具有以下签名的函数：

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

widget参数是div类的widget元素。

因此在我的JavaScript中，我这样称呼它以手动保存小部件：

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

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

2 个答案:

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

2 个答案:

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