-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