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を追加できるようになる。 こんな感じ f:id:happy_teeth_ago:20190926133003p:plain

でnavに追加する箇所 ここに記載したものが liのクラスに記載される。

f:id:happy_teeth_ago:20190926133154p:plain

3-aタグにclassを追記するにはadd_filerを利用する。

下記に記載しています。

まずbootstrapのハンバーガーメニューの公式サイト

f:id:happy_teeth_ago:20190926132722p:plain このソースはこちら

<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の公式サイト

wpdocs.osdn.jp

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を当てる方法がある。 それはこちら

techmemo.biz

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のイベント

公式サイト

developer.wordpress.org

apply_filters と add_filtersの違いはこちらがわかりやすいです

www.koikikukan.com

ポイント 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>