将类添加到特定的 WordPress 锚菜单答案

【问题标题】：Add class to specific WordPress anchor menu将类添加到特定的 WordPress 锚菜单
【发布时间】：2016-08-22 08:24:16
【问题描述】：

我正在创建我的自定义引导菜单。但是，我在这里陷入了困境。我只想将class name 添加到nav_menu 之一。例如：

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#" class="btn btn-primary">Contact</a></li>
    </ul>
</nav>

假设，我只想在Contact 菜单中添加class。怎么做？在Screen Options 中添加CSS Class 只会将类添加到<li> iterm。但我想要它在<a> 标签中。

任何帮助将不胜感激。谢谢

【问题讨论】：

通过 jQuery 你可以试试：$("a.btn").addClass("myClass");
不会为每个锚标签添加相同的类吗？现在，我的菜单中没有名为 btn 的类。

标签： jquery html css wordpress twitter-bootstrap

【解决方案1】：

您需要做的是将以下代码粘贴到您的functions.php文件中：

//Filtering a Class in Navigation Menu Item
function my_walker_nav_menu_start_el($item_output, $item, $depth, $args) {
    if($item->title == 'Contact'){
        $classes     = implode(' ', $item->classes);
        $item_output = preg_replace('/<a /', '<a class="'.$classes.'"', $item_output, 1);
        return $item_output;
    }
 }
add_filter('current-menu-item', 'my_walker_nav_menu_start_el', 10, 4);

上面的代码只是检查菜单项标题是否为联系人。如果条件匹配，则添加“当前菜单项”类。我们需要添加一个自定义类，以使其适用于我们正在进行的这个设计。

【讨论】：

你好 Rahul，我认为这段代码与来自Screen options 的adding class 相同。我放置了上面的代码，它的显示如下：<li class=" current-menu-item"><a title="Contact Us</a><Contact Us" href="http://localhost/aone/contact-us/">/li> 但我希望它为<li ><a class="current-menu-item" title="Contact Us</a><Contact Us" href="http://localhost/aone/contact-us/">/li>
类还没有添加:(。上面的类在哪里？
这个解决方案非常不可靠。如果有额外的钩子，你会渲染两次class属性，在浏览器网站渲染过程中很容易出现不一致的情况。

【解决方案2】：

您可以使用 walker_nav_menu_start_el 过滤器来实现类似的效果。

function add_class_to_menu_item($item_output, $item, $depth, $args)
{
    if( 51 == $item->ID ) {
        return str_replace('<a', '<a class="btn btn-primary"', $item_output);
    }
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'add_class_to_menu_item', 10, 4);

【讨论】：

【解决方案3】：

这对我有用，希望有用

  function anchor_menu_add_class( $atts, $item, $args) {
     if($item->title == 'Contact'){
    $class = 'nav-link btn btn-primary btn-sm px-2 py-1 mt-1 mr-2'; // your class
    $atts['class'] = $class;
  }
    return $atts;`enter code here`
}
add_filter( 'nav_menu_link_attributes', 'anchor_menu_add_class', 10, 3 );

【讨论】：

【解决方案4】：

首先做一件事，使用这样的屏幕选项向您的 li 添加类

<li class="contact"><a href="#" class="btn btn-primary">Contact</a></li>

然后添加这个 jquery。

$("ul li.contact").find('a').addClass("anchortagclass");

它将为联系人菜单的锚标签添加类:)

【讨论】：

【解决方案5】：

http://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item

无需编码，添加任意数量的类，简单、快速、原生 WP。

【讨论】：

【解决方案6】：

您需要将类属性附加到锚点本身。在您的 wordpress 管理页面上

自定义 > 控制面板 > 脚本。

将这些添加到文本框中。

<script>
var anchorarray = document.getElementsByTagName('a');
for(var i=0; i<anchorarray.length; i++){
anchorarray[i].setAttribute('class', 'page-scroll');
}
</script>

这个翻译成class = page-scroll，你可以把它改成你喜欢的。

【讨论】：