Wordpress 플러그인 "Widgets On Pages"

「Widgets On Pages」를 사용해 보면 편리했습니다만,
htps //w w. 괜찮아. 코 m/해

(덧붙여서 "Widget Shortcode"라는 비슷한 플러그인도 있지만,
이쪽이라면 임의의 id명을 붙일 수 없기 때문에
　나는 「Widgets On Pages」가 좋을까라고 생각합니다. )

삽입한 메뉴 위젯에 Bootstrap 클래스를 적용하려고 해도
Wordpress의 표준 메뉴의 「옵션 class」이라면 「li」밖에 적용되지 않아요,

또한 Bootstrap 클래스를 본 느낌이라고
가변 요소는 「a.nav-link」쪽으로, 「li.nav-item」은 거의 고정 같았기 때문에
htps : // 게이 t보오 tst et al p. jp/do cs/4.2/코m포넨 ts/인 vs/

「옵션 class」는 「a 태그」쪽에 맞는 것이 편리한 것이 아닐까
조사해 하는 방법을 생각해 보았으므로 메모 쓰기적으로.

WP 메뉴에 옵션 클래스와 임의 클래스를 제공

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로 1개 1개 「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>

일단 할 수 있는 것이 퍼졌으므로 만족. 이상입니다.