在不同列中循环自定义帖子类型的帖子

时间:2018-01-10 03:25:56

标签: php wordpress loops custom-post-type

我有一个自定义帖子类型“case_studies”我想要这个帖子,以下列方式安排。

<div class="col-sm-3  nopadding">
    IMAGE
</div>
<div class="col-sm-3 ">
    TEXT
</div>
<div class="col-sm-3  nopadding">
    IMAGE
</div>
<div class="col-sm-3 ">
    TEXT
</div>
<!--      
Column Ends  
3rd & 4th posts
-->
<div class="item">
    <div class="col-sm-6 nopadding">
        IMAGE
    </div>
    <div class="col-sm-6">
        TEXT
    </div>
</div>
<div class="item">
    <div class="col-sm-6 nopadding">
        IMAGE
    </div>
    <div class="col-sm-6">
        TEXT
    </div>
</div>
<!--
Column Ends
 -->

然后再次&amp;之后的第二个帖子类型列第4&amp;第5个帖子类型列相同的循环继续。请注意,每个列在2个帖子后结束&amp;风格是不同的。我怎么能实现这个

简短的奇数列必须有2个用col-sm-3包裹的帖子,偶数列也有2个帖子,每个包含col-sm-6。

1 个答案:

答案 0 :(得分:0)

试试这段代码。

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