WordPressテーマでmenuにBootstrap3のドロップダウンを使う方法

メニューにBootstrapのドロップダウンってどうやるの？

先日、何も考えずにBootstrapを使ってHTMLでコーディングをした後に、内容をWordPressのテンプレートタグに置き換えてテーマを作成していたところ、メニューにドロップダウンを使うつもりが、そのままではBootstrapの見た目にならないという事に気付いて慌ててしまいました。

Bootstrap Components Navbar のサンプルコードにあるように、Bootstrapのドロップダウンを使うには、リンクや入れ子になったリストにクラスの指定がされていないとデザインが適用されません。

カスタムメニューの表示方法をおさらい

カスタムメニューは、 wp_nav_menu で呼び出します。詳細はCodex参照してくださいw

使い方のところにある通り、メニューのリストのクラスやIDはitems_wrapのところで指定できます。しかし、それ以外はクラスなどを追加できそうにありません。

wp-bootstrap-navwalker でBootstrapのドロップダウンが使えるように！

ダウンロード

使い方

  1. テーマフォルダに入れる

    上記のgithubからダウンロードした wp_bootstrap_navwalker.php をテーマフォルダに追加します。

  2. functions.phpに1行追加

    functions.php を開いて、
    require_once('wp_bootstrap_navwalker.php');
    を追加します。

  3. カスタムメニューの設定に1行追加

    ドロップダウンを使う wp_nav_menu に、
    'walker' => new wp_bootstrap_navwalker()
    の一行を下記のように追加します。

これで、Bootstrapのドロップダウンがメニューで使えるようになります。

蛇足ですが、Bootstrapのドロップダウンはデフォルトはクリックで開く仕様なので、マウスオーバーで開くように修正する方法もセットでどうぞ。

1冊ですべて身につくWordPress入門講座 Kindle版

Thu Dec 11, 2014