【问题标题】:WordPress how to add <span> after main navigation dropdownWordPress 如何在主导航下拉菜单后添加 <span>
【发布时间】:2021-08-10 22:36:52
【问题描述】:

我喜欢在主导航li 元素中添加一个空的“跨度”,它有一个特定的类。

这是想要的外观:

<ul>
<li class="menu-item"><a href="#" class="nav-link"></a></li>
<li class="menu-item"><a href="#" class="nav-link"></a></li>
<li class="menu-item has-childern"><a href="#" class="nav-link"></a><span></span></li>
</ul>

我有一个在每个导航链接后添加跨度的代码:

add_filter('nav_menu_item_args', function ($args, $item, $depth) {
if ( $args -> theme_location == 'primary') {
    $args -> link_after  = '<span></span>';
}
    return $args;
}, 10, 3);

如何实现仅在具有“has-children”类的“li”元素中添加“span”?感谢您的帮助!

【问题讨论】:

标签: php wordpress navigation nav wp-nav-walker


【解决方案1】:

您可以使用nav_menu_link_attributes 过滤器挂钩来访问导航属性。

来自文档
nav_menu_link_attributes

  • '之后'
    (字符串)链接标记后的文本。
  • 'link_after'
    (字符串)链接文本之后的文本。

因此您可以通过多种方式进行设置,例如您可以执行以下操作:

add_filter('nav_menu_link_attributes', 'your_theme_custom_html_element', 10, 3);

function your_theme_custom_html_element($atts, $item, $args)
{

  if ($args->theme_location == 'primary' && (strpos($atts['class'], 'has-childern') !== false)) {

    $args->after  = '<span></span>';

  }

  return $atts;
}

刚刚在我自己的网站上进行了测试,它可以无缝运行!

【讨论】:

  • 感谢您的回答 Ruvee!您的代码几乎可以按我的需要工作:我的问题是,它将跨度添加到包含该特定类的项之后的所有导航项。看看这个:prnt.sc/139rnoq - 只有下拉菜单有 'dropdown-toggle' 类,但跨度也出现在其他菜单上。我不知道为什么会这样,因为你的代码对我来说似乎不错。
  • 好吧,我的代码在任何有一个名为“has-childern”的类的地方添加了&lt;span&gt;
  • 我没有更改您的代码,它看起来不错,但对我来说,它也将跨度添加到没有“has-children”类的菜单项中。我正试图弄清楚它是怎么回事。
  • 是的,我知道它有时会发生。就像我说的那样,我在我自己的网站上模拟了您在问题中提供的相同 html 标记,它完全符合您的需要。因此,为了进一步调试和定制它,我需要查看您的确切 html 标记。如果您愿意,您可以向我提供您的html matkup 的屏幕截图和/或编辑您的问题以包含主要的html
猜你喜欢
  • 2016-09-14
  • 2020-09-06
  • 1970-01-01
  • 2012-02-23
  • 2015-03-25
  • 1970-01-01
  • 2019-12-14
  • 1970-01-01
  • 2023-03-04
相关资源
最近更新 更多