WordPress 在 WP 3.8 中使用 Dashicons 注册 CPT 管理菜单图标

问题描述

WordPress 3.8 在内核中引入了插件 MP6，其中包括使用标示性字体 Dashicons 在仪表板中显示字体。

现在，众所周知，register_post_type 具有参数'menu_icon'，允许为 CPT 管理菜单项指定自定义图标。

在我的插件/主题中，我经常使用这个参数，我的自定义图标图像通常是黑暗的，因为 3.8 管理菜单有一个浅色的背景。使用 WP 3.8 中的默认黑色菜单背景，我的图标变得几乎看不见。

除此之外，我认为使用新的 dashicons 为我的 CPT 将是很酷。

经过一番研究，我知道我可以使用 dashicons 的 CSS，像

#menu-posts-mycpt div.wp-menu-image:before { content: "f226"; }

但是使用 register_post_type 和以前的 css 的'menu_icon'参数都将打印 WP 3.8 中的两个图标和 WP 3.8-中的一个图标+一个奇怪的字符，而不使用'menu_icon'参数，在旧版本上将使用默认图标。

我知道我可以有条件地将'menu_icon'添加到 WP 3.8 版本的 register_post_type 中，并有条件地为 WP 3.8+添加以前的 CSS，但是：

这涉及为每个 CPT 注册添加一些代码 (2 条件语句)，因此更新插件/主题是相当艰巨的工作
在我看来，似乎比一个优雅的解决方案更容易解决

所以问题是：

可以使用 dashicons css for WP 3.8+，并使用'menu_icon'参数设置的自定义图像，以前版本的”simpler” 方式，不涉及每个 CPT 注册的添加 2 条件？

而且，如果是这样，可以用 register_post_type 直接从一些自动化的方式，没有任何附加的代码？

最佳解决方案

经过兔子洞和背部，答案是 – 是的，核心确实允许在注册帖子类型和添加菜单页面时轻松使用 dashicons 。

要使用 dashicon，您需要将其 CSS 类 dashicons-[name]传递到相关位置的 menu_icon 或 icon_url 。

可以使用 dashicons.css 在源或 Dashicons site 中查找可用的类 (点击图标，并在上面查看名称) 。

警报！ 3.8 似乎已经以 dashicons-piechart 作为在线文档中的类的例子发布了，这是错误的，不行。该图标在版本中的实际类是 dashicons-chart-pie 。

次佳解决方案

Easy：只读 register_post_type() phpDocBlock 的相关部分，然后为 menu_icon 使用正确的参数：D

使用 dashicons 类。例如 dashicon-groups
使用数据 URI 传递 base64 编码的 SVG，该 URI 将被着色以匹配配色方案。这应该从 data:image/svg+xml;base64, 开始。
通过'none'使 div.wp-menu-image 为空，因此可以通过 CSS 添加图标。

第三种解决方案

我正在回答自己，因为今天我问自己发布的两个问题，花了一些时间找到答案。一旦我找到一个解决方案，我想分享一下，但任何其他解决方案都被高度的欣赏，我准备接受任何我比我更好的解决方案。对我的解决方案的编辑和改进也是值得赞赏的。

Edit

在 Rarst 答案之后，我编辑了代码。现在功能使用标准的 dashicons 类，还允许在 menu_icon 参数和 menu_dashicon 参数中的全新 dashicons 类中指定一个旧样式图像 url 。

Workflow

首先想到我以为是 register_post_type，发起一个动作，registered_post_type，传递给钩子函数传递给 register_post_type 的参数，不过滤它们，所以可以创建自定义参数到该函数。

所以我决定通过参数'menu_dashicon'传递一个自定义的 dashicon 。

之后，我想到创建一个听从这个参数的类，将图标保存在一个类变量中。同一班可负责

检查 WP 的 currnt 版本，如果它不到 3.8 做什么
如果版本是 3.8+循环 $menu 阵列在适当的钩子和：
删除 (如果存在) 通过'menu_icon'添加的任何自定义图像
根据通过'menu_dashicon'参数添加的内容添加内联样式

我在单个文件中创建代码，这样可以轻松地包含在任何主题/插件中，甚至可以用作 MU plugin，之后可以在安装的每个主题和/或插件中使用全新的'menu_dashicon'参数。

我还添加了一个最小的插件头，允许将它用作一个独立的插件，但可能这是不太有用的方式使用。

如何使用

register_post_type 中的'menu_dashicon'参数与 dashicon 类的值 (不带前缀’dashicons-‘) 通信：

$args = array(
  ...
  'menu_dashicon' => 'chart-pie', // dashicons will be used in WP 3.8+
  'menu_icon' => $url_of_the_icon // icon images will be used in WP 3.7.1 & previous
);

register_post_type('my_cpt', $args);

就这样。从 its site 获取 Dashicons 图标类名称。

所以这里代码：

<?php
/**
* Plugin Name: GM CPT Icon
*/
namespace GM;

class CptIcon {

  public static $cpt;

  public $css;

  static function registerIcon( $cpt, $icon ) {
    self::$cpt[$cpt] = $icon;
  }

  function init() {
    if ( $this->mp6() ) {
      add_action('admin_menu', array($this, 'parseMenu') );
    }
  }

  function mp6() {
    return version_compare( $GLOBALS['wp_version'],  '3.8', '>=' );
  }

  function parseMenu() {
    if ( $this->mp6() && ! empty( self::$cpt ) )  {
      foreach ( $GLOBALS['menu'] as $i => $item ) {
        if  $item[1] === 'edit_posts' && (strpos($item[2], 'edit.php?post_type=') === 0)) {
          $this->menuItemClass($i, str_replace('edit.php?post_type=', '', $item[2]));
        }
      }
    }
  }

  function menuItemClass( $i, $type ) {
    if ( in_array($type, array_keys(self::$cpt), TRUE ) ) {
      $GLOBALS['menu'][$i][4] = str_replace('menu-icon-post', '', $GLOBALS['menu'][$i][4]);
      $GLOBALS['menu'][$i][6] = 'dashicons-' . self::$cpt[$type];
    }
  }

}

add_action('plugins_loaded', function() {
  if ( is_admin() && !( defined('DOING_AJAX') && DOING_AJAX  ) ) {
    $cpticon = new CptIcon;
    $cpticon->init();
  }
});

add_action('registered_post_type', function( $post_type, $args ) {
  if ( isset($args->menu_dashicon) && ! empty($args->menu_dashicon) ) {
    CptIcon::registerIcon($post_type, $args->menu_dashicon);
  }
}, 10, 2);

它也可以作为 Gist

两个 CPT：”Ideas” 和”Gallery” 使用 Dashicons 。使用不同的管理颜色方案注意自动更换颜色。

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

WordPress 在 WP 3.8 中使用 Dashicons 注册 CPT 管理菜单图标