您可以通过提供Walker 调用时的对象wp_list_pages, 像这样：

<your-template>.php

wp_list_pages(array(
    \'title_li\' => null,
    \'depth\' => 2,
    \'child_of\' => 0,
    \'walker\' => new My_Walker(),
));

而不是默认值Walker_Page 这将使wp_list_pages 使用定制助行器，My_Walker. 我们唯一需要的区别是将您的整个列表包装在您在问题中描述的两个div中。为此，我们需要重写这些方法start_lvl 和end_lvl 属于Walker_Page. 如下所述，当列表位于级别0（最顶层）时，它将被包装在两个div中，而随后的列表将是普通的ul 元素。

functions.php

class My_Walker extends Walker_Page {

    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\\t", $depth);

        if ($depth == 0) {
            $output .= "\\n$indent<div class=\'container\'><div class=\'container2\'><ul>\\n";
        } else {
            $output .= "\\n$indent<ul class=\'children\'>\\n";
        }
    }

    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\\t", $depth);

        if ($depth == 0) {
            $output .= "$indent</ul></div></div>\\n";
        } else {
            $output .= "$indent</ul>\\n";
        }
    }
}

或者，如您提供的链接中所述，只需重写page\\u css\\u类并手动将每个函数调用与div包装在一起：

functions.php

function add_parent_class( $css_class = array(), $page = null, $depth = null, $args = array() )
{
    if ( ! empty( $args[\'has_children\'] ) )
        $css_class = array();
    return $css_class;
}
add_filter( \'page_css_class\', \'add_parent_class\', 10, 4 );

<your-template>.php

<div class="container"><div class="container2"><ul>
<ul>
<?php wp_list_pages(\'title_li=&depth=2&child_of=\'); ?>
</ul>
</div></div>