1

我想查询我的“投资组合”自定义帖子类型的 WP 循环，并将返回的投资组合帖子分成 3 个组（即将每 3 个帖子包装在一个 div 中）。

然后我想将每 2 组 3 包装在另一个 div 中。

例如，如果总共有 11 个投资组合帖子，我想要的这个查询的 html 输出将如下所示：

// This is the HTML I'd like to generate on my portfolio posts archive page. This is assuming there are a total of 11 posts in the database:

<div id="page_wrap">

<div id="wrap_6_posts">

    <div id="wrap_3_posts" class="top-row">
        <article class="portfolio-post FIRST"> Post 1 </article>
        <article class="portfolio-post"> Post 2 </article>
        <article class="portfolio-post"> Post 3 </article>
    </div>

    <div id="wrap_3_posts" class="bottom-row">
        <article class="portfolio-post FIRST"> Post 4 </article>
        <article class="portfolio-post"> Post 5 </article>
        <article class="portfolio-post"> Post 6 </article>
    </div>

</div>

<div id="wrap_6_posts">

    <div id="wrap_3_posts" class="top-row">
        <article class="portfolio-post FIRST"> Post 7 </article>
        <article class="portfolio-post"> Post 8 </article>
        <article class="portfolio-post"> Post 9 </article>
    </div>

    <div id="wrap_3_posts" class="bottom-row">
        <article class="portfolio-post FIRST"> Post 10 </article>
        <article class="portfolio-post"> Post 11 </article>
    </div>

</div>

我是 PHP 新手，所以我试图从其他类似场景中拼凑一些代码，但我找不到任何解决我的特定问题的线程，所以我不确定我所做的是否正确。我很迷茫

这是我尝试过的：

<?php
$args = array( 'post_type' => 'portfolio' );
$loop = new WP_Query( $args );
$i = 0;

echo'<div id="page_wrap"><div id="wrap_6_posts"><div id="wrap_3_posts" class="top-row">';

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

    if ($i % 6 == 0 && $i > 0) {
        echo '</div></div><div id="wrap_6_posts"><div id="wrap_3_posts" class="top-row">';
    } else if ($i % 3 == 0 && $i > 0) {
        echo '</div><div id="wrap_3_posts" class="bottom-row">';
    }
    echo '<article class="portfolio-post' . ($i % 3 == 0 ? ' first' : '') . '">';

?>
        <h2 class="headline portfolio-headlines" rel="bookmark">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h2>
<?php
endwhile;

    echo '</article>';
    $i++;

echo '</div></div></div>';
?>

输出如下所示：

<div id="page_wrap">
<div id="wrap_6_posts">
    <div id="wrap_3_posts" class="top-row">
        <article class="portfolio-post first">      
            post 1

        <article class="portfolio-post first">      
            post 2

        <article class="portfolio-post first">      
            post 3

        <article class="portfolio-post first">      
            post 4

        <article class="portfolio-post first">      
            post 5

        <article class="portfolio-post first">      
            post 6

        <article class="portfolio-post first">      
            post 7

        <article class="portfolio-post first">      
            post 8

        <article class="portfolio-post first">      
            post 9

        <article class="portfolio-post first">      
            post 10

        <article class="portfolio-post first">      
            post 11
        </article>

    </div>
</div>

任何人都可以理解这一点吗？逻辑对我来说是一个挑战，但也只是让语法正确并确保代码有效地与 WP 对话增加了挑战。

预先感谢您的任何帮助！

4

2 回答 2

2

尝试在 while 循环内进行增量，

    <?php
$args = array( 'post_type' => 'portfolio' );
$loop = new WP_Query( $args );
$i = 0;

echo'<div id="wrap_6_posts">' . "\n" . '<div id="wrap_3_posts" class="top-row">' . "\n";

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

    if ($i % 6 == 0 && $i > 0) {
        echo '</div>' . "\n" . '</div>' . "\n" . '<div id="wrap_6_posts">'  . "\n" . '<div id="wrap_3_posts" class="top-row">' . "\n";
    } else if ($i % 3 == 0 && $i > 0) {
        echo '</div>' . "\n" . '<div id="wrap_3_posts" class="bottom-row">' . "\n";
    }

echo '<article class="portfolio-post' . ($i % 3 == 0 ? ' first' : '') . '">' . "\n";

?>
<h2 class="headline portfolio-headlines" rel="bookmark">
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<?php

echo '</article>' . "\n";
$i++;

endwhile;

echo '</div>' . "\n" . '</div>';
?>
于 2013-08-08T07:58:18.803 回答
2

在@jothikannan 和他将我的$i++增量计数器包含在while循环中的指令的帮助下，我还发现我需要echo '</article>';在while循环中包含关闭。

所以这是最终的代码：

<?php
$args = array( 'post_type' => 'portfolio' );
$loop = new WP_Query( $args );
$i = 0;

echo'<div id="wrap_6_posts">' . "\n" . '<div id="wrap_3_posts" class="top-row">' . "\n";

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

    if ($i % 6 == 0 && $i > 0) {
        echo '</div>' . "\n" . '</div>' . "\n" . '<div id="wrap_6_posts">'  . "\n" . '<div id="wrap_3_posts" class="top-row">' . "\n";
    } else if ($i % 3 == 0 && $i > 0) {
        echo '</div>' . "\n" . '<div id="wrap_3_posts" class="bottom-row">' . "\n";
    }

echo '<article class="portfolio-post' . ($i % 3 == 0 ? ' first' : '') . '">' . "\n";

?>
<h2 class="headline portfolio-headlines" rel="bookmark">
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<?php

echo '</article>' . "\n";
$i++;

endwhile;

echo '</div>' . "\n" . '</div>';
?>

这成功地为我的投资组合存档页面输出了以下 html（对于这个示例，我的数据库中只有 8 个投资组合帖子）：

<div id="wrap_6_posts">
<div id="wrap_3_posts" class="top-row">
<article class="portfolio-post first">
<h2 class="headline portfolio-headlines" rel="bookmark">

    <a href="http://example.com/portfolio/post-1/">Post 1</a>

</h2>

</article>
<article class="portfolio-post">
<h2 class="headline portfolio-headlines" rel="bookmark">

    <a href="http://example.com/portfolio/post-2/">Post 2</a>

</h2>

</article>
<article class="portfolio-post">
<h2 class="headline portfolio-headlines" rel="bookmark">

    <a href="http://example.com/portfolio/post-3/">Post 3</a>

</h2>

</article>
</div>
<div id="wrap_3_posts" class="bottom-row">
<article class="portfolio-post first">
<h2 class="headline portfolio-headlines" rel="bookmark">

    <a href="http://example.com/portfolio/post-4/">Post 4</a>

</h2>

</article>
<article class="portfolio-post">
<h2 class="headline portfolio-headlines" rel="bookmark">

    <a href="http://example.com/portfolio/post-5/">Post 5</a>

</h2>

</article>
<article class="portfolio-post">
<h2 class="headline portfolio-headlines" rel="bookmark">

    <a href="http://example.com/portfolio/post-6/">Post 6</a>

</h2>

</article>
</div>
</div>
<div id="wrap_6_posts">
<div id="wrap_3_posts" class="top-row">
<article class="portfolio-post first">
<h2 class="headline portfolio-headlines" rel="bookmark">

    <a href="http://example.com/portfolio/post-7/">Post 7</a>

</h2>

</article>
<article class="portfolio-post">
<h2 class="headline portfolio-headlines" rel="bookmark">

    <a href="http://example.com/portfolio/post-8/">Post 8</a>

</h2>

</article>
</div>
</div>

成功！谢谢！

于 2013-08-08T17:53:09.793 回答