如何给wp_NAV_MENU中的下拉子菜单指定类?

时间:2018-04-12 作者:Sachet Shrestha

这是我的html代码

<div class="section__main-nav" id="section__main-nav-id">
            <div class="container">
                <nav class="navbar navbar-toggleable-md navbar-light">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbarToggler" aria-controls="main-navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="main-navbarToggler">
                        <ul class="nav navbar-nav">
                            <li class="nav-item active">
                                <a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item dropdown">    
                                <a href="shop.html" class="nav-link dropdown-toggle dropdown-hover" data-toggle="dropdown">Shop</a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Hoddie</a>
                                    <a class="dropdown-item" href="#">Long Sleeve Tees</a>
                                    <a class="dropdown-item" href="#">Short Sleeve Tees</a>
                                    <a class="dropdown-item" href="#">Tank Top</a>
                                    <a class="dropdown-item" href="#">Jumper</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item color-primary" href="shop.html">See All</a>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="about.html">About Us</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="contact.html">Contact Us</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
我把它转换成我的wordpress

<div class="section__main-nav" id="section__main-nav-id">
            <div class="container">
                <nav class="navbar navbar-toggleable-md navbar-light">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbarToggler" aria-controls="main-navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <?php 

                        wp_nav_menu( array(
                            \'theme_location\'    => \'primary\',
                            \'container\'         => \'div\',
                            \'container_class\'   => \'collapse navbar-collapse\',
                            \'container_id\'      => \'main-navbarToggler\',
                            \'menu_class\'        => \'nav navbar-nav\'
                        ) );

                     ?>
                </nav>
            </div>
        </div>
如何给出wordpress代码中下拉列表的类

1 个回复
SO网友:Chirag Patel

您可以使用Walker_Nav_Menu (WordPress Default class).

以下是一个示例-

在里面header.php 文件-

<nav id="header-menu">
<?php
  wp_nav_menu( array(
    \'theme_location\' => \'primary\',
    \'walker\'  => new Child_Wrap()   
   ) );
?>
</nav>
在我的functions.php 文件-

class Child_Wrap extends Walker_Nav_Menu
{
    function start_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\\t", $depth);
        $output .= "\\n<div class=\'sub-menu-holder\'>$indent<ul class=\\"drop-down\\">\\n";
    }

    function end_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\\t", $depth);
        $output .= "$indent</ul></div>\\n";
    }
}
以上是我的代码示例,您可以根据需要进行更改。谢谢

结束