用于挂钩到菜单项并添加自定义属性的筛选器

时间：2014-07-16 作者：Adriano C R

我正在使用Foundation 作为基础和起始主题。我正在尝试构建，但我似乎不知道如何连接到WordPress输出的菜单，并向该菜单的<li> 标签。

当前菜单输出如下：

<ul id="menu-main-menu-1" class="top-bar-menu right">
<li class="divider"></li>
<li class="menu-item "><a href="#home">Home</a></li>
<li class="divider"></li>
<li class="menu-item"><a href="#about">About</a></li>
<li class="divider"></li>
<li class="menu-item"><a href="#work">My Work</a></li>
<li class="divider"></li>
<li class="menu-item"><a href="#contact">Contact</a></li>
</ul>
（这些链接仅用于示例）

我需要WordPress自动将以下属性添加到<li> 标签：data-magellan-arrival="[target]".

[Target] 需要由菜单项对应的page\\u ID自动填充。举个例子，我们先说<li><a href="">[PAGE]</a></li> link是Home，Home的page\\u ID是“21”（示例）。我需要data-magellan-arrival="[target]" 的内部<li> 设置为data-magellan-arrival="21".

所以它看起来像：<li class="menu-item" data-magellan-arrival="21"><a href="">[PAGE]</a></li>

老实说，我还不太擅长PHP，WordPress的过滤器/挂钩就更少了。希望有人能给我指出正确的方向，或者告诉我怎么做。

3 个回复
SO网友:Valex

其实你可以很容易地完成类似的事情，但对我来说也不是那么容易找到答案。我需要一个完整页的类似东西。js导航。所以我做到了这一点：我使用了一个alreday现有的wordpress菜单字段，但我没有使用它，我使用它的值来满足我的需要

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

  $atts[\'data-menuanchor\'] = $item->attr_title;


return $atts;

}

add_filter( \'nav_menu_link_attributes\', \'add_specific_menu_atts\', 10, 3 );
灵感来自https://codex.wordpress.org/Plugin_API/Filter_Reference/nav_menu_link_attributes

SO网友:Piyush Dhanotiya

请将此函数添加到functions.php 主题中的文件：

function add_attribute( $items, $args ) {
    $dom = new DOMDocument();
    $dom->loadHTML($items);
    $find = $dom->getElementsByTagName(\'li\');

    foreach ($find as $item ) :
        $item->setAttribute(\'data-magellan-arrival\',\'21\');
    endforeach;

    return $dom->saveHTML();

}
add_filter(\'wp_nav_menu_items\', \'add_attribute\', 10, 2);

SO网友:Sarah

这看起来像this 会让你找到正确的方向。

结束
标签： menus   filters   customization   小码农  

相关推荐

Problem with custom menus

在菜单上，我说的是自定义菜单，我有一个带有几列的页脚，每列都有一个项目列表，每列菜单都需要从wp admin上的菜单选项进行更新，所以我创建了关于函数的部分。调用菜单并在页脚上添加每个菜单的php。php文档，类似于：<?php wp_nav_menu( array(\'menu\' => \'f-1\', \'menu_class\' => \'\', \'container\' => \'nav\' )); ?> <?php wp_nav_menu( arr