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

Question

我在一个 wordpress 网站上使用 fullpage.js，我想使用其中一个功能，即在 li 上添加一个 class。但是要做到这一点你需要添加数据属性 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 标签之外，它可以正常工作。

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

谢谢

Answer 1

我不确定 WP 是否为此提供了特定的 filter/method。您将不得不与 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);

Answer 2

实际上我正在为 fullpage.js 导航搜索类似的东西，我设法设置了一个过滤器，从后端获取 pre-existing title-attr 可自定义并将其分配给 'data-menuanchor' 只是为了让它至少保持最小的可扩展性和可维护性，即使我必须添加一些新的东西。

这是我用过的。

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

Answer 3

我解决了这个问题，使用自定义 links 并将在 link 中输入的 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;
}

附上我的菜单截图。

有什么问题告诉我，我很乐意帮助他们。

运气。

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

how to add data attribute to a <li> element in wordpress nav menu

wordpress

custom-data-attribute

fullpage.js