wordpress navバー カスタマイズ bootstrap適用
目的:Bootstrapのハンバーガーメニューを追加したい
ポイント
navはul li a の3つからなっている
1- ulには wp_nave_menu の引数に設定すればclassを追記することが可能
//追加したいclassをここに追記する。$s等はWordPressが利用するので消してはいけない items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
2- liには、WordPressの管理画面からclassを追加する。liを直接操作する関数は用意されていない
css classesにチェックを入れると、navメニューからclassを追加できるようになる。 こんな感じ
でnavに追加する箇所 ここに記載したものが liのクラスに記載される。
3-aタグにclassを追記するにはadd_filerを利用する。
下記に記載しています。
まずbootstrapのハンバーガーメニューの公式サイト
このソースはこちら
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav>
WordPressはwp_nave_menuという関数がある。 しかしそれは、WordPressが、勝手にクラスを当てる 自分が想定しているものを当てたい。
まず wp_nave_menuの公式サイト
ulにクラスを当てるには items_wrapを使う
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '<ul><li id="item-id">Menu: </li>%3$s</ul>' ) ); ?>
しかし、liにはclass指定できない
そこで、管理画面からliにclassを当てる方法がある。 それはこちら
li 配下の aタグにclassを適用するには apply_filter を利用するしかない
add_filters('walker_nav_menu_start_el', 'add_class_on_link', 10, 4); function add_class_on_link($item_output, $item){ return preg_replace('/(<a.*?)/', '$1' . " class='nav-link'", $item_output); }
walker_nav_menu_start_elはWordPressのイベント
公式サイト
apply_filters と add_filtersの違いはこちらがわかりやすいです
ポイント apply_filtersは引数を追加で渡せる
preg_replace はphpの正規表現で置き換える関数
公式サイト
https://www.php.net/manual/ja/function.preg-replace.php
ハンバーガーメニュー HTML
<nav class="navbar navbar-expand-sm navbar-light"> <a href="" class="navbar-brand">Logo</a> <button class="navbar-toggler" data-toggle="collapse" data-target="#menu"> <span class="navbar-toggler-icon"></span> </button> <div id="menu" class="collapse navbar-collapse"> <ul class="navbar-nav"> <li class="nav-item"><a href="" class="nav-link">Link</a></li> <li class="nav-item"><a href="" class="nav-link">Link</a></li> <li class="nav-item"><a href="" class="nav-link">Link</a></li> </ul> </div> </nav>
これを当てていけば良い
で結論 上記と同じ
functions.php
add_filter('walker_nav_menu_start_el', 'add_class_on_link', 10, 4); function add_class_on_link($item_output, $item){ return preg_replace('/(<a.*?)/', '$1' . " class='nav-link'", $item_output); }
front-pgage.php
<nav class="globalNavi navbar-expand-sm navbar-light"> <button class="navbar-toggler" data-toggle="collapse" data-target="#menu"> <span class="navbar-toggler-icon"></span> </button> <div id="menu" class="collapse navbar-collapse"> <?php $args=array( 'menu'=>'global-navigation', 'container' => false, 'items_wrap' => '<ul id="%1$s" class="%2$s navbar-nav">%3$s</ul>', ); wp_nav_menu($args); ?> </div> </nav>