简体   繁体   English

WordPress导航Twitter引导程序自定义

[英]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-collapsecollapse因此可以根据引导程序对其进行样式设置。 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_idmenu_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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM