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

Question

我在 wordpress 网站上使用 fullpage.js 并且想使用它的一个功能 wicht 是在 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 标签之外，它可以正常工作。

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

谢谢

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