wordpress - 如何创建一个循环，其中循环更改自定义帖子类型中的每个帖子？

Question

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

我附上图片。提供一些代码或示例

提前致谢

https://imgur.com/Z58QEjb

在此处输入图像描述

<?php
$loop = new WP_Query( array( 'post_type' => 'case_studies') );
$Inc = 1;

if ( $loop->have_posts() ) :
    while ( $loop->have_posts() ) : $loop->the_post(); ?>   

        <?php if($Inc==1){ ?>
        <div class="col-sm-3  nopadding">
            <?php the_post_thumbnail(); ?>
        </div>
        <div class="col-sm-3 ">
            <h2><?php echo get_the_title(); ?></h2>
        </div>
        <?php }else if($Inc==2){ ?>
        <div class="col-sm-3  nopadding">
            <?php the_post_thumbnail(); ?>
        </div>
        <div class="col-sm-3 ">
            <h2><?php echo get_the_title(); ?></h2>
        </div>


        <?php }else if($Inc==3){ ?>
        <div class="item">
            <div class="col-sm-6 nopadding">
                <?php the_post_thumbnail(); ?>
            </div>
            <div class="col-sm-6">
                <h2><?php echo get_the_title(); ?></h2>
            </div>
        </div>
        <?php }else if($Inc==4){ ?>
        <div class="item">
            <div class="col-sm-6 nopadding">
                <?php the_post_thumbnail(); ?>
            </div>
            <div class="col-sm-6">
                <h2><?php echo get_the_title(); ?></h2>
            </div>
        </div>
        <?php } ?>
    <?php 
        if($Inc==4){
            $Inc =1;
        }
        $Inc++;
        endwhile;       
endif;
wp_reset_postdata();

?>

    <?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">[e-mail]</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">[phone]</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">[e-mail]</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">[phone]</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();
?>

标签： wordpresscustom-post-type

Answer 1

您可以按照以下代码

<div class="row">


<?php
$category = get_the_category();
$slug = $category[0]->slug;
$args = array(
  'post_type'  => 'post',
  'category_name'=>$slug,
  'posts_per_page'=> 1,

);
$query = new WP_Query( $args );
while ( $query->have_posts() ) : $query->the_post();?>


   <div class="container">
       <div class="img-box">
           <?php echo get_the_post_thumbnail(get_the_ID());?>
           </img>
       </div>
       <div class="content">
           <?php 
                 $content = get_the_content();
                 echo wp_trim_words( get_the_content(), 25, '' );
             ?>
       </div>
   </div>

<?php endwhile; ?>

</div>

.container{
display: flex;
  flex-wrap: wrap;
  align-content: space-between;
 margin-bottom:40px;
}
.img-box{
  width:40%;
}
img{
 max-width:100%;
}
.content{
  width:60%
}
.container:nth-child(even){
  flex-direction: row-reverse;

}

<div class="row">
	<div class="container">
		<div class="img-box">
			<img src="https://dummyimage.com/600x400/000/fff">
		</div>
		<div class="content">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
		</div>
	</div>
	<div class="container">
		<div class="img-box">
			<img src="https://dummyimage.com/600x400/000/fff">
		</div>
		<div class="content">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
		</div>
	</div>