如何在 WordPress 中基于条件创建两个独立的文章循环网格-php教程-PHP中文网

如何在 WordPress 中基于条件创建两个独立的文章循环网格

本文讲解如何在 wordpress 主循环中根据文章状态（如已发布或未发布）动态生成两组独立的内容网格，避免主循环被提前耗尽，并通过 wp_query 实现安全、可复用的条件化二次查询。

本文讲解如何在 wordpress 主循环中根据文章状态（如已发布或未发布）动态生成两组独立的内容网格，避免主循环被提前耗尽，并通过 wp_query 实现安全、可复用的条件化二次查询。

在 WordPress 开发中，常见需求是按自定义字段（如 _book_published）或元数据（如 _my_url）将文章分为“已发布作品”和“未发布作品”两类，并分别渲染为两个独立的视觉网格。但直接在主循环（The Loop）内嵌套 while (have_posts()) 会导致逻辑冲突——因为主循环本身已消耗全部查询结果，再次调用 have_posts() 将始终返回 false，导致第二个循环无法执行。

正确做法是：放弃在主循环内重复使用 have_posts()，改用独立的 WP_Query 实例进行条件化二次查询。每个 WP_Query 都拥有自己的查询栈，互不干扰，且支持灵活的 meta_query 和 post_status 参数组合。

以下是一个完整、可部署的实现示例，用于在同一页面上并列展示两组网格：

<!-- 已发布作品网格 -->
<section class="published-works"><h3>Published Works</h3>
    <?php $published_args = array(
        'post_type'      => 'post', // 或你的自定义文章类型，如 'book'
        'posts_per_page' => -1,
        'post_status'    => 'publish',
        'meta_query'     => array(
            array(
                'key'     => '_book_published',
                'value'   => 'published',
                'compare' => '='
            ),
            array(
                'key'     => '_my_url',
                'compare' => 'EXISTS'
            )
        )
    );
    $published_query = new WP_Query($published_args);

    if ($published_query->have_posts()) :
        echo '<div class="grid">';
        while ($published_query->have_posts()) : $published_query->the_post();
            ?>
            <article class="work-item"><h4><a href="<?php%20the_permalink();%20?>"><?php the_title(); ?></a></h4>
                <?php if (has_post_thumbnail()) : ?><div class="thumbnail"><?php the_post_thumbnail('type-small'); ?></div>
                <?php endif; ?><div class="works-buttons">
                    <?php $url = get_post_meta(get_the_ID(), '_my_url', true);
                    if (!empty($url)) {
                        echo '<button class="amazon"><a href="'%20.%20esc_url(%24url)%20.%20'">Buy</a>';
                    }
                    ?>
                    <button><a href="/shop">Signed</a></button>
                    <button><a href="<?php%20the_permalink();%20?>">About</a></button>
                </div>
            </article><?php endwhile;
        echo '</div>';
        wp_reset_postdata(); // ✅ 关键：重置全局 $post，避免影响后续主循环或其他查询
    else :
        echo '<p>No published works found.</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4683" title="Cn Password Generator"><img
														src="https://img.php.cn/upload/skill/000/000/081/179015770394083.jpg" alt="Cn Password Generator" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill4683" title="Cn Password Generator" class="overflowclass">Cn Password Generator</a>
													<p class="overflowclass">安全的随机密码生成器。支持自定义长度、字符类型（大写/小写字母、数字、特殊符号），排除相似字符，批量生成。纯 Python 标准库，无需 API 密钥。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill4683" title="Cn Password Generator" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>';
    endif;
    ?>


<!-- 未发布作品网格 -->
<section class="unpublished-works"><h3>Upcoming & Draft Works</h3>
    <?php $unpublished_args = array(
        'post_type'      => 'post',
        'posts_per_page' => -1,
        'post_status'    => array('publish', 'draft', 'pending'), // 包含草稿与待审
        'meta_query'     => array(
            'relation' => 'AND',
            array(
                'key'     => '_book_published',
                'value'   => 'published',
                'compare' => '!='
            ),
            array(
                'key'     => '_my_url',
                'compare' => 'NOT EXISTS'
            )
        )
    );
    $unpublished_query = new WP_Query($unpublished_args);

    if ($unpublished_query->have_posts()) :
        echo '<div class="grid">';
        while ($unpublished_query->have_posts()) : $unpublished_query->the_post();
            ?>
            <article class="work-item"><h4><a href="<?php%20the_permalink();%20?>"><?php the_title(); ?></a></h4>
                <?php if (has_post_thumbnail()) : ?><div class="thumbnail"><?php the_post_thumbnail('type-small'); ?></div>
                <?php endif; ?><div class="works-buttons">
                    <button><a href="/shop">Get Updates</a></button>
                    <button><a href="<?php%20the_permalink();%20?>">About</a></button>
                </div>
            </article><?php endwhile;
        echo '</div>';
        wp_reset_postdata(); // ✅ 每次 WP_Query 后都应调用
    else :
        echo '<p>No upcoming works yet.</p>';
    endif;
    ?>
<p>✅ <strong>关键注意事项</strong>：  </p>
<ul>
<li>
<strong>永远不要在主循环中重复调用 have_posts() / the_post()</strong> —— 这会破坏 WordPress 的查询上下文；  </li>
<li>使用 WP_Query 构造独立查询，通过 meta_query 精确匹配自定义字段值；  </li>
<li>每次 WP_Query 循环结束后，<strong>必须调用 wp_reset_postdata()</strong>，否则后续模板函数（如 the_title()）可能引用错误的 $post 对象；  </li>
<li>若需在主循环内动态判断当前文章状态（如仅修改按钮逻辑），请直接操作 $post 对象，而非启动新循环；  </li>
<li>建议为 WP_Query 设置 'posts_per_page' => -1（获取全部）或合理分页参数，避免性能隐患。</li>
</ul>
<p>通过此方案，你既能清晰分离内容逻辑，又能确保主题健壮性与可维护性，适用于作品集、项目展示、出版物管理等典型场景。</p>
</div></section>
</div></section>