wp-bootstrap-navwalker
wordpressにドロップダウンメニューを採用する場合に、bootstrap.jsを利用すると簡単に実現できます。しかもレシポンシブに対応していますので、モバイル機器などにも新たなコーディングをする必要はありません。これの弊害としては、wordpressのカスタムメニューの構造はそのままでは対応していないということです。wordpressのカスタムメニュー形式を柔軟に変更し、bootstrap.jsに必要なクラスを挿入するために、このwp-bootstrap-nvwalkerを使用します。
wp-bootstrap-nvwalkerは、下記のgithubサイトから最新版をダウンロードして使用します。
wp-bootstrap-navwalker-master.zipという名前で圧縮形式でダウンロードされますので、これをディスクトップなどの適当な場所に解凍しておきましょう。
wp-bootstrap-naviwalkerをdrawer.jsに対応させる
前述のwp-bootstrap-naviwalkerはその名前のとおり、bootstrap用に合わせてあります。読者の中には、drawer.jsスクリプトに合わせたいという要望があります。
当記事のテーマは、このwp-bootstrap-naviwalkerをdrawer.jsに対応させることを目的としています。この記事を読めばwp-bootstrap-naviwalkerのどこをどういう風に修正するかわかるようになっています。
ちなみに、drawer.jsを知らない方のために説明すると、drawer.jsは、横からすっーと出てくるドロワーメニューを簡単にwordpressサイトに実装するJqueryライブラリーです。表示領域の狭いモバイル用サイトの制作に適しています。以下のGIF画像を参考にどうぞ。
当ブログでも実際にdrawer.jsをつかったドロワーメニューの作り方を紹介しています。 wp-bootstrap-navwalker-masterをダウンロードするGithubの使い方もモバイル用にハンバーガーアイコンの設置方法も詳しく解説しています。当記事と合わせてご覧ください。
当ブログでも実際にdrawer.jsをつかったドロワーメニューの作り方を紹介しています。 wp-bootstrap-navwalker-masterをダウンロードするGithubの使い方もモバイル用にハンバーガーアイコンの設置方法も詳しく解説しています。当記事と合わせてご覧ください。
wp-bootstrap-naviwalkerファイルの修正
まず、wordpressにインスト－ルする前に、必要な修正を先にやっちゃいましょう。修正するファイルは、解凍したwp-bootstrap-navwalker-master.zipのトップフォルダーにあるclass-wp-bootstrap-navwalker.phpファイル。
修正するのはbootstrap用のクラス名をdrawerのクラス名に変更する作業です。どちらもほぼ同じような名前ですが、クラス名の先頭にdrawer～を付加します。修正対象のバージョンは4.3.0。バージョンアップされた場合は、以下に示した行も多少変更になる可能性があります。あらかじめご了承ください。
修正はbootstrap用のクラス名をdrawerのクラス名に変更する作業です。どちらもほぼ同じような名前ですが、クラス名の先頭にdrawer～を付加します。修正対象のバージョンは4.3.0。バージョンアップされた場合は、以下に示した行も多少変更になる可能性があります。あらかじめご了承ください。
修正１：50行目
修正２：138行目
修正３：146行目
修正４：198行目
修正５：284行目
//サブメニューがある場合はキャレットを追加
$item_output .= ‘<span class=”drawer-caret”></span>’;
}
インストレーション作業
インストレーション作業は、以下の簡単2ステップのみです。
ステップ１： class-wp-bootstrap-navwalker.php ファイルを読み込み
function.phpに以下のコーディングを追加し、 class-wp-bootstrap-navwalker.php の読み込みをおこないます。
function register_navwalker(){
require_once get_stylesheet_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );
ステップ２：カスタムメニューを表示
header.php等にメニューを表示させるためのwp_nav_menu()を呼び出している部分があると思います。これに渡すパラメータを以下のように変更してください。なお、使用するカスタムメニューのテーマロケーションをdrawer_menu_sampleとしています。各自の環境に合わせてお使いください。
<?php
wp_nav_menu( array(
'theme_location' => 'drawer_menu_sample',
'container' =>'',
'menu_class' =>'',
'depth' => 2,
'items_wrap' =>'<ul class="drawer-menu" id="main-nav">%3$s</ul>', // class、IDは適宜調整
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker()
)
);
?>
これでインストレーション作業は終了です。あとはwordpressを起動してカスタムメニューを作成すれば、drawer.jsをつかったカスタムメニューが起動するはずです。
出力コード
実際に出力されたカスタムメニューのコードを以下に示します。ただし、直に吐き出されたコードから不必要なクラス IDなど省力して、なるべく可読性の良いコードに仕上げています。
<nav class="drawer-nav" role="navigation">
<ul class="drawer-menu" id="main-nav">
<li class="drawer-dropdown">
<a title="MENU1" href="#" class="nav-link">MENU1</a>
</li>
<li class="drawer-menu-item drawer-dropdown ">
<a title="MENU2" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="dropdown-toggle nav-link">MENU2<span class="drawer-caret"></span></a>
<ul class="drawer-dropdown-menu" aria-labelledby="menu-item-dropdown-10831" role="menu">
<li class="drawer-dropdown">
<a title="SUB1" href="#" class="drawer-dropdown-menu-item">SUB1</a>
</li>
<li class="drawer-dropdown">
<a title="SUB2" href="#" class="drawer-dropdown-menu-item">SUB2</a>
</li>
</ul>
</li>
<li class="drawer-dropdown">
<a title="MENU3" href="#" class="nav-link">MENU3</a>
</li>
</ul>
</nav>
以上
