WordPressのナビゲーションにBootstrapのグローバルナビの設定を組み込むにはWordPressの書き出すタグのclass名にBootstrap用の「.nav」と「.navbar-nav」の2つのclass名を適用させる必要があります。
WordPressナビゲーションバーに新しいclass名を適用する方法
Btootstrapでナビゲーションバーをデザインするための基本的なHTMLコードとWordPressのカスタムメニュー作成のコードの例
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」の2つのclass名を付与する必要があります。
次のコードはWordPressのナビ作成のタグの部分です。’theme_location’ => ‘navigation’はfunctions.phpで指定したnavigationを指定しています。
そして、 ‘menu_class’=> ‘nav navbar-nav’ で < ul id=”menu-grobal” class=”nav navbar-nav”> のようにulにclass名を追加できます。
1 2 3 4 |
<?php wp_nav_menu(array( 'theme_location' => 'navigation', 'menu_class'=> 'nav navbar-nav' ) ); ?> |
functions.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に記述する方法
フィルターフックで書き換える方法です。
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を追加する方法です。
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に記述する方法がスマートですね。