Question

我正在创建的自定义wordpress小部件存在一些问题。我需要从媒体库中实现多个图像选择，才能在前端创建漂亮的滑动轮播。在调试过程中，我注意到，如果我按下cmd按钮然后单击多个元素，则可以从库中选择多个元素，但是在关闭媒体库弹出窗口后的输入字段中，仅添加一个URL，然后单击“保存”按钮，在前端，我只会看到一张图像，而不是我选择的图像。是否有任何解决方法或方法可以为轮播保存多个网址？

这是我正在使用的代码

PHP小部件类（我将省略__construct和widget方法）


  public function form( $instance )
  {
    $images = isset( $instance['images'] ) ?  $instance['images'] : '';
    ?>
    <p>
      <label for="<?php echo esc_attr($this->get_field_id('images')); ?>"><?php _e('Slider Images'); ?></label>
    </p>
    <p style="display:flex;">
      <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('images')); ?>" name="<?php echo esc_attr($this->get_field_name('images')); ?>" value="<?php echo $images; ?>">
      <button type="button" class="button button-primary upload_image_button"><?php _e('Seleziona'); ?></button>
    </p>
    <?php
  }

  public function update( $new_instance, $old_instance )
  {
    $instance = $old_instance;
    $instance['images'] = $new_instance['images'];
    return $instance;
  }

这是打开媒体库的js代码：

(function($){
  $(document).ready(function(){
    $(document).on('click', '.upload_image_button', function(e){
      e.preventDefault();
      console.log('clicked!');
      var button = $(this);

      if(wp.media.frames.file_frame) {
        wp.media.frames.file_frame.open();
        return;
      }

      var file_frame = wp.media.frames.file_frame = wp.media({
        title: 'Seleziona o carica un immagine',
        library: {
          type: 'image'
        },
        button: {
          text: 'Seleziona'
        },
        multiple: true
      });

      file_frame.on('select', function(){
        //var img = file_frame.state().get('selection').first().toJSON();
        var img = file_frame.state().get('selection');
        img.each(function(selection){
        var url = selection.attributes.url;
        button.siblings('input').val(url).change();
        console.log(url);
        });

      });

      file_frame.open();
    });
  });
}(jQuery));

在WordPress小部件中选择多个图像

0 个答案: