Question

我在stackoverflow上看到过一些类似的问题，但我的有点不同......

我需要能够在wordpress菜单中添加自定义数据属性。我遇到的问题是我发现的所有解决方案，例如：

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'] = 'myModal';
  }
  return $atts;
}

允许您为所有菜单项添加相同的属性。我需要的是，实际上是一种添加相同数据属性的方法，但列表上的每个元素都有不同的值。

这几乎是我需要达成的目标：

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

因为我需要在此处使用此插件：https://github.com/alvarotrigo/fullPage.js#fullpagejs

任何建议？

由于

Answer 1

我想解决方案是扩展导航项目。我之前做过这个，为菜单项添加图标。

看看这里 - 而不是子标题，你可以命名字段“anchortarget”（或其他任何东西）并在你的菜单中调用它... http://www.wpexplorer.com/adding-custom-attributes-to-wordpress-menus/

如果您需要进一步的提示，您应该谷歌搜索“wordpress + menu + custom field”。

希望这会对你有所帮助。一切顺利

Answer 2

最后，我设法使用javascript解决了这个问题。

这就是我所做的：

(function() {
  var arrayList, key, val;

  arrayList = ['first', 'second', 'third', 'fourth'];

  for (key in arrayList) {if (window.CP.shouldStopExecution(1)){break;}
    val = arrayList[key];
    console.log("key is " + key + " and val is " + val);
    $('li').each(function(index) {
      if (parseInt(index) === parseInt(key)) {
        return $(this).attr('data-anchor', val);
      }
    });
  }
window.CP.exitedLoop(1);


}).call(this);

使用您需要的数据创建数组
Foreach循环通过数组迭代
在该循环内，循环通过菜单项
如果菜单索引与数组索引相同，请将数组值附加为属性。

这里也是一个codepen示例：http://codepen.io/NickHG/pen/GmKqqE

Answer 3

好的，太糟糕了，对不起。我会发布我为我的图标编写的代码，但代码就像400行与walker和东西。但是，由于你似乎正在使用基础，你应该到这里 - ＆gt; https://www.smashingmagazine.com/2015/10/customize-tree-like-data-structures-wordpress-walker-class/

即使您不了解php或wordpress钩子，本教程也将绝对解释手动编码所需的每一步。它有效，我只是通过复制/粘贴它来测试我的网站。

如果你向下滚动，你会看到截图 - 他们添加了一个图标字段（几乎和我一样）他们是如何做到的以及他们如何使用它。看到这个啧啧之后，老实说，我后悔自己完成了这一切。这很痛苦 - 这个啧啧就像一个魅力......

将自定义数据属性添加到Wordpress导航菜单

3 个答案: