如何在包含多个项目的Bootstrap 5旋转木马循环中显示某个类别的帖子?

时间:2022-02-04 作者:Danilo Benovic

我是一个仍在学习的新手开发人员,目前我正在开发自己的第一个wordpress自定义主题。然而,我正在努力让它工作。我有一个;“英雄”;旋转木马或登录页旋转木马,当前显示来自自定义帖子类型的帖子。我想在其下方添加一个不同的旋转木马,该旋转木马将同时显示4个项目,并且它应该只显示来自一个名为“quot;Vazno;。

<div class="container cta-100 ">
        <div class="container">
            <div class="row blog">
                <div class="col-md-12">
                    <div id="blogCarousel" class="carousel slide container-blog" data-bs-ride="carousel">

                        <!-- Carousel items -->
                        <div class="carousel-inner">
                            <?php $slider = get_posts(array(\'post_type\' => \'cars\', \'posts_per_page\' => 4, \'cat\' => \'vazno\')); ?>
                            <?php $count = 0; ?>
                            <?php foreach ($slider as $slide) : ?>
                                <?php setup_postdata($slide->ID); ?>
                                <div class="carousel-item <?php echo ($count == 0) ? \'active\' : \'\'; ?>">
                                    <div class="col-md-3">
                                        <div class="item-box-blog">
                                            <div class="item-box-blog-image">
                                                <!--Date-->
                                                <div class="item-box-blog-date bg-blue-ui white"> <span class="mon"><?php echo get_the_date(\'d M\', $slide->ID); ?></span> </div>
                                                <!--Image-->
                                                <figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
                                            </div>
                                            <div class="item-box-blog-body">
                                                <!--Heading-->
                                                <div class="item-box-blog-heading">
                                                    <a href="<?php echo get_permalink($slide->ID); ?>" tabindex="0">
                                                        <h5><?php echo get_the_title($slide->ID); ?></h5>
                                                    </a>
                                                </div>
                                                <!--Data-->
                                                <div class="item-box-blog-data" style="padding: px 15px;">
                                                    <p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
                                                </div>
                                                <!--Text-->
                                                <div class="item-box-blog-text">
                                                    <p><?php echo wp_trim_excerpt(get_the_excerpt($slide->ID)); ?></p>
                                                </div>
                                                <div class="mt"> <a href="<?php echo get_permalink($slide->ID); ?>" tabindex="0" class="btn bg-blue-ui white read">Saznaj vise</a> </div>
                                                <!--Read More Button-->
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <?php $count++; ?>
                            <?php endforeach; ?>
                        </div>
                        <ol class="carousel-indicators">
                            <li data-bs-target="#blogCarousel" data-bs-slide-to="0" class="active"></li>
                            <li data-bs-target="#blogCarousel" data-bs-slide-to="1"></li>
                            <li data-bs-target="#blogCarousel" data-bs-slide-to="2"></li>
                        </ol>
                    </div>
                  
                </div>
               
            </div>

        </div>

    </div>
这是我为旋转木马定制的css

.cta-100 {
margin-top: 100px;
padding-left: 8%;
padding-top: 7%;
}

.col-md-3 {
    padding-bottom: 20px;
}

.white {
    color: #fff !important;
}

.mt {
    float: left;
    margin-top: -20px;
    padding-top: 20px;
}

.bg-blue-ui {
    background-color: #708198 !important;
}

figure img {
    width: 300px;
}

#blogCarousel {
    padding-bottom: 100px;
}

.blog .carousel-indicators {
    left: 0;
    top: -50px;
    height: 50%;
}


/* The colour of the indicators */

.blog .carousel-indicators li {
    background: #708198;
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

.blog .carousel-indicators .active {
    background: #0fc9af;
}

.item-carousel-blog-block {
    outline: medium none;
    padding: 15px;
}

.item-box-blog {
    border: 1px solid #dadada;
    text-align: center;
    z-index: 4;
    padding: 20px;
}

.item-box-blog-image {
    position: relative;
}

.item-box-blog-image figure img {
    width: 100%;
    height: auto;
}

.item-box-blog-date {
    position: absolute;
    z-index: 5;
    padding: 4px 20px;
    top: -20px;
    right: 8px;
    background-color: #41cb52;
}

.item-box-blog-date span {
    color: #fff;
    display: block;
    text-align: center;
    line-height: 1.2;
}

.item-box-blog-date span.mon {
    font-size: 18px;
}

.item-box-blog-date span.day {
    font-size: 16px;
}

.item-box-blog-body {
    padding: 10px;
}

.item-heading-blog a h5 {
    margin: 0;
    line-height: 1;
    text-decoration: none;
    transition: color 0.3s;
}

.item-box-blog-heading a {
    text-decoration: none;
}

.item-box-blog-data p {
    font-size: 13px;
}

.item-box-blog-data p i {
    font-size: 12px;
}

.item-box-blog-text {
    max-height: 100px;
    overflow: hidden;
}

.mt-10 {
    float: left;
    margin-top: -10px;
    padding-top: 10px;
}

.btn.bg-blue-ui.white.read {
    cursor: pointer;
    padding: 4px 20px;
    float: left;
    margin-top: 10px;
}

.btn.bg-blue-ui.white.read:hover {
    box-shadow: 0px 5px 15px inset #4d5f77;
}
目前,这段代码只显示了我自定义帖子类型中的所有帖子,当时只有1篇。

我希望它在当时显示4篇文章,我希望它将文章滑动1What is currently being shown on the webpage

1 个回复
SO网友:Eric

要仅获取4篇帖子,请更改get_posts() 功能:

get_posts(array(\'post_type\' => \'cars\', \'numberposts\' => 4, \'cat\' => \'vazno\'));
get_posts() 使用numberposts 而不是posts_per_page 就像WP\\u Query一样。

相关推荐

当in_the_loop()为假时,何时以及为什么is_Single(‘my_cpt’)为真?

我正在使用模板系统的示例代码。此地址的页码:http://project.test/my_cpt/hello-post/.无法理解原因is_singular( \'my_cpt\' ) 是true 虽然in_the_loop() 是false.在页面模板中The Loop "E;“工程”:if ( have_posts() ) { while ( have_posts() ) { the_post(); ?>