如何在导航菜单中自动为每个菜单项添加一个类?

时间:2014-08-12 16:31:41

标签: wordpress menu customization

我目前有这个标记:

$defaults = array(
    'theme_location'  => '',
    'menu'            => 'main-nav',
    'container'       => 'ul',
    'container_class'    => 'nav navbar-nav',
    'before'          => '<button class="btn btn-warning">',
    'after'           => '</button>',
    'menu_class'      => '',
    'menu_id'         => 'menu',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<div class="col-md-6 col-md-offset-3">%3$s</div>',
    'depth'           => 0,
    'walker'          => ''
);
wp_nav_menu( $defaults );

以下是my site

的示例

使用上面的当前结构,看起来链接适用于chrome除了firefox和ie

此外,bootstrap的元素调用

中的href链接

任何建议都会很棒!

1 个答案:

答案 0 :(得分:0)

删除items_wrap选项; wordpress菜单由<ul> - 标签组成,您不应在其中插入容器。

虽然您已为菜单指定了ID,但您应该可以使用

#menu li{
...
}

为您的菜单项目设置样式(至少我和我一起做的事情)。

不过,您的网站已离线。

将类添加到菜单项

以下正则表达式允许您为导航的每个(每个!)元素添加一个类,该元素拥有class标记。由于这只会影响li标记,因此效果很好。使用以下代码替换wp_nav_menu来电:

$menu = wp_nav_menu(array(
    'echo'=>0, // this is important
    'menu'=>'YOUR_MENU_SLUG',
    // your args here
));

$menu_item_class = 'YOUR_CLASS_NAME';
$menu = preg_replace('/class="([^"]*)"/', 'class="$1 '.$menu_item_class.'"', $menu);
print($menu);

如果您感到幸运,可以通过仅使其与li标记匹配来增强正则表达式,但上面的代码肯定会有效。