[英]Wordpress navigation Twitter bootstrap customization
I have been trying to theme my navigation to use the twitter bootstrap. 我一直在尝试将导航主题设置为使用twitter引导程序。 I want it to look like the demo example of a fixed top banner as seen here http://getbootstrap.com/examples/navbar-fixed-top/ 我希望它看起来像固定的顶部横幅的演示示例,如http://getbootstrap.com/examples/navbar-fixed-top/
I have got it working but I do not like the way I have got it working! 我已经开始工作了,但是我不喜欢我已经开始工作了!
wp_nav_menu(
array(
'container_class' => 'main-nav navbar-collapse collapse',
'theme_location' => 'primary',
)
);
The code above builds my navigation, as you can see besides the default I have added navbar-collapse
and collapse
so it styles it according to bootstrap. 上面的代码构建了我的导航,您可以看到除了默认代码之外,我还添加了navbar-collapse
和collapse
因此可以根据引导程序对其进行样式设置。 This is not really the issue. 这不是真正的问题。 The issue is when this piece of code then generates the menu I do not know how to add a class to the UL
it creates so below is how I have done it. 问题是当这段代码然后生成菜单时,我不知道如何向其创建的UL
添加类,因此下面是我的操作方法。
$(document).ready(function(){
if($("#menu-menu-1").length !== 0){
$(".menu").addClass("nav navbar-nav");
} else {
alert("no navigation system");
}
});
This works by detecting the UL
when the code has made it because it has an id of #menu-menu-1
then it adds the necessary classes and it all works. 这是通过在代码生成时检测UL
实现的,因为它的ID为#menu-menu-1
然后添加了必要的类,并且一切正常。
Finally the question! 最后的问题! Is there a way to do this more efficiently because this method is very Quick Fix style and doesn't seem like a trustworthy permanent method. 有没有一种方法可以更有效地执行此操作,因为此方法是一种快速修复样式,并且似乎不是值得信赖的永久方法。 the alert was just there for testing purposes so I knew if the script was running 警报只是出于测试目的,所以我知道脚本是否正在运行
wp_nav_menu() has options for both menu_id
and menu_class
. wp_nav_menu()具有menu_id
和menu_class
选项。 To add both to your menu, you would do something like the following: 要将两者都添加到菜单中,您将执行以下操作:
$menu_args = array(
'theme_location' => 'primary',
'container_class' => 'main-nav navbar-collapse collapse',
'menu_class' => 'nav navbar-nav',
'menu_id' => 'menu-menu-1'
);
wp_nav_menu( $menu_args );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.