Question

我需要将自定义属性添加到单个 WordPress菜单项。

<li id="menu-item-365" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-children-0">
<a href="http://www.mywebsite.com/whats-new/">WHATS NEW</a>
</li>

但我需要这样的代码

<li id="menu-item-365" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-children-0">
<a href="http://www.mywebsite.com/whats-new/" data-reveal-id="myModal1" data-animation="fade">WHATS NEW</a>
</li>

有人可以帮忙吗？

Answer 1

过滤此内容，定位特定的菜单ID非常简单：

将以下内容添加到functions.php文件中。

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 = 365;

  // inspect $item
  if ($item->ID == $menu_target) {
    $atts['data-reveal-id'] = 'myModal1';
    $atts['data-animation'] = 'fade';
  }
  return $atts;
}

Answer 2

<?php

$defaults = array(
    'theme_location'  => '',
    'menu'            => '',
    'container'       => 'div',
    'container_class' => '',
    'container_id'    => '',
    'menu_class'      => 'menu',
    'menu_id'         => '',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'depth'           => 0,
    'walker'          => ''
);

wp_nav_menu( $defaults );

?>

Answer 3

您是否在WordPress中听说过Walker_Nav_Menu概念？

这是一个例子，http://www.wpexplorer.com/adding-custom-attributes-to-wordpress-menus/

Answer 4

对于WordPress functions.php

如果您需要将属性添加到多个菜单项：

function add_specific_menu_atts( $atts, $item, $args ) {

$menu_items = array(66,72);

if (in_array($item->ID, $menu_items)) {
   $atts['data-ps2id-offset'] = '-75';
}

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

Answer 5

使用jquery。

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">

    $(document).ready(function() {
        $('#menu-item-365').find('a').attr('data-reveal-id', 'myModal1');
        $('#menu-item-365').find('a').attr('data-animation', 'fade');
    });
</script>

添加自定义属性Wordpress导航项

5 个答案: