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


15

WordPress 3.8在核心中引入了插件MP6,该插件除其他外还使用一种称为Dashicons的标志性字体在仪表板上显示字体。

现在,众所周知register_post_type有一个参数'menu_icon',可以为CPT管理菜单项指定自定义图标。

在我的插件/主题中,我经常将该参数与我的自定义图标图像一起使用,这些图像通常是深色的,因为在3.8管理员菜单之前背景是浅色的。在WP 3.8中使用默认的深色菜单背景时,我的图标几乎变得不可见。

除此之外,我认为对我的CPT使用新的破折号会很酷。

经过研究,我知道我可以使用破折号中的CSS,例如

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

但是,同时使用'menu_icon'of register_post_type 以前的css 参数将在WP 3.8中打印两个图标,并在WP 3.8-中打印一个图标+一个奇怪的字符,并且在不使用use 'menu_icon'参数的情况下,在旧版本中使用默认图标。

我知道我可以有条件地加'menu_icon'register_post_type了WP 3.8-版本,并有条件地添加先前的CSS WP 3.8+,但是:

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

因此,问题是:

是否可以将dashicon css用于WP 3.8+,并使用通过'menu_icon'param为先前版本设置的自定义映像,而无需为每个注册的CPT添加2个条件就可以使用“更简单”的方式?

并且,如果是这样,是否有可能以某种自动方式直接实现register_post_type而无需任何其他代码?

Answers:


9

经过兔子洞然后返回后,答案是- 是的,核心确实允许在注册帖子类型和添加菜单页面时轻松使用破折号。

要使用破折号,您需要将其CSS类传递dashicons-[name]到相关位置menu_iconicon_url相关位置。

可以dashicons.css在源代码Dashicons站点中查找可用的类(单击图标并在顶部查看其名称)。

警报!3.8似乎已dashicons-piechart作为内联文档中的类示例发布,这是错误的,将无法正常工作。该图标在发布中的实际类别为dashicons-chart-pie


我接受了这一点,因为这是做事情的正确方法。我的插件的好处是可以更好地向后兼容(并且我可以修复使用类名而不是char的问题),因为如果将dashicons类放在其中,menu_icon则不能将图像url用于以前的版本...但是谁在乎过去?:)
gmazzap

4

简单:只需阅读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添加图标。

1
* Dashicons类是@Rarst在回答中所说的。*使用base64-encode可能很有用,但不是真的很简单,此外svg-painer.js,如果图标比标准破折号更“复杂”,则用于处理颜色变化的核心js库可能非常耗时。*第三选项(空图标)不仅对WP 3.8+有效,而且由于使用了很长时间……并且我想避免使用CSS(根据问题)。因此,+ 1将所有选项放在一起,但我认为已被接受的答案已经引起了我的问题。PS很高兴看到您名字附近的钻石:)
gmazzap

@GM有关svg-painter.js文件的有趣信息。不知道,因为我还没有尝试过。
kaiser 2014年

1
一旦我尝试在稍微复杂的svg图像(这是一个简单的建筑植物)中使用它,就可以在鼠标悬停时产生变色效果。由于延迟太长,我放弃了使用另一种方法。
gmazzap

2
@GM谢谢你。您应该写一篇有关以下内容的博客文章:)我正在搜索,唯一可以找到的有用的是Sven的
kaiser 2014年

3

我正在回答自己,因为今天我问了自己发布的2个问题,并花了一些时间找到答案。找到解决方案后,我想与他人共享它,但是任何其他解决方案都值得赞赏,并且我准备接受比我的发现更好的任何解决方案。最好不要修改和改进我的解决方案。


编辑

Rarst回答之后,我已经编辑了代码。现在,函数使用标准dashicons类,但允许在menu_icon参数中指定旧样式的图像url,并在参数中指定全新的dashicons类menu_dashicon


工作流程

首先我以为是register_post_type,触发一个动作,registered_post_type将传递给挂钩函数的参数传递给钩子函数register_post_type,而不对其进行过滤,因此可以为该函数创建自定义参数。

因此,我决定传递参数'menu_dashicon'以传递自定义破折号。

之后,我想创建一个侦听该参数的类,将图标保存在类变量中。同一个班级可以负责

  1. 检查WP的当前版本,如果小于3.8,则什么也不做
  2. 如果版本是3.8+,则$menu在适当的钩子上循环数组,并:
  3. 删除通过'menu_icon'和添加的所有自定义图片(如果有)
  4. 根据通过'menu_dashicon'参数添加的内容添加内联样式

我将代码创建在一个文件中,通过这种方式,它可以轻松地包含在任何主题/插件中,甚至可以用作MU插件,然后,可以'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);

就这样。从其站点获取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);

它也可以作为要点


使用破折号的CPT

两个CPT:使用Dashicons的“想法”和“图库”。注意使用不同的管理配色方案进行自动颜色更改。



0

我只是将此行添加到注册自定义帖子类型的代码中:

'menu_icon'    => 'dashicons-admin-users',

这是完整的代码

在此处输入图片说明

无需添加任何CSS。


这就是@Rarst在回答中所说的确切内容……
gmazzap

Rarst不提供需要添加到创建CPT或我链接到的完整代码段的代码中的代码行。另外,也不需要CSS,因此我的解决方案更加高效。
布拉德·道尔顿2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.