0

晚上好，我需要将以下静态菜单转换为 WordPress 的菜单。下面是 HTML 代码：

            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <div class="container px-5">
                    <a class="navbar-brand" href="index.html">Start Bootstrap</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                            <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
                            <li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
                            <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
                            <li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a></li>
                            <li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
                                    <li><a class="dropdown-item" href="blog-home.html">Blog Home</a></li>
                                    <li><a class="dropdown-item" href="blog-post.html">Blog Post</a></li>
                                </ul>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" id="navbarDropdownPortfolio" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Portfolio</a>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownPortfolio">
                                    <li><a class="dropdown-item" href="portfolio-overview.html">Portfolio Overview</a></li>
                                    <li><a class="dropdown-item" href="portfolio-item.html">Portfolio Item</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

在主题 header.php 文件中的 PHP 代码下方：

    <?php
                            wp_nav_menu(array(
                                    'theme_location' => 'menu-1',
                                    'container_id'    => 'site-navigation',
                                    'menu_class'      => 'navbar-nav ms-auto mb-2 mb-lg-0',
                                    'menu_id'         => 'primary-menu',
                                    'add_a_class'     => 'nav-link',
                                    'add_li_class'     => 'nav-item',
                            ));

                            ?>

一切正常，但没有添加“nav-link”和“nav-item”类。我该如何解决？谢谢

4

1 回答 1

0

如果不调整主题，通常无法添加额外的 li 类。

尝试在您的 functions.php 文件中添加此代码段，以允许您向 li 标签添加额外的类：

// =======================================
// Customize Menus
// =======================================
       
        // Ability to add classes to wp_nav_menu LI tags

        add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);

        function add_additional_class_on_li($classes, $item, $args)
        {
            if (isset($args->add_li_class))
            {
                $classes[] = $args->add_li_class;
            }
            return $classes;
        }
         
        // A tags

        add_filter( 'nav_menu_link_attributes', 'add_link_atts');

        function add_link_atts($atts) 
        { 
             $atts['class'] = "nav-link"; 
             return $atts;
        }

现在您可以像这样添加这个额外的 li 类属性：

       wp_nav_menu( array(
            'theme_location'    => 'full-width-menu',
            'depth'             => 1,
            'container'         => 'nav',
            'container_class'   => '',
            'container_id'      => 'mob-nav',
            'menu_class'        => '',
            'add_li_class'      => 'nav-item'
        ) );

此外，您应该考虑为 wordpress 使用 bootstrap nav walker。

https://dhali.com/wordpress/add-wp-bootstrap-navwalker-to-you-wordpress-theme/

于 2021-09-13T23:21:42.067 回答