Question

我有一个静态轮播，想要将它集成到wordpress而不需要任何插件。我的问题是如何动态地将我的图像文件夹（其中包含所有轮播图像）附加到wordpress。

<?php if(is_front_page()){
    $i=0; 
    query_posts('showposts=3&post_type=post');   
?>
<section id="main-slider" class="no-margin">
    <div class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#main-slider" data-slide-to="0" class="active"></li>
            <li data-target="#main-slider" data-slide-to="1"></li>
            <li data-target="#main-slider" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
        <?php if (have_posts()): while(have_posts()): the_post(); $i++; ?>
            <?php 
               if(has_post_thumbnail())
                    $url=wp_get_attachment_url(get_post_thumbnail_id());
             ?>
            <?php if($i==1){?>
            <div class="item active" style="background-image: url(<?php echo $url; ?>)">
            <?php }else{?>
                <div class="item" style="background-image: url(<?php echo $url; ?>)">
                    <?php }?>
                <div class="container">
                    <div class="row slide-margin">
                        <div class="col-sm-6">
                            <div class="carousel-content">
                                <h1 class="animation animated-item-1"><?php the_title(); ?></h1>
                                <h2 class="animation animated-item-2">Fake text</h2> 
                                <a class="btn-slide animation animated-item-3" href="<?php the_permalink(); ?>">Read More</a>
                            </div>
                        </div>

                        <div class="col-sm-6 hidden-xs animation animated-item-4">
                            <div class="slider-img">
                                <img src="images/slider/img1.png" class="img-responsive">
                            </div>
                        </div>

                    </div>
                </div>
            </div><!--/.item-->
            <?php endwhile; endif; ?>
        </div><!--/.carousel-inner-->
    </div><!--/.carousel-->
    <a class="prev hidden-xs" href="#main-slider" data-slide="prev">
        <i class="fa fa-chevron-left"></i>
    </a>
    <a class="next hidden-xs" href="#main-slider" data-slide="next">
        <i class="fa fa-chevron-right"></i>
    </a>
</section><!--/#main-slider-->
<?php } ?><?php wp_reset_query(); ?>

如您所知，$url没有任何价值。如何动态地向轮播添加/删除图像。

Answer 1

有很多方法可以创建轮播动态，

您可以创建自定义帖子类型：https://codex.wordpress.org/Post_Types，上传精选图片或发布元图片。
整合选项框架，例如：SMOF（略微修改选项框架）
您还可以使用WordPress后端创建自定义设置页面：https://codex.wordpress.org/Function_Reference/add_options_page

如何在wordpress中集成bootstrap轮播

1 个答案: