为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

PHP
慕莱坞森 2021-05-01 10:20:30
我正在构建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 ); ?>?提前致谢 :)
查看完整描述

1 回答

?
凤凰求蛊

TA贡献1825条经验 获得超4个赞

使用上述Gallery插件,值将保存为附件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; ?>


查看完整回答
反对 回复 2021-05-21
  • 1 回答
  • 0 关注
  • 146 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信