2

こんにちは、ワードプレスとブートストラップを使用しています。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>
4

1 に答える 1

1

wp_list_pages古い関数を使用してナビゲーションを作成していることに気付きました。wp_nav_menuほぼ同じように動作しますが、より優れた新しい方を使用することをお勧めします( wp_list_pages.

いずれにせよ、追加しようとしているのは配列へのウォーカーです。ウォーカーでは文字列ではなくオブジェクトを渡すことに注意してください。

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;

ジョン・メガハンがここに持っている要点からこれを行う方法を見つけました。

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 ダッシュボードから管理できるメニューの名前です)。コーデックスをチェックして、渡すことができるパラメーターを正確に確認してくださいwp_nav_menu.active...しかし、ここでの結論は、Bootstrapが使用するクラスを使用するように拡張するのにWalkerが役立つはずだということです。

于 2013-07-24T11:55:01.863 に答える