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によって制御されるカスタム画像を使用しているためです。

これは可能ですか？この問題を克服するためにどの戦略を使用する必要がありますか？

カスタムwalkerを使用して、不要なものをすべて削除し、クラスを追加します。ここに、クリーンマークアップ付きのリストを取得するために使用するウォーカー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">