Как добавить слайдер изображений в пользовательскую тему WordPress с помощью WordPress Customizer API

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

С плагином выше, Галерея, значения сохраняются как массив идентификаторов вложений.Используя эти идентификаторы, вы можете извлекать 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; ?>