Question

我已将owl carousel 2（最新更新）添加到我的主题中。我成功地添加了旋转木马。但是，我无法控制自定义它。我已经尝试编辑owl-carousel.js文件，我已经尝试编辑我的owl.carousel-init.js文件，但它们都没有给我我想要的自定义。主要的是我只想要5个猫头鹰项目，目前有8个。我是否添加了所有正确的文件？这是我正在建设的第一个主题，所以我并非百分之百地确信我做的一切都是正确的。有人可以帮助发现我犯的错误，并帮我定制它？提前谢谢。

我设置了我的carousel.php文件以显示最新热门帖子*

前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();

carousel.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]

  });

});

的functions.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' );

footer.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>

FILES IV'E ADDED

CSS / owl.carousel.css

CSS / owl.theme.css

JS / owl.carousel.js

Answer 1

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>

希望这会有所帮助..

如何自定义猫头鹰轮播滑块

1 个答案: