Edited at

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()のリンクに属性を追加する


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