管理画面に独自のCSSを追加、不要なCSSを削除する方法

はじめに

WordPressの管理画面のデザインをカスタマイズしたい場合、独自のCSSを追加すると便利です。

さらに、テーマやプラグインが自動的に読み込む不要なCSSを削除することで、管理画面の表示をよりスッキリさせることができます。

この記事では、その方法について説明します。

管理画面に独自のCSSを追加する方法

以下のコードをfunctions.phpに追加します。
この例では、子テーマ内ののadmin.cssを管理画面で適用します。

add_action('admin_enqueue_scripts', function () {
  wp_enqueue_style(                                 // スタイルシートを追加
    'my-admin-style',                               // スタイルのハンドル名
    get_stylesheet_directory_uri() . '/admin.css'   // 管理画面用のCSSファイルのパス
  );
});

補足

• admin_enqueue_scripts
  管理画面の<head>タグ内でスタイルやスクリプトを追加するためのフックです。
  また、$hook_suffixを判定することで、特定の管理画面にのみCSSやJSを適用できます。

do_action('admin_enqueue_scripts', string $hook_suffix);

• admin_head-{$hook_suffix}
  特定の管理画面の <head>タグにアクションをフックします。
  これを利用することで、管理画面の特定のページだけにCSSやJSを追加できます。

do_action('admin_head-{$hook_suffix}');

• admin_footer-{$hook_suffix}
  特定の管理画面のフッター部分にアクションをフックします。
  このフックは、管理画面のフッターが読み込まれるタイミングで実行されるため、追加したいJavaScriptやHTMLをフッターに挿入する際に便利です。

do_action('admin_footer-{$hook_suffix}');

CSSを削除する方法

<link rel="stylesheet" id="scrollhint-style-css" href=".../cocoon-master/plugins/scroll-hint-master/css/scroll-hint.css?ver=6.0.1&amp;fver=20220718103847" media="all">

テーマやプラグインが自動的に読み込むCSSの中には、不要なものもあります。
例えば、Cocoonが読み込む「ScrollHint」のCSSを削除するには、以下のコードをfunctions.phpに追加します。

add_action('wp_enqueue_scripts', function () {
  wp_dequeue_style('scrollhint-style');	// 解除するスタイルのハンドル名
}, 100);

さいごに

今回紹介した方法を使えば、管理画面に独自のCSSを適用したり、不要なCSSを削除したりすることができます。
admin_enqueue_scripts()を活用することで、特定の管理画面にのみCSSを適用することも可能です。
また、wp_dequeue_style()を利用すれば、テーマやプラグインが追加する不要なCSSを削除できます。
管理画面のカスタマイズを行うことで、作業の効率を向上させたり、視認性を向上させたりすることができます。