在WP 3.8中使用仪表盘图标为管理菜单图标注册CPT

时间:2013-12-13 作者:gmazzap

WordPress 3.8在核心中引入了插件MP6,该插件使用一种称为Dashicons的图标字体在仪表板中显示字体。

大家都知道register_post_type 有一个论点\'menu_icon\' 允许为CPT admin菜单项指定自定义图标。

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

除此之外,我认为在我的CPT中使用新的dashicons会很酷。

经过一些研究,我知道我可以直接使用dashicons中的CSS,比如

#menu-posts-mycpt div.wp-menu-image:before { content: "\\f226"; }
但是,使用两者\'menu_icon\' 的参数register_post_type and 之前的css将在WP 3.8中打印两个图标,在WP 3.8-中打印一个图标+一个奇怪的字符,并且不使用\'menu_icon\' 参数,在旧版本上使用默认图标。

我知道我可以有条件地添加\'menu_icon\' 在里面register_post_type 对于WP 3.8-版本,有条件地为WP 3.8+添加以前的css,但:

这涉及添加一些代码(2个条件语句)every CPT已注册,因此更新插件/主题是一项相当艰巨的工作,在我看来,这与其说是一个优雅的解决方案,不如说是一种变通方法,所以,问题是:

可以将dashicons css用于WP 3.8+并通过使用自定义图像设置\'menu_icon\' 以“更简单”的方式为以前的版本设置参数,不涉及为每个注册的CPT添加2个条件?

如果是这样的话,可以直接从register_post_type 没有任何附加代码?

4 个回复
最合适的回答,由SO网友:Rarst 整理而成

穿过兔子洞再回来,答案是-yes, core允许在注册帖子类型和添加菜单页面时轻松使用dashicons。

要使用dashicon,需要传递其CSS类dashicons-[name]menu_iconicon_url 在相关地方。

可以在中查找可用的类dashicons.css in sourceDashicons site (单击图标并查看顶部的名称)。

Alert! 3.8似乎已发布dashicons-piechart 以内联文档中的类为例,这是错误的,不会起作用。版本中该图标的实际类为dashicons-chart-pie.

SO网友:kaiser

简单:只需阅读register_post_type() phpDocBlock,然后使用正确的参数menu_icon :D

使用dashicons 班例如:。dashicon-groupsdata:image/svg+xml;base64,.\'none\' 离开div.wp-menu-image 空,因此可以通过CSS添加图标

SO网友:gmazzap

我之所以回答自己,是因为今天我问了自己贴出的两个问题,并花了一些时间寻找答案。一旦我找到了解决方案,我想与大家分享,但任何其他解决方案都会受到高度重视,我愿意接受任何我发现比我更好的解决方案。欢迎您对我的解决方案进行编辑和改进,并鼓励您这样做。

编辑后Rarst 回答我已经编辑了代码。现在函数使用标准dashicons类,但是also 允许在中指定旧式图像urlmenu_icon 参数和一个全新的dashicons类menu_dashicon 论点

工作流我首先想到的是register_post_type, 启动操作,registered_post_type, 将参数传递给挂钩函数register_post_type, 无需过滤它们,因此可以为该函数创建自定义参数。

所以我决定通过辩论\'menu_dashicon\' 传递自定义dashicon。

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

检查WP的当前版本,如果小于3.8,则不执行任何操作,如果版本为3.8以上,则循环$menu 在适当的挂钩上排列,并删除通过以下方式添加的任何自定义图像(如果存在)\'menu_icon\' 并根据通过添加的内容添加内联样式\'menu_dashicon\' param我在一个文件中创建代码,这样它就可以轻松地包含在任何主题/插件中,甚至可以用作MU plugin 然后你就可以使用全新的\'menu_dashicon\' 安装的每个主题和/或插件中的参数。

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

如何在内部使用register_post_type 只需通过\'menu_dashicon\' 具有dashicon类值的参数(without 前缀“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图标类名its site.

代码如下:

<?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

<小时/>CPTs using dashicons

两个CPT:“;“想法”;和;“画廊”;使用虚线图标。请注意使用不同的管理配色方案自动更改颜色。

<小时/>

SO网友:Brad Dalton

我只是在注册自定义帖子类型的代码中添加了这一行:

\'menu_icon\'    => \'dashicons-admin-users\',
这是full code

enter image description here

无需添加任何CSS。

结束

相关推荐

将内容添加到/wp-admin/plugin-install.php管理屏幕

我想向上显示的插件信息添加一些外部内容/wp-admin/plugin-install.php 管理屏幕。/wp-admin/plugin-install.php 调用以下命令:$wp_list_table = _get_list_table(\'WP_Plugin_Install_List_Table\'); 如果我破解这个核心文件作为测试,我可以添加内容,我想,好的。然而,作为一名新的WP开发者,我真的很难看到如何通过插件添加这些内容。class WP_Plugin_Install_List