Wordpressプラグイン「Widgets On Pages」
「Widgets On Pages」を使ってみて便利だったのですが、
https://www.yokashina.com/site/wp/widgets-on-pages/
（ちなみに「Widget Shortcode」という似たプラグインもありますが、
こちらだと任意のid名を付けることができないので
ぼくは「Widgets On Pages」の方がいいかなと思います。）
挿入したメニューウィジェットにBootstrapクラスを当てようとしても
Wordpressの標準メニューの「オプションclass」だと「li」にしか当てられなくてですねー、
さらにBootstrapクラスを見た感じだと
可変要素は「a.nav-link」の方で、「li.nav-item」はほぼ固定っぽかったので
https://getbootstrap.jp/docs/4.2/components/navs/
「オプションclass」は「aタグ」の方に当てられた方が便利なんじゃないかと
調べてやり方を考えてみたのでメモ書き的に。
WPメニューにオプションclassと任意のクラスを与える
functions.php
functions.php
/* カスタムメニューの設定（functions.php） */
function mymenus_setup() {
//メニュー機能に対応させる
add_theme_support( 'menus' );
}
add_action( 'after_setup_theme', 'mymenus_setup' );
/* メニューの「li」「a」に任意のclassを追加・削除 */
//1. メニューの「a」にオプションclassとwp用「.menu-link」を追加する
function addMenuAClass($item_output, $item){
$css_class = esc_attr( $item->classes[0] );
if ($css_class) {
return preg_replace('/(<a.*?)/', '$1' . " class='menu-link " . $css_class . "'", $item_output);
} else {
return preg_replace('/(<a.*?)/', '$1' . " class='menu-link '", $item_output);
}
}
add_filter('walker_nav_menu_start_el', 'addMenuAClass', 10, 4);
//2． メニューの「li」から標準IDを削除する
function removeMenuId( $id ){
return $id = array();
}
add_filter('nav_menu_item_id', 'removeMenuId', 10);
//3． メニューの「li」から標準classを削除する
function removeMenuClass( $classes ) {
return $classes = array();
}
add_filter( 'nav_menu_css_class', 'removeMenuClass', 10, 2);
//4. メニューの「li」にwp「.menu-item」, bootstrap「.nav-item」を追加
function addMenuliClass( $classes ) {
$classes = array(
'menu-item', 'nav-item'
);
return $classes;
}
add_filter( 'nav_menu_css_class', 'addMenuliClass', 10, 2 );
footer.php
footer.php
<!-- Widgets on Pages：下の「ul」にbootstrap「.nav」を追加（footer.php） -->
<script>
$('.widget_nav_menu>div>ul').addClass('nav');
</script>
確認したところ無事付くっぽい
実際には、オプションclassで一個一個「nav-link」付けていくのはめんどくさいので
「nav-link」クラスはjQuaryで一括、
オプションclassは「active」「disable」なんかに使うのがいいかもしれないですね。
footer.php
<!-- Widgets on Pages：下のメニューにclass追加 -->
<script>
$('.widget_nav_menu>div>ul').addClass('nav');
$('.widget_nav_menu>div>ul>li').addClass('nav-item');
$('.widget_nav_menu>div>ul>li>a').addClass('nav-link');
</script>
ひとまずできることが広がったので満足。以上です。