将当前菜单项类添加到 wordpress 菜单模板

Question

所以我一直在尝试使用我自己的菜单模板来使用菜单项中的引导程序等进行缩放。到目前为止，它运行得非常好，但我偶然发现了一个问题。

通过添加和删除一些类，我错误地删除了一些标准类，例如用于活动菜单项样式的.current-menu-item class。我一直在尝试 google 和 Stack 上的一些答案，但遗憾的是找不到好的解决方案。所以这就是我现在所拥有的：

/**
 * Class walker_home_menu
 * Menu for the home page
 */
class walker_home_menu extends Walker_Nav_Menu
{

    // Displays start of an element. E.g '<li> Item Name'
    // @see Walker::start_el()
    // In your functions.php

    function start_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent\n";
    }

    function end_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent\n";
    }

    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
    {
        $indent = ($depth) ? str_repeat("\t", $depth) : '';
        $class_names = $value = '';
        $classes = empty($item->classes) ? array() : (array)$item->classes;
        $classes[] = 'menu-item-' . $item->ID;
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
        $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
        $id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args);
        $id = $id ? ' id="' . esc_attr($id) . '"' : '';
        $output .= $indent . '';
        $attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
        $attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
        $attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
        $attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';
        $item_output = '<li class="col-lg-2 col-md-2 col-sm-3 col-xs-6 home-menu-item text-center">';
        $item_output .= $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;
        $item_output .= "</li>";
        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }

    function end_el(&$output, $item, $depth = 0, $args = array())
    {
        $output .= "\n";
    }
}

我想要实现的目标是为活动菜单项添加一个active 类，以便我能够通过CSS 为活动菜单项提供不同的背景颜色。

提前感谢您的帮助！ 编码愉快！

Answer 1

所以我找到了我的问题的解决方案。因为我认为很多人会创建或喜欢创建自定义菜单，所以我正在回答我自己的问题。

在发布我的代码之前，我尝试将变量 $class_items 添加到 <li class=".."> 部分。但我没有任何成功。至少到现在为止。

所以答案是以正确的方式添加 wordpress 菜单项类。请参阅下面的代码。

        $item_output = '<li class="col-lg-2 col-md-2 col-sm-3 col-xs-6 home-menu-item text-center' . $class_names . '">';

像.current-menu-item 和.active 样式的wordpress 类名称将在我自己创建的新布局之后添加。

希望这对遇到此问题的每个人都有帮助。

对于那些想要复制我的代码作为基础的人来说，这是一个简单的解决方案，这是最终的工作 sn-p。

/**
 * Class walker_home_menu
 * Menu for the home page
 */
class walker_home_menu extends Walker_Nav_Menu
{

    // Displays start of an element. E.g '<li> Item Name'
    // @see Walker::start_el()
    // In your functions.php

    function start_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent\n";
    }

    function end_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent\n";
    }

    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
    {
        $indent = ($depth) ? str_repeat("\t", $depth) : '';
        $class_names = $value = '';
        $classes = empty($item->classes) ? array() : (array)$item->classes;
        $classes[] = 'menu-item-' . $item->ID;
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
        $class_names = $class_names ? ' ' . esc_attr($class_names) . '"' : '';
        $id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args);
        $id = $id ? ' id="' . esc_attr($id) . '"' : '';
        $output .= $indent . '';
        $attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
        $attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
        $attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
        $attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';
        $item_output = '<li class="col-lg-2 col-md-2 col-sm-3 col-xs-6 home-menu-item text-center' . $class_names . '">';
        $item_output .= $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;
        $item_output .= "</li>";
        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }

    function end_el(&$output, $item, $depth = 0, $args = array())
    {
        $output .= "\n";
    }
}

干杯，编码愉快！