WordPress 后台菜单添加气泡通知

leixue WordPress建站 2019-01-01 18:21:36 阅读(...) 评论(2)

WordPress 后台中,不论是 WordPress 更新,还是相关的主题或者插件有升级更新提醒后,都会在相关的管理菜单中以红色气泡数字的通知方式告知你,那么对于一个 WordPress 开发者来说,如果想要深度的定制一些功能或者同样实现一些提示信息该如何来实现呢?

WordPress 后台菜单添加气泡通知

这是因为子凡在前段时间做泪雪建站的提现功能开发时相当的,这样只要我们登录后台,只要有人申请了提现就能够一目了然的看到是否有待处理的信息,从而不会被动的点击二级菜单或者必须要进入到相关的页面才能够看到处理状态,大大的提高了工作效率和更加人性化的使用体验,所以子凡就趁 2019 年元旦节来分享给大家吧!直接看代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
//WordPress 后台菜单添加气泡通知示例代码
add_action('admin_menu', 'fanly_menu_add_notification_demo');
function fanly_menu_add_notification_demo() {
	$notification = 2; //提示信息
 
	add_menu_page(
		'测试菜单标题', //网页标题 title 名称
		$notification ? sprintf('菜单名称 <span class="awaiting-mod">%d</span>', $notification) : '菜单名称', //菜单名称
		'manage_options', //用户权限
		'fanly_menu', //菜单别名
		'fanly_menu_page' //菜单页面函数
	);
}

以上代码主要是一个添加后台菜单的功能,WordPress 开发者应该都了解其中的用处,当然你可能并不能直接使用该段代码,因为这仅仅只是子凡提供的一个示例代码,其中 add_menu_page 函数的第二个参数才是至关重要,因为我们平常使用最多的就是直接填写菜单名称,这样在 WordPress 后台就能看到对应的菜单名称,然而我们要添加气泡通知,则需要添加一个 span 内容,将气泡的提示添加进入才可以。

而至于这个气泡的内容,并没有限制具体的内容,只是大多数的使用情况都是数字类型,当然也可以包含使用字符串等等,但是为了确保 WordPress 后台菜单宽度的体验,建议大家竟可能的简短,或者更多推荐大家使用数字气泡内容作为提示。

当然除了可以给 add_menu_page 主菜单添加气泡通知,同样你还可以使用 add_submenu_page 函数是给 WordPress 后台的子菜单添加提示,同样还是给大家一个示例代码作为参考:

1
2
3
4
5
6
7
8
9
10
11
12
//WordPress 后台子菜单添加气泡通知参考代码
add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function );
 
//将 add_submenu_page 函数中的第三个参数$menu_title,替换为以下代码内容即可
$notification ? sprintf('菜单名称 <span class="awaiting-mod">%d</span>', $notification) : '菜单名称'
 
//parent_slug 父级菜单项的别名
//page_title 页面的 title 信息
//menu_title 菜单标题
//capability 权限
//menu_slug 别名
//function 执行函数

到这里子凡想要分享的所有内容也就该结束了,相信你也同样能够举一反三,依样画葫芦的对比使用即可,这会在你某些 WordPress 功能开发时提供更优秀的使用体验。

除非注明,否则均为泪雪博客原创文章,禁止任何形式转载

本文链接:https://zhangzifan.com/wordpress-admin-menu-add-notification-bubble.html

发表评论

  1. 缙哥哥
    1楼
    缙哥哥 5个月前 (01-10)

    来一个效果的截图嘛!

    • 张子凡
      回复
      张子凡 5个月前 (01-14)
      回复 @缙哥哥 :效果截图就是,你登录你的后台,如果有待审核的评论,那就是效果了