Question

如何在WordPress中创建一种循环，其中每个帖子的图像向左或向右移动？即第一个帖子图像将保留，第二个帖子图像将保留，第三个帖子图像将保留，依此类推...

我还要创建自定义帖子类型。

我正在尝试用一种不同的帖子类型在wordpress中进行循环。

下面的代码工作正常，我也使用高级自定义字段。

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

Answer 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;

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

1 个答案: