手順①:admin_head

WordPressの管理画面のCSSにアクセスするためには、admin_head フックを利用します。

functions.php

//---------------------------------------------------------------
// 管理画面のデザイン変更
//---------------------------------------------------------------

// 関数名は何でも良い
function admin_custom_css()
{
    echo '<link rel="stylesheet" type="text/css" href="' . get_template_directory_uri() . '/admin-custom.css">';
}
add_action('admin_head', 'admin_custom_css');

ここではadmin-custom.cssというファイル(名前は任意)を作成しテーマ内の直下に配置します。ここではBLOGというテーマを作成し、その中に作成しています。

手順②:デベロッパーツールの確認

様々な指定方法がありますが、以下は一例です。
ポイントとなるクラス
wp-menu-images 疑似要素でアイコンを表示している
wp-menu-name このクラスがカスタム投稿タイプの名前を表示している

#adminmenu div.wp-menu-image
上記のように、#adminmenuを起点に値を記述しているため、詳細度が高くカスタマイズが難しいことがわかります。

さらに、すべてのカスタム投稿タイプに同じクラス名が付与されています。これにより、疑似要素での指定が困難であったため、それぞれに独自のクラスを割り当てることにしました。

手順③: Javascriptにて独自のクラスを付与

admin-custom-script.js

// DOMの読み込みが完了したときに実行されるコード
document.addEventListener("DOMContentLoaded", function () {

  // カスタムクラスを要素に追加する関数
  function addCustomClasses(selector, prefix) {
    // 指定されたセレクタに一致するすべての要素を取得
    var elements = document.querySelectorAll(selector);
    
    // クラス名に付ける番号カウンターの初期値
    var counter = 1;

    // 取得した要素に対して順番に処理を実行
    elements.forEach(function (element) {
      // 要素のクラスリストにカスタムクラスを追加
      element.classList.add(prefix + counter);
      
      // カウンターを増加して、次の番号を準備
      counter++;
    });
  }

  // メニュー名要素にカスタムクラスを追加する
  addCustomClasses(".wp-menu-name", "custom-class");

  // メニュー画像要素にカスタムクラスを追加する
  addCustomClasses(".wp-menu-image", "custom-img");
});

上記のコードにより、wp-menu-imagesにはcustom-imgというクラスが+1ずつ付与され、wp-menu-nameクラスも同様に独自クラスが付与されます。
また、管理画面にこちらのJavascriptを適応するにはadmin_enqueue_scriptsフックを利用します。

functions.php

/---------------------------------------------------------------
// 管理画面のjavascriptを適用
//---------------------------------------------------------------
function enqueue_custom_admin_script()
{
    // 管理画面のみにスクリプトをエンキュー
    wp_enqueue_script('admin-custom-script', get_template_directory_uri() . '/admin-custom-script.js', array('jquery'), '1.0.0', true);
}

add_action('admin_enqueue_scripts', 'enqueue_custom_admin_script');

これで準備が整いました。続いてはCSSを記述していきます。