跳至正文

如何在 WordPress 主题或插件中使用 Dashicons

如何在 WordPress 主题或插件中使用 Dashicons

随着改进后的 WP-Admin,WordPress 3.8 还带来了一组名为Dashicons的全新图标。Dashicons 是Mel Choyce设计的字体图标,主要是为了适应新的 WP-Admin UI,从内容屏幕编辑器到管理菜单,如下面的屏幕截图所示。

由于 WordPress 现在使用它在 WP-Admin 中提供图标,您也应该在您的主题和插件中使用它。通过使用字体图标集,如 Dashicons,您可以轻松地通过 CSS 自定义输出如果您是一名开发人员,想要更新您的插件或主题,根据最新的 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,同时在旧版本中显示“图像”图标。

标签: