2017-07-07 46 views
2

我一直在寻找这里的问题/答案,但似乎无法找到适合我的代码的东西。奇数/甚至在PHP循环中的html不正确交替

我发现的大多数解决方案都会导致整个页面出现500错误。他们通常只是奇数/偶数的php片段,并不适合我轻松整合php自定义的post type循环。我可能只是没有把它放在正确的地方,但似乎没有任何工作。

我不是超级棒的php,但这是我一直有一个问题上班的一件事。

目标: 奇怪的职位有左头像,生物信息在右边。 即使帖子右侧有爆头,左侧是生物信息。

以下是我的代码,其中确实在页面上加载了(没有500错误),但不输出交替布局,只是输出相同的布局,就好像我没有奇数/偶数代码一样。

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

有什么我做错了这里,或较好地解决了呢?我很沮丧,理论上这是一个简单的请求,我似乎无法正常工作。任何帮助深表感谢!

+0

什么定义了左右布局? –

回答

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(); ?> 
+0

真棒,这工作完美!我也很感谢你的反馈:) – EFDesign