Question

我正在创建自定义引导程序菜单。但是，我在这里遇到了什么。我想将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>。例如：

class

假设我想在Contact菜单中添加CSS Class。怎么做？在Screen Options中添加<li>只会将类添加到<a> iterm。但我希望它在arr[5]标签中。

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

Answer 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);

上面的代码只是检查菜单项标题是Contact。如果条件匹配，则添加“Current-menu-item”类。我们需要添加一个自定义类，以使其适用于我们正在开发的这种设计。

Answer 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);

Answer 3

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

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

Answer 4

这对我有用，希望是有用的

  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 );

Answer 5

首先要做一件事，通过这样的屏幕选项为你的li添加课程

 $db = new PDO('sqlite3:' . $dir . '/db.sqlite');

然后添加此jquery。

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

它会为联系人菜单的锚标记添加类：）

Answer 6

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

自定义＆gt;控制面板＆gt;脚本。

将这些添加到文本框中。

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

这可以转换为class = page-scroll，您可以将其更改为您喜欢的内容。

将类添加到特定的WordPress主菜单

6 个答案: