在WordPress导航菜单上添加类 - PHP

在WordPress主题中，我们可以通过添加自定义类来修改导航菜单的样式。这将使得主题更加个性化，符合用户的需要。下面，我们将介绍几种在导航菜单上添加类的方法。

方法一：使用Walker类

Walker类提供了一种遍历和显示导航菜单的方式。我们可以通过继承Walker类并重载其中的方法来自定义导航菜单的输出。具体步骤如下：

1. 创建一个新的PHP文件，并定义一个新的类。该类应该继承Walker_Nav_Menu类，并重载其中的方法来覆盖其默认的行为。
2. 利用自定义的Walker类，我们可以通过给导航菜单项目添加一个CSS类来改变其样式。例如：在start_lvl()方法中，我们可以添加'sub-menu ' . $depth_class作为子菜单的类。

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat( "\t", $depth );
        $submenu = ($depth > 0) ? ' sub-menu' : '';
        $output .= "\n$indent<ul class=\"dropdown-menu$submenu depth_" . $depth . " {$args->menu_class}-menu\">\n";
        //$output .= "\n$indent<ul class=\"sub-menu {$args->menu_class}-menu{$depth_class}\">\n";
    }

}

3. 现在，我们需要在主题中注册使用自定义的Walker类。在调用wp_nav_menu()函数时，可以通过'walker' => new Custom_Walker_Nav_Menu()来注册使用我们自定义的类。

wp_nav_menu( array(
    'theme_location'        => 'primary',
    'menu_class'            => 'nav navbar-nav',
    'container'             => '',
    'container_class'       => '',
    'container_id'          => '',
    'fallback_cb'           => '',
    'menu_id'               => 'main-menu',
    'walker'                => new Custom_Walker_Nav_Menu(), // 注册使用自定义的walker类
) );

4. 最后，我们可以在主题的style.css文件中，通过添加相关的样式来对菜单进行自定义。例如：

.sub-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
}

li.menu-item-has-children:hover > .sub-menu {
    display: block;
}

方法二：使用“菜单项属性”字段添加类

此方法允许您在WordPress后台中使用“菜单项属性”字段添加菜单项上的CSS类。这是一个最简单的方法，在不需要修改代码的情况下，为菜单项添加一个CSS类。具体步骤如下：

1. 登录WordPress后台，在“外观”→“菜单”页面找到需要修改的导航菜单。
2. 点击需要添加类的导航菜单项，并在右侧的“菜单项属性”下方输入一个新的CSS类。例如：添加带有类名'my-custom-class'的自定类。

3. 点击“保存菜单”按钮，刷新您的WordPress网站，您将看到它已在菜单项中添加了自定义CSS类。

<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9 my-custom-class">
    <a href="#">Custom Link</a>
</li>

4. 在主题的style.css文件中，使用该类对菜单项进行自定义。例如：

.my-custom-class a {
    color: #ff00ff;
}

现在，您已经成功在WordPress导航菜单上添加自定义类。