web-dev-qa-db-ja.com

Dashicons for adminメニューアイコンを使用してCPTを登録します。 WP 3.8

WordPress 3.8では、ダッシュボードにフォントを表示するためにDashiconsというアイコンフォントを使用するプラグインMP6がコアで導入されました。

これで、 register_post_type にCPT管理メニューエントリのカスタムアイコンを指定できる引数'menu_icon'があることがわかりました。

私のプラグインやテーマでは、3.8以前の管理者メニューの背景が薄かったため、通常は暗い私のカスタムアイコン画像でその引数をよく使用します。 WP 3.8のデフォルトの暗いメニューの背景では、アイコンがほとんど見えなくなりました。

それとは別に、私は私のCPTのために新しいダッシュを使うのがクールになると思います。

いくつかの調査の後、私はダッシュのCSSを使うことができることを知っています。

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

しかし、'menu_icon' と previous cssの両方のregister_post_type引数を使用すると、WP 3.8の両方のアイコンとWP 3.8-の1つのアイコン+奇妙な文字が印刷されます'menu_icon'引数。古いバージョンではデフォルトのアイコンが使用されます。

WP 3.8-バージョンの場合は'menu_icon'にregister_post_typeを条件付きで追加できますが、WP 3.8+の場合は条件付きで前のcssを追加できますが、

  • every CPTが登録されているためのコード（2つの条件付きステートメント）を追加する必要があるため、プラグイン/テーマを更新するのは非常に難しい作業です。
  • それは私には優雅な解決策よりも回避策のようです

だから、質問は以下のとおりです。

WP 3.8以降にdashicons cssを使用し、以前のバージョンの'menu_icon'パラメータで設定されたカスタムイメージを、登録されているすべてのCPTに対して2つの条件付き追加を含まない「より簡単な」方法で使用できますか。

そして、もしそうなら、追加のコードなしでregister_post_typeから直接いくつかのautomagic方法でそれが可能ですか？

custom-post-typeswp-admin
14
gmazzap

うさぎの穴を通って戻ってきた後の答えは - yes です。coreは投稿タイプの登録やメニューページの追加時に簡単にダッシュを使うことができます。

Dashiconを使用するには、関連する場所でCSSクラスのdashicons-[name]をmenu_iconまたはicon_urlに渡す必要があります。

利用可能なクラスは、 ソース内のdashicons.css または Dashiconsサイト で検索できます（アイコンをクリックしてその上の名前を確認してください）。

アラート！ 3.8はインラインドキュメントのクラスの例としてdashicons-piechartを付けてリリースしたようですが、これは間違っていて動作しません。リリースされているそのアイコンの実際のクラスはdashicons-chart-pieです。

9
Rarst

簡単です：register_post_type() phpDocBlockの関連部分を読み、次にmenu_iconに正しい引数を使ってください。

  • dashicons クラスを使用してください。例えばdashicon-groups
  • カラーURIと一致するように色付けされたデータURIを使用して、base64でエンコードされたSVGを渡します。これはdata:image/svg+xml;base64,で始まるはずです。
  • 'none'を渡してdiv.wp-menu-imageを空のままにすると、CSSを介してアイコンを追加できます。
4
kaiser

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

編集

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

コードを単一のファイルに作成します。この方法で、任意のテーマ/プラグインに簡単に含めることができます。または、 MUプラグイン として使用することもできます。その後、新しい'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アイコンクラス名を取得します。

だからここにコード：

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

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

3
gmazzap

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

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

これが フルコードです

enter image description here

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

0
Brad Dalton