wp_nav_menu (), <li> 클래스를 변경하는 방법?

내 웹 사이트를위한 메뉴를 만들고 있습니다. 정적은 다음과 같습니다.

<nav>
  <ul id="menu">
        <li class="item_1"><a href="#">Item 1</a></li>
        <li class="item_2"><a href="#">Item 2</a></li>
        <li class="item_3"><a href="#">Item 3</a></li>
        <li class="item_4"><a href="#">Item 4</a></li>
        <li class="item_5"><a href="#">Item 5</a></li>
        <li class="item_6"><a href="#">Item 6</a></li>
        <li class="item_7"><a href="#">Item 7</a></li>
        <li class="item_8"><a href="#">Item 8</a></li>
    </ul>

<ul>자동 <div>태그를 제거하기 위해 태그 를 맞춤 설정하는 방법을 이해할 수있었습니다 . 그러나 이제 CSS를 통해 특정 동작을 제어하기 위해 <li>다른 class이름을 지정할 수 있도록 태그 를 사용자 정의하고 싶습니다 . wp_nav_menu()출력을 사용하면 다음과 같습니다.

    <ul id="menu">
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mydomain.com/dummy/fashion/">Fashion</a></li>
    <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://mydomain.comdummy/documentary/">Documentary</a></li>
    <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://mydomain.com/dummy/events/">Events</a></li>
    <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://mydomain.com/dummy/portraits/">Portraits</a></li>
    </ul>

나는 없애 원하는 id에 <li>태그 및 변경 class내가 링크 할 페이지의 이름을 반영하도록. 기본적 으로이 게시물의 첫 번째 코드 스 니펫과 동일한 내용을 출력하고 싶습니다.

내가하는 이유는 CSS로 일반 텍스트로 제어되는 사용자 정의 이미지를 사용하기 때문입니다.

이게 가능해? 이 문제를 극복하기 위해 어떤 전략을 사용해야합니까?

커스텀 워커를 사용하고 필요없는 것을 제거하고 수업을 추가하십시오. 다음은 깨끗한 마크 업으로 T5_Nav_Menu_Walker_Simple 리스트를 얻는 데 사용하는 워커 입니다.

당신은 또한 필터링 할 수 있습니다 'nav_menu_css_class' 또는 'wp_nav_menu_items'. 그러나 워커 클래스는 이해하고 통제하기가 더 쉽다고 생각합니다.

모양> 메뉴로 이동-원하는 메뉴를 선택하십시오-오른쪽 상단의 "화면 옵션"으로 이동하여 "css 클래스"를 선택하십시오-각 메뉴 항목에 클래스를 추가하십시오.

부트 스트랩 4.3이 필요로 <li>클래스를로 설정하면 nav-link다음과 같습니다.

function add_menu_link_class($atts, $item, $args)
{
    $atts['class'] = 'nav-link';
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_menu_link_class', 1, 3);

id해당 배열 에서 속성을 설정 해제 할 수도 있습니다 .

마지막으로 언급했듯이 화면 옵션에서 CSS 클래스가 선택된 모양> 메뉴 를 통해 자신의 클래스를 추가 할 수 있습니다. 워커에서 다음을 통해 입력 한 내용에 액세스 할 수 있습니다.

$item_output .= '<a'. $attributes .' class="'. $item->classes[0].'">';

나는 심지어 이것을 사용하여 메뉴에 미리 명명 된 이미지를 추가했습니다-약간의 결함이 있지만 작동합니다.

<img src="theme/images/navigation/'.$item->classes[0].'" width="48" height="48">