如何自定義貓頭鷹傳送帶滑塊

-1

我已將貓頭鷹傳送帶2（最新更新）添加到我的主題中。我已成功添加了輪播。但是，我無法控制定製它。我試過編輯owl-carousel.js文件，我試着編輯我的owl.carousel-init.js文件，但他們都沒有給我我想要的定製。主要的是我只需要5個貓頭鷹項目，目前有8個。我是否添加了所有正確的文件？這是我正在構建的第一個主題，所以我不是100％自信，我做的一切都是正確的。有人能幫我發現我犯的錯誤，並幫助我定製它嗎？提前致謝。如何自定義貓頭鷹傳送帶滑塊

設置我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

來源

2017-06-14 user6738171

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>

希望這有助於..

來源

2017-06-15 01:47:16

如何自定義貓頭鷹傳送帶滑塊

回答

相關問題