如何向 WordPress 导航菜单中的 <li> 元素添加数据属性

Question

我正在 WordPress 网站上使用 fullpage.js，并且想使用它的功能之一，即在 li 上添加一个类。但要做到这一点，您需要添加数据属性 data-menunchor 。

我见过这个：

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 有专门的过滤器/方法。您必须执行一些手动 DOM 操作以及

wp_nav_menu_items

。

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

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

附上我的菜单截图。

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

运气。

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

Answer 4

自 WordPress 6.3.0 起，有一个新的过滤器：nav_menu_item_attributes，您可以使用它向导航菜单

<li>

元素添加属性，如下所示：

function my_custom_nav_menu_item_attributes( $li_atts, $menu_item, $args, $depth ) {
    $li_atts['data-menuanchor'] = 's1';
    return $li_atts;
}
add_filter( 'nav_menu_item_attributes', 'my_custom_nav_menu_item_attributes', 10, 4 );