图像上传器小部件未预览所选图像

Question

我一直在尝试为 WordPress 开发一个图像小部件插件，由于以下代码，我几乎成功地做到了这一点：

<?php
/*
Plugin Name: Title Page Widget (PB)
Plugin URI: http://www.example.com
Description: Creates a full-screen title page for a post (designed to used with Site Origin Page Builder)
Author: Me
Version: 1.0
Author URI: http://www.example.com
*/

// Block direct requests
if ( !defined('ABSPATH') )
    die('-1');

add_action( 'widgets_init', function(){
    register_widget( 'Title_Page_Widget' );
}); 


/**
 * Adds Title_Page_Widget widget.
 */
class Title_Page_Widget extends WP_Widget {

    /**
     * Register widget with WordPress.
     */
    function __construct() {
        parent::__construct(
            'Title_Page_Widget', // Base ID
            __('Title Page Widget (PB)', 'text_domain'), // Name
            array('description' => __( 'Creates a full-screen title page - designed for use with Site Origin\'s Page Builder plugin', 'text_domain' ),) // Args
        );

        add_action( 'sidebar_admin_setup', array( $this, 'admin_setup' ) );

    }

    function admin_setup(){

        wp_enqueue_media();
        wp_register_script('tpw-admin-js', plugins_url('tpw_admin.js', __FILE__), array( 'jquery', 'media-upload', 'media-views' ) );
        wp_enqueue_script('tpw-admin-js');
        wp_enqueue_style('tpw-admin', plugins_url('tpw_admin.css', __FILE__) );

    }       

    /**
     * Back-end widget form.
     *
     * @see WP_Widget::form()
     *
     * @param array $instance Previously saved values from database.
     */
    public function form( $instance ) {


        $title_text = ( isset( $instance['title_text'] ) ) ? $instance['title_text'] : '';
        $title_image = ( isset( $instance['title_image'] ) ) ? $instance['title_image'] : '';


    ?>  

        <div class="titlepage_widget">

            <h3>Title</h3>
            <p>
                <div class="widget_input">
                    <label for="<?php echo $this->get_field_id( 'title_text' ); ?>"><?php _e( 'Text :' ); ?></label>    
                    <input class="title_text" id="<?php echo $this->get_field_id( 'title_text' ); ?>" name="<?php echo $this->get_field_name( 'title_text' ); ?>" value="<?php echo $title_text ?>" type="text"><br/>
                </div>
                <div class="widget_input">
                    <label for="<?php echo $this->get_field_id( 'title_image' ); ?>"><?php _e( 'Image :' ); ?></label>  
                    <input class="title_image" id="<?php echo $this->get_field_id( 'title_image' ); ?>" name="<?php echo $this->get_field_name( 'title_image' ); ?>" value="<?php echo $title_image ?>" type="text"><button id="title_image_button" class="button" onclick="image_button_click('Choose Title Image','Select Image','image','title_image_preview','<?php echo $this->get_field_id( 'title_image' );  ?>');">Select Image</button>            
                </div>
                <div id="title_image_preview" class="preview_placholder">
                <?php 
                    if ($title_image!='') echo '<img src="' . $title_image . '">';
                ?>
                </div>
            </p>    

        </div>

        <?php 
    }

    /**
     * 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['title_text'] = ( ! empty( $new_instance['title_text'] ) ) ? strip_tags( $new_instance['title_text'] ) : '';
        $instance['title_image'] = ( ! empty( $new_instance['title_image'] ) ) ? strip_tags( $new_instance['title_image'] ) : '';
        return $instance;
    }

} // class My_Widget

下面是前面代码附带的 jQuery：

var custom_uploader;

function image_button_click(dialog_title, button_text, library_type, preview_id, control_id) {

    event.preventDefault();

    //If the uploader object has already been created, reopen the dialog
    //if (custom_uploader) {
     //   custom_uploader.open();
    //    return;
    //}

    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: dialog_title,
        button: {
            text: button_text
        },
        library : { type : library_type },            
        multiple: false
    });

    //When a file is selected, grab the URL and set it as the text field's value
    custom_uploader.on('select', function() {

        attachment = custom_uploader.state().get('selection').first().toJSON();
        jQuery('#' + control_id).val(attachment.url);

        var html = '';

        if (library_type=='image') {
            html = '<img src="' + attachment.url + '">';
        }

        if (library_type=='video') {
            html = '<video autoplay loop><source src="' + attachment.url + '" type="video/' + get_extension( attachment.url ) + '" /></video>';
        }

        jQuery('#' + preview_id).empty();
        jQuery('#' + preview_id).append(html);
    });

    //Open the uploader dialog
    custom_uploader.open();

}

function get_extension( url ){

    return url.substr((url.lastIndexOf('.') + 1));

}

你可以找到全部内容 right here。

问题是选择的图片只有在我点击保存按钮后才会显示，如果它在选择图片后立即显示在预览字段中就更好了，而不必点击保存按钮，就像 Post 编辑屏幕中的精选图片小部件一样。

有什么想法吗？ :)

Answer 1

我建议的第一件事是将整个内容重写得更好一些。你正在编写小部件，并说你想要多个小部件，你将有多个相同的 ID，这不是一件好事。

因此，请创建清晰易懂的类，您可以在点击事件中指向它。

我做了一些有用的东西，但它可以大大增强（我相信你会做的 :D）。

我添加了插件 header 以便我可以安装它，并且我必须注册小部件以便我也可以在我的后端看到它。我添加了删除图像按钮，该按钮将删除图像并在单击时清除输入字段。

php 部分：

<?php
/*
Plugin Name: Title_Page_Widget
Plugin URI:
Description: Title_Page_Widget
Version: 1.0.0
Author:
Author
License: GPL
*/


/**
 * Adds Title_Page_Widget widget.
 */
class Title_Page_Widget extends WP_Widget {

    /**
     * Register widget with WordPress.
     */
    function __construct() {
        parent::__construct(
            'Title_Page_Widget', // Base ID
            __('Title Page Widget (PB)', 'text_domain'), // Name
            array('description' => __( 'Creates a full-screen title page - designed for use with Site Origin\'s Page Builder plugin', 'text_domain' ),) // Args
        );

        add_action( 'sidebar_admin_setup', array( $this, 'admin_setup' ) );

    }

    function admin_setup(){

        wp_enqueue_media();
        wp_register_script('tpw-admin-js', plugins_url('tpw_admin.js', __FILE__), array( 'jquery', 'media-upload', 'media-views' ) );
        wp_enqueue_script('tpw-admin-js');
        wp_enqueue_style('tpw-admin', plugins_url('tpw_admin.css', __FILE__) );

    }

    /**
     * Back-end widget form.
     *
     * @see WP_Widget::form()
     *
     * @param array $instance Previously saved values from database.
     */
    public function form( $instance ) {


        $title_text = ( isset( $instance['title_text'] ) ) ? $instance['title_text'] : '';
        $title_image = ( isset( $instance['title_image'] ) ) ? $instance['title_image'] : '';


    ?>

        <div class="titlepage_widget">

            <h3>Title</h3>
            <p>
                <div class="widget_input">
                    <label for="<?php echo $this->get_field_id( 'title_text' ); ?>"><?php _e( 'Text :' ); ?></label>
                    <input class="title_text" id="<?php echo $this->get_field_id( 'title_text' ); ?>" name="<?php echo $this->get_field_name( 'title_text' ); ?>" value="<?php echo $title_text ?>" type="text"><br/>
                </div>
                <div class="widget_input">
                    <label for="<?php echo $this->get_field_id( 'title_image' ); ?>"><?php _e( 'Image :' ); ?></label>
                    <input class="title_image" id="<?php echo $this->get_field_id( 'title_image' ); ?>" name="<?php echo $this->get_field_name( 'title_image' ); ?>" value="<?php echo $title_image ?>" type="text"><button id="title_image_button" class="button" onclick="image_button_click('Choose Title Image','Select Image','image','title_image_preview','<?php echo $this->get_field_id( 'title_image' );  ?>');">Select Image</button>
                    <div class="button remove_image_button" >Remove Image</div>
                </div>
                <div id="title_image_preview" class="preview_placholder">
                <?php
                    if ($title_image!='') echo '<img style="width:100%" src="' . $title_image . '">';
                ?>
                </div>
            </p>

        </div>

        <?php
    }

    /**
     * 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['title_text'] = ( ! empty( $new_instance['title_text'] ) ) ? strip_tags( $new_instance['title_text'] ) : '';
        $instance['title_image'] = ( ! empty( $new_instance['title_image'] ) ) ? strip_tags( $new_instance['title_image'] ) : '';
        return $instance;
    }

} // class My_Widget

function twp_widget(){
    register_widget('Title_Page_Widget');
}

add_action('widgets_init', 'twp_widget');

JS部分：

var custom_uploader;

function image_button_click(dialog_title, button_text, library_type, preview_id, control_id) {

    event.preventDefault();

    //If the uploader object has already been created, reopen the dialog
    //if (custom_uploader) {
     //   custom_uploader.open();
    //    return;
    //}

    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: dialog_title,
        button: {
            text: button_text
        },
        library : { type : library_type },
        multiple: false
    });

    //When a file is selected, grab the URL and set it as the text field's value
    custom_uploader.on('select', function() {

        attachment = custom_uploader.state().get('selection').first().toJSON();
        jQuery('#' + control_id).val(attachment.url);

        var html = '';

        if (library_type=='image') {
            html = '<img src="' + attachment.url + '">';
        }

        if (library_type=='video') {
            html = '<video autoplay loop><source src="' + attachment.url + '" type="video/' + get_extension( attachment.url ) + '" /></video>';
        }

        var uploaded_image = jQuery('.uploaded_image');

        if (uploaded_image.length) {
            uploaded_image.remove();
        }

        jQuery('.title_image').before('<img class="uploaded_image" src="'+attachment.url+'" style="width:100%";>');

        jQuery('#' + preview_id).empty();
        jQuery('#' + preview_id).append(html);
    });

    //Open the uploader dialog
    custom_uploader.open();

}

jQuery(document).on('click','.remove_image_button', function(e){
    e.preventDefault();
    jQuery('.uploaded_image').remove();
    jQuery('#title_image_preview img').remove();
    jQuery('.title_image').val('');
});

function get_extension( url ){

    return url.substr((url.lastIndexOf('.') + 1));

}

这里我添加了：

    var uploaded_image = jQuery('.uploaded_image');

    if (uploaded_image.length) {
        uploaded_image.remove();
    }

    jQuery('.title_image').before('<img class="uploaded_image" src="'+attachment.url+'" style="width:100%";>');

对于删除按钮：

jQuery(document).on('click','.remove_image_button', function(e){
    e.preventDefault();
    jQuery('.uploaded_image').remove();
    jQuery('#title_image_preview img').remove();
    jQuery('.title_image').val('');
});

我已经对其进行了测试并且它可以工作，但是正如我所说的，它需要工作。您需要查看点击来自哪个小部件，以及从何处删除图像，等等。我怀疑如果你有多个，一旦你点击删除，你就会删除所有图像。正如我所说，需要更多工作。

希望这能让你朝着正确的方向前进。

图像上传器小部件未预览所选图像

Image uploader widget is not previewing selected image

wordpress

jquery

image

widget

preview