wp_nav_menu（），如何更改<li>类？

16

我正在为我的网站构建菜单。静态看起来像这样：

<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控制的自定义图像。

这可能吗？我应该使用什么策略来克服这个问题？

theme-development menus navigation

— 基督教
source

在这里您可以在ul> li> a sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links

— Rameez SOOMRO中

14

使用自定义的助行器，删除不需要的内容并添加课程。这是我用来获取带有清晰标记的列表的助行器：T5_Nav_Menu_Walker_Simple。

您也可以过滤'nav_menu_css_class'或'wp_nav_menu_items'。但是在我看来，步行者课更容易理解和控制。

— 福厦
source

感谢Toscho，我发现在新版本的Wordpress（3.3）中，我们可以为每个菜单项添加自定义类fir，以解决我的问题。我尝试了您向我建议的脚本（T5_Nav_Menu_Walker_Simple），该脚本确实从中剥离了所有内容<li>，我们如何控制要保留的元素？

— 基督教徒

1

@Christian您可以根据需要更改助行器，这只是一个非常基本的示例。要查看哪些信息可用，添加print_r( $item, TRUE )到每个li。然后决定如何处理。:)

— fuxia

这为我指明了正确的方向，我需要的是wp_nav_menu，但是我需要更改“ container_class”参数以适合我的特定用例，在某些情况下，我在某种情况下将主菜单换成了另一个菜单，但需要类要与CSS保持一致。

— D. Dan

10

转到外观>菜单-选择所需的菜单-转到右上角的“屏幕选项”，选择“ css类”-向每个菜单项添加一个类。

— Q工作室
source

1

将<li>类设置为nav-link，因为引导程序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在该数组中取消设置属性。

— wei
source

0

正如最后提到的那样，您可以通过外观>菜单添加自己的类，并在屏幕选项中勾选CSS类。在助行器中，您可以通过以下方式访问在此处输入的内容：

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

我什至用它在菜单中添加了预先命名的图像-一点点的胡扯，但它可以工作。

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

— 用户名
source