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

Question

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

我正在关注这篇文章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

使用上述图库插件，值被保存为附件 ID 数组。使用该 ID，您可以单独获取图像 URL 并根据需要呈现标记。检查以下示例。

<?php
$featured_image_gallery = get_theme_mod( 'featured_image_gallery' );
?>

<?php if ( ! empty( $featured_image_gallery ) ) : ?>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <?php foreach ($featured_image_gallery as $image_id ) : ?>
                <div class="swiper-slide">
                    <img src="<?php echo esc_url( wp_get_attachment_url( $image_id ) ); ?>" />
                </div>
            <?php endforeach; ?>
        </div>
    </div>
<?php endif; ?>