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'引数register_post_type 以前のcssの両方を使用すると、WP 3.8の両方のアイコンとWP 3.8の1つのアイコン+奇妙な文字'menu_icon'が出力されます。

私は条件付きで追加することができます知っている'menu_icon'register_post_typeWP 3.8-バージョンの条件付き3.8+ WPのため、以前のCSSを追加し、しかし:

  • 登録されたすべての CPTにいくつかのコード(2つの条件ステートメント)を追加する必要があるため、プラグイン/テーマの更新は大変な作業です
  • 私にはエレガントなソリューションよりも回避策のようです

したがって、質問は次のとおりです。

WP 3.8+でdashicons cssを使用'menu_icon'し、登録されたすべてのCPTに条件2を追加することを含まない「簡単な」方法で、以前のバージョンのparamを介してセットアップされたカスタムイメージを使用できますか?

そして、もしそうなら、追加のコードなしで直接何らかの魔法の方法でそれを行うことは可能register_post_typeですか?

回答:


9

ウサギの穴を通り抜けた後の答えは- はい、コアは投稿タイプの登録とメニューページの追加時にdashiconsを簡単に使用できるようにします。

あなたはそのCSSクラスを渡す必要がdashicon使用するdashicons-[name]menu_iconまたはicon_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
*ダシコンクラスは、@ Rarstの答えです。* base64-encodeを使用すると便利ですが、実際には簡単ではありません。さらにsvg-painer.js、色の変更を処理するために使用されるコアjsライブラリは、アイコンが標準のダシコンよりも「複雑」な場合、非常に時間がかかります。* 3番目のオプション(空のアイコン)はWP 3.8+だけでなく、長い間有効です...そしてcssの使用は避けたいものです(質問ごとに)。したがって、すべてのオプションをまとめるために+1を使用しますが、受け入れられた答えはすでに私の質問に答えていると思います。PSあなたの名前の近くにそのダイヤモンドを見てうれしい:)
gmazzap

@GM svg-painter.jsファイルに関する興味深い情報。まだ試したことがないので、知りませんでした。
カイザー14年

1
少し複雑なsvg画像(単純な建物の植物)でそれを使用して、マウスホバーで色の変更効果を作成しようとしたことがあります。私はあきらめて、待ち時間が長すぎるため、別のアプローチを使用しました。
gmazzap

2
@GMそれをありがとう。それについてのブログ記事を書く必要があります:)私は検索していて、見つけられる唯一の有用なものはSvenからのものでした。
カイザー14年

3

今日、私は自分が投稿した2つの質問に答えて、答えを見つけるのに時間を費やしたので、自分自身に答えています。解決策を見つけたら、それを共有したいと思いますが、他の解決策は非常に高く評価されており、私よりも優れた解決策を受け入れる準備ができています。私のソリューションの編集と改善を歓迎します。


編集

Rarstの回答の後、コードを編集しました。関数は標準のdashiconsクラスを使用するようになりましたが、引数に古いスタイルの画像URLを指定し、引数に新しいdashiconsクラスを指定することできます。menu_iconmenu_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'paramを介して追加された内容に従ってインラインスタイルを追加します

単一のファイルにコードを作成します。この方法で、任意のテーマ/プラグインに簡単に含めることができ、MUプラグインとして使用することもでき'menu_dashicon'ます。

スタンドアロンのプラグインとして使用できるようにする最小限のプラグインヘッダーも追加しましたが、おそらくそれはあまり有用ではありません。

使い方

内部では、dashiconクラスの値を持つ引数をregister_post_type渡し'menu_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);

Gistとしても利用可能です


ダシコンを使用したCPT

2つのCPT:ダシコンを使用した「アイデア」と「ギャラリー」。異なる管理者の配色での自動色変更に注意してください。



0

カスタム投稿タイプを登録するコードに次の行を追加しただけです。

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

完全なコードはこちら

ここに画像の説明を入力してください

CSSを追加する必要はありません。


それは... @Rarstが彼の答えで述べていることを正確なものだ
gmazzap

Rarstは、リンクしたCPTまたは完全なスニペットを作成するコードに追加する必要があるコード行を提供しません。また、CSSは必要ないので、私のソリューションはより効率的です。
ブラッドダルトン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.