WordPressのメニューにBootstrapのNavbarとDropdown


前回の続きで今回はメニューのカスタマイズについて説明していこうと思います。当初はW3.CSSを採用したかったのですが、ナビゲーションシステムがリストを使っていなかったのでちょっと面倒臭くなりそうということでBootstrap4を使うことにしてNavbarとDropdownを適用してみることにしました。
当初はそのままheaderのナビゲーションのコードを書いていたのですが、メニュー設定は管理画面からやりたいなぁと思いフィルターフックでクラスなどを書き換えてみたのですが、複数階層のドロップダウンを使用するにはWaler_Nav_Menuの派生クラスを使った方がいいのでは?」と思った次第です。
メニューに子供がいる場合はドロップダウン表示をする感じのイメージです。

モバイル画面だとこんな感じです。リンクを格納してアイコンをクリックすると開くようにします。


実際のコーディングですが。。。

Walker_Nav_Menuを継承した「WalkerShumatzMenu」をテーマフォルダ/classes/に作成します。
以下実装内容の説明です。

  • start_el
    この関数でメニュー要素に出力する内容を編集します。
    まずは$formatで最終的に出力したい文字列を設定。
    liタグ、aタグに設定するクラス文字列を追加していきます。
    第1階層の場合はNavbar用のクラスを設定。(liに「nav-item」, aに「nav-link」)
    第2階層以降はDropdown用のクラスを設定。(aに「dropdown-item nav-link」)
    現在表示中の画面のaに「active」を追加。
    子供が存在する場合aに「dropdown-toggle」を追加して▼を表示させます。
    またliに「dropdown drop-hover」を追加してドロップダウンメニューを表示させるようにします。
    第2階層以降の場合は更に「droprright」を追加して▶︎を表示させます。
    最後に$formatのマスクを設定したクラス、リンク先のURL、メニューに表示する文字列に置き換えます。(sprintf)
  • start_lvl
    この関数で子供のメニュー要素を囲むhtmlを編集します。
    まずはインデントを設定していて深さによってインデントの回数を決めています。
    ulタグにBootstrapのDropdown用のクラスを設定します。(dropdown-menuが対象のクラスでbg-darkは背景色)

続いて管理画面でメニューを設定できるようにfunction.phpにナビゲーションメニューを有効化します。
(私は画面の上下にに配置する事を想定して「Top」と「footer」と定義しています。続いて設定しているのは説明なので適当な内容を記載してください。)

これを設定するとこんな感じでメニュー設定画面に表示がされます。

後はテンプレートファイルとBootstrapで定義されていないクラスをスタイルシートに追加します。
設定するためのパラメータは以下の通り

  • container: メニューをラップするdivを出力しないためにために空白にします。
  • item_wrap: メニューをラップするためのulタグの内容を設定します。
  • theme_location: 位置を設定します。(register_nav_menusで登録した位置の文字列)
  • walker: 今回はカスタマイズしたクラスを使うのでそのクラスのインスタンスを設定します。

header.php

最後にスタイルを追加します。

  • .drop-hover:hover > .dropdown-menu
    子供がいる要素の上をカーソルが通過した時にドロップダウンを表示します。
  • .dropdown-item:hover
    ドロップダウンの要素の上をカーソルが通過した時の背景色を変更します。

style.css

こんな感じでBootstrapのナビゲーションをWordpressに適用することができました。
参考になりましたでしょうか?
もうちょっとうまくカスタマイズできたらソースそのものも公開しようかと思います。
実際に作ったものはこちらです。