WordPress
bootstrap

WordpressとBootstrapでNavigationBarを実装する。

Webはチョットしか触ったこと無いけど、HP制作の際に勉強がてら調べてみました。

時間のあるときに説明分等を書き足せればと思います。

function.php
//======================================
//メニューの<li>からID除去
function removeMenuId( $id ){
    return $id = array();
}
add_filter('nav_menu_item_id', 'removeMenuId', 10);


//======================================
//メニューの<li>からクラス除去
function removeMenuClass( $classes ) {
    return $classes = array();
}
add_filter( 'nav_menu_css_class', 'removeMenuClass', 10, 2 );


//======================================
//メニューの<li>にクラスを付与する
function addMenuClass( $classes ) {

    $classes = array(
        'nav-item',
    );
    return $classes;
}
add_filter( 'nav_menu_css_class', 'addMenuClass', 10, 2 );


//======================================
//メニューの<a>にクラスを付与する
function my_nav_menu_attr_add( $atts, $item, $args ) {

    // aタグに付与したいクラスを入れる。
    $atts['class'] = 'nav-link';

    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'my_nav_menu_attr_add', 10, 3 );
header.php
<div class="headerNavigation">
      <nav class="navbar fixed-top navbar-expand-lg navbar-light">
        <a href="#" class="navbar-brand">
          <img src="イメージファイルのパス" alt="navigation_logo">
          tornado
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse right-content" id="navbarSupportedContent">
          <?php
            wp_nav_menu(array('theme_location'=>'headerNavigation',
                              'container'     => 'div',
                              'depth'         => 0,
                              'items_wrap'    =>'<ul class="navbar-nav mr-auto">%3$s</ul>'
                            ));
          ?>
        </div>
      </nav>
    </div>

これで管理画面からHeaderメニューの編集が簡単にできるかな?と思っています。

参考サイト
HACK NOTE様 :WordPress : カスタムメニューのタグのムダなid/classを除去する
WordPress Snippet様 :wp_nav_menu()のリンクに属性を追加する

(この様に参考にしたサイトは記載したほうがいいんですよね?許可などはもらってないけどマズイんでしょうか。。。?)