カスタムポストタイプの管理メニューにアイコンを使う方法

WordPress3.8についているアイコンフォント(Dashicons)を、管理画面のサイドバーのカスタムポストアイコンに使う方法です。

1. アイコンフォントを選ぶ

WordPress3.8についているアイコンフォント(Dashicons)には、前回ご紹介したようなアイコンがあります。その中から使いたいアイコンフォントを選び、「\f...」というような「\f」で始まるコードを確認します。

2. admin_headへcssを挿入する

codeadd_action('admin_head','add_menu_icons_styles');
function add_menu_icons_styles(){
?＞
<style>
#adminmenu .menu-icon-doc div.wp-menu-image:before {
  content: ”\f331”;
}
</style>
＜?php
}

上記のmenu-icon-docクラスのdocの部分は、カスタムポストタイプ名になります。

Dashicons
こちらのサイトでは、目的のアイコンをクリックするとページヘッダーにアイコンとクラス名が表示されます。「Copy CSS」のリンク押下でアイコンのコードが確認できます。

3. カスタムポストタイプ登録はアイコンをセットしない

※もし、カスタムポストタイプ登録でアイコンをセットされていたらブランクにします。

以前にもご紹介したGenerateWPで、カスタムポストタイプの登録コードをさくっと作成することができます。
こちらGenerateWP - Post Type Generator

カスタムポストタイプ Doc の登録// Register Custom Post Type
function my_doc() {
	$labels = array(
		'name'                => 'メモ',
		'singular_name'       => 'メモ',
		'menu_name'           => 'メモ',
		'parent_item_colon'   => 'Parent Item:',
		'all_items'           => 'All Items',
		'view_item'           => 'View Item',
		'add_new_item'        => 'Add New Item',
		'add_new'             => 'Add New',
		'edit_item'           => 'Edit Item',
		'update_item'         => 'Update Item',
		'search_items'        => 'Search Item',
		'not_found'           => 'Not found',
		'not_found_in_trash'  => 'Not found in Trash',
	);
	$args = array(
		'labels'              => $labels,
		'supports'            => array( ),
		'taxonomies'          => array( 'category', 'post_tag' ),
		'hierarchical'        => true,
		'public'              => true,
		'show_ui'             => true,
		'show_in_menu'        => true,
		'show_in_nav_menus'   => true,
		'show_in_admin_bar'   => true,
		'menu_position'       => 5,
		'menu_icon'           => '',
		'can_export'          => true,
		'has_archive'         => true,
		'exclude_from_search' => false,
		'publicly_queryable'  => true,
		'capability_type'     => 'page',
	);
	register_post_type( 'doc', $args );
}
// Hook into the 'init' action
add_action( 'init', 'my_doc', 0 );

カスタムポストタイプの登録コードです。

メニューアイコン'menu_icon' => '',

この部分がアイコンの登録で、これまではアイコンのurlを指定していたかと思います。
dashiconsを利用する場合には、デフォルトのブランクのままにします。

ちなみに、これらのコードはご利用テーマのfunctions.phpに入れます。
これでこんな感じにアイコンが表示されます。アイコンにはcssで色をつけています。

ついでに、↑では、上部の管理バーの一番左に表示されるWordPressアイコンを上書き（!important）しています。

code<style>
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before{
  content:"\f180" !important;
}
</style>

これも、admin_headに入れます。サイドメニューのアイコン指定（上述）と一緒に書いてしまってOKです。

※現在のWordPress最新バージョン 3.8.1 で実装しています。