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>แท็กอัตโนมัติ แต่ตอนนี้ฉันต้องการปรับแต่ง<li>แท็กเพื่อให้สามารถกำหนดclassชื่อที่แตกต่างเพื่อควบคุมพฤติกรรมเฉพาะผ่าน CSS เมื่อฉันใช้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" - เพิ่มคลาสในรายการเมนูแต่ละรายการ ..

การตั้งค่า<li>คลาสnav-linkเป็นเนื่องจาก bootstrap 4.3 ต้องการ:

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">