如何在 wordpress 中自定义 wp-bootstrap-navwalker答案

【问题标题】：How to customize wp-bootstrap-navwalker in wordpress如何在 wordpress 中自定义 wp-bootstrap-navwalker
【发布时间】：2019-12-28 23:50:38
【问题描述】：

我正在尝试使用 wp-bootstrap-navwalker 来自定义我的导航。

这是我当前的静态代码示例

<div class="collapse navbar-collapse">
  <ul class="navbar-nav nav navbar-right">
    <li><a class="menu" href="index-2.html">home</a></li>
    <li><a class="menu" href="#">travel</a></li>
    <li><a class="menu" href="#">lifestyle</a></li>
    <li><a class="menu" href="about.html">about me</a></li>
    <li><a class="last-menu" href="contact.html">contact</a></li>
 </ul>
</div>

我正在使用这个 wp-bootstrap-navwalker 使其动态化

 wp_nav_menu( array(
    'menu'              => 'primary',
    'theme_location'    => 'primary',
    'depth'             =>  2,
    'container'         => 'div',
    'container_class'   => 'collapse navbar-collapse',
    'menu_class'        => 'nav navbar-nav navbar-right',
    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
    'walker'            => new wp_bootstrap_navwalker())
);

效果很好。现在我有一个问题，我的<a class="menu">home</a> 中有menu 类。如果该数据是动态出现的，我如何将menu 类放在我的锚标记中。有什么方法可以自定义这个wp_nav_menu(array( )); 吗？

【问题讨论】：

wp_bootstrap_navwalker() 是否覆盖了start_el 方法？

标签： php wordpress twitter-bootstrap

【解决方案1】：

wordpress 方法是将'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 添加到wp_nav_menu(array( )) 然后您将拥有自定义导航项和普通链接项的特殊类。然后你可以从 CSS 中定位它们。有用链接：wp_nav_items css

否则需要更改：wp_bootstrap_navwalker

【讨论】：

【解决方案2】：

    <?php
    wp_nav_menu( array(
        'theme_location'    => 'primary',
        'depth'             => 2,
        'container'         => 'ul',
        'container_class'   => 'nav-menu',
      //  'container_id'      => 'bs-example-navbar-collapse-1',
        'menu_class'        => 'nav-menu sf-js-enabled sf-arrows',
        'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
        'walker'            => new WP_Bootstrap_Navwalker()
    ) );
    ?>






<ul class="nav-menu">
                      <li  class="menu-has-children"><a href="about.html">Ба довталаб</a>
                        <ul>
                            <li><a href="course-details.html">Course Details</a></li>       
                            <li><a href="event-details.html">Event Details</a></li>     
                            <li><a href="elements.html">Elements</a></li>
                              <li class="menu-has-children"><a href="">Level 2 </a>
                                <ul>
                                  <li><a href="#">Item One</a></li>
                                  <li><a href="#">Item Two</a></li>
                                </ul>
                              </li>                                         
                        </ul>
                      </li>
                    </ul>

【讨论】：

【解决方案3】：

打开类-wp-bootstrap-navwalker.php

搜索：$classes[] = ‘nav-item’; （第 146 行）在下方添加： $classes[] = ‘菜单’;

保存文件并刷新 Wordpress

无需编辑functions.php文件，直接对navwalker php文件进行修改。

希望这会有所帮助！

【讨论】：

【解决方案4】：

我正在使用此代码

 <header>
      <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
  <a class="navbar-brand" href="#">Top navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>

  </div>

我使用这个 wp-bootstrap-navwalker 让它变得动态

 <?php
  wp_nav_menu( array(
            'menu'              => 'top',
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'navbarCollapse',
            'menu_class'        => 'navbar-nav mr-auto',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker())
        );

  ?>

但它从未显示在 getbootstrap 中显示的示例中

【讨论】：