添加自定義 <li> 到Wordpress導航菜單

Question

我只是無法完全了解自定義步行者在worpress中的工作方式：

主題的home.php中的代碼（實際上所有代碼都包含在其他文件中，不會弄亂HTML）看起來像這樣：

/**
 * Contains wordpress function with array with parameters
 * @return string HTML output
 */
function show_main_navigation() {
    return wp_nav_menu(
        array(
            'theme_location' => 'header-menu',
            'echo' => false,
            'depth' => '-1',
            'walker' => new Last_Item_Walker()
        )
    );
}

沃克看起來像這樣：

class Last_Item_Walker extends Walker_Nav_Menu { 

    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= '<li class="spec"><a href="#" title="title">title</a></li>'; // my custom <li>
        $output .= "$indent</ul>\n";
    }
}

覆蓋的方法就是行不通的。

如果我嘗試覆蓋另一種方法，例如：

class Last_Item_Walker extends Walker_Nav_Menu { 

    function end_el( &$output, $item, $depth = 0, $args = array() ) {
            $output .= "<br>"; // for demonstration
        $output .= "</li>\n";
    }
}

這是可行的，添加了br標簽，但這不是我想要的，我想在/ ul之前自定義最后一個li。

有人可以幫我嗎？

Answer 1

好的，使用過濾器更容易。

/**
 * Hardcodes shop item in navigation
 * @param string $items HTML with navigation items
 * @param object $args navigation menu arguments
 * @return string all navigation items HTML
 */
function new_nav_menu_items($items, $args) {
    if($args->theme_location == 'header-menu'){
       $shop_item = '<li class="spec"><a href="#" title="title">title</a></li>';
       $items = $items . $shop_item;
    }

    return $items;
}
add_filter('wp_nav_menu_items', 'new_nav_menu_items', 10, 2);

Answer 2

如果您不太擔心IE8及以下版本，可以使用：last-child選擇器。

li.spec:last-child{
    color: red;
}

如果您對IE8及以下版本感到不安，則可以使用polyfill使其工作。