WordPressのナビゲーションにBootstrapを組み込む

WordPressのナビゲーションにBootstrapを組み込む

著者：

解　説

WordPressのナビゲーションにBootstrapのグローバルナビの設定を組み込むにはWordPressの書き出すタグのclass名にBootstrap用の「.nav」と「.navbar-nav」の２つのclass名を適用させる必要があります。

WordPressナビゲーションバーに新しいclass名を適用する方法

Btootstrapでナビゲーションバーをデザインするための基本的なHTMLコードとWordPressのカスタムメニュー作成のコードの例

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button class="navbar-toggle" data-toggle="collapse" data-target="#mainNav">
            <span class="sr-only">ナビゲーション</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">Sample</a>
        </div>
        <div class="collapse navbar-collapse" id="mainNav">
        <!--ここからWordPressのナビ作成のタグ-->
        <?php wp_nav_menu(array(
        'theme_location' => 'navigation',
        'menu_class'=> 'nav navbar-nav' ) );
        ?>
        <!--WordPressのナビ作成のタグここまで-->
      </div>
      </div>
    </nav>

ここでBtootstrapでナビゲーションバーをデザインするためにはul要素に「.nav」と「.navbar-nav」の２つのclass名を付与する必要があります。

次のコードはWordPressのナビ作成のタグの部分です。’theme_location’ => ‘navigation’はfunctions.phpで指定したnavigationを指定しています。
そして、 ‘menu_class’=> ‘nav navbar-nav’ で　< ul id=”menu-grobal” class=”nav navbar-nav”> のようにulにclass名を追加できます。

PHP
1
2
3
4
<?php wp_nav_menu(array(
        'theme_location' => 'navigation',
        'menu_class'=> 'nav navbar-nav' ) );
?>

functions.phpの記述

PHP
1
2
3
//カスタムメニュー
add_theme_support( 'menus' );
register_nav_menu( 'navigation', 'グローバルナビゲーション' );

Bootstrapカレントページ用のclass名をWordPressに付加する方法

次に、カレントページを識別するためのclass名はWordPressでは「current_page_item」ですが、Bootstrapではclass=”active”がカレントページのclass名になります。
BootstrapのCSS設定をWordPressで使用するにはカレントページにclass=”active”を付与する必要があります。

functions.phpに記述する方法

フィルターフックで書き換える方法です。

PHP
1
2
3
4
5
6
7
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class ($classes, $item) {
　　if (in_array('current-menu-item', $classes) ){
　　　　$classes[] = 'active ';
}
　　 return $classes;
}

jQueryのaddClass()を使用する方法

jQueryで.activeを追加する方法です。

JavaScript
1
2
3
4
5
6
7
<script>
jQuery(function(){
    if(jQuery('.nav').children().hasClass('current-menu-item')) {
      jQuery('li.current-menu-item').addClass('active');
}
});
</script>

functions.phpに記述する方法がスマートですね。