Question

我正在尝试使用wordpress小部件，我从https://vedmant.com/using-wordpress-media-library-in-widgets-options/获取了此代码。小部件应该允许您通过wordpress媒体库上传自己的图像。该代码用于打开媒体库，上传图像并选择它，但图像不会更改以显示新图像。

这是代码（也在网站上）：

我在类似的事情上阅读了其他一些内容，并试图查找更新的小部件，但我似乎无法找到我正在寻找的答案。我认为问题是文本框将填充图像URL，但它不会刷新，因为Wordpress认为没有任何改变。关于我能做什么的任何想法？

<?php 
add_action( 'widgets_init', 'myw_init' );

function myw_init() {
register_widget( 'my_widget' );
}

class my_widget extends WP_Widget {

/**
 * Sets up the widgets name etc
 */
 function __construct() {

      // Add Widget scripts
      add_action('admin_enqueue_scripts', array($this, 'scripts'));

      parent::__construct(
         'my_widget', // Base ID
         __( 'Our Widget Title', 'text_domain' ), // Name
         array( 'description' => __( 'Our Widget with media files', 'text_domain' ), ) // Args
      );
   }
/**
 * Enqueue scripts
 */
public function scripts()
{
    wp_enqueue_script( 'media-upload' );
    wp_enqueue_media();
    wp_enqueue_script('mfc-media-upload', get_template_directory_uri() . '/../../plugins/my-featured-content/mfc-media-upload.js', array('jquery'));
}        

/**
 * Outputs the content of the widget
 *
 * @param array $args
 * @param array $instance
 */
 public function widget( $args, $instance ) {
    // Our variables from the widget settings
    $title = apply_filters( 'widget_title', empty( $instance['title'] ) ? __( 'Default title', 'text_domain' ) : $instance['title'] );
    $image = ! empty( $instance['image'] ) ? $instance['image'] : '';

    ob_start();
    echo $args['before_widget'];
    if ( ! empty( $instance['title'] ) ) {
       echo $args['before_title'] . $title . $args['after_title'];
    }
    ?>

    <?php if($image): ?>
       <img src="<?php echo esc_url($image); ?>" alt="">
    <?php endif; ?>

    <?php
    echo $args['after_widget'];
    ob_end_flush();
 }

/**
 * Outputs the options form on admin
 *
 * @param array $instance The widget options
 */
 public function form( $instance ) {
    $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
    $image = ! empty( $instance['image'] ) ? $instance['image'] : '';
    ?>
    <p>
       <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
       <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
    </p>
    <p>
       <label for="<?php echo $this->get_field_id( 'image' ); ?>"><?php _e( 'Image:' ); ?></label>
       <input class="widefat" id="<?php echo $this->get_field_id( 'image' ); ?>" name="<?php echo $this->get_field_name( 'image' ); ?>" type="text" value="<?php echo esc_url( $image ); ?>" />
       <button class="upload_image_button button button-primary">Upload Image</button>
    </p>
    <?php
 }

/**
 * Processing widget options on save
 *
 * @param array $new_instance The new options
 * @param array $old_instance The previous options
 *
 * @return array
 */
 public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
    $instance['image'] = ( ! empty( $new_instance['image'] ) ) ? $new_instance['image'] : '';

    return $instance;
 }
}

对于jQuery：

jQuery(document).ready(function ($) {

  $(document).on("click", ".upload_image_button", function (e) {
     e.preventDefault();
     var $button = $(this);


     // Create the media frame.
     var file_frame = wp.media.frames.file_frame = wp.media({
        title: 'Select or upload image',
        library: { // remove these to show all
           type: 'image' // specific mime
        },
        button: {
           text: 'Select'
        },
        multiple: false  // Set to true to allow multiple files to be selected
     });

     // When an image is selected, run a callback.
     file_frame.on('select', function () {
        // We set multiple to false so only get one image from the uploader

        var attachment = file_frame.state().get('selection').first().toJSON();

        $button.siblings('input').val(attachment.url);

     });

     // Finally, open the modal
     file_frame.open();
  });
 });

Answer 1

您可以向图像网址添加查询参数，以强制它是唯一的，例如：

<img src="<?php echo esc_url($image); ?>?<?php echo time() ?>" alt="">

上传图像时，图像不会更改，但图像URL正确

1 个答案: