如何使用WordPress Customizer API在自定义WordPress主题中添加图像滑块

Question

我正在构建WordPress主题，因此，我想添加一个滑块，用户可以在其中从WordPress Customizer中选择图像，如果他们想从滑块中删除图像，则只需取消勾选，图像就会从滑块中删除。

我正在关注这篇文章https://make.xwp.co/2016/08/12/image-gallery-control-for-the-customizer/这可以按我的意愿很好地工作，但问题是它显示了画廊中的图像（我认为它使用WordPress画廊的短代码），而我正在使用https://idangero.us/swiper/，因此，我想将图像输出为

  <div class="swiper-container">

    <div class="swiper-wrapper">

      <div class="swiper-slide">

            <img src="someimage.jpg" alt="" srcset="">

            </div>

      <div class="swiper-slide">

            <img src="someimage" alt="" srcset="">

            </div>

      <div class="swiper-slide">

            <img src="someimage.jpg" alt="" srcset="">

            </div>

      <div class="swiper-slide">

            <img src="someimage.jpg" alt="" srcset="">

            </div>

    </div>

我有基本的PHP知识：/

在functions.php中

function the_featured_image_gallery( $atts = array() ) {

    $setting_id = 'featured_image_gallery';

    $ids_array = get_theme_mod( $setting_id );

    if ( is_array( $ids_array ) && ! empty( $ids_array ) ) {

        $atts['ids'] = implode( ',', $ids_array );

        echo gallery_shortcode( $atts );

    }

}

在front-page.php中

<?php the_featured_image_gallery(); ?>

是否可以将图像输出为

<img src="blabla.jpg">

还是可以使用自定义html从中输出

<?php echo gallery_shortcode( $atts ); ?>

？

提前致谢 ：）

Answer 1

使用上述Gallery插件，值将保存为附件ID的数组。使用该ID，您可以分别获取图像URL并根据需要呈现标记。请检查以下示例。<?php$featured_image_gallery = get_theme_mod( 'featured_image_gallery' );?><?php if ( ! empty( $featured_image_gallery ) ) : ?>&nbsp; &nbsp; <div class="swiper-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="swiper-wrapper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php foreach ($featured_image_gallery as $image_id ) : ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="swiper-slide">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="<?php echo esc_url( wp_get_attachment_url( $image_id ) ); ?>" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php endforeach; ?>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div><?php endif; ?>