Odd/even html in php 循环不正确交替

Question

我一直在此处搜索 questions/answers，但似乎找不到适用于我的代码的内容。

我找到的大多数解决方案都会导致整个页面出现 500 错误。它们通常只是 odd/even php 的片段，并且不能让我轻松地与我拥有的自定义 post 类型循环 php 集成。我可能只是没有把它放在正确的位置，但似乎没有任何效果。

我对 php 不是特别好，但这是我在工作中一直遇到的问题。

目标： 奇数 post 左边是头像，右边是简介。甚至 post 的头像都在右边，个人信息在左边。

下面是我的代码，确实在页面上加载（没有 500 错误），但不输出交替布局，只输出与我没有输出相同的布局没有 odd/even 代码。

<?php // theloop
    if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>  
    <?php $loop = new WP_Query( array( 'post_type' => 'team', 'posts_per_page' => -1, 'order' => 'ASC') ); ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <?php if ($wp_query->current_post % 2 == 0): ?>

        <div class="row team-member"> <!--ODD LAYOUT // HEADSHOT LEFT - BIO RIGHT-->
            <div class="container">
                <div class="row is-table-row">
                    <div class="col-sm-6 headshot" style="background-image:url(<?php the_field('bio_photo'); ?>);">
                        <div class="box">
                        </div>
                    </div>
                    <div class="col-sm-6 bio cream-bg">
                        <div class="box">
                            <?php if( get_field('additional_logo') ): ?>
                                    <div class="additional-logo"><img src="<?php the_field('additional_logo'); ?>"></div>
                            <?php endif; ?>
                            <h2><?php the_field('name'); ?></h2>
                            <div class="bio-content"><?php the_field('bio'); ?></div>

                           <div class="contact-container">
                               <h4>Contact me!</h4>
                                <?php if( get_field('phone_number') ): ?>
                                    <p><i class="fa fa-phone" aria-hidden="true"></i> <?php the_field('phone_number'); ?></p>
                                <?php endif; ?>
                                <p><i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:<?php the_field('email'); ?>" target="_top"><?php the_field('email'); ?></a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <?php else: ?>

        <div class="row team-member"> <!--EVEN LAYOUT // HEADSHOT RIGHT - BIO LEFT-->
            <div class="container">
                <div class="row is-table-row">
                    <div class="col-sm-6 bio cream-bg">
                        <div class="box">
                            <?php if( get_field('additional_logo') ): ?>
                                    <div class="additional-logo"><img src="<?php the_field('additional_logo'); ?>"></div>
                               <?php endif; ?>
                            <h2><?php the_field('name'); ?></h2>
                            <div class="bio-content"><?php the_field('bio'); ?></div>

                           <div class="contact-container">
                               <h4>Contact me!</h4>
                               <?php if( get_field('phone_number') ): ?>
                                    <p><i class="fa fa-phone" aria-hidden="true"></i> <?php the_field('phone_number'); ?></p>
                               <?php endif; ?>
                               <p><i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:<?php the_field('email'); ?>" target="_top"><?php the_field('email'); ?></a></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 headshot" style="background-image:url(<?php the_field('bio_photo'); ?>);">
                        <div class="box">
                        </div>
                    </div>

                </div>
            </div>
        </div>    

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

有没有我做错了什么，或者有更好的解决办法？我很沮丧，这在理论上是一个简单的请求，但我似乎无法正常工作。非常感谢任何帮助！

Answer 1

好的，专业提示：程序员是懒惰的。我们喜欢 DRY 原则。我们不喜欢重复代码，也不喜欢维护巨大的重复代码块。

因此，下面是您的循环的修改版本，它更简单，重复更少。我鼓励您考虑其他减少重复的方法，例如，使用 CSS 类（可能是浮点数）交替显示左侧或右侧，并且只渲染一个版本的 HTML一次。

具体问题是您没有访问正确查询对象的 $current_post 属性。您应该使用 $loop->current_post 而不是 $wpdb->current_post。但是，为了非常清楚/明确，我会手动设置一个计数器，然后使用它：

<?php // theloop
    if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>  
    <?php $loop = new WP_Query( array( 'post_type' => 'team', 'posts_per_page' => -1, 'order' => 'ASC') ); ?>
    <?php 
        // initialize the counter here
        $post_count = 0;
        while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <div class="row team-member">
            <div class="container">
                <div class="row is-table-row">
                   <?php 
                    // move the if condition here to reduce / simplify code
                    // reference (and increment) the counter
                    if ($post_count++ % 2 == 0): ?>
                    <div class="col-sm-6 headshot" style="background-image:url(<?php the_field('bio_photo'); ?>);">
                        <div class="box">
                        </div>
                    </div>
                    <div class="col-sm-6 bio cream-bg">
                        <div class="box">
                            <?php if( get_field('additional_logo') ): ?>
                                    <div class="additional-logo"><img src="<?php the_field('additional_logo'); ?>"></div>
                            <?php endif; ?>
                            <h2><?php the_field('name'); ?></h2>
                            <div class="bio-content"><?php the_field('bio'); ?></div>
                           <div class="contact-container">
                               <h4>Contact me!</h4>
                                <?php if( get_field('phone_number') ): ?>
                                    <p><i class="fa fa-phone" aria-hidden="true"></i> <?php the_field('phone_number'); ?></p>
                                <?php endif; ?>
                                <p><i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:<?php the_field('email'); ?>" target="_top"><?php the_field('email'); ?></a></p>
                            </div>
                        </div>
                    </div>
                 <?php else: ?>
                    <div class="col-sm-6 bio cream-bg">
                        <div class="box">
                            <?php if( get_field('additional_logo') ): ?>
                                    <div class="additional-logo"><img src="<?php the_field('additional_logo'); ?>"></div>
                               <?php endif; ?>
                            <h2><?php the_field('name'); ?></h2>
                            <div class="bio-content"><?php the_field('bio'); ?></div>

                           <div class="contact-container">
                               <h4>Contact me!</h4>
                               <?php if( get_field('phone_number') ): ?>
                                    <p><i class="fa fa-phone" aria-hidden="true"></i> <?php the_field('phone_number'); ?></p>
                               <?php endif; ?>
                               <p><i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:<?php the_field('email'); ?>" target="_top"><?php the_field('email'); ?></a></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 headshot" style="background-image:url(<?php the_field('bio_photo'); ?>);">
                        <div class="box">
                        </div>
                    </div>
                   <?php endif; ?>     
                </div>
            </div>
        </div>    
<?php endwhile; wp_reset_query(); ?>

Odd/even html in php 循环不正确交替

Odd/even html in php loop not alternating properly

php

wordpress

loops

count

custom-post-type