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

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

WordPress 中有一个导航菜单函数wp_nav_menu,通过这个函数可以控制菜单输出HTML 结构,一般开发者用这个函数一般是在输出HTML 自定义一些id 或者class 而已,整体HTML...项目的需求是各种各样,了解如何自定义导航菜单HTML 结构就十分重要了。 wp_nav_menu 函数 囿于篇幅,本文不会教你怎么使用wp_nav_menu 函数,请自行补习。...Walker_Nav_Menu 用法(例子) wp_nav_menu 函数中有个参数 $walker,“自定义遍历对象,调用一个对象定义显示导航菜单。”...例子: 比如说WordPress 输出二级菜单的话,ul 类名默认是sub-menu,那我想改为child-menu,怎么办?...更多例子的话,最近发布EaseMobile 主题在导航栏上图标设置就是采用了Walker_Nav_Menu 类自定义输出。

2.5K70
您找到你想要的搜索结果了吗?
是的
没有找到

wordpress导航菜单详解及改造

对于wordpress主题来说 wp菜单是必不可少 可以用于制作导航栏 也可以做侧边栏、页脚导航等等 只要熟练掌握 就能利用wp菜单做成想要东西 话不多说 现在先讲一下菜单创建 首先要开启导航菜单功能...当然照我所写代码也可 具体怎么使用稍后会讲 然后在wp后台菜单显示如下 至于怎么设置菜单,具体见下面wordpress大学教程 https://www.wpdaxue.com/wordpress-nav-menus.html...实际使用我们并不会用到这么多参数 根据实际需要来调整即可 theme_location导航别名 menu期望显示菜单 container_idul父节点id值 container_classul父节点...class值 menu_classul节点class值 menu_idul节点id值 before菜单链接前文本 after菜单链接后文本 link_before每个菜单链接文本前文本 link_after...://developer.wordpress.org/reference/functions/wp_nav_menu/ 下面是一些实例 如果只用最简单代码 输出结构是这样 (方便起见,不写类名)

3K70

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->term_id, $menu_items, 3600); } return $menu_items; } //后台更新自定义菜单时候,更新缓存 add_action(...然后在主题模板(一般在 header.php 文件)使用 wpjam_nav_menu 函数替代原来 wp_nav_menu 即可。 ----

35150

使用 WordPress 导航菜单

WordPress 导航菜单系统概述 首先我们简单解释下这个导航系统几个概念: 主题位置:就是定义导航菜单在当前主题位置名称,比如你在导航位置定义了一个菜单,名字就叫做导航菜单,那么这里就显示...使用 WordPress 导航菜单 如何激活 WordPress 自带导航菜单 要使用 WordPress 导航菜单功能,首先要给当前主题注册导航菜单,从上面我们知道,我们可以注册一个或者多个导航菜单主题位置...这里我们只注册一个导航菜单主题位置: register_nav_menu( 'nav-menu', '导航菜单'); nav-menu 是这个导航菜单名字,用来在函数定义身份,而“导航菜单”则是名称...添加和显示导航菜单 注册好之后,就可以到 WordPress 后台 > 外观 > 菜单 添加菜单,添加菜单顺序是这样: 首先定义好一个单独菜单。 然后吧这个菜单赋给一个主题位置。...然后我们到主题显示菜单位置通过以下 wp_nav_menu() 就能把刚才定义菜单显示出来,当然 wp_nav_menu() 这个函数可以有非常详细参数,但是这里只要简单使用就可以,在特殊情况下才可能使用到

1.9K10

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

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

1.1K20

WordPress 教程:在 WordPress 如何使用 Dashicons

Dashicons 是 WordPress 官方出用于后台图标字体,可以用于 WordPress 各个地方,也可以用在 WordPreess 前台,但是你事先要加载相关 CSS。...各个地方如何使用 Dashicons register_post_type() 中使用: 注册文章类型时候,如果要自定义文章类型在后台左侧菜单图标,可以指定 menu_icon 参数为 dashicons...'menu_icon' => 'dashicons-products', ) ); }); add_menu_page() 中使用: 自定义后台页面的时候,也可以指定第六个图标的参数为...图标呢?...点击「WPJAM」菜单「 Dashicon」子菜单,首先看到按照分类显示所有 Dashicons 列表: 点击某个 Dashicon,就会显示大图,和其名称,对应 HTML 代码:

84120

WordPress日志、编辑类插件

可以从指定RSS/ATOM feed源自动更新发布文章到你WordPress博客. 想用WordPress做垃圾站朋友可以好好研究研究....两个插件虽然都涉及到字数统计, 但实质字数判断应该是不同. Category Icons 非常好用WordPress文章分类图标插件. 可以让你为每个分类指定一个不同图标....插件主页 postTabs postTabs可以让你用Tab切换模块方式显示文章或页面. 比较有视觉效果, 或当内容比较多而又具有层次结构时候使用....Article Templates 和上面介绍Posts Templates插件一样, 也是为日志发表创建一个模板, 方便同类布局文章发表. dTabs 这个WordPress插件创建一个Tab切换菜单和下拉菜单在你控制面板...特别的这份随机日志列表包含每篇文章第一张图片, 显示成缩略图. 插件 主页 WP Post Icon 允许博客作者为文章上传和选择主题图标图标,图标将自动显示在文章内.

1.5K30

泛在可用媒体播放器

,不管他们处于何种环境,而不是假设每个用户以完全相同方式与媒体播放器交互。...因此,如果你把播放和暂停作为一个具体例子来看这些图标,你会看到不是按钮代表按下或未按东西,而是一个变化图标,这意味着将要采取行动正在变化,并由该图标代表。...例如,当按钮有播放图标时,如果我按下它,这意味着它将播放视频。然后显示暂停按钮图标。如果我按下它,它将暂停视频。...所以,在这种情况下,我们想把它也表示为一个按钮,但在这里,我们希望它仍然使用动词,就像我们对一个瞬间按钮,但不是一个动词,它将以一种与所表示图标对应方式改变。...交替锁定按钮 播放速率控制建模更像是一个交替锁定按钮。它与旧设备菜单按钮类似,可以让你按一个菜单,然后进入一个菜单状态。

1.2K10

使用 Menu Icons 插件给 WordPress 菜单参加图标

一般我们需要编辑主题 CSS 文件才能给菜单添加图标,今天就给大家介绍一款 WordPress 插件 Menu Icons,可以让你在 WordPress 后台就能给每个菜单指定一个图标,操作非常简单...安装好 Menu Icons 之后,在 WordPress 后台,外观 > 菜单 界面,我们就会看到页面的左边有一个新叫做 Menu Icons Setting 窗体,它可以让我们选择用于菜单图标图标集...,并且设置图标所处默认位置: 从上图,我们可以看到已有四种最常用图标字体可供选择,图片选项让我们可以使用 WordPress 媒体库已有图片或者新上传一张图片。...另外插件也支持其他字体图标,插件 FAQ 有关于如何安装 Fontello 字体图标详细介绍。...点击上图中菜单“SELECT Icon”按钮,就会弹出一个选择窗,让你选择该菜单图标: 下面就是设置好图标之后效果: 下载:Menu Icons

80130

Sticky Posts Switch插件教程WordPress为分类添加置顶文章

当您将新内容发布到您网站时,之前帖子会关闭并最终移动到存档页面。粘性帖子允许您在WordPress添加精选帖子,并在您网站主页上以不同方式显示它们。...确保内容对您读者保持相关性、准确性和吸引力!  推荐:Astra主题怎么设置顶部固定菜单/粘性浮动菜单为什么要在WordPress类别添加置顶文章?  ...(帖子或自定义帖子类型)选择开关图标的颜色显示开关图标的列自定义顺序仅使用内置WordPress功能星形图标开关立即使用 ajax 将帖子保存为置顶状态可选地,将帖子所有翻译设置为置顶,支持 Polylang...该插件还在WordPress仪表板帖子设置添加了一个星形图标。这使您无需打开内容编辑器即可快速将帖子置顶。  3、从WordPress管理面板前往帖子。现在可以单击星形图标使帖子置顶。...请注意,星形图标仅在管理仪表板可见,现在已经为WordPress类别添加了置顶文章。

5.5K20

WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

对于首次使用用户,张戈博客还是继续介绍下好了! 先贴一下效果截图,了解一下图标字体是个什么东东: ? 其实,就是在需要位置显示一个图标而已。而这一切由 CSS+fonts 来实现,即图标字体。...那如何使用到 WordPress 导航菜单呢?...很简单,依次打开 WordPress 后台==>外观==>菜单,然后点开已有菜单,将得到 class 填入到 CSS 类即可,比如我在官方图标库查到“家”图标的 class 是 fa fa-home,...保存之后,WordPress 导航菜单【首页】前面就会出现一个“家”图标了。 如果发现点开菜单没有 CSS 类栏位怎么办? 很明显,你没把这个功能开出来。...点击菜单页面右上方显示选项】,勾上 CSS 类即可: ? 如果发现点击【显示选项】没动静怎么办? 看来你 WordPress 也是升级 4.2 了。

2.9K50

2019大前端dux6.0最新无限制版

目录 DUX主题是基于WordPress程序主题,由themebetter团队原创开发,是目前比较火wordpress主题,和大前端主题一样比较优秀主题还有begin知更鸟,两者功能都很多,界面也比较好看...7.3 新增对WordPress5.0+新版编辑器兼容支持 新增登录注册找回密码链接 nofollow 更新Awesome图标库到最新版5.7.2,免费图标都可以用 优化小工具画廊展示 优化导航二级菜单...,让展示更大气 优化网址导航页面模版细节 修复WordPress5.1后Ajax评论回复功能失效 修复几个开启debug后错误提示 修复网址导航页面模版左侧菜单抖动问题 DUX主题5.4版本更新内容:...新增全站评论整体关闭选项,主题设置-基本可设置 新增v2ex头像获取方式,删除多说方式,且可以在后台-设置-讨论中选择默认头像 调整底部友情链接选择只在首页显示时,不在首页分页显示 调整产品分类写法以避免因分类过多导致高度不够用...新增archives页面模版中文章标题后 显示 副标题 调整首页轮换图效率更高,手机端手势滑动更加顺畅 优化产品中心手机端左侧菜单显示问题 修复页面左侧菜单一键换色时候没有换色 更新时间: 以后将持续更新

3.2K50

2021 最新 IntelliJ IDEA 详细配置步骤演示(图文版)

menu items(在菜单显示图标) 在主菜单和上下文菜单,在项目左侧显示图标。...Menus and Toolbars(菜单和工具栏管理) 自定义菜单和工具栏,使其仅包含所需操作,对其进行重新组合并配置其图标。 在可用菜单和工具栏列表,展开要自定义节点,然后选择所需项目。...Notifications(通知事项) 可以启用和禁用有关某些事件通知,发生事件信息。更改其显示方式,并有选择地启用其日志记录。 7. Quick Lists(快捷菜单) 一组自定义弹出。...可以将其视为自定义菜单或工具栏,您可以为其指定快捷方式以进行快速访问。您可以根据需要创建任意数量快速列表。快速列表每个动作均由0到9之间数字标识。...3.在编辑器,通过关联快捷方式访问快速列表。 4.如果您不记得该快捷方式,则可以按其名称搜索快速列表。按Shift两次,然后输入快速列表名称。 8.

66410

WordPress 文章 Embed 功能及如何屏蔽

上一篇我们介绍了 WordPress Easy Embeds 功能,它可以让你直接输入一个视频或者其他媒体网站 URL,这个 URL 里面含有的视频或者媒体就自动显示出来。...WordPress 文章 Embed 功能 除了视频和这些媒体网站之外,WordPress 还能插入自己博客或者会其他 WordPress 博客文章链接,然后以卡片模式显示: https://blog.wpjam.com.../project/wpjam-basic/embed/ 如上所示:可以显示该文章标题,摘要以及特色图片(如果设置了的话),并且还有站点图标(没有则使用 WordPress 默认图标),评论链接和分享链接...「优化设置」「增强优化」标签页「Frame 嵌入」选项是不是设置了​:不允许任何网页,改成​:​只允许同域名网页。...屏蔽文章 Embed 功能 如果不想别人或者自己通过嵌入方式引入你文章,我们也可以屏蔽 Embed 功能: remove_action('wp_head', 'wp_oembed_add_discovery_links

51440

WordPress 教程:使后台菜单图标兼容 WordPress扁平化后台风格

WordPress 3.8 版本带来最大变化就是全新扁平化后台界面,所有的菜单图标和其他地方图标都是使用字体图标,所以支持界面放大和缩小,并且能够适应各种配色方案,但是通过插件新增菜单图标,如果使用图片的话...使用 Dashicons Dashicons 就是 3.8 带入 WordPress 核心中图标字体,现在 WordPress 后台所使用图标就是 Dashicons,这些图标是基于矢量,可以按照任意大小去缩放都不会失真...所以如果你觉得 dashicons 某个图标适合你插件,可以直接使用,比如我 WPJAM WordPress 插件 就是用 Dashicons cloud 图标: add_menu_page(...使用 SVG 图标 如果 Dashicons 图标还不能满足你需求,那么你可以使用 SVG 图片,和图标字体一样,SVG 图片也是可以任意大小缩放不失真的。...我们可以通过 Data URI scheme 方式插入,比如最新版微信机器人图标这样设置后台菜单图标(效果如上图): add_menu_page('微信机器人', '微信机器人', 'manage_options

28240
领券