首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如果菜单有子菜单,如何将<i>项添加到wp_nav_menu中

在WordPress中,wp_nav_menu函数用于显示导航菜单。如果你想要在菜单项中添加子菜单,并且希望在这些子菜单项前添加一个<i>标签(通常用于图标),你可以通过自定义菜单 Walker 来实现。

以下是一个简单的示例,展示如何创建一个自定义的 Walker 类来在子菜单项前添加<i>标签:

代码语言:txt
复制
class Custom_Menu_Walker extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"sub-menu\">\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));
        $class_names = ' class="' . esc_attr($class_names) . '"';

        $output .= $indent . '<li id="menu-item-' . $item->ID . '"' . $value . $class_names . '>';

        $atts = array();
        $atts['title'] = !empty($item->attr_title) ? $item->attr_title : '';
        $atts['target'] = !empty($item->target) ? $item->target : '';
        $atts['rel'] = !empty($item->xfn) ? $item->xfn : '';
        $atts['href'] = !empty($item->url) ? $item->url : '';

        // 添加 <i> 标签到子菜单项
        if ($depth > 0) {
            $atts['class'] = 'menu-item-icon';
        }

        $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args, $depth);

        $attributes = '';
        foreach ($atts as $attr => $value) {
            if (!empty($value)) {
                $value = ( 'href' === $attr ) ? esc_url($value) : esc_attr($value);
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;

        // 在子菜单项前添加 <i> 标签
        if ($depth > 0) {
            $item_output = '<i class="your-icon-class"></i>' . $item_output;
        }

        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }
}

然后,在你的主题的functions.php文件中,注册这个自定义的 Walker:

代码语言:txt
复制
function custom_nav_menu($args = array()) {
    $args['walker'] = new Custom_Menu_Walker();
    wp_nav_menu($args);
}

最后,在你的模板文件中调用这个函数来显示菜单:

代码语言:txt
复制
custom_nav_menu(array(
    'theme_location' => 'primary',
    'menu_class' => 'nav-menu'
));

在这个示例中,your-icon-class是你想要添加的图标的 CSS 类名。你需要确保在你的样式表中有相应的图标样式定义。

这种方法的优势在于它提供了灵活性,允许你自定义菜单的输出,而不需要修改 WordPress 的核心文件。你可以根据需要添加任何 HTML 或 CSS 类,以便更好地控制菜单的外观和行为。

应用场景包括但不限于:

  • 当你需要在导航菜单中添加图标来增强用户体验时。
  • 当你想要为子菜单项提供视觉提示,以便用户更容易识别它们是子菜单项时。

如果你遇到了问题,比如图标没有显示,可能的原因包括:

  • CSS 类名your-icon-class没有在你的样式表中正确定义。
  • 图标字体文件没有被正确加载。
  • Walker 类的代码没有正确集成到你的主题中。

解决方法:

  • 检查并确保 CSS 类名正确无误。
  • 确认图标字体文件已经被正确引入到你的项目中。
  • 仔细检查 Walker 类的代码是否已经正确添加到functions.php文件中,并且没有语法错误。

通过这种方式,你可以轻松地在 WordPress 的导航菜单中添加带有图标的子菜单项。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券