修改此循环以适合我的jQuery滑块(幻灯片)

时间:2012-03-07 作者:Johan Dahl

我正在尝试制作一个滑块,它从特定的自定义帖子类型中获取缩略图,并为每个“幻灯片”显示其中的一个。我让滑块和缩略图正常工作,但我不确定如何修改循环,使其在容器中显示4篇文章,然后重复接下来的4篇文章,依此类推。

我的循环如下所示:

<div id="slides">
    <div class="slides_container">

        <?php $loop = new WP_Query(array(\'post_type\' => \'fastighet\', \'posts_per_page\' => -1, \'orderby\'=> \'ASC\')); ?>
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

            <div class="slide">
                <?php $url = get_post_meta($post->ID, "url", true);
                if($url!=\'\') {
                    echo \'<a href="\'.$url.\'">\';
                    echo the_post_thumbnail(\'admin-list-thumb\');
                    echo \'</a>\';
                } else {
                    echo the_post_thumbnail(\'admin-list-thumb\');
                } ?>
                <div class="caption">
                    <h5><?php the_title(); ?></h5>
                </div>
            </div>

        <?php endwhile; ?>
        <?php wp_reset_query(); ?>

    </div> <!-- end .slides_container -->

    <a href="#" class="prev">prev</a>
    <a href="#" class="next">next</a>

</div> <!-- end .slides -->
正如您所看到的,每一个具有slide类的div都会变成一个幻灯片。但我如何才能让它在每一张这样的幻灯片中放4篇帖子,然后在另一张幻灯片中再放4篇帖子等等。

任何帮助或提示都将不胜感激!

2 个回复
最合适的回答,由SO网友:Sisir 整理而成

尝试了非常简单的数学。<div class="slide"> 将在每4篇文章后打印。所以,如果用老派逻辑$i%4 == 0

<div class="slides_container">

                        <?php 
                            $args = array(
                                                        \'post_type\' => \'fastighet\',
                                                        \'numberposts\' => -1,
                                                        \'orderby\' => \'ASC\'
                                                    );
                            $posts = get_posts($args);
                            ?>
                        <?php $i = 0; foreach($posts as $post): ?>
                            <?php if($i%4 == 0): ?>
                                <div class="slide">
                            <?php endif; 
                                        $url = get_post_meta($post->ID, "url", true);
                                        if($url) {
                                                echo \'<a href="\'.$url.\'">\';
                                                echo the_post_thumbnail(\'admin-list-thumb\');
                                                echo \'</a>\';
                                        } else {
                                                echo the_post_thumbnail(\'admin-list-thumb\');
                                        } ?>
                                        <div class="caption">
                                                <h5><?php the_title(); ?></h5>
                                        </div>
                              <?php if($i%4 == 3): ?></div> <!--end .slide--><?php endif; ?> 

                        <?php $i++; endforeach; ?>

                </div> <!-- end .slides_container -->
让我知道进展如何。谢谢

SO网友:Kokarn

几乎正确。唯一的问题是,您实际上不想在同一索引上同时打印开始和结束。下面的代码在类似的情况下也适用于我。唯一真正的变化是$i从1开始,它打印的是不同计数的幻灯片打开和关闭标签。

还随意清理了一下代码。

<div id="slides">
    <div class="slides_container">

        <?php 
        $loop = new WP_Query( array( 
            \'post_type\' => \'fastighet\', 
            \'posts_per_page\' => -1 
        ) ); 
        $i = 1; 
        while ( $loop->have_posts() ) : 
            $loop->the_post(); 
            if( $i % 4 == 1 ) : 
                ?>
                <div class="slide">
                <?php 
            endif; 
            ?>
            <div class="fastighet-slider-entry">
                <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
                <div class="caption">
                    <h5><?php the_title(); ?></h5>
                </div>
            </div> <!-- end .fastighet-slider-entry -->
            <?php 
            if( $i % 4 == 0 ) : 
                ?>
                </div>
                <?php 
            endif; 
            ++$i; 
        endwhile; 
        wp_reset_query(); 
        ?>

    </div> <!-- end .slides_container -->

    <a href="#" class="prev">prev</a>
    <a href="#" class="next">next</a>

</div> <!-- end .slides -->

结束

相关推荐

jQuery .load and WP function

我正在尝试获取Quick Chat WordPress plugin 仅在单击按钮时加载。我当前正在使用此代码:$(\'#chat\').load(\'path to my wp template/quick-chat.php\'); 。。。文件“快速聊天”的位置。php’有一个WordPress函数,可以调用快速聊天。然而,当文件加载时,它无法识别函数。这就像是在WordPress之外。有什么想法吗?