Question

在wordpress中，我从数据库中获取数据。问题是我想以不同的顺序显示数据：

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

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

现在我得到的数据是这样的：

$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; ?>

但它不按照参考文献工作。那么有人可以告诉我如何解决这个问题吗？

Answer 1

这是重复第一部分的代码：

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

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

我认为可以通过稍微调整if部分来完成第二部分。

编辑：为您的布局设计if部分：

            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';
            }

使用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>

尝试一下，并说它是否有效：）

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

1 个答案: