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 管理選單圖示