カスタム投稿タイプの管理メニューのアイコンは、register_post_type() の menu_icon 引数で指定します。Dashicons のクラス名、画像のURL、Base64 でエンコードした SVG の三通りがあり、色は WordPress に専用の設定がないため、管理画面用の CSS で上書きします。この記事では、三種類のアイコン指定の違いと使い分け、配色スキームと両立させた色の付け方、他のプラグインが登録した投稿タイプのアイコンを変える方法までを説明します。
作業の前に
コードは子テーマの functions.php でも動きますが、投稿タイプの登録はテーマを切り替えると消えてしまうため、小さな独自プラグインか mu-plugin に置くのがおすすめです。投稿タイプの定義はデータの見え方に直結するので、ステージング環境で動作を確かめ、本番に入れる前にバックアップを取ってください。
menu_icon の3つの指定方法
menu_icon には次のいずれかを渡せます。
- Dashicons のクラス名：
dashicons-bookのような文字列。WordPress 同梱のアイコンフォントなので追加のファイルが要らず、管理画面の配色スキームにも自動で追従します - 画像のURL：PNG などの画像を指定します。配色スキームには追従せず、ホバー時や選択時も同じ見た目のままです
- Base64 エンコードした SVG：
data:image/svg+xml;base64,で始まる文字列。WordPress の管理画面のスクリプトが塗りの色を配色スキームに合わせて書き換えるため、オリジナルの形を使いつつ、標準アイコンと同じように色が変わります
このほか none を指定すると、アイコンの領域を空にして CSS で自由に描くこともできます。
Dashicons で指定する
もっとも手軽で、見た目も他のメニューとそろいます。
add_action( 'init', function () {
register_post_type( 'book', array(
'labels' => array(
'name' => '書籍',
'singular_name' => '書籍',
'add_new_item' => '書籍を追加',
'edit_item' => '書籍を編集',
),
'public' => true,
'show_in_rest' => true, // ブロックエディターを使うために必要
'menu_position' => 20, // 「固定ページ」の下あたりに表示
'menu_icon' => 'dashicons-book',
'supports' => array( 'title', 'editor', 'thumbnail' ),
'has_archive' => true,
) );
} );使えるアイコンの一覧は、WordPress 公式の開発者向けリソースにある Dashicons のページで確認できます。Dashicons は新しいアイコンの追加がほぼ止まっている状態のため（2026年10月現在）、目的に合う形がない場合は次の SVG を検討してください。
なお、投稿タイプを登録したりスラッグを変えたりした直後は、パーマリンク設定の画面を一度開いて保存し、書き換えルールを更新しておくと、個別ページが 404 になるのを防げます。
SVG を Base64 で指定する
オリジナルのアイコンを使いたいときは、SVG ファイルをプラグイン内に置き、読み込んでエンコードします。
function my_book_menu_icon() {
$file = plugin_dir_path( __FILE__ ) . 'assets/book-icon.svg';
if ( ! is_readable( $file ) ) {
return 'dashicons-book'; // ファイルが無いときの代替
}
return 'data:image/svg+xml;base64,' . base64_encode( file_get_contents( $file ) );
}
// register_post_type() の引数で
// 'menu_icon' => my_book_menu_icon(),SVG を用意するときは次の点に気をつけると、表示崩れを避けられます。
viewBox="0 0 20 20"のように正方形で作る。管理メニューのアイコン領域は 20px 前後の正方形です- 図形に
fill属性を付けておく。配色スキームへの追従は塗りの色を書き換える仕組みなので、fillが無い、あるいはstrokeだけで描いた線画だと、色が変わらないことがあります - 外部から入手した SVG には、スクリプトや外部参照が含まれていないか中身を確かめる。自分で用意した信頼できるファイルだけを使ってください
画像のURLで指定する場合
plugins_url( 'assets/book-icon.png', __FILE__ ) のように URL を渡せば表示されますが、配色スキームに追従しないため、暗い背景で見えにくい色の画像は避けます。高解像度ディスプレイでぼやけることもあるので、特別な理由がなければ SVG のほうが扱いやすいでしょう。
アイコンに色を付ける
WordPress には投稿タイプごとにアイコンの色を指定する引数はありません。そこで、管理メニューの HTML に付いている ID を手がかりに CSS で色を上書きします。カスタム投稿タイプのメニュー項目には menu-posts-{投稿タイプ名} という ID が付くため、book なら #menu-posts-book で狙えます。
add_action( 'admin_enqueue_scripts', function () {
$css = '
#adminmenu #menu-posts-book .wp-menu-image::before {
color: #f0b849;
}
#adminmenu #menu-posts-book:hover .wp-menu-image::before,
#adminmenu #menu-posts-book.wp-has-current-submenu .wp-menu-image::before {
color: #ffffff;
}
';
wp_register_style( 'my-cpt-admin', false );
wp_enqueue_style( 'my-cpt-admin' );
wp_add_inline_style( 'my-cpt-admin', $css );
} );なぜ ID を二つ重ねるのか。 管理画面の配色スキームの CSS も同じ要素に色を指定しています。#adminmenu #menu-posts-book と ID を二つ重ねて詳細度を上げておくと、読み込み順に左右されずにこちらの指定が優先されます。!important に頼らずに済むので、後から調整するときも追いやすくなります。
ホバー時と選択中の色も決めておく。 通常時の色だけを変えると、ホバーや選択中に背景色が変わったときにアイコンが背景に溶け込むことがあります。上の例では、その二つの状態で白に戻しています。
コントラストを確認する。 アイコンのような文字以外の要素について、WCAG 2.2 の達成基準 1.4.11（非テキストのコントラスト）は、隣接する色との間に 3:1 以上のコントラスト比を求めています。ユーザーが配色スキームを変えると背景色も変わるため、主要なスキームに切り替えて見え方を確かめてください。
この CSS は Dashicons（::before にフォントで描かれるアイコン）向けです。Base64 の SVG は背景画像として表示され、色は配色スキームに合わせて書き換えられるため、固定の色にしたい場合は SVG ファイル自体の fill で色を決め、画像のURLとして渡すか、none を指定して CSS の背景画像で描く方法を選びます。
編集画面全体で投稿タイプを見分けやすくする
管理画面の body 要素には、表示中の投稿タイプに応じて post-type-{投稿タイプ名} というクラスが付きます。これを使うと、一覧画面や編集画面の見出しにも同じ色のアクセントを付けられ、複数の投稿タイプを行き来する編集者の取り違えを減らせます。
body.post-type-book .wrap > h1.wp-heading-inline {
border-left: 4px solid #f0b849;
padding-left: 8px;
}上の CSS も、先ほどの $css に追記すれば同じ方法で読み込めます。ブロックエディターの画面では見出しの構造が異なるため、効果があるのは主に一覧画面などのクラシックな管理画面です。
他のプラグインが登録した投稿タイプのアイコンを変える
Custom Post Type UI のような投稿タイプ作成プラグインを使っている場合は、プラグインの設定画面にメニューアイコンの項目があることが多いので、まずはそちらを確認します。項目名や位置はプラグインのバージョンで変わるため、見当たらなければプラグインのドキュメントを参照してください。
設定項目がないプラグインや、自分で register_post_type() を編集できない場合は、register_post_type_args フィルターで登録前の引数を書き換えられます。
add_filter( 'register_post_type_args', function ( $args, $post_type ) {
if ( 'book' === $post_type ) {
$args['menu_icon'] = 'dashicons-book-alt';
}
return $args;
}, 10, 2 );このフィルターは投稿タイプが登録されるときに実行されるので、登録より前にフィルターが追加されている必要があります。プラグインや mu-plugin のファイル直下で add_filter() しておけば、通常は init での登録に間に合います。
うまく表示されないときの確認ポイント
- アイコンが出ず四角い空白になる：Dashicons のクラス名の綴りが違う可能性があります。存在しない名前を指定してもエラーにはならず、空白になるだけです
- SVG が真っ黒、または表示されない：Base64 の前に
data:image/svg+xml;base64,が付いているか、SVG の先頭に余計な文字（BOM など）がないかを確認します - 色の CSS が効かない：開発者ツールでメニュー項目の ID が
menu-posts-bookになっているか確かめます。投稿タイプ名が違う、またはshow_in_menuで別メニューの下にぶら下げている場合は ID が付かないことがあります - 変更が反映されない：ブラウザーや管理画面向けのキャッシュ、最適化プラグインによる CSS の結合を疑い、キャッシュを消して再確認します
まとめ
- アイコンは
register_post_type()のmenu_iconで指定し、Dashicons、画像URL、Base64 の SVG から選ぶ - 配色スキームへの追従を優先するなら Dashicons か
fill付きの SVG、固定の色にしたいなら Dashicons と CSS の組み合わせが扱いやすい - 色は
#adminmenu #menu-posts-{投稿タイプ名}を狙った管理画面用 CSS で上書きし、ホバー時と選択中の色、コントラストも確認する - 他のプラグインが登録した投稿タイプは、設定画面か
register_post_type_argsフィルターで変更する - 登録コードはプラグインか mu-plugin に置き、ステージング環境で確かめてから本番に反映する