如何将引导下拉菜单添加到 wordpress

Question

我使用 bootstrap 框架设计了一个网站，现在我将其转换为 wordpress 网站，我面临的挑战是让导航的下拉菜单按设计显示。我可以从 wordpress 动态获取菜单，但我不能按照 css 样式动态获取下拉菜单。

这是我的 HTML 代码

<ul class="nav nav-justified menu_bac">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="company.html">Company</a></li>
<li><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
      Products <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      <li role="presentation" class="dropdown-submenu"><a>Grandstream</a>

      <ul class="dropdown-menu">
      <li role="presentation" class="dropdown-submenu"><a>IP-Multimedia <br/>Video Telephony</a>
      <ul class="dropdown-menu">
      <li><a href="gxv3275ipmultimedia phone.html">GXV3275 IP <br/>Multimedia phone</a></li>
      <li class="divider"></li>
      <li><a href="gxv3240multimediaipphone.html">GXV3240 IP <br/>Multimedia phone</a></li>


      </ul>
      </li>

这是我用来动态获取菜单的代码

<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<?php wp_nav_menu(array('menu_class' => 'nav nav-justified','container_class' => 'menu_bac')); ?>
</div>
</div>

如果有人可以指导我按照设计动态获取下拉菜单会很有帮助吗？

Answer 1

在这种情况下，最简单的解决方案是使用 jquery。您可以在 functions.php 文件中添加一个新类来检查菜单项是否有子项，然后向该项添加属性或使用引导程序导航步行器。在这里'我会选择更简单的。

<pre>
<script>
    $(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');
    });
</script>
</pre>

将此添加到您的 footer.php 文件中，不要忘记将引导 css 和 js 文件加入队列。

Answer 2

这可以通过nav walker 实现。您可以使用this 并按照以下步骤操作。

1. 将navwalker (wp-bootstrap-navwalker.php) 放入您的theme root
2. 在functions.php 文件中调用navwalker。 require_once('wp-bootstrap-navwalker.php');
3. 在 Wordpress 后端创建菜单 (Appearance -> Menus)
4. 在您的菜单区域，header.php

wp_nav_menu( array(
  'menu' => 'main_menu',
  'depth' => 2,
  'container' => false,
  'menu_class' => 'nav nav-justified',
  'walker' => new wp_bootstrap_navwalker())
);

`main_menu` is your menu name

Answer 3

嗯，这是一个带有示例的答案。请注意，此代码未经测试。请在尝试此代码之前备份您的主题。

我将使用str_replace 方法。

echo str_replace('sub-menu', 'dropdown-menu', wp_nav_menu( array('theme_location' => 'primary', 'menu_class' => 'nav nav-justified menu_bac','container' => false,'echo' => false)));

jquery 将类和属性添加到子菜单 li，

jQuery(document).ready(function() {
     jQuery('.dropdown-menu li').addClass('dropdown-submenu');
     jQuery('.dropdown-menu li').attr('role', 'presentation');
});

您需要在 wp_nav_menu 数组中定义您的 theme_location。主要是默认的。如果您制作了自定义导航菜单，请使用该菜单。否则您的菜单将不起作用。

我认为这会对您有所帮助。让我知道是否有问题。

Answer 4

查看这个答案wp_nav_menu change sub-menu class name?

您可以通过在菜单中添加助行器来做到这一点。还有另一个使用str_replace 的问题的答案。也检查一下。

如果您不打算使用 div 或 nav 包装菜单的主 ul，则需要将 container 属性设置为 false。并将您的 menu_bac 类添加到 menu_class 属性。所以该属性中将有 3 个类。

要为您的子菜单添加属性和类，我认为 JQuery 会很容易。它可能不是最好的解决方案。但您将能够非常轻松地解决问题。

希望这会有所帮助。

Answer 5

使用自定义导航步行器来生成您的菜单。我更喜欢https://github.com/twittem/wp-bootstrap-navwalker - 它很简单，对我来说完美无缺。