如何在wp_nav_menu中将类添加到某些li元素

时间:2017-10-09 01:39:08

标签: wordpress wp-nav-menu-item

我正在尝试在wordpress wp_nav_menu中为li元素添加一个类。我在这里听了几个答案,但只能让它的一部分工作。所以对于我的导航菜单,我有>

functions.php >

//REGISTER NAVIGATION MENU
function smtg_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'footer-menu' => __( 'Footer Menu' )
    )
  );
}
add_action( 'init', 'smtg_menus' );

此代码将nav-links-dropdown类添加到类别的下拉菜单中。

function my_nav_menu_submenu_css_class( $classes ) {
    $classes[] = 'nav-links-dropdown';
    return $classes;
}
add_filter( 'nav_menu_submenu_css_class', 'my_nav_menu_submenu_css_class' );

Header.php >

$args = array(
    'theme_location'  => 'header-menu',
    'container'       => 'nav',
    'container_class' => '',
    'container_id'    => '',
    'menu_class'      => '',
    'menu_id'         => '',
    'fallback_cb'     => false );
wp_nav_menu( $args );

我的主导航中总共有4个li元素,其中只有一个li元素有子菜单,也就是下拉菜单。

我无法弄清楚如何将类添加到具有下拉菜单的li中以触发下拉菜单。

查看页面来源,我看到>

<!-- START NAV INSIDE NAV BAR -->
<nav class="menu-header-menu-container">
    <ul id="menu-header-menu" class="">
        <li><a href="#">Home</a></li>
        <li><a href="#">Categories</a>
            <ul  class="sub-menu nav-links-dropdown">
                <li><a href="#">Cat1</a></li>
                <li><a href="#">cat2</a></li>
                <li><a href="#">cat3</a></li>
                <li><a href="#">cat4</a></li>
                <li><a href="#">cat5</a></li>
                <li><a href="#">cat6</a></li>
            </ul>
        </li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
    </ul>
</nav>

在第二个LI元素上 - 我需要向其添加类cats-li-dropdown以显示下拉菜单。我似乎无法弄清楚如何在PHP中的任何地方做到这一点。

现在我正在使用jquery将类cat-li-dropdown添加到第二个元素中。

$('nav li:nth-child(2)').addClass('cats-li-dropdown');

如何避免使用jquery将类添加到第二个li元素?

我已经尝试在菜单选项中添加wordpress,但是当我查看页面源时它仍然是空白的。

这对li元素没有任何补充,即使看起来应该如此。还有其他想法吗?

Class entered into the menu options in wordpress admin - doesn't add it on page

1 个答案:

答案 0 :(得分:0)

对于未显示问题的自定义css类,请尝试添加menu参数:

$args = array(
    'menu'  => 'header-menu',
    'theme_location'  => 'header-menu',
    'container'       => 'nav',
    'container_class' => '',
    'container_id'    => '',
    'menu_class'      => '',
    'menu_id'         => '',
    'fallback_cb'     => false );
wp_nav_menu( $args );