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 管理菜單圖標