在 Wordpress 中集成 Bootstrap 4 Carousel

Question

我目前正在为我的博客开发一个主题，我有一个关于在 Wordpress 中集成 Carousel Slider 的问题。

滑块效果很好，显示最新的 5 篇帖子，带有特色图片和带有帖子标题的标题。但是我不得不为img设置一个固定的高度，因为不同大小的图像会不断改变轮播的高度，所以结果不是很好。

问题是在移动设备上img拉伸很多，所以我想将帖子缩略图设置为轮播的背景，这样我可以设置bg-size，bg-position等以实现完美响应式图片。

你知道有没有办法达到这个目标？或者也许我的实际代码可以在不将缩略图设置为背景的情况下使用？

提前谢谢大家。

<div class="carousel-inner">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
           <?php $active_class = ( 0 === $the_query->current_post ) ? ' active': ''; ?>
                <div class="carousel-item <?php echo esc_attr( $active_class ); ?>">
                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
                    <?php the_post_thumbnail('full') ?>
                    </a>
                    <div class="carousel-caption d-md-block">
                        <h2><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h2>
                    </div>
                </div>
        <?php endwhile; ?>
        <?php wp_reset_postdata(); ?>
</div>

Answer 1

您可以使用add_image_size( 'home-carousel', <width here>, <height here>, false ); 为您的轮播注册新图片。

然后，您可以像这样调用 the_post_thumbnail('full') - the_post_thumbnail('home-carousel')。如果您已经上传了图片，则需要使用此plugin 重新生成缩略图。

如果您仍想使用背景图片选项 - 您可以通过此函数获取特色图片的 URL - get_the_post_thumbnail_url 并将其设置为 .carousel-item div 的背景。

Answer 2

这是我使用缩略图作为背景图像的实际代码。但是，就像我说的，固定链接不起作用。有没有办法让它以缩略图为背景工作？如果我不清楚，我希望当用户单击图像时，它会重定向到单页帖子。

<div class="carousel-item <?php echo esc_attr( $active_class ); ?>" style="background:url('<?php the_post_thumbnail_url('full');?>') center center no-repeat; background-size: cover; min-height: 75vh;">
        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
        </a>
        <div class="carousel-caption d-md-block">
            <h2><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h2>
        </div>
</div>