Wordpress 自定义循环答案

【问题标题】：Wordpress custom loopWordpress 自定义循环
【发布时间】：2017-08-31 15:59:30
【问题描述】：

需要帮助来制作这样的循环： http://prntscr.com/eswtyt

带有 2 种箭头样式（左和右）。

1) 带有左箭头的项目 2) 带有左箭头的项目 3) 带有右箭头的项目 4) 带有右箭头的项目 5) 带左箭头的项目 6) 带左箭头的项目等等……

我现在的循环：

<?php 
                    $services = get_posts(array(
                        'meta_query' => array(
                            array(
                                'key' => 'enable_service_in_homepage',
                                'compare' => '==',
                                'value' => '1'
                            )
                        )
                    ));

                    if( $services ): 
                ?>
                <?php foreach( $services as $post ):  setup_postdata( $post ) ?>
                    <div class="col-sm-6 nopadding">
                        <div class="item item-left">
                            <div class="col-sm-6 nopadding hidden-xs">
                                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(700, 500) ); ?></a>
                                <div class="arrow-left"></div>
                            </div>
                            <div class="col-md-6 nopadding">
                                <div class="content">
                                    <h2><?php the_title(); ?></h2>
                                    <p><?php echo wp_trim_words( get_the_content(), 35, '...' ); ?></p>
                                    <a href="<?php the_permalink(); ?>" class="service-button"><?php echo __('ƏTRAFLI','altus'); ?></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Start right arrow -->
                        <div class="col-sm-6 nopadding">
                            <div class="item item-right">
                                <div class="col-md-6 nopadding">
                                    <div class="content">
                                        <h2><?php the_title(); ?></h2>
                                        <p><?php echo wp_trim_words( get_the_content(), 35, '...' ); ?></p>
                                        <a href="<?php the_permalink(); ?>" class="service-button"><?php echo __('ƏTRAFLI','altus'); ?></a>
                                    </div>
                                </div>
                                <div class="col-sm-6 nopadding hidden-xs">
                                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(700, 500) ); ?></a>
                                    <div class="arrow-right"></div>
                                </div>
                            </div>
                        </div>
                    <!-- End right arrow -->
                <?php endforeach; ?>
                <?php wp_reset_postdata(); ?>
                <?php endif; ?>

【问题讨论】：

那么，问题是什么？
对不起我的英语不好。我需要帮助制作如图所示的布局，在我的循环中现在只有左箭头，有评论用右箭头开始另一个布局。需要像这样的网格：1）带左箭头的项目 2）带左箭头的项目 3）带右箭头的项目 4）带右箭头的项目 5）带左箭头的项目 6）带左箭头的项目
我建议您省略代码的后半部分（从右箭头注释开始及以后）并从代码的顶部删除“arrow-left”类并将其替换为交替打印“左箭头”和“右箭头”。您是否正在寻求帮助以了解如何进行交替？
请添加小例子，我认为需要第二个布局，比如我的带有注释的块，右边的每个第二行图像和左边的内容

标签： wordpress foreach while-loop

【解决方案1】：

可能有一种更简洁的方法，但您可以使用array_chunk() 来完成它：

<?php
$services = get_posts(array(
    'meta_query' => array(
        array(
            'key' => 'enable_service_in_homepage',
            'compare' => '==',
            'value' => '1'
        )
    )
));
?>
<?php if( $services ): ?>
    <?php $services_chunked = array_chunk( $services, 2 ); ?>
    <?php foreach( $services_chunked as $key => $posts ): ?>
        <?php $alignment = $key % 2 ? "left" : "right"; ?>
        <?php foreach ( $posts as $post ) : setup_postdata( $post ); ?>
            <div class="col-sm-6 nopadding">
                <div class="item item-<?= $alignment ?>">
                    <div class="col-sm-6 nopadding hidden-xs">
                        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(700, 500) ); ?></a>
                        <div class="arrow-<?= $alignment ?>"></div>
                    </div>
                    <div class="col-md-6 nopadding">
                        <div class="content">
                            <h2><?php the_title(); ?></h2>
                            <p><?php echo wp_trim_words( get_the_content(), 35, '...' ); ?></p>
                            <a href="<?php the_permalink(); ?>" class="service-button">Altus</a>
                        </div>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
        <?php wp_reset_postdata(); ?>
    <?php endforeach; ?>
<?php endif; ?>

【讨论】：