WordPress 的菜单函数 wp_nav_menu() 输出了固定的 HTML 结构，我们可以基于这些结构写 CSS 样式。如果你主题的 CSS 是基于 BootStrap 开发的，直接使用 BootStrap 的导航样式无疑是一种省时省力的方法，我们只需要修改一下 WordPress wp_nav_menu() 函数输出的 HTML 结构，让它和 BootStrap 的结构一样就可以了。

第一步： 添加自定义 Walker_Nav_Menu 类到主题的 functions.php
复制class BS3_Walker_Nav_Menu extends Walker_Nav_Menu {

    function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
        $id_field = $this->db_fields['id'];

        if ( isset( $args[0] ) && is_object( $args[0] ) )
        {
            $args[0]->has_children = ! empty( $children_elements[$element->$id_field] );

        }

        return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        if ( is_object($args) && !empty($args->has_children) )
        {
            $link_after = $args->link_after;
            $args->link_after = ' ';
        }

        parent::start_el($output, $item, $depth, $args, $id);

        if ( is_object($args) && !empty($args->has_children) )
            $args->link_after = $link_after;
    }

        function start_lvl( &$output, $depth = 0, $args = array() ) {
          $indent = '';
          $output .= "$indent<ul class=\"dropdown-menu list-unstyled\">";
        }

}
第二步, 添加 filter 功能过滤修改上一步未能修改的 HTML
复制add_filter('nav_menu_link_attributes', 'nav_link_att', 10, 3);

function nav_link_att($atts, $item, $args) {
    if ( $args->has_children )
    {
        $atts['data-toggle'] = 'dropdown';
        $atts['class'] = 'dropdown-toggle';
    }
    return $atts;
}
第三步, 添加 HTML 到 header.php 中
复制<nav id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header visible-xs">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"></a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <?php wp_nav_menu(array(
                        'container_class' => 'menu-header',
                        'theme_location' => 'primary',
                        'items_wrap' => '<ul id="%1$s" class="%2$s nav navbar-nav">%3$s</ul>',
                        'walker' => new BS3_Walker_Nav_Menu,
                        'menu' => 'Your Menu'
                    )); ?>
                </div><!-- /.navbar-collapse -->
            </div>
        </div>
    </div>
</nav>/code>

只需要做好上面三步，我们就可以让 WordPress 的导航菜单支持 BootStrap 3，同理，如果我们使用了其他 CSS 框架，也可以参考上面的代码让 WordPress 的导航菜单支持其他 CSS 框架。