PHPループ内の奇数/偶数htmlが正しく交互にならない

Question

ここで質問/回答を通じて検索していますが、自分のコードで動作するものを見つけることができないようです。

私が見つけた解決策のほとんどは、ページ全体が500エラーを発生させる原因となります。彼らは一般的に奇妙な/ PHPの断片だけで、私が持っているカスタムポスト型ループPHPと簡単に統合するために働いていません。私はおそらくそれを正しい場所に置いていないだろうが、何も働いていないようだ。

私はPHPですばらしいことではありませんが、これは私が常に問題を抱えていた1つのことです。

ゴール： 奇数のポストは、左側に顔写真、右側にバイオ情報が表示されます。 投稿でさえ、右の顔写真、左のバイオ情報があります。

以下は私のコードです。はです（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(); ?> 

ここで間違っていたことはありますか、それとも改善策がありますか？私はこれが理論的に単純な要求であり、私はちょうどうまく動作しないように思えないということに不満を持っています。どんな助けでも大歓迎です！

Answer 1

OK、プロのヒント：プログラマは怠惰です。我々はDRYの原理が好きです。私たちはコードを複製することを好まず、複製されたコードの巨大なブロックを維持したくありません。

以下は、ループの修正バージョンです。これは、複製が少なく、ややシンプルです。たとえば、CSSクラス（浮動小数点数）を使用して左または右に置き換えて、HTMLの1つのバージョンのみをレンダリングするなど、重複を減らすための他の方法を検討することをおすすめします。

特定の問題は、正しいクエリオブジェクトの$current_postプロパティにアクセスしていないことです。 $wpdb->current_postの代わりに$loop->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(); ?>