如何使用WordPress Customizer API在自定义WordPress主题中添加图像滑块
我正在构建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="http://www.srcmini.com/someimage.jpg" srcset="">
<
/div>
<
div class="swiper-slide">
<
img src="http://www.srcmini.com/someimage" srcset="">
<
/div>
<
div class="swiper-slide">
<
img src="http://www.srcmini.com/someimage.jpg" srcset="">
<
/div>
<
div class="swiper-slide">
<
img src="http://www.srcmini.com/someimage.jpg" srcset="">
<
/div>
<
/div>
【如何使用WordPress Customizer API在自定义WordPress主题中添加图像滑块】我有基本的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="http://www.srcmini.com/blabla.jpg">
还是可以使用自定义html从中输出
<
?php echo gallery_shortcode( $atts );
?>
?
提前致谢 :)
#1使用上述Gallery插件, 值将保存为附件ID数组。使用该ID, 你可以分别获取图片网址并根据需要呈现标记。检查以下示例。
<
?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="http://www.srcmini.com/<
?php echo esc_url( wp_get_attachment_url( $image_id ) );
?>" />
<
/div>
<
?php endforeach;
?>
<
/div>
<
/div>
<
?php endif;
?>
推荐阅读
- 如何使用Ajax在WordPress中添加分页(我有需要调试的代码)()
- 如何将自定义帖子类型存档添加到菜单
- 如何向WordPress主题添加评论
- 如何在WordPress自定义主题中为帖子添加评论( [关闭])
- 如何在html5blank_nav()中的ul和li中添加类()
- 如何访问和编辑HTML WordPress代码()
- 如何在内容Genesis主题之后添加一段HTML
- Java技术指南「并发编程专题」针对于Guava RateLimiter限流器的入门到精通(含实
- 时序数据可视化的降采样算法