ACF 滑块循环每个 post
ACF Slider looping with each post
这里是 WP 开发新手。
我正在使用带有 ACF 字段的滑块,我不知道如何让滑块显示下一个 acf post,而不用每个滑块只用 1 个 ACF post 循环整个滑块。
有没有一种方法可以编写 ACF,使其不会循环并直接转到下一个 post,例如每次都将 ID 更改为下一个 post。
或者我应该在滑块内循环?
What i mean
$posts = get_posts(array(
'post_type' => 'my_movies',
'posts_per_page' => 5,
'meta_key' => 'movie_cover',
'orderby' => 'date',
'order' => 'DESC'
));
if( $posts ): ?>
<ul>
<?php foreach( $posts as $post ):
setup_postdata( $post )
?>
<!-- home -->
<section class="home">
<!-- home bg -->
<div class="owl-carousel home__bg">
<div class="item home__cover" data-bg="<?php echo get_bloginfo("template_directory"); ?>/img/home/home__bg.jpg"></div>
<div class="item home__cover" data-bg="<?php echo get_bloginfo("template_directory"); ?>/img/home/home__bg2.jpg"></div>
<div class="item home__cover" data-bg="<?php echo get_bloginfo("template_directory"); ?>/img/home/home__bg3.jpg"></div>
<div class="item home__cover" data-bg="<?php echo get_bloginfo("template_directory"); ?>/img/home/home__bg4.jpg"></div>
</div>
<!-- end home bg -->
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="home__title"><b>NEW ITEMS</b> OF THIS SEASON</h1>
<button class="home__nav home__nav--prev" type="button">
<i class="icon ion-ios-arrow-round-back"></i>
</button>
<button class="home__nav home__nav--next" type="button">
<i class="icon ion-ios-arrow-round-forward"></i>
</button>
</div>
<div class="col-12">
<div class="owl-carousel home__carousel">
<div class="item">
<!-- card -->
<div class="card card--big">
<div class="card__cover">
<img class="imgcoversingle" src="<?php the_field('movie_cover') ?>" alt="Movie's Cover" >
<a href="#" class="card__play">
<i class="icon ion-ios-play"></i>
</a>
</div>
<div class="card__content">
<h3 class="card__title"><a href="#">I Dream in Another Language</a></h3>
<span class="card__category">
<a href="#">Action</a>
<a href="#">Triler</a>
</span>
<span class="card__rate"><i class="icon ion-ios-star"></i>8.4</span>
</div>
</div>
<!-- end card -->
</div>
<div class="item">
<!-- card -->
<div class="card card--big">
<div class="card__cover">
<img class="imgcoversingle" src="<?php the_field('movie_cover') ?>" alt="Movie's Cover" >
<a href="#" class="card__play">
<i class="icon ion-ios-play"></i>
</a>
</div>
<div class="card__content">
<h3 class="card__title"><a href="#">Benched</a></h3>
<span class="card__category">
<a href="#">Comedy</a>
</span>
<span class="card__rate"><i class="icon ion-ios-star"></i>7.1</span>
</div>
</div>
<!-- end card -->
</div>
完成,我在滑块上循环。
<?php
$args = array(
'post_type' => 'my_movies',
'posts_per_page' => -1,
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<!-- home -->
<section class="home">
<!-- home bg -->
<div class="owl-carousel home__bg">
<div class="item home__cover" data-bg="<?php echo get_bloginfo("template_directory"); ?>/img/home/home__bg.jpg"></div>
<div class="item home__cover" data-bg="<?php echo get_bloginfo("template_directory"); ?>/img/home/home__bg2.jpg"></div>
<div class="item home__cover" data-bg="<?php echo get_bloginfo("template_directory"); ?>/img/home/home__bg3.jpg"></div>
<div class="item home__cover" data-bg="<?php echo get_bloginfo("template_directory"); ?>/img/home/home__bg4.jpg"></div>
</div>
<!-- end home bg -->
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="home__title"><b>NEW ITEMS</b> OF THIS SEASON</h1>
<button class="home__nav home__nav--prev" type="button">
<i class="icon ion-ios-arrow-round-back"></i>
</button>
<button class="home__nav home__nav--next" type="button">
<i class="icon ion-ios-arrow-round-forward"></i>
</button>
</div>
<div class="col-12">
<div class="owl-carousel home__carousel">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="item">
<!-- card -->
<div class="card card--big">
<div class="card__cover">
<img src="<?php the_field('movie_cover'); ?>" alt="Movie's Cover">
<a href="#" class="card__play">
<i class="icon ion-ios-play"></i>
</a>
</div>
<div class="card__content">
<h3 class="card__title"><a href="<?php echo get_permalink( $id ) ?>"><?php the_field( 'title' ); ?></a></h3>
<span class="card__category">
<a href="#"><?php $genre_terms = get_field( 'genre' ); ?>
<?php if ( $genre_terms ): ?>
<?php foreach ( $genre_terms as $genre_term ): ?>
<?php echo $genre_term->name; ?>
<?php endforeach; ?>
<?php endif; ?></a>
</span>
<span class="card__rate"></i><?php the_field( 'release_date' ); ?></span>
</div>
</div>
<!-- end card -->
</div>
<?php endwhile; ?>
</div>
</div>
</div>
</div>
</section>
<!-- end home -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
这里是 WP 开发新手。 我正在使用带有 ACF 字段的滑块,我不知道如何让滑块显示下一个 acf post,而不用每个滑块只用 1 个 ACF post 循环整个滑块。 有没有一种方法可以编写 ACF,使其不会循环并直接转到下一个 post,例如每次都将 ID 更改为下一个 post。 或者我应该在滑块内循环?
What i mean
$posts = get_posts(array(
'post_type' => 'my_movies',
'posts_per_page' => 5,
'meta_key' => 'movie_cover',
'orderby' => 'date',
'order' => 'DESC'
));
if( $posts ): ?>
<ul>
<?php foreach( $posts as $post ):
setup_postdata( $post )
?>
<!-- home -->
<section class="home">
<!-- home bg -->
<div class="owl-carousel home__bg">
<div class="item home__cover" data-bg="<?php echo get_bloginfo("template_directory"); ?>/img/home/home__bg.jpg"></div>
<div class="item home__cover" data-bg="<?php echo get_bloginfo("template_directory"); ?>/img/home/home__bg2.jpg"></div>
<div class="item home__cover" data-bg="<?php echo get_bloginfo("template_directory"); ?>/img/home/home__bg3.jpg"></div>
<div class="item home__cover" data-bg="<?php echo get_bloginfo("template_directory"); ?>/img/home/home__bg4.jpg"></div>
</div>
<!-- end home bg -->
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="home__title"><b>NEW ITEMS</b> OF THIS SEASON</h1>
<button class="home__nav home__nav--prev" type="button">
<i class="icon ion-ios-arrow-round-back"></i>
</button>
<button class="home__nav home__nav--next" type="button">
<i class="icon ion-ios-arrow-round-forward"></i>
</button>
</div>
<div class="col-12">
<div class="owl-carousel home__carousel">
<div class="item">
<!-- card -->
<div class="card card--big">
<div class="card__cover">
<img class="imgcoversingle" src="<?php the_field('movie_cover') ?>" alt="Movie's Cover" >
<a href="#" class="card__play">
<i class="icon ion-ios-play"></i>
</a>
</div>
<div class="card__content">
<h3 class="card__title"><a href="#">I Dream in Another Language</a></h3>
<span class="card__category">
<a href="#">Action</a>
<a href="#">Triler</a>
</span>
<span class="card__rate"><i class="icon ion-ios-star"></i>8.4</span>
</div>
</div>
<!-- end card -->
</div>
<div class="item">
<!-- card -->
<div class="card card--big">
<div class="card__cover">
<img class="imgcoversingle" src="<?php the_field('movie_cover') ?>" alt="Movie's Cover" >
<a href="#" class="card__play">
<i class="icon ion-ios-play"></i>
</a>
</div>
<div class="card__content">
<h3 class="card__title"><a href="#">Benched</a></h3>
<span class="card__category">
<a href="#">Comedy</a>
</span>
<span class="card__rate"><i class="icon ion-ios-star"></i>7.1</span>
</div>
</div>
<!-- end card -->
</div>
完成,我在滑块上循环。
<?php
$args = array(
'post_type' => 'my_movies',
'posts_per_page' => -1,
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<!-- home -->
<section class="home">
<!-- home bg -->
<div class="owl-carousel home__bg">
<div class="item home__cover" data-bg="<?php echo get_bloginfo("template_directory"); ?>/img/home/home__bg.jpg"></div>
<div class="item home__cover" data-bg="<?php echo get_bloginfo("template_directory"); ?>/img/home/home__bg2.jpg"></div>
<div class="item home__cover" data-bg="<?php echo get_bloginfo("template_directory"); ?>/img/home/home__bg3.jpg"></div>
<div class="item home__cover" data-bg="<?php echo get_bloginfo("template_directory"); ?>/img/home/home__bg4.jpg"></div>
</div>
<!-- end home bg -->
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="home__title"><b>NEW ITEMS</b> OF THIS SEASON</h1>
<button class="home__nav home__nav--prev" type="button">
<i class="icon ion-ios-arrow-round-back"></i>
</button>
<button class="home__nav home__nav--next" type="button">
<i class="icon ion-ios-arrow-round-forward"></i>
</button>
</div>
<div class="col-12">
<div class="owl-carousel home__carousel">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="item">
<!-- card -->
<div class="card card--big">
<div class="card__cover">
<img src="<?php the_field('movie_cover'); ?>" alt="Movie's Cover">
<a href="#" class="card__play">
<i class="icon ion-ios-play"></i>
</a>
</div>
<div class="card__content">
<h3 class="card__title"><a href="<?php echo get_permalink( $id ) ?>"><?php the_field( 'title' ); ?></a></h3>
<span class="card__category">
<a href="#"><?php $genre_terms = get_field( 'genre' ); ?>
<?php if ( $genre_terms ): ?>
<?php foreach ( $genre_terms as $genre_term ): ?>
<?php echo $genre_term->name; ?>
<?php endforeach; ?>
<?php endif; ?></a>
</span>
<span class="card__rate"></i><?php the_field( 'release_date' ); ?></span>
</div>
</div>
<!-- end card -->
</div>
<?php endwhile; ?>
</div>
</div>
</div>
</div>
</section>
<!-- end home -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>