如何将数据属性添加到 wordpress 导航菜单中的 <li> 元素答案

【问题标题】：how to add data attribute to a <li> element in wordpress nav menu如何将数据属性添加到 wordpress 导航菜单中的 <li> 元素
【发布时间】：2015-11-07 04:44:16
【问题描述】：

我在 wordpress 网站上使用 fullpage.js，并想使用其中一个功能，即在 li 上添加一个类。但要做到这一点，您需要添加数据属性 data-menuanchor 。

我看过这个：

add_filter( 'nav_menu_link_attributes', 'my_nav_menu_attribs', 10, 3 );
function my_nav_menu_attribs( $atts, $item, $args )
{
  // The ID of the target menu item
  $menu_target = 113;

  // inspect $item
  if ($item->ID == $menu_target) {
    $atts['data-menuanchor'] = 's1';

  }
  return $atts;
}

它可以工作，除了它将属性添加到 a 标签并需要它在 li 标签上。

另外，如果我想对菜单上的所有项目执行此操作。我需要对所有项目执行此功能吗？而且我想我每次都必须重命名函数？

谢谢

【问题讨论】：

标签： wordpress custom-data-attribute fullpage.js

【解决方案1】：

我不确定 WP 是否为此提供了特定的过滤器/方法。您将不得不与 wp_nav_menu_items 一起进行一些手动 DOM 操作。

https://developer.wordpress.org/reference/hooks/wp_nav_menu_items/

function addDataAttr( $items, $args ) {
    $dom = new DOMDocument();
    $dom->loadHTML($items);
    $find = $dom->getElementsByTagName('li');

    foreach ($find as $item ) :
        $item->setAttribute('data-menuanchor','s1');
    endforeach;

    return $dom->saveHTML();

}

add_filter('wp_nav_menu_items', 'addDataAttr', 10, 2);

【讨论】：

我将如何获取项目本身的名称，而不是使用 s1？例如，如果菜单项是“home”，我将如何获取“home”？

【解决方案2】：

我解决了这个问题，使用自定义链接并将链接中输入的 url 作为属性并将 # 字符替换为空。必须在functions.php文件中输入以下代码：

add_filter( 'nav_menu_link_attributes', 'add_data_atts_to_nav', 10, 4 );
    function add_data_atts_to_nav( $atts, $item, $args ) {
    $atts['data-menuanchor'] = strtolower(str_replace("#","",$item->url));
    return $atts;
}

附上我的菜单截图。

任何问题都告诉我，我很乐意帮助他们。

运气。

【讨论】：

这非常感谢。对我来说，还需要将父 ul id 添加到“menu”属性的 fullpage.js.min 初始化选项，对我来说是：menu: '#menu-top-menu'

【解决方案3】：

实际上我正在为 fullpage.js 导航寻找类似的东西，我管理它设置了一个过滤器，从后端获取预先存在的标题属性并将其分配给“数据菜单”只是为了保持它即使我必须添加新的东西，至少也是最低限度的可扩展性和可维护性。

这是我用过的。

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

  $atts['data-menuanchor'] = $item->attr_title;


return $atts;

}

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

【讨论】：