html - 将自定义 css 类添加到 wordpress 中的导航菜单项

Question

这是我的 HTML 导航菜单

                <ul class="col-sm-1 col-md-1 col-lg-8 p-0">
                  
                <li class="nav-item active ">
                    <a href="#" class="nav-link " role="tab" data-toggle="pill"><h5>Home</h5></a>
                    </li>
                    <li class="nav-item">
                    <a href="#" class="nav-link " role="tab" data-toggle="pill"><h5>Blog</h5></a>
                    </li>
                    <li class="nav-item">
                    <a href="#" class="nav-link " role="tab" data-toggle="pill"><h5>About US</h5></a>
                    </li>
                    <li class="nav-item">
                    <a href="#" class="nav-link " role="tab" data-toggle="pill"><h5>Contact us</h5></a>
                    </li>
                    
             </ul>

我想将其更改为 Wordpress 导航菜单，这是我所做的

我的functions.php文件

<?php

function register_ofoghweb_top_menu(){
   register_nav_menu('navbar','header-menu');
   
    }
add_action('init', 'register_ofoghweb_top_menu');


function add_menu_link_class($atts, $item, $args)
{
      $atts['class'] = 'nav-link " role="tab" data-toggle="pill';
      return $atts;
}
add_filter('nav_menu_link_attributes', 'add_menu_link_class', 1, 3);

这是我的 header.php 文件，用于显示导航菜单

<div class="col-sm-1 col-md-1 col-lg-8 p-0">
                <?php 
                
                register_ofoghweb_top_menu();
                
                
                wp_nav_menu(
                      array(
                        'theme_location' => 'navbar',
                        'menu_class' => 'nav nav-pills nav-justified navbar',
                          'container'=>'ul',
                              'before'=>'<li class="nav-item">',
                          
                          'after'=>'</li>',
                        'container_class'=>'nav-item',
                          'fallback_cb'=>false,
                        'link_before' => '<h5>',
                        'link_after' => '</h5>'
                      )
                    ); ?>
</div>

问题是 li 的 nav-item 类没有正确显示。这是 Inspector 中的结果：

<div class="col-sm-1 col-md-1 col-lg-8 p-0">
<ul id="menu-menu" class="nav nav-pills nav-justified navbar">

    <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-12"></li>

<li class="nav-item">
    <a href="http://localhost/site/" aria-current="page" class="nav-link &quot; role=&quot;tab&quot; data-toggle=&quot;pill">
        <h5>Home</h5>
</a>

</li>

我省略了不必要的代码。

提前感谢您的帮助。

标签： htmlcsswordpress