我是一个仍在学习的新手开发人员,目前我正在开发自己的第一个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篇文章,我希望它将文章滑动1