WordPress：仅当页面存在子页面时显示容器Div

嘿，这个需求很常见，咱们只需要调整代码的判断逻辑和结构就能实现。原代码的问题是直接循环输出子页面元素，但没有给外层容器加判断——现在我们把外层容器的输出放在子页面存在的判断里，这样只有当页面有子页面时，才会渲染这个容器和里面的内容。

修改后的代码如下：

<?php 
$child_pages = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = ".$post->ID." AND post_type = 'page' ORDER BY post_title", 'OBJECT'); 
?> 

<?php if ( $child_pages ) : ?>
<!-- 外层容器：只有存在子页面时才会输出 -->
<div class="child-pages-container">
    <?php foreach ( $child_pages as $pageChild ) : setup_postdata( $pageChild ); ?>
        <div class="child-thumb">
            <a href="<?php echo get_permalink($pageChild->ID); ?>" rel="bookmark" title="<?php echo $pageChild->post_title; ?>">
                <?php echo get_the_post_thumbnail($pageChild->ID, 'medium'); ?>
                <h4 class="arrow_box green"><?php echo $pageChild->post_title; ?></h4>
            </a>
        </div>
    <?php endforeach; ?>
</div>
<?php 
    wp_reset_postdata(); // 重置postdata，避免影响后续WordPress查询
endif; 
?>

关键修改点说明： #

• 外层容器的条件判断：把原来的if ( $child_pages )移到外层，先确认有子页面数据，再输出包裹所有子页面的容器Div（你可以把child-pages-container改成自己需要的类名）
• 添加wp_reset_postdata()：因为使用了setup_postdata()，这个函数会修改全局的$post变量，所以循环结束后一定要重置，防止后续的WordPress循环或查询出现异常
• 代码结构优化：把循环逻辑放在容器内部，确保只有当有子页面时，整个容器才会被渲染到页面中

这样调整后，当页面没有子页面时，这段代码不会输出任何容器元素；当有子页面时，会正常显示包含所有子页面卡片的容器。

内容的提问来源于stack exchange，提问作者user1961395