wp_nav_menu (), làm cách nào để thay đổi lớp <li>?

Tôi đang xây dựng một menu cho trang web của tôi. Các tĩnh trông như thế này:

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

Tôi đã có thể hiểu cách tùy chỉnh <ul>thẻ, để thoát khỏi <div>thẻ tự động . Nhưng bây giờ, tôi muốn tùy chỉnh <li>thẻ để có thể gán classtên khác để điều khiển hành vi cụ thể thông qua CSS. Khi tôi sử dụng wp_nav_menu()đầu ra như sau:

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

Tôi muốn thoát khỏi idcác <li>thẻ và thay đổi classđể phản ánh tên của trang tôi muốn liên kết đến. Về cơ bản tôi muốn xuất ra điều tương tự như đoạn mã đầu tiên trong bài viết này.

Lý do tại sao tôi làm điều này là vì tôi sử dụng các hình ảnh tùy chỉnh được điều khiển bởi CSS của tôi bằng văn bản thuần túy.

Điều này có thể không? Chiến lược nào tôi nên sử dụng để khắc phục vấn đề này?

Sử dụng một walker tùy chỉnh , loại bỏ bất cứ thứ gì bạn không cần và thêm các lớp học của bạn. Đây là một walker mà tôi sử dụng để có được một danh sách với đánh dấu sạch: T5_Nav_Mothy_Walker_Simple .

Bạn cũng có thể lọc 'nav_menu_css_class'hoặc 'wp_nav_menu_items'. Nhưng theo tôi thì một lớp đi bộ dễ hiểu và dễ kiểm soát hơn.

đi đến giao diện> menu - chọn menu bạn muốn - đi đến "tùy chọn màn hình" ở trên cùng bên phải, chọn "lớp css" - thêm một lớp vào mỗi mục menu ..

Đặt <li>lớp thành nav-link, như bootstrap 4.3 cần nó:

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);

Bạn cũng có thể bỏ đặt idthuộc tính trong mảng đó.

Như poster cuối cùng đã đề cập, bạn có thể thêm các lớp của riêng mình thông qua các menu xuất hiện> với các lớp CSS được đánh dấu trong các tùy chọn màn hình. Trong walker, bạn có thể truy cập những gì bạn nhập vào đó thông qua:

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

Tôi thậm chí đã sử dụng điều này để thêm hình ảnh được đặt tên trước trong menu - một chút flakey, nhưng nó hoạt động.

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