将引导下拉类添加到导航菜单

时间：2017-07-26 作者：sevoug

如何在WordPress中构建此菜单

<div class="collapse navbar-collapse" id="collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">our story</a></li>
                    <li><a href="#">our vision</a></li>
                    <li class="dropdown">
                        <a href="#">History</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">History 1</a></li>
                            <li><a href="#">History 2</a></li>
                            <li><a href="#">History 3</a></li>

                        </ul>
                    </li>

                </ul>
            </div>
WordPress代码：

<div class="collapse navbar-collapse" id="collapse-1">

<?php
wp_nav_menu( array(
    \'theme_location\' => \'header\',
    \'menu_class\' => \'nav navbar-nav\',
    \'fallback_cb\' => false
) );
?>

</div>

3 个回复
SO网友:Max Yudin

最简单的方法是使用现成的解决方案。有一个WP\\u Bootstrap\\u Navwalker类，它扩展了WordPress的native Walker\\u Nav\\u Menu类，并使您的导航菜单为Bootstrap 3或4做好准备。Download it from GitHub.

将其添加到主题中，然后将以下内容添加到functions.php:

<?php
require_once(\'path-to-the-directory/wp-bootstrap-navwalker.php\');
更改path-to-the-directory/ 满足您的需求。

接下来，更改wp_nav_menu() 使用以下代码：

<?php
wp_nav_menu( array(
    \'menu\'              => \'header\', // match name to yours
    \'theme_location\'    => \'header\',
    \'container\'         => \'div\', // no need to wrap `wp_nav_menu` manually
    \'container_class\'   => \'collapse navbar-collapse\',
    \'container_id\'      => \'collapse-1\',
    \'menu_class\'        => \'nav navbar-nav\',
    \'fallback_cb\'       => false,
    \'walker\'            => new WP_Bootstrap_Navwalker() // Use different Walker
));
请注意，您不需要<div class="collapse navbar-collapse" id="collapse-1"> 因为它将由wp_nav_menu() 使用适当的CSS类和id.

此外，请阅读WP\\U Bootstrap\\U Navwalker自述。md文件仔细归档。

SO网友:Jiwan

在这种情况下，最简单的解决方案是使用jquery。可以在函数中添加新类。php文件来检查菜单项是否有子项，然后向该项添加属性，或者也可以使用引导nav walker。这里，我选择简单一点的。


    $(document).ready(function(){
        $("ul.sub-menu").parent().addClass("dropdown");
        $("ul.sub-menu").addClass("dropdown-menu");
        $("ul#menuid li.dropdown a").addClass("dropdown-toggle");
        $("ul.sub-menu li a").removeClass("dropdown-toggle"); 
        $(\'.navbar .dropdown-toggle\').append(\'\');
        $(\'a.dropdown-toggle\').attr(\'data-toggle\', \'dropdown\');
    });
只需复制并粘贴到页脚即可。php。有关更多详细信息http://webtrickshome.com/faq/how-to-add-bootstrap-dropdown-class-in-wordpress-menu-item

SO网友:Elidrissi simo

如果要修改默认wordpress菜单标记，可以使用Walker\\u Nav\\u菜单类。

https://codex.wordpress.org/Class_Reference/Walker

https://www.youtube.com/watch?v=IqTMhmjTBoE&list=PLriKzYyLb28kpEnFFi9_vJWPf5-_7d3rX&index=19

结束
标签： menus   navigation   twitter-bootstrap   小码农  

相关推荐

Horizontal Navigation

你好我已经和这个问题斗争了几个星期了。尝试各种方法。从CSS样式到自定义walker。我想将每个级别渲染为它自己的元素。导航菜单（在管理中的外观/菜单中定义）由页面、帖子和WooCommerce产品和类别组成。当我在主页上时，我想看到LEVEL 1菜单对象。当我导航到一个级别1页面时，我不想在顶部UL下面的UL中显示它的子级（级别2）。如果导航到级别1（级别2对象）的子级，我希望将其子级渲染为其自己的UL。所附图片显示了此场景，其中显示了所有级别。然而，在最好的情况下，这不应该取决于特定数量的级别。这应该