php - ACF 滑块与每个帖子循环
问题描述
初学者 WP 开发人员在这里。我正在研究一个带有 ACF 字段的滑块,我不知道如何使滑块显示下一个 acf 帖子,而不是循环整个滑块,每个滑块只有 1 个 ACF 帖子。有没有办法编写 ACF,使其不会循环并转到下一篇文章,例如每次都将 ID 更改为下一篇文章。还是我应该在滑块内循环?
$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; ?>
推荐阅读
- image - Unable to render image on UI in jsp page of Spring MVC Application
- python - Merge multiple dataframes - how to assign column names automatically?
- soapui - READYAPI - Run multiple data per iteration on datasource
- android - Bazel + Android + Java8 complains about non-referenced API level 13
- sql - 下一篇:jdbc 如何允许 SQL Server 多条语句
- javascript - 如何按id过滤和获取数组?
- javascript - 在不使用 jquery 的情况下,如何在用户滚动 100px 后显示 div?
- ios - 我们可以检查允许应用程序请求跟踪切换是否打开
- c# - 如何使用 SocketIOClient 将 C# 连接到 SocketIO
- javascript - 重定向而不重新加载页面