多图像选择自定义小工具

我已经创建了一个swiper自定义旋转木马，作为自定义主题的模板部分。我想将主题的这个组件Widget化，以便对显示的内容有更多的控制。它被用作一个水平的徽标滑块，目前将使用一个带有图库的帖子来显示品牌徽标。如何为正在编写的小部件创建一个模式弹出窗口，以打开wp媒体库并选择多个图像作为滑块的图像？这可能吗？以下是实际代码：

<?php
$args = array(
\'post_type\' => \'post\',
\'name\' => \'brands logos\'
);
$logo_img = new WP_Query( $args );
?>
<div class="row" style="margin-top:1em;margin-bottom:1em;">
<?php if( $logo_img->have_posts() ): while( $logo_img->have_posts() ): $logo_img->the_post();
$logo_gallery = get_post_gallery_images( $post->ID );
if( $logo_gallery ): ?>
<div class="swiper-container logo-slider" id="clients-logo-slider">
  <div class="swiper-wrapper" id="client-logo-wrapper">
<?php  foreach($logo_gallery as $logo ): ?>
    <img class="swiper-slide" src="<?php echo $logo; ?>" alt="" width="100" id="client-logo"/>
<?php endforeach; ?>
<?php endif; ?>
  </div>
  <div class="swiper-scrollbar"></div>
</div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
</div>

<script type="text/javascript">
(function($){
  $(document).ready(function(){
    var swiperLogos = new Swiper(\'.logo-slider\',{
      autoplay: {
      delay: 5000,
      },
      slidesPerView: \'auto\',
      slidesPerColumnFill: \'row\',
      scrollbar: {
        el: \'.swiper-scrollbar\',
        draggable: true,
      },
    });
  });
}(jQuery));
</script>

我将把它放在一个类中，以便在主题中使用一个功能性小部件来替换模板部分。下面是我正在编写的代码，用于包装现有的代码。我注意到我无法选择多个图像。注意：代码还不完整。我能够编写一个小部件，但我需要首先解决多图像选择问题。

class FeaturedLogoSlider extends WP_Widget {


  public function __construct()
  {
    parent::__construct(
      \'featured-brands\',
      \'Featured Brands Slider\',
      array(
        \'description\' => __(\'Featured brands logos slider\', \'\')
      )
    );
    add_action( \'widgets_init\', array($this, \'initSidebar\') );
    add_action( \'wp_enqueue_scripts\', array($this, \'initScripts\') );
  }

  public function initScripts()
  {
    wp_enqueue_script( \'media-upload\' );
    wp_enqueue_media();
    wp_enqueue_script( \'medialib-script\', plugins_url( \'medialib-script.min.js\' ,__FILE__), array(\'jquery\'), null );
    // swiper js ?
    //wp_enqueue_script();
  }

  public function initSidebar()
  {
    register_sidear(
      array(
        \'id\'    => \'\',
        \'name\'  => \'\',
        \'description\' => \'\'
      )
    );

    register_widget( \'\' );
  }

  public function widget( $args, $instance )
  {
    ob_start();
    ?>

    <div class="swiper-container logo-slider" id="clients-logo-slider">
      <div class="swiper-wrapper" id="client-logo-wrapper">
        <!-- Here I want to loop over the selected images to put them inside the slider ? -->
        <img class="swiper-slide" src="" alt="" width="100" id="client-logo"/>

      </div>
      <div class="swiper-scrollbar"></div>
    </div>

    <?php
    echo ob_get_clean();
  }

  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;
    // update widget code 
    return $instance;
  }

}

下面是我用来从媒体库中选择图像的JS文件，它不适用于多选，也不适用于swiper设置的内联代码。我将把swiper设置放在一个单独的文件中，并使用wp_localize_script 传递用户设置，但我也在考虑让它保持在线。

// media library script
(function($){
  $(document).ready(function(){
    $(document).on(\'click\', \'.upload_image_button\', function(e){
      e.preventDefault();
      var button = $(this);

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

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

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

// swiper setup
(function($){
  $(document).ready(function(){
    var swiperLogos = new Swiper(\'.logo-slider\',{
      autoplay: {
      delay: 3000,
      },
      slidesPerView: \'auto\',
      slidesPerColumnFill: \'row\',
      scrollbar: {
        el: \'.swiper-scrollbar\',
        draggable: true,
      },
    });
  });
}(jQuery));

小码农CODE

相关推荐

为什么Header.php中的排队样式显示在页脚中？