WordPressのカスタムメニュー【3】Bootstrap3のドロップダウンを利用する方法

Bootstrap, カスタムメニュー,
WordPressカテゴリー
Pocket

カスタムメニューの活用方法を紹介していますが、wp_nav_menu()のカスタマイズや、管理画面でclass追加などを用いても、BootstrapのドロップダウンNAVはとても困難です。

そこでBootstrap3のドロップダウンを再現してくれるコードがGithubで公開されていましたのでご紹介します。

wp-bootstrap-navwalker 

twittem/wp-bootstrap-navwalker

twittem-wp-bootstrap-navwalker_20150824

使い方も、リンク先ページに詳しく書かれていますが、wp_nav_menu()のパラメータ 'walker' を使います。
素直にかかれている通り設定してみて、必要な箇所をカスタマイズしていきましょう。

コチラのサイトも参考にさせていただきました。

wp_bootstrap_navwalkerのインストール

wp_bootstrap_navwalker の設置はたった2ステップで完了します。

ステップ1: wp_bootstrap_navwalker.php の保存場所

wp-bootstrap-navwalker からファイルをダウンロードして、WordPressのテーマフォルダ(/wp-content/あなたの使用するテーマ/)に wp_bootstrap_navwalker.php を保存します。

ステップ2: funtion.php に下記コードを記述

次にテーマのfunction.phpに下記コードを追加して完了です。

// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');

register_nav_menu 、register_nav_menus の付近に記述しておくといいのではないでしょうか。

wp_bootstrap_navwalkerの設置例

twittemwp-bootstrap-navwalker の解説に記述されていたコードを抜粋して掲載させていただきます。
ベースとなってるコード自体はBootstrap公式サイトのComponent/Navbar と同じもので、黄色の部分がカスタムメニューが反映される部分となります。

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="<?php echo home_url(); ?>">
                <?php bloginfo('name'); ?>
            </a>
    </div>

       <?php
           wp_nav_menu( array(
             'menu'            => 'primary',
             'theme_location'  => 'primary',
             'depth'           => 2,
             'container'       => 'div',
             'container_class' => 'collapse navbar-collapse',
       'container_id'    => 'bs-example-navbar-collapse-1',
             'menu_class'      => 'nav navbar-nav',
             'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
             'walker'          => new wp_bootstrap_navwalker())
            );
        ?>
    </div>
</nav>

 

wp_nav_menu()のパラメータ 'walker' を利用するほど本格的に手を加えるのは時間的にも技術的にも難しいので、このようにコードやファイルが公開されているのはとても助かります。

当サイトのヘッダーメニューも、この方法を用いてBootstrapのドロップダウンNAVを利用することができました。