如何在 WordPress 主题或插件中使用 Dashicons
随着改进后的 WP-Admin,WordPress 3.8 还带来了一组名为Dashicons的全新图标。Dashicons 是Mel Choyce设计的字体图标,主要是为了适应新的 WP-Admin UI,从内容屏幕编辑器到管理菜单,如下面的屏幕截图所示。
由于 WordPress 现在使用它在 WP-Admin 中提供图标,您也应该在您的主题和插件中使用它。通过使用字体图标集,如 Dashicons,您可以轻松地通过 CSS 自定义输出。如果您是一名开发人员,想要更新您的插件或主题,根据最新的 WordPress 设计并使用其新属性,那么这篇文章绝对适合您。
推荐阅读: 自定义 WordPress 管理员配色方案
管理菜单中的 Dashicons
假设您将自定义帖子类型合并到您的主题或插件中,您可以按以下方式使用 Dashicons。自定义帖子类型用于menu_icon
显示图标。在 WordPress 3.8 之前,您可以在其中添加图像图标路径。在 3.8 版本中,这个参数也可以用来声明来自 Dashicons 的图标。
首先,访问Dashicons 网站。单击其中一个图标。您可以看到所选图标反映在标题上,它显示图标的名称以及以多种格式复制它的选项:CSS、HTML 和 Glyph。
复制图标的名称,并将其添加到menu_icon
您的自定义帖子类型功能中,就像这样。请注意,为了使本文更短,我已经删除了代码。完整的代码长度可以在这里找到。
1个
2个
3个
4个
5个
6个
7
8个
9
10
|
$args = array ( 'label' => __( 'book' , 'book' ), 'description' => __( 'Post Type Description' , 'book' ), 'labels' => $labels , 'supports' => array ( ), 'taxonomies' => array ( 'category' , 'post_tag' ), 'menu_position' => 20, 'menu_icon' => 'dashicons-book' , 'capability_type' => 'post' , ); |
在此示例中,我创建了一个用于发布书籍的自定义帖子类型。正如您在下面看到的,书籍图标出现在它旁边。
菜单页
插件也可以使用add_page_menu
函数来添加管理菜单。对于这种情况,您可以简单地将 Dashicons 图标名称指定为第六个参数。在下面的示例中,我们将在选项页面中显示“扳手”图标。
1个
2个
3个
4个
5个
6个
7
8个
9
10
11
|
function hkdc_custom_menu_page() { add_menu_page( 'Options Page' , 'Options' , 'manage_options' , 'myplugin/option.php' , '' , 'dashicons-admin-tools' , 81 ); } add_action( 'admin_menu' , 'hkdc_custom_menu_page' ); |
前往 WP-Admin,您应该会看到如图所示的图标。
回退
永远不要假设您的所有用户都会更新到最新的 WordPress。在某些情况下,他们没有。他们可能安装了一个插件来关闭自动更新。因此,有必要提供支持旧 WordPress 版本的回退。如果我们不这样做,图标一侧将显示为损坏的图像(就像这张图像中发生的那样,在书籍旁边)。
在继续之前,请确保您已将图像图标放置在主题或插件目录中。然后,我们可以用条件函数指定图标,如下:
首先,我们设置默认值,即使用 Dashicons。
1个
|
$icon = 'dashicons-book-alt' ; |
如果它在 WordPress 3.7 及以下版本中,我们将替换 $icon 变量的值。
1个
2个
3个
|
if ( version_compare( $GLOBALS [ 'wp_version' ], '3.8' , '<' ) ) { $icon = get_template_directory_uri() . '/extra/img/book-brown.png' ; } |
用变量替换自定义帖子类型(以及add_menu_page
功能)中的图标参数$icon
。
1个
2个
3个
4个
5个
6个
7
8个
9
|
$args = array ( 'label' => __( 'book' , 'book' ), 'description' => __( 'Post Type Description' , 'book' ), 'labels' => $labels , 'supports' => array ( ), 'menu_position' => 20, 'menu_icon' => $icon , ); register_post_type( 'book' , $args ); |
我们完成了。它将使用 WordPress 3.8 的 Dashicons,同时在旧版本中显示“图像”图标。