首页
学习
活动
专区
工具
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 的导航菜单中添加带有图标的子菜单项。

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

相关·内容

wp_nav_menu 函数经Walker_Nav_Menu 类自定义导航菜单HTML

WordPress 中有一个导航菜单函数wp_nav_menu,通过这个函数可以控制菜单输出的HTML 结构,一般开发者用这个函数的一般是在输出HTML 中自定义一些id 或者class 而已,整体的HTML...项目的需求是各种各样的,了解如何自定义导航菜单HTML 结构就十分重要了。 wp_nav_menu 函数 囿于篇幅,本文不会教你怎么使用wp_nav_menu 函数,请自行补习。...HTML 结构有非常大的限制(比如说我想在每个li前面添加个标签办不了,一些class的名称也定义不了),如果只这么用根本不能适应各种各样的项目需求,好在WordPress 提供了一个类Walker_Nav_Menu...例子: 比如说WordPress 中输出二级菜单的话,ul 中类名默认是sub-menu,那我想改为child-menu,怎么办?....= "\n$indent\n"; } } 然后在wp_nav_menu 函数中调用这个自定义的类: <?

2.5K70

WordPress 技巧:给 wp_nav_menu 函数添加缓存,提高页面效率

WordPress 自定义菜单功能是非常好用的一个功能,但是我们在实际使用的过程当中,却发现一个非常严重的问题,效率非常低下,如果自定义菜单比较复杂的话,会产生多达十几条甚至几十条的 SQL 查询,我认真查看了下...wp_nav_menu 函数的源代码发现其没使用进行缓存,但是 wp_nav_menu 又没有足够多的 hook,于是我只能重写了一个 wpjam_nav_menu 函数,使用 WordPress...Transients API 对生成的菜单进行缓存,大大提高页面的效率: /* Plugin Name: WPJAM Memcached Nav Menu Plugin URI: http://blog.wpjam.com...$menu_id); } 将上面的函数添加到当前主题的 functions.php 文件,或者直接上传为一个插件并激活。...然后在主题模板中(一般在 header.php 文件中)使用 wpjam_nav_menu 函数替代原来的 wp_nav_menu 即可。 ----

39750
  • WordPress 自定义菜单功能介绍和使用详解

    如果你的主题不支持自定义菜单功能,那么左边的 主题位置 面板会提示你,这个自定义菜单的选项将会在侧边栏显示。...如果主题支持自定义菜单功能,那么这个面板则会提示有支持几个自定义菜单、自定义菜单的名称(需要定义)是什么。 上面提示,有一个自定义菜单,并且名称为 topnav 。...现在,我要制作这个自定义菜单的内容。在左边有三个面板:分类目录、自定义链接、页面。里面包含着你当前博客里面的相关数据。 我们只需要勾选相应的内容或者直接拖动到右边的刚刚设置的菜单面板中即可。...在 'header-menu' => __( 'topnav' ) 这句代码中,我加了__() 这个函数,它是用于跨语言翻译用的。 wp_nav_menu 之后,在主题中添加自定义菜单。...如果你使用 3.4.2 版本的时候,自定义菜单无法使用,可以自行搜索一下解决方法。 ----

    1.2K20

    wordpress导航菜单详解及改造

    /注册一个菜单 如上述代码 就是创建一个别名为‘header-menu’,名称为导航的菜单 那么如果要创建多个菜单的话 参考下面代码 register_nav_menu(array( 'header_menu...'%3$s' 去ul保持li不变 更多相关的内容 参考官方对菜单函数的说明 https://developer.wordpress.org/reference/functions/wp_nav_menu...if(function_exists('wp_nav_menu')) { wp_nav_menu(array('container'=> false,'items_wrap'=>'%3$s','theme_location...一般来说 我们最多只需要二级菜单 我们只需把depth改为2即可 但如果要三级菜单以上呢 可不是简简单单那改个depth就行了 构造三级菜单 我们需要对菜单进行定制 需要使用walker参数 该参数接受一个自定义的...应该没有这么奇葩的要求吧 如果真有,就得再改造一番了 如果想自定义walker函数 自己定制菜单 只要有能力,完全可以 下面给一个用wp菜单实现输出bootstrap菜单结构的教程 http://www.ashuwp.com

    3.2K70

    WordPress设置登陆用户和未登陆用户显示不同菜单

    说明:一般来说网站头部有一个导航菜单,有时候由于某些因素我们需要给登陆和未登陆用户分别显示不同的菜单项,这里说下方法。...1、创建两个菜单 先进入WordPress后台-外观-菜单中,创建两个菜单,菜单名称分别设置成:已登陆和未登录,并给这两个菜单分配不同的菜单项。...2、确定菜单位置名称 开始下一步前,我们需要知道菜单位置名称,也就是theme_location参数的值,用文本编辑器打开当前主题目录中的header.php,搜索wp_nav_menu一般都能找到这个值...,代码一般长这样: // theme_location后面的 top 就是我们要找的值 wp_nav_menu( array( 'theme_location' => 'top', 'menu_id'...添加执行代码 最后,在当前主题的functions.php添加以下代码即可: function ludou_nav_menu_args($args = '') { // 下面的top改成第2步获取到的菜单位置名称

    1.2K20

    使用 WordPress 的导航菜单

    WordPress 原来默认的导航菜单只能是页面,或者分类,或者两者,如果想自己加入一个自定义链接都需要修改主题,非常不方便,所以一个完全可定制化的自定义的 WordPress 导航菜单成了所有人的需求...而 WordPress 3.0 的其中一个非常重要的功能是一个全新的菜单管理系统,这个系统可以让我们创建包含由日志,页面,分类,标签和其他链接组成的完全自定义菜单,并且还支持多级菜单,非常方便和强大,今天就谈谈如果使用...这里我们只注册一个导航菜单的主题位置: register_nav_menu( 'nav-menu', '导航菜单'); nav-menu 是这个导航菜单的名字,用来在函数中定义身份的,而“导航菜单”则是名称...添加和显示导航菜单 注册好之后,就可以到 WordPress 后台 > 外观 > 菜单 添加菜单,添加的菜单的顺序是这样的: 首先定义好一个单独的菜单。 然后吧这个菜单赋给一个主题位置。...然后我们到主题的显示菜单的位置通过以下 wp_nav_menu() 就能把刚才定义的菜单显示出来,当然 wp_nav_menu() 这个函数可以有非常详细的参数,但是这里只要简单使用就可以,在特殊的情况下才可能使用到

    2K10

    设计模式(十一):结构型之组合模式

    一、设计模式分类 创建型模式 用于描述“怎样创建对象”,它的主要特点是“将对象的创建与使用分离” 提供了单例、原型、工厂方法、抽象工厂、建造者 5 种创建型模式 结构型模式 用于描述如何将类或对象按某种布局组成更大的结构...// 树枝节点 public class Menu extends AbstractMenuComponent { //菜单可以有多个子菜单或者子菜单项 private final...for(int i = 0; i i++) { System.out.print("--"); } System.out.println...component = new Menu("系统管理",1); //将二级菜单添加到一级菜单中 component.add(menu1); component.add...(menu2); //打印菜单名称(如果有子菜单一块打印) component.print(); } } // 结果 ——系统管理 ————菜单管理 ———

    9310

    【北京迅为】i.mx8mm嵌入式linux开发指南第四篇 嵌入式Linux系统移植篇第六十八章u-boot图形化配置

    按下“Enter” 键进入子菜单。配置界面下方有五个按钮,为选中并进入,为返回上一层或退出,帮助, 保存,加载指定的配置文件。...,所以 menu 到 endmenu 代码块里面的 config 条目就是子菜单 中的配置选项。...其中 boot 类型俩的值有 俩种,也就是 y 和 n,也就是说,如果我们使用了这个类型,在 make menuconfig 对应的选项中我们可以选 择 y 和 n,tristate 的值类型有三种,分别是...我们在主菜单中添加了一个名为 test menu 的子菜单,然后在这个子菜单里面我们添 加了一个名为 TEST_CONFIG 的配置项,这个配置项变量类型为 bool,默认配置为 Y,帮助信息为 just...添加完成以后在图形化配置界面表现如下: 在主菜单中添加的子菜单子菜单中的配置项,默认为 y,注释信息为 just test。在此界面输入?

    9610

    项目需求讨论- 自定义圆形排版的ViewGroup来构成动态弹框菜单

    少年,Too Young Too Simple,比如我们一共有10项中的业务,某个A公司有我们的三个功能,然后你前段界面写死,B公司有五项功能,然后你这时候写了二个界面,这时候,突然A公司说我升级了。...我也要跟B公司一样有五项功能,然后你又去改界面? 一共有A,B,C...W 公司,难道你就去写A-W个布局??(同理,如果是城市划分,比如在不同的城市可能支持的功能业务不同,出现不同的菜单。...那我们的难点就变成了: 既然我们是动态的显示这个菜单,拿到这些数据后怎么来呈现呢 很多人应该做这么个界面会觉得简单,但是如果是一个根据数量自动排好的菜单界面就有点不知所措了。...如果给了我们N个数据,我们要在这个弹框中显示出N个,那我们的问题也就变成了:能否提供一个自定义的ViewGroup,然后我传入几个View对象,可以按照一定的规则帮我自动排布,这样我们拿到N个数据后,只需要新建相应的...View对象,然后添加到这个ViewGroup就行了。

    51620

    Head First设计模式——组合模式

    最近比较忙,有段时间没有更新设计模式的进度了。今天继续学习组合设计模式。   ...迭代器模式中说到两个餐馆合并然后使用迭代器进行统一处理菜单的打印,但是现在有一个新的需求是原来大菜单中我们希望加入子菜单,比如饭后甜点。那么这个时候对于需求模型来说就是类似下面这样 ?...菜单拥有菜单项,菜单项中可能还拥有子菜单,我们现在要打印菜单。也就是处理每个菜单和菜单项,如何将他们合理的组织起来并统一处理?要解决这个问题,组合模式来实现这一需求。...这个模式能够创建一个树形结构,如果我们有了一个树形结构的菜单、子菜单和可能还带有菜单项的子菜单,那么任何一个菜单都是一种“组合”。因为它既可以包含其他菜单,也可以包含菜单项。...foreach 循环打印菜单组件,如果遇到另外一个菜单对象则进入子菜单打印。

    46930

    VC++6.0入门——案例 电话本的案例

    当单击这个动态生成的子菜单中的某个菜单项时,程序就会把相应的人名和电话号码显示在程序窗口上。处理首次回车,增加菜单当第一次按下回车键时,首先创建一个弹出菜单,然后把这个菜单项目添加到程序的菜单栏上。...我们可以在上述例6-32所示代码中,在添加菜单项目之后,使菜单栏进行一次重绘操作。处理其他字符输入如果当前用户输入的不是回车键的话,就应该在程序窗口中显示当前输入的字符。...这个函数的声明如下所示:这个函数有一个BOOL类型的参数,如果该参数的值是TRUE,窗口重绘时就会把窗口的背景擦除掉;否则,保留窗口的背景。该参数的默认值是TUE。...处理空格分割的姓名和电话接下来,需要实现在输入人名、空格、电话号码,并当按下回车键后,把输入的人名作为菜单项的文本添加到PhoneBook子菜单下这一功能。...子菜单下。

    6100

    iOS 二级菜单(UITableView实现)「建议收藏」

    2 如果有子菜单点一下打开,如果没有,则实现相应的操作; 我们来实现他(界面有点丑,但主要是功能,界面很简单自己设计一下就行): 个人想法是这样的: 首先建立一个cell的类,用于存放cell中的内容...; 下面我说一下大体的思路吧; 当选中cell的时候看看这个cell有没有子菜单,如果没有很简单直接打开就行了; 如果有那么我们先将这些子菜单想办法添加到掌管父菜单的数组中,然后生成一个位置数组(为了在...tableview中调用 insertRowsAtIndexPaths: withRowAnimation: 这个函数进行插入操作并且带有动画); 删除操作相同的意思先从控制父菜单的数组中删除,然后同样生成位置数组调用函数删除...TableArry objectAtIndex:indexPath.row]; NSLog(@"%d",indexPath.row); if(cell.ChildArray.count==0)//如果没有子菜单...]; [_DeleteArry addObject:child];//添加到删除数组 } item.Open = NO;//设置子视图关闭 NSMutableArray

    1.3K30

    菜单与JApplet组件

    ,你需要创建一个菜单对象: JMenu editMenu = new JMenu("Edit"); 然后把此层菜单添加到菜单栏中: menuBar.add(editMenu); 接着在菜单对象中添加菜单项...你可以通过 JMenuItem(String s,Icon i)或者JMenuItem(Icon i)构造器来 为菜单指定一个图标,或者通过JMenuItem类中的setIcon方法(继承自 AbstractButton...除了按钮装饰以外,你可以像对待其他菜单项一样对待复选框和单选按钮,单选按钮菜单项同常规单选按钮一样。你必须把它们添加到一个按钮组中。当组中的一个按钮被选择后,所有的其他按钮都自动成为未选择项。...比如,如果你在菜单项"Save As"有一个快捷键"A",那么在第二个"A"(SaveAs)下画下划线可能更有意义。通过调用setDisplayedMneMonicIndex方法。...如果你有一个Action对象,那么你可以把快捷键作为 Action.MNEMONIC_KEY的键值添加到该对象中,如: cutAction.putValue(Action.MNEMONIC_KEY

    6610

    一步步教你用CSS添加SVG过滤器

    在本教程中,重点将放在 SVG 的过滤器上 —— 但不只是将它们应用于 SVG 图像,我将向你展示如何将它们应用于任何常规页面的内容上。...如果你此刻在浏览器中查看页面,将看到一个带有一些文本的图像。当前标题仍然是没有样式的,接下来为它设置样式并应用 SVG 过滤器。...它设定了 padding 值,使其周围能够有适量的空间,颜色也会改变。...将以下导航内容添加到正文代码的最顶部,也就是本教程第一步中开始的标题之前。这将在一个圆内创建一个看上去像汉堡?的菜单图标。...添加这一项可使第一个菜单元素在用户单击菜单后移动到位。每个菜单元素都会以稍长的时间移出。

    2.9K20

    【愚公系列】2023年11月 Winform控件专题 ContextMenuStrip控件详解

    通过添加菜单项和子菜单项,可以为用户提供更多的操作选项。使用方法:在Visual Studio的工具箱中找到ContextMenuStrip控件,将其拖动到窗体上。...在代码中为控件添加菜单项和子菜单项,如下所示:// 创建一个菜单项ToolStripMenuItem menuItem1 = new ToolStripMenuItem();menuItem1.Text...(menuItem1);在控件的MouseDown事件中判断鼠标右键是否按下,如果是,则显示ContextMenuStrip,如下所示:private void control_MouseDown(object...以下是使用ToolStripComboBox属性创建ContextMenuStrip控件的步骤:将ContextMenuStrip控件添加到Winform中。...ToolStripSeparator separator = new ToolStripSeparator();// 将菜单项和分隔符添加到ContextMenuStrip控件中contextMenuStrip1

    1.1K11

    一键完成对话需求?这款插件你不能错过(Unity3D)

    你不必将它们添加到数据库中,但是如果你想在对话中方便地在下拉菜单中引用它们,你可以添加它们。 Actor:对话的主要参与者(通常是玩家)的显示名称。...Group 分组 如果勾选此项,则将其标记为用于分组子节点的直通节点。 Menu Text 菜单文本 在播放器响应菜单中显示的文本,例如对对话文本的简短解释。如果为空,则默认为对话文本。...Entry # 输入# (If (如果Has Entries 有项 项目的描述。 Entry # State 输入#状态 条目的起始状态。...按照下面的说明将本地化添加到对话数据库中。 如何本地化对话 这些步骤演示了如何将西班牙语(es)和俄语(ru)添加到对话中。...将翻译添加到本地化字段: 如何本地化任务 这些步骤演示了如何将西班牙语(es)和俄语(ru)添加到任务中。 1.在“模板”选项卡上展开Quests 任务 foldout. 折页。

    4.8K20
    领券