wp-bootstrap-navこの記事ではWordpressのテーマを自作する際に、Bootstrapフレームワークを使ってナビゲーションメニューをレスポンシブ対応させるための設定について書いています。
Wordpressではナビゲーションメニューを動的に作成してくれるテンプレートタグwp_nav_menu()がありますが、これとBootstrapの組み合わせ方について具体的なコードの書き方の例を載せてみました。
 

用意するもの

まずは以下のファイルをそれぞれダウンロード。(jQueryやBootstrapをCDNからの読み込みにしている場合はnavwalkerのみダウンロード)
jQuery
jQueryはBoostrapを動かすために必須なので、まだテーマに組み込んでいない場合はダウンロードする。上のリンクから公式サイトに行って「Download the compressed, production jQuery 1.11.3」のリンクをクリック。ダウンロードしたファイルを自分のテーマのjsフォルダに入れておく。
 
Bootstrap
Boostrapをまだ組み込んでいない場合は上のリンクからダウンロード。ダウンロード後、zipファイルを解凍してbootstrap.min.cssとbootstrap.min.jsを自分のテーマのcss,jsフォルダにそれぞれ入れておく。
 
Bootstrap navwalker
ナビゲーションメニューを表示させるwp_nav_menu()タグにBoostrapを組み込むためのクラス。上のリンクからダウンロードし、wp_bootstrap_navwalker.phpをテーマフォルダに入れておく。
 

function.phpに記述すること

// Bootstrap Navwalkerを使えるようにする
 require_once('wp_bootstrap_navwalker.php');
// jQuery を使えるようにする
function add_my_scripts() {
    if(is_admin()) return;
    wp_deregister_script( 'jquery');
    wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery-1.11.3.min.js', array(), false, false);
}
add_action('wp_enqueue_scripts', 'add_my_scripts');
// カスタムメニューを使えるようにする
add_theme_support( 'menus' );
register_nav_menu( 'primary', 'Header navigation menu' );

 

header.phpに記述すること

headタグ内に以下のタグを記述してBootstrapのCSSファイルを読み込み。

<link rel="stylesheet" media="all" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css">

 
bodyタグ内、ヘッダーのナビゲーションメニューを表示させたい部分に以下のコードを記述する。

<nav>
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <?php if( has_nav_menu( 'primary' ) ){
            wp_nav_menu ( array (
                 'menu' => 'primary',
                 'theme_location' => 'primary',
                 'depth' => 2,
                 'container' => 'div',
                 'container_class'  => 'mainmenu',
                 'menu_class' => 'nav navbar-nav collapse navbar-collapse',
                 'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
                 'walker' => new wp_bootstrap_navwalker()
                  ));
       } ?>
 </nav>

 
wp_nav_menu()のパラメータのmenu_classの部分は、Bootstrapで用意されているクラスを記述している。fallback_cbとwalkerのところは上記のとおりに記述。その他は適宜変更してOK。
具体的なパラメータの設定方法については以下を参照
テンプレートタグ/wp nav menu
 

footer.phpに記述すること

Bootstrapのjsファイルの読み込み。

<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>

 

出力されるHTMLタグの例

以下のようなHTMLタグが出力される。
<div class="mainmenu">
  <ul id="menu-header-menu" class="nav navbar-nav collapse navbar-collapse">
    <li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-92 current_page_item menu-item-93 active">
      <a title="HOME" href="http://xxx.com/">HOME</a>
    </li>
    <li id="menu-item-196" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-196">
      <a title="Blog" href="http://xxx.com/blog/">Blog</a>
    </li>
    <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53">
      <a title="About" href="http://xxx.com/about/">About</a>
    </li>
    <li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-71 dropdown">
      <a title="Product" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Product
     <span class="caret"></span>
    </a>
        <ul role="menu" class=" dropdown-menu">
          <li id="menu-item-193" class="menu-item menu-item-type-taxonomy menu-item-object-md_category menu-item-193">
            <a title="Product1" href="http://xxx.com/product/procuct1">Product1</a>
          </li>
          <li id="menu-item-195" class="menu-item menu-item-type-taxonomy menu-item-object-md_category menu-item-195">
            <a title="Product2" href="http://xxx.com/product/procuct2">Product2</a>
          </li>
       </ul>
     </li>
  </ul>
</div>

 

Write A Comment