如何在WP导航栏中添加data-togling=“modal”data-Target=“#mymodal”属性?

时间:2015-11-30 作者:Benn Moffat

我是Wordpress的新手,所以请耐心等待!我已经在html5/ccs3中创建了一个模板,并且正在尝试用它制作wordpress模板。

在我的导航菜单(html)中,我有一个社交菜单,可以打开3种不同的模态:

<social-icons>
  <div class="navbar-collapse collapse">
    <div class="btn-group nav navbar-nav navbar-right" role="group">
      <button type="button" class="btn btn-success navbar-btn facebook"><i class="fa fa-facebook-official btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn twitter"><i class="fa fa-twitter-square btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn instagram"><i class="fa fa-instagram btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn google"><i class="fa fa-google-plus-square btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn vine" data-toggle="modal" data-target="#vineModal"><i class="fa fa-vine btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn snapchat" data-toggle="modal" data-target="#snapchatModal"><i class="fa fa-snapchat btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn periscope" data-toggle="modal" data-target="#periscopeModal"><img src="assets/img/periscope.png" class="periscope-img"/></button>
      <button type="button" class="btn btn-success navbar-btn email"><i class="fa fa-envelope btn-icon"></i></button>
    </div>
  </div> <!-- nav -->
</social-icons>
我已经在WP中创建了菜单结构并分配了所有css类,但我不知道如何添加其他属性,特别是数据切换和数据目标属性。

我看到过一些听起来很相似的解释,但我没法去做,而且我发现的大部分都是几年前的事了。

如果有人能启发我,我会非常感激的!提前感谢

1 个回复
SO网友:Shuvo Habib

PHP方式:将以下内容添加到函数中。php文件。过滤器nav\\u菜单\\u链接\\u属性:

add_filter( \'nav_menu_link_attributes\', \'my_menu_atts\', 10, 3 );
function my_menu_atts( $atts, $item, $args )
{
  // Provide the id of the targeted menu item
  $menu_target = 123;

  // inspect $item

  if ($item->ID == $menu_target) {
    // original post used a comma after \'modal\' but this caused a 500 error as is mentioned in the OP\'s reply
    $atts[\'data-toggle\'] = \'modal\';
    $atts[\'data-target\'] = \'#myModal\';
  }
  return $atts;
}
jQuery方式:

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

    jQuery(document).ready(function() {
        jQuery(\'#menu-item-365\').find(\'a\').attr(\'data-toggle\', \'modal\');
        jQuery(\'#menu-item-365\').find(\'a\').attr(\'data-target\', \'#myModal\');
    });
</script>

相关推荐

Add extra markup to WP menus

我被要求将一个HTML网站重新开发为一个WP主题,它有一个非常高级的菜单结构,我不太确定如何复制它。第二个菜单项有一个子菜单,但它不仅仅是“li”中的“ul”,还有额外的div等。。因为下拉列表有3列布局,其中2列包含子链接,第3列包含内容。这是一个示例:<ul class=\"nav navbar-nav three\"> <li class=\"dropdown yamm-fw\"> <a href=\"#\" class=\"dropdown-toggl