WordPress模板运行时出现多余空Div的原因及修复咨询

嘿，我来帮你拆解这个问题的根源，然后给出彻底的修复方案～

为什么会生成空div？ #

你遇到的核心问题很直观：在while循环里，你每遍历一篇文章，就会无条件输出两个div——一个是.read1-hold（调用book1_title自定义字段），另一个是.read2-hold（调用book2_title字段）。但你的查询同时包含了read1和read2两种自定义文章类型：

• 当遍历的是read1类型的文章时，这篇文章几乎不可能有book2_title字段，所以get_post_meta()会返回空值，直接生成空的.read2-hold div；
• 当遍历的是read2类型的文章时，同理，book1_title字段为空，导致.read1-hold div是空的。

用CSS隐藏空div只是治标，咱们直接从代码层面解决问题更靠谱。

修复方案1：根据文章类型输出对应div（推荐） #

既然你有两种不同的文章类型，咱们可以在循环里先判断当前文章的类型，只输出和它匹配的div，同时额外判断字段是否有值，彻底避免空元素：

<div id="primary" class="content-area">
    <main id="content" class="clearfix">
        <?php 
        $args = array ( 
            'post_type' => array('read1','read2'), 
            'post_status' => 'publish', 
            'pagination' => true, 
            'posts_per_page' => 2, 
            'order' => 'ASC', 
            'orderby' => 'title', 
        ); 
        $wp_query = new WP_Query($args); 
        ?>
        <?php while (have_posts()) : the_post(); 
            // 根据文章类型判断输出对应的div
            if ( get_post_type() === 'read1' ) {
                $book_title = get_post_meta($post->ID, 'book1_title', true);
                if ( !empty($book_title) ) {
                    echo '<div class="read1-hold">';
                    echo $book_title;
                    echo '</div>';
                }
            } elseif ( get_post_type() === 'read2' ) {
                $book_title = get_post_meta($post->ID, 'book2_title', true);
                if ( !empty($book_title) ) {
                    echo '<div class="read2-hold">';
                    echo $book_title;
                    echo '</div>';
                }
            }
        ?>
        <?php endwhile;?>
    </main>
</div>
<?php get_footer();?>

这个方案的优势是逻辑清晰：每篇文章只输出和它类型对应的div，就算某篇文章的对应字段为空，也不会生成空div。

修复方案2：仅当字段有值时输出div #

如果你确实需要每篇文章都有可能输出两个div，但只在对应字段有内容的时候才生成，那可以给每个div加个非空判断：

<div id="primary" class="content-area">
    <main id="content" class="clearfix">
        <?php 
        $args = array ( 
            'post_type' => array('read1','read2'), 
            'post_status' => 'publish', 
            'pagination' => true, 
            'posts_per_page' => 2, 
            'order' => 'ASC', 
            'orderby' => 'title', 
        ); 
        $wp_query = new WP_Query($args); 
        ?>
        <?php while (have_posts()) : the_post(); 
            // 仅当book1_title有值时，输出read1-hold
            $book1_title = get_post_meta($post->ID, 'book1_title', true);
            if ( !empty($book1_title) ) {
                echo '<div class="read1-hold">';
                echo $book1_title;
                echo '</div>';
            }
            // 仅当book2_title有值时，输出read2-hold
            $book2_title = get_post_meta($post->ID, 'book2_title', true);
            if ( !empty($book2_title) ) {
                echo '<div class="read2-hold">';
                echo $book2_title;
                echo '</div>';
            }
        ?>
        <?php endwhile;?>
    </main>
</div>
<?php get_footer();?>

这样修改后，HTML里只会出现有内容的div，完全不需要用CSS去隐藏空元素了。

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