如何移除WordPress中wp_dropdown_pages函数生成的 ？

刚好碰到过这个问题——wp_dropdown_pages()函数默认会用 来缩进层级子页面，用来区分父子页面的层级关系，但如果不需要这种缩进效果，咱们有两种靠谱的解决方式：

方案1：快速替换输出内容（最简单） #

直接利用函数返回的HTML内容，把里面的 替换掉就行，修改你的代码如下：

<?php 
$args = array( 
    'sort_column' => 'menu_order', 
    'include' => array (116, 214, 163, 165, 173, 175, 177), 
    'show_option_none' => 'More Pages' 
); 

// 先获取下拉列表的HTML字符串（不直接输出），再替换掉所有&nbsp;
$dropdown_html = wp_dropdown_pages(array_merge($args, array('echo' => false)));
$dropdown_html = str_replace('&nbsp;', '', $dropdown_html);
?>
<div class="container">
    <div class="page-list">
        <?php echo $dropdown_html; ?>
    </div>
</div>

这里要注意给$args追加'echo' => false参数，让函数返回HTML而不是直接输出，这样才能完成替换操作。这个方法快准狠，适合只需要移除缩进的场景。

方案2：自定义Walker类（灵活可控） #

如果你后续可能要调整层级标识的样式（比如用短横线、箭头代替缩进），或者需要更精细的控制输出结构，自定义Walker类是更好的选择：

<?php
// 自定义Walker，重写start_el方法去掉默认缩进逻辑
class Custom_No_Indent_Page_Dropdown extends Walker_PageDropdown {
    function start_el(&$output, $page, $depth = 0, $args = array(), $current_page = 0) {
        // 原函数用str_repeat('&nbsp;', $depth * 3)生成缩进，这里直接设为空字符串
        $pad = '';
        
        $output .= "\t<option class=\"level-$depth\" value=\"" . get_permalink($page->ID) . "\"";
        if ( $page->ID == $current_page )
            $output .= ' selected="selected"';
        $output .= '>';
        $title = apply_filters( 'list_pages', $page->post_title, $page );
        $output .= $pad . esc_html( $title );
        if ( ! empty( $args['show_date'] ) ) {
            $output .= ' ' . mysql2date( $args['date_format'], $page->post_date );
        }
        $output .= "</option>\n";
    }
}

// 在参数里指定使用自定义Walker类
$args = array( 
    'sort_column' => 'menu_order', 
    'include' => array (116, 214, 163, 165, 173, 175, 177), 
    'show_option_none' => 'More Pages',
    'walker' => new Custom_No_Indent_Page_Dropdown()
); 
?>
<div class="container">
    <div class="page-list">
        <?php wp_dropdown_pages($args); ?>
    </div>
</div>

这个方法的好处是完全掌握输出逻辑，你甚至可以把$pad改成str_repeat('- ', $depth)，用短横线来标识层级，比默认的空格更清晰直观。

额外小技巧：CSS视觉隐藏（应急可用，不推荐） #

如果只是临时想去掉视觉上的缩进，不想修改PHP代码，可以用CSS强行覆盖：

.page-list option {
    padding-left: 0 !important;
    text-indent: 0 !important;
}

不过这个方法只是隐藏了视觉效果，HTML里的 依然存在，所以更推荐前面两种直接修改输出内容的方案。

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