WordPress 在后台管理菜单中如何使用Dashicons图标

看,田野里的玉米露出了笑脸,秋风吹过,闪烁着太阳的光芒,秋天是金色的。看满山的枫叶,红得就像一团火焰在熊熊燃烧,散发着生机,秋天是红色的。呵呵,我们都错了,秋天不是金黄的,也不是红色的,秋天是五颜六色的。

WordPress 3.8 以后,后台的管理菜单就使用了 Dashicons 字体图标,作为主题或插件开发者,也应该与时俱进,今天就简单说说如何在后台管理菜单中使用Dashicons图标。

关于 Dashicons

Dashicons 是一个开源的字体图标项目,目前托管于 GitHub,目前主要用于 WordPress 后台,当然, 你也可以在自己的主题或插件中使用。更多的介绍,请访问 http://melchoyce.github.io/dashicons/。你可以点击任何一个图标,然后就可以获取它对应的 HTML、CSS 或 Glyph 调用方法。

在菜单中使用 Dashicons

1.在自定义文章类型中使用 Dashicons

下面我们简单说说如何在自定义文章类型(custom post type)中使用Dashicons。我们注册了一个 Slides 类型,然后使用 'dashicons-images-alt2' 作为菜单的图标:

1
2
3
4
5
6
7
8
9
10
11
register_post_type('slides',
	array(
		'labels' => array(
			'name' => 'Slides',
			'singular_name' => 'Slide'
			),
		'public' => true,
		'has_archive' => true,
		'menu_icon' => 'dashicons-images-alt2'
		)
	);

register_post_type('slides', array( 'labels' => array( 'name' => 'Slides', 'singular_name' => 'Slide' ), 'public' => true, 'has_archive' => true, 'menu_icon' => 'dashicons-images-alt2' ) );

效果如下图所示:

2.在插件顶级菜单中使用 Dashicons

你还可以在创建插件菜单时使用 Dashicons ,比如下面使用 add_menu_page() 函数添加一个顶级菜单:

1
2
3
4
5
6
7
8
add_menu_page( 
	'Menu Page Title',
	'Menu Title',
	'manage_options',
	'menu-slug',
	'mytheme_menu_callback',
	'dashicons-wordpress' // Dashicon 图标的CSS类
	);

add_menu_page( 'Menu Page Title', 'Menu Title', 'manage_options', 'menu-slug', 'mytheme_menu_callback', 'dashicons-wordpress' // Dashicon 图标的CSS类 );

你需要熟悉 add_menu_page() 函数的参数用法,它的第 6 个参数就是图标。

如果你还有更多关于 Dashicon 的技巧,欢迎和我们一起交流。

兼容3.8以下版本

Dashicons 只能在 WordPress 3.8及以上版本中可用,但并不是所有的用户都会升级到最新版 ,作为开发者,不得不考虑兼容问题。其实我们要做的就是添加一个WP的版本比对,具体示例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 默认使用 Dashicons 图标
$icon = 'dashicons-images-alt2'; 
// 如果当前的WP版本低于3.8,就使用图片图标
if( version_compare( $GLOBALS['wp_version'], '3.8', '<' ) ) {  
	//定义图标的地址
    $icon = get_template_directory_uri() . 'https://static.wpdaxue.com/images/slider-icon.png';  
}

register_post_type('slides',
	array(
		'labels' => array(
			'name' => 'Slides',
			'singular_name' => 'Slide'
			),
		'public' => true,
		'has_archive' => true,
		'menu_icon' => $icon //使用变量作为参数
		)
	);

// 默认使用 Dashicons 图标 $icon = 'dashicons-images-alt2'; // 如果当前的WP版本低于3.8,就使用图片图标 if( version_compare( $GLOBALS['wp_version'], '3.8', '<' ) ) { //定义图标的地址 $icon = get_template_directory_uri() . 'https://static.wpdaxue.com/images/slider-icon.png'; } register_post_type('slides', array( 'labels' => array( 'name' => 'Slides', 'singular_name' => 'Slide' ), 'public' => true, 'has_archive' => true, 'menu_icon' => $icon //使用变量作为参数 ) );

关于 Dashicons 的使用,就介绍到这里,如果你有更多关于 Dashicons 的使用技巧,欢迎和我们分享。

本文WordPress 在后台管理菜单中如何使用Dashicons图标到此结束。天才是百分之九十九的汗水加百分之一灵感。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
WordPress站点Gravatar头像前后台不显示的如何解决办法

WordPress做公司官网好吗?会不会显得档次很低?

WordPress主题需要支持https吗?WordPress站点如何如何实现https?

WordPress站点的页面/标签/分类URL地址如何添加.html?

WordPress站点更换了域名后数据库应该如何操作替换新旧域名?