将“数据悬停”添加到Wordpress菜单项

Question

我试图找出一种方法可以在Wordpress上的菜单项中添加“数据悬停”，即：

我要放置：

data-hover="ABOUT US"

进入

<a href="#">ABOUT US</a>

却无法手动更改链接html本身，从而使其变为：

<a href="#" data-hover="ABOUT US">ABOUT US</a>

但是Wordpress的使用非常烦琐，如果没有JavaScript，我找不到一种方法来实现。 那么有人可以给我一些想法吗？

Answer 1

 $(document).ready(function() { $('a').each(function() { $(this).attr('data-hover', $(this).text()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#">ABOUT US</a> <a href="#">FOO BAR</a> 

但我强烈建议您编辑实际视图，而不要使用那种肮脏的解决方案。

Answer 2

将此添加到主题中的functions.php中

add_filter( 'nav_menu_link_attributes', 'add_custom_data_atts_to_nav', 10, 4 );
function add_custom_data_atts_to_nav( $atts, $item, $args ) {

$atts['data-hover'] = $item->title;
return $atts;}

希望这会有所帮助！