如何为wp_NAV_MENU向li添加数据？

时间：2018-06-04 作者：Tiêu Dao Blog\'s

我有wp_nav_menu

<nav class="site-nav links-to-floor">
<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#our-menu">Our Menu</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Galleries</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>
</nav>
我想添加data-id="1" data-slug="home" 到<li>

<nav class="site-nav links-to-floor">
<ul>
    <li data-id="1" data-slug="home"><a href="#home">Home</a></li>
    <li data-id="2" data-slug="our-menu"><a href="#our-menu">Our Menu</a></li>
    <li data-id="3" data-slug="events"><a href="#">Events</a></li>
    <li data-id="4" data-slug="galleries"><a href="#">Galleries</a></li>
    <li data-id="5" data-slug="contact-us"><a href="#">Contact Us</a></li>
</ul>
</nav>

2 个回复
SO网友:cjbj

根据您的需求范围，您至少有三种选择：

的末尾有一个过滤器wp_nav_menu 这样可以更改函数的输出。如果菜单已修复，您可以使用它对html字符串进行简单的查找和替换。这是一个简单的解决方案，但如果更改菜单，则必须更改功能wp_nav_menu 使用custom walker 它根据您可以从“管理”菜单页面中提取的现有信息生成数据元素。这就是你的想法

SO网友:DHL17

这不是正确的方法，但您可以像这样尝试jQuery以获得所需的输出：

function add_li_atts_script()
{
?>
<script>
    jQuery(document).ready(function(e) {
    jQuery(\'#menu-item-276\').attr("data-id","1");
    jQuery(\'#menu-item-276\').attr("data-slug","home");    
    });
</script>
<?php
}
add_action(\'wp_head\',\'add_li_atts_script\');
对于每个新菜单，您需要添加这两行，并需要li 新的ID 默认情况下wp_nav_menu 将生成唯一ID 对于每个li :

jQuery(\'#li-id\').attr("data-id","DESIRED ID");
jQuery(\'#li-id\').attr("data-slug","DESIRED SLUG");

结束
标签： menus   小码农  

相关推荐

Custom Menus and taxonomies

好的，我刚开始使用WordPress，不是很好，我有一个菜单问题，我真的需要一些帮助。我在一个网站上工作，它有多个地点，并非所有地点都销售相同的产品。所有位置都是具有父结构的页面。俄亥俄州-联系我们-关于我们-产品等。。。西弗吉尼亚州-联系我们-关于我们-产品等。。。宾夕法尼亚州-联系我们-关于我们-产品等我掌握了自定义页面模板的窍门，并为其添加了自定义菜单（因此，我所有的Ohio页面都使用了我制作的自定义Ohio模板，并包含了自定义Ohio菜单）。我正在使用帖子创建产品信息页面，并使用以下方式显示它们：