如何在wordpress

Question

我尝试使用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())
);

哪个工作得很好。现在我有一个问题，我menu内有<a class="menu">home</a>课程。如果数据是动态传递的，我如何将menu类放在我的锚标记内。我们有什么方法可以自定义此wp_nav_menu(array( ));？

Answer 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

Answer 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>

Answer 3

打开class-wp-bootstrap-navwalker.php

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

保存文件并刷新Wordpress

无需编辑functions.php文件，将更改直接实现为navwalker php文件。

希望这会有所帮助！

Answer 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

中显示的示例中