WordPressでBootstrap 3のドロップダウンメニューを表示できるスクリプト wp-bootstrap-navwalker

公開日 : 最終更新日 :

カテゴリー :

前回、WordPressのカスタムメニューの使い方について紹介しました。そこでは、簡単なカスタムメニューの実装方法を紹介しました。ただ、Young FlavorではBootstrap 3を使っていてBootstrap 3のナビメニューをヘッダーに表示しています。Boostrap 3のナビメニューにはドロップダウンメニューも追加でき、今使っているテーマでもドロップダウンメニューを追加しています。Bootstrap 3のドロップダウンメニューをwp_nav_menu()で実現するためにwp_nav_menu()をいろいろ調べていたのですが、実装するには、そのままでいけなさそうでどうしようかと考えていました。しかし、深く調べていたら簡単にドロップダウンメニューを実装できるファイルをGithubで見つけたのでその方法を紹介します。

wp-bootstrap-navwalkerとは

Bootstrap 3のドロップダウンメニューを簡単に出来るソイツの名はwp-bootstrap-navwalkerです。wp-bootstrap-navwalkerは、WordPressでBootstrap 3のドロップダウンメニューを簡単に導入出来るPHPファイルです。ファイル自体がWordPressのWalker_Nav_Menuクラスを継承したファイルでこいつをテーマに読み込ませるだけで簡単にBootstrapのドロップダウンメニューが実装できます。

wp-bootstrap-navwalkerの使い方

wp-bootstrap-navwalkerは、GithubにファイルがありそれをフォークやダウンロードすればOKです。入手したwp-bootstrap-navwalkerをWordPressで使う方法は以下の通りです。

  1. DLしたwp-bootstrap-navwalkerをお使いのWordPressテーマフォルダに入れる
  2. WordPressテーマのfunctions.phpに以下のコードを挿入
  3. 完了

これでwp-bootstrap-navwalkerを使ったBoostarap 3のドロップダウンメニューを使うことができます。注意として2のコードを追加するときにテーマに追加したファイルの場所をしっかりと指定してください。

テーマ側の設定

テーマ側でナビメニューを出すには、wp_nav_menu()でOKです。ただ通常のwp_nav_menu()に追加してwalkerを追加する必要があります。下のコードを表示させたい場所にコピペすればOKです。下のコードを知りたい場合は、wp_nav_menu()について前回書いた「カスタムメニューを使ってWordPressの複数メニューを表示する方法」をみてください。

まとめ

このBootstrap 3のドロップダウンメニューを使いたいならwp-boostrap-navwalkerは必須だと思います。自分で実装してもいいですが、このwp-boostrap-navwalkerさえあればその必要はないですし、wp-boostrap-navwalker自体も継承クラスを書いているだけのファイルなのでテーマへの影響も少ないと思います。

参考URL

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>