wordpress以不同的格式获得后循环

Question

In wordpress, I am getting the data from database. The problem is that I want to show the data in different order like this:

--------------------------
    data-1  | data-2
--------------------------
data-3 | data-4 | data-5
_________________________

data-6 | data-7 | data-8
--------------------------
    data-9  | data-10
--------------------------

For now I am getting the data like this:

$args = array( 'post_type' => 'press', 'posts_per_page' => '-1');
            $loop = new WP_Query( $args );
            $i = 0;
            while ( $loop->have_posts() ) : $loop->the_post();
            $count = $loop->post_count;
            foreach( $loop as $test ) {
                echo $test->post_title;
                if( $i % 2 == 0 ) {

        ?>
         <div class="two-column-rows pressrelease-columns">
            <div class="first"><?php echo $test->post_title; ?></div>
            <div class=""><?php echo $test->post_title; ?></div>
        </div>
        <?php } ?>
        <?php if( $i % 2 == 1 ) { ?>
         <div class="three-column-rows pressrelease-columns">
            <div class="first"><?php echo $test->post_title; ?></div>
            <div class=""><?php echo $test->post_title; ?></div>
            <div class=""><?php echo $test->post_title; ?></div>                        
        </div>
        <?php 
            }
            $i++;
        }
        endwhile; ?>

But its not working as per the reference. So can someone tell me how to resolve this?

Answer 1

This is the code that repeats the first part:

<?php

$args = array( 
    'post_type' => 'press',
    'posts_per_page' => '-1'
    );

$post = new WP_Query( $args );

$i = 0;
$out = '';
if ($post->have_posts()){
    while ($post->have_posts()){
        $post->the_post();

        $i++;
        if ($i%5 == 0) {
            $postclass = "narrow last";
        } elseif($i%5 == 1) {
            $postclass = "wide";
        } elseif($i%5 == 2) {
            $postclass = "wide last";
        } elseif($i%2 == 3) {
            $postclass = "narrow";
        } else {
            $postclass = 'narrow';
        }

        $out. = '<div class="post '. $postclass.'">'
                 .$test->post_title.'
        </div>';

    }
}
wp_reset_postdata();

echo '<div class="wrapper">'.$out.'</div>;

The html would be something like this

.wrapper{
    display: block;
    width: 100%;
    clear: both;
}

.post{
    background: red;
    height: 200px;
    margin-bottom: 10px;
    margin-right: 1%;
    float: left;
}

.narrow{
    width: 32.65%;
}

.wide{
    width: 49.5%;
}
.last{
margin-right:0;
}

<div class="wrapper">
    <div class="post wide"></div>
    <div class="post wide last"></div>
    <div class="post narrow"></div>
    <div class="post narrow"></div>
    <div class="post narrow last"></div>
    <div class="post wide"></div>
    <div class="post wide last"></div>
    <div class="post narrow"></div>
    <div class="post narrow"></div>
    <div class="post narrow last"></div>
    <div class="post wide"></div>
    <div class="post wide last"></div>
    <div class="post narrow"></div>
    <div class="post narrow"></div>
    <div class="post narrow last"></div>
</div>

I think that the second part can be done, just by adjusting the if part a bit.

EDIT: Figured the if part as well for your layout:

            if ($i%10 == 0) {
                $postclass = "wide last";
            } elseif($i%10 == 1) {
                $postclass = "wide";
            } elseif($i%10 == 2) {
                $postclass = "wide last";
            } elseif($i%10 == 3) {
                $postclass = "narrow";
            } elseif($i%10 == 4) {
                $postclass = "narrow";
            } elseif($i%10 == 5) {
                $postclass = "narrow last";
            } elseif($i%10 == 6) {
                $postclass = "narrow";
            } elseif($i%10 == 7) {
                $postclass = "narrow";
            } elseif($i%10 == 8) {
                $postclass = "narrow last";
            } else {
                $postclass = 'wide';
            }

With HTML

.wrapper{
    display: block;
    width: 100%;
    clear: both;
}

.post{
    background: red;
    height: 200px;
    margin-bottom: 10px;
    margin-right: 1%;
    float: left;
}

.narrow{
    width: 32.65%;
}

.wide{
    width: 49.5%;
}
.last{
margin-right:0;
}

<div class="wrapper">
    <div class="post wide"></div>
    <div class="post wide last"></div>
    <div class="post narrow"></div>
    <div class="post narrow"></div>
    <div class="post narrow last"></div>
    <div class="post narrow"></div>
    <div class="post narrow"></div>
    <div class="post narrow last"></div>
    <div class="post wide"></div>
    <div class="post wide last"></div>
    <div class="post wide"></div>
    <div class="post wide last"></div>
    <div class="post narrow"></div>
    <div class="post narrow"></div>
    <div class="post narrow last"></div>
        <div class="post narrow"></div>
    <div class="post narrow"></div>
    <div class="post narrow last"></div>
    <div class="post wide"></div>
    <div class="post wide last"></div>
</div>

Try it out and say if it works :)

</div>