我已将猫头鹰旋转木马 2（最新更新）添加到我的主题中。 我已成功添加轮播。 但是，我无法控制自定义它。 我尝试过编辑 owl-carousel.js 文件，也尝试过编辑 owl.carousel-init.js 文件，但它们都没有提供我想要的自定义设置。 主要的一个是我只想要 5 个猫头鹰项目，而目前有 8 个。我是否添加了所有正确的文件？ 这是我正在构建的第一个主题，所以我不能 100% 确信我做的一切都是正确的。有人可以帮助发现我所犯的错误并帮助我自定义它吗？预先感谢。
我设置了 carousel.php 文件来显示最新的热门帖子*
front-page.php
<?php
/*
* Template Name:
*/
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 14,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax">
<?php
$i = 0;
$j = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<div class="row">
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
</div>
<?php
} else { // Small posts ?>
<?php if($j % 3 === 0) echo '<div class="row">'; ?>
<article <?php post_class( 'col-md-4' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php $j++; if($j % 3 === 0) echo '</div>'; ?>
<?php
}
$i++;
}?>
</div>
<?php if(get_query_var('paged') < $the_query->max_num_pages) {
load_more_button();
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();轮播.php
<div class="owl-carousel">
<?php
$carousel_cat = get_theme_mod('carousel_setting','1');
$carousel_count = get_theme_mod('count_setting','4');
$month = date('m');
$year = date('Y');
$new_query = new WP_Query( array('posts_per_page' => $carousel_count, 'meta_key' => 'wpb_post_views_count', 'orderby' => 'meta_value_num', 'order' => 'DESC','monthnum'=>$month,'year'=>$year ));
?>
<?php if ( $new_query->have_posts() ) : ?>
<?php while ( $new_query->have_posts() ) : $new_query->the_post(); ?>
<div class="item">
<?php the_post_thumbnail('popular-posts'); ?>
<h2><a class="popular-category"
<?php
$categories = get_the_category();
$separator = ", ";
$output = '';
if ($categories) {
foreach ($categories as $category) {
$output .= '<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>' . $separator;
}
echo trim($output, $separator);
}
?></a></h2>
<p>
<a class="popular-excerpt" href="<?php the_permalink(); ?>"><?php echo get_the_excerpt(); ?></a>
</p>
</div>
<?php endwhile; wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'Sorry, No Popular Posts Found ' ); ?></p>
<?php endif; ?>
</div>owl.carousel-init.js
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
});函数.php
unction templatename_add_owlcarousel() {
wp_enqueue_script ( 'jquery' );
wp_enqueue_script( 'owl-carousel-init', get_template_directory_uri() . '/js/owl.carousel-init.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'owl-carousel', get_template_directory_uri() . '/js/owl.carousel.js', array( 'jquery' ), false, true );
wp_enqueue_style( 'owlcarousel-style-theme', get_template_directory_uri() . '/css/owl.theme.css' );
wp_enqueue_style( 'owlcarousel-style', get_template_directory_uri() . '/css/owl.carousel.css' );
}
add_action( 'wp_enqueue_scripts', 'templatename_add_owlcarousel' );页脚.php
script src="<?php bloginfo('template_directory'); ?>/js/owl.carousel-init.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/owl.carousel.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script> 添加的文件
css/owl.carousel.css
css/owl.theme.css
js/owl.carousel.js
owl.carousel-init.js
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
responsive:{
0:{
items:1,
nav:true
},
600:{
items:2,
nav:false
},
1000:{
items:4,
nav:true,
loop:false
}
}
});
});
在 footer.php
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/owl.carousel.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/owl.carousel-init.js"></script>
希望这有帮助..
jQuery(document).ready(function ($) {
$(".owl-carousel").owlCarousel({
items: 1, // Display one image at a time
loop: true, // Infinite loop
nav: true, // Show navigation arrows
dots: true, // Show dots for navigation
autoplay: true, // Enable autoplay
autoplayTimeout: 5000, // Set the delay time for autoplay (in milliseconds)
autoplayHoverPause: true, // Pause autoplay when mouse is over the carousel
});
}); .owl-carousel .item img {
display: block;
margin: 0 auto;
border-radius: 10px;
}
.owl-nav {
position: absolute;
top: 40%;
left: -3%;
width: 106%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.owl-nav button {
background: #333;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://img.freepik.com/free-photo/abstract-eye-portrait-young-women-elegance-generated-by-ai_188544-9712.jpg?t=st=1732649057~exp=1732652657~hmac=a2ab7e001c140ab44507c42a9b45cdd6226c292f5d8579c5463f16926928268d&w=1800" alt="https://img.freepik.com/free-photo/abstract-eye-portrait-young-women-elegance-generated-by-ai_188544-9712.jpg?t=st=1732649057~exp=1732652657~hmac=a2ab7e001c140ab44507c42a9b45cdd6226c292f5d8579c5463f16926928268d&w=1800" style="max-width: 100%; height: auto;">
</div>
<div class="item">
<img src="https://jpeg.org/images/jpeg-home.jpg" alt="https://jpeg.org/images/jpeg-home.jpg" style="max-width: 100%; height: auto;">
</div>
<div class="item">
<img src="https://fileinfo.com/img/ss/xl/jpg_44-2.jpg" alt="https://fileinfo.com/img/ss/xl/jpg_44-2.jpg" style="max-width: 100%; height: auto;">
</div>
<div class="item">
<img src="https://media.istockphoto.com/id/1729573148/photo/modern-man-working-on-a-laptop-at-the-cafe.jpg?s=612x612&w=is&k=20&c=iBPyw37QmqS02sQdgS7d7kixNO7tG0I-So6J7ofW0QI="
alt="https://media.istockphoto.com/id/1729573148/photo/modern-man-working-on-a-laptop-at-the-cafe.jpg?s=612x612&w=is&k=20&c=iBPyw37QmqS02sQdgS7d7kixNO7tG0I-So6J7ofW0QI=" style="max-width: 100%; height: auto;">
</div>
</div>
</div>