首页 > 解决方案 > 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>

标签: phpwordpressadvanced-custom-fields

解决方案


完成了,我通过滑块循环。

    <?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; ?>

推荐阅读