如何为引导导航栏添加动态焦点？

Question

嗨，我正在使用wordpress和bootstrap，我想在wp_list_pages()中添加活动类，但我已经尝试了很多东西都徒劳，我需要帮助。 我还使用了 data-toggle="pills" 但停止了所有 javascript

这是我的导航栏

<div class="navbar navbar-inverse navbar-fixed-top center">
  <div class="navbar-inner">
    <div class="container center"> 
      <div class="nav-collapse collapse">
        <ul class="nav" >
             <?php    wp_list_pages(array('title_li' => '')) ; ?>
        </ul>
      </div>
    </div>
  </div>

Answer 1

我注意到您正在使用旧的

wp_list_pages

函数来创建导航。我建议您使用较新的

wp_nav_menu

，它的工作原理几乎相同，但更好（甚至还支持

wp_list_pages

。

无论哪种方式，您要添加的是一个 Walker 到数组中，只需记住在 walker 中您传递的不是字符串，而是一个对象。

我成功添加了我的 WordPress 和 Bootstrap 菜单，以便像这样运行良好：

将其添加到您的functions.php

// Bootstrap Dropdown Menus

add_action( 'after_setup_theme', 'bootstrap_setup' );

if ( ! function_exists( 'bootstrap_setup' ) ):

function bootstrap_setup(){

    add_action( 'init', 'register_menu' );

    function register_menu(){
        register_nav_menu( 'top-bar', 'Bootstrap Top Menu' ); 
    }

    class Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu {


        function start_lvl( &$output, $depth ) {

            $indent = str_repeat( "\t", $depth );
            $output    .= "\n$indent<ul class=\"dropdown-menu\">\n";

        }

        function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

            $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

            $li_attributes = '';
            $class_names = $value = '';

            $classes = empty( $item->classes ) ? array() : (array) $item->classes;
            $classes[] = ($args->has_children) ? 'dropdown' : '';
            $classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
            $classes[] = 'menu-item-' . $item->ID;

            $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
            $class_names = ' class="' . esc_attr( $class_names ) . '"';

            $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
            $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

            $output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';

            $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
            $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
            $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
            $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
            $attributes .= ($args->has_children)        ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';

            $item_output = $args->before;
            $item_output .= '<a'. $attributes .'>';
            $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
            $item_output .= ($args->has_children) ? ' <b class="caret"></b></a>' : '</a>';
            $item_output .= $args->after;

            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
        }

        function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
            if ( !$element )
                return;
            $id_field = $this->db_fields['id'];
            //display this element
            if ( is_array( $args[0] ) ) 
                $args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );
            else if ( is_object( $args[0] ) ) 
                $args[0]->has_children = ! empty( $children_elements[$element->$id_field] ); 
            $cb_args = array_merge( array(&$output, $element, $depth), $args);
            call_user_func_array(array(&$this, 'start_el'), $cb_args);
            $id = $element->$id_field;
            // descend only when the depth is right and there are childrens for this element
            if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {
                foreach( $children_elements[ $id ] as $child ){
                    if ( !isset($newlevel) ) {
                        $newlevel = true;
                        //start the child delimiter
                        $cb_args = array_merge( array(&$output, $depth), $args);
                        call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
                    }
                    $this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
                }
                    unset( $children_elements[ $id ] );
            }
            if ( isset($newlevel) && $newlevel ){
                //end the child delimiter
                $cb_args = array_merge( array(&$output, $depth), $args);
                call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
            }
            //end this element
            $cb_args = array_merge( array(&$output, $element, $depth), $args);
            call_user_func_array(array(&$this, 'end_el'), $cb_args);    
        }   
    }
}
endif;

我从 John Megahan 的 要点中找到了如何做到这一点。

你的 PHP 看起来像这样，而不是

wp_list_pages

:

<?php            
  $main_menu = array(
    'menu' => 'main-menu',
    'container' => false,
    'depth' => 2,
    'walker' => new Bootstrap_Walker_Nav_Menu()
  );
  wp_nav_menu( $main_menu );
?>

请注意，我正在使用“菜单”并将其设置为“主菜单”（这是我可以通过 WP 仪表板管理的菜单的名称）。 查看 Codex 以准确了解您可以传递哪些参数

wp_nav_menu

...但我认为这里的底线是 Walker 应该帮助您扩展以使用 Bootstrap 使用的

.active

类。