哪里循环更改自定义帖子类型中的每个帖子？答案

【问题标题】：where loop changes every post in custom post type?哪里循环更改自定义帖子类型中的每个帖子？
【发布时间】：2019-04-05 06:16:34
【问题描述】：

如何在 WordPress 中创建一种循环类型，其中每个帖子的图像向左或向右移动？ IE。第一张图片会在左边，第二张图片会向右，第三张图片会向左，依此类推......

我也在创建自定义帖子类型。

我正在尝试使用一种不同的帖子类型在 wordpress 中创建一个循环。

下面的代码运行良好，我也在使用高级自定义字段。

https://imgur.com/Z58QEjb

<?php
$loop = new WP_Query( array( 'post_type' => 'team') );
  if ( $loop->have_posts() ) :
  $Inc = 0; //start your counter
      while ( $loop->have_posts() ) : $loop->the_post();
    $person_image = get_field('person_image');
    $person_description = get_field('person_description');
    ?>
        <?php if($Inc % 2 == 0){ //if $inc can be created by multiplying 2.?>
            <div class="col-md-12">
              <div class="col-md-1">
                <div>
                  <img src="<?php bloginfo('template_url'); ?>/images/dot1.png" class="img-responsive dotimages">
                </div>
              </div> <!--.col-md-1 -->
              <div class="col-md-10 row">
                <div class="clientimagesarea">
                  <div class="col-md-6">
                    <div>
                      <img src="<?php echo $person_image; ?>" class="img-responsive center-block peopleimages">
                      <?php //the_post_thumbnail(); ?>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="clienttext clienttextmarleft">
                      <?php echo $person_description; ?>
                    </div>
                    <div class="col-md-12">
                      <div class="row ">
                        <div class="col-md-12 col-xs-12 col-sm-12 paddmargin0">
                          <div class="col-md-2 col-sm-2 col-xs-4">
                            <div><img src="<?php bloginfo('template_url'); ?>/images/email-icon2.png" class="img-responsive clientemailicon text-left"></div>
                          </div>
                          <div class="col-md-9 col-sm-9 col-xs-8">
                            <div class="emailid">abx@sitename.com</div>
                          </div>
                        </div>
                        <div class="col-md-12 col-xs-12 col-sm-12 paddmargin0">
                          <div class="col-md-2 col-sm-2 col-xs-4">
                            <div><img src="<?php bloginfo('template_url'); ?>/images/call-icon2.png" class="img-responsive clientemailicon2 "></div>
                          </div>
                          <div class="col-md-9 col-sm-9 col-xs-8">
                            <div class="emailid2">+41 79 777 66 45</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            <?php //the_post_thumbnail(); ?>
            </div>
        <?php }else { //it cant?>
          <div class="row col-md-6 col-md-offset-3">
            <div class="deviderline">
            </div>
          </div>
          <div class="col-md-12">
            <div class="row col-md-10 col-md-offset-1">
              <div class="row clientimagesarea">
                <div class="col-md-6">
                  <div class="clienttext">
                    <p>
                      <?php echo $person_description; ?>
                    </p>
                  </div>
                  <div class="col-md-12">
                    <div class="row iconmarginleft">
                      <div class="col-md-12 col-xs-12 col-sm-12 paddmargin0">
                        <div class="col-md-2 col-sm-2 col-xs-4">
                          <div><img src="<?php bloginfo('template_url'); ?>/images/email-icon2.png" class="img-responsive clientemailicon text-left"></div>
                        </div>
                        <div class="col-md-9 col-sm-9 col-xs-8">
                          <div class="emailid">abx@sitename.com</div>
                        </div>
                      </div>
                      <div class="col-md-12 col-xs-12 col-sm-12 paddmargin0">
                        <div class="col-md-2 col-sm-2 col-xs-4">
                          <div><img src="<?php bloginfo('template_url'); ?>/images/call-icon2.png" class="img-responsive clientemailicon2 "></div>
                        </div>
                        <div class="col-md-9 col-sm-9 col-xs-8">
                          <div class="emailid2">+91 1234567890</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div>
                    <img src="<?php echo $person_image; ?>" class="img-responsive center-block peopleimages clienttextmarleft">
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-1">
              <div>
                <img src="<?php bloginfo('template_url'); ?>/images/dot3.png" class="img-responsive dotimage3">
              </div>
            </div>
          </div>
        <?php } ?>
    <?php
        $Inc++;
        endwhile;
endif;
wp_reset_postdata();
?>

【问题讨论】：

看来这里可能已经有了某种答案wordpress.stackexchange.com/questions/72348/…
但他们不能使用自定义帖子类型
你想要的结果只是 CSS 只是使用 :nth-child(even) 和 :nth-chil(odd) 定位并使用 css 将它们移动到任一侧

标签： wordpress custom-post-type

【解决方案1】：

您可以为每个帖子分配一个更改的类。

例子：

$query = new WP_Query( $args );
$x=0;

if( $query->have_posts() ) :
  while( $query->have_posts() ) :

  $layout_array = array('image_left','image_right');
  $classImage = $layout_array[$x%2];
  $x++;

  /*do your stuff here*/
  /*Example: <div class="'.$classImage.'">asdf</div> */

  endwhile;
  wp_reset_postdata();

else :
   esc_html_e( 'no posts found', 'text-domain' );
endif;

【讨论】：