Menu Custom Data Attributes

时间:2018-02-17 作者:Harvey

我正在尝试将自定义数据属性添加到<a> 要素我想做的是将导航效果集成到CodePen

我可以做所有的CSS,但我需要添加HTML部分,如下所示:

   <ul class="snip1226">
  <li class="current"><a href="#" data-hover="Home">Home</a></li>
  <li><a href="#" data-hover="About Us">About Us</a></li>
  <li><a href="#" data-hover="Blog">Blog</a></li>
  <li><a href="#" data-hover="Services">Services</a></li>
  <li><a href="#" data-hover="Products">Products</a></li>
  <li><a href="#" data-hover="Contact">Contact</a></li>
</ul>
如何以及在何处将此添加到WordPress?我需要编辑什么才能在功能上添加此HTML?

谢谢

哈维

2 个回复
SO网友:Den Isahac

如果要添加自定义data 由生成的菜单的属性wp_nav_menu 作用您可以使用nav_menu_link_attributes 筛选以将所需属性添加到<a> 元素。

function add_menu_atts( $atts, $item, $args ) {
    $atts[\'data-hover\'] = $atts[\'title\']; // add data-hover attribute

    return $atts;
}
add_filter( \'nav_menu_link_attributes\', \'add_menu_atts\', 10, 3 );

SO网友:user1551496

You can also try:

/*
 * Add filter attribute 
 */

add_filter( \'walker_nav_menu_start_el\', \'modify_walker_data_attr\', 10, 4);

function modify_walker_data_attr( $item_output, $item, $depth, $args )
{

    // I use ACF for adding field to a menu item
    // https://www.advancedcustomfields.com/resources/adding-fields-menu-items/
    $data_hover = get_field(\'data-hover\', $item);

    $old = \'<a\';
    $new = \'<a data-hover="\'.$data_hover.\'" \';

    $item_output = str_replace($old, $new, $item_output);

    return $item_output;
}
结束