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

希望这会有所帮助！

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

2 个答案: