wtyczki — niestandardowy widżet wyboru wielu obrazów
![wtyczki — niestandardowy widżet wyboru wielu obrazów](https://oen.pl/wp-content/uploads/2023/01/apple-touch-icon@2.png)
Stworzyłem niestandardową karuzelę swiper jako część szablonu niestandardowego motywu. Chcę dodać widżet do tego komponentu motywu, aby mieć większą kontrolę nad wyświetlaną zawartością. Jest używany jako poziomy suwak logo i na razie będzie używał pojedynczego posta z galerią w środku, aby wyświetlić logo marki. Jak mogę utworzyć modalne wyskakujące okienko dla widżetu, który piszę, aby otworzyć bibliotekę multimediów wp i wybrać wiele obrazów do wykorzystania jako obrazy dla suwaka? czy to możliwe? Oto rzeczywisty kod:
<?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=" 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>
Umieszczę to w klasie, aby mieć funkcjonalny widżet do użycia w motywie w celu zastąpienia części szablonu. Oto kod, który piszę, aby zawinąć istniejący. Zauważyłem, że nie mogę wybrać wielu obrazów. Uwaga: kod nie jest jeszcze kompletny. Jestem w stanie napisać widżet, ale najpierw muszę rozwiązać problem z wyborem wielu obrazów.
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;
}
}
Oto pliki JS, których używam do wybierania obrazu z biblioteki multimediów i które nie działają w przypadku wielokrotnego wyboru oraz kodu wbudowanego do konfiguracji przesuwania. Umieszczę konfigurację swipera w osobnym pliku i użyję wp_localize_script
przekazać ustawienia użytkownika, ale myślę też o pozostawieniu go w tekście.
// 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));