【WordPress】管理画面のみ特定のCSSを読み込む

WordPressで管理画面のみ特定のCSSを読み込みたい！

概要

今回の記事では、WordPressで管理画面のみでCSSを読み込む手順を掲載する。

複数プラグインを導入してて、CSSを変更するようなことをしてるとプラグインの部分でデザインが破綻しちゃう事があるんだけども、これを修正するのに管理画面でCSSを読み込みたい！

環境

WordPress 6.3
PHP 7.4.26

手順書

親テーマのディレクトリにあるadd-editor-style.cssを読み込む例。function.phpに追加する。

function add_editor_styles() {
    wp_enqueue_style('add-editor-style', get_template_directory_uri() . '/add-editor-style.css', array(), '1.0.0');
}
add_action('admin_enqueue_scripts', 'add_editor_styles');

wp_enqueue_style関数でCSSを読み込むと後からそのCSSが読み込まれてるか判定できるので便利。

    if (wp_style_is('add-editor-style, 'enqueued')) {
        //add-editor-style.cssが読み込まれてる時の処理
    } else {
        //add-editor-style.cssが読み込まれてない時の処理
    }

wp_enqueue_style関数で渡したCSSはHTMLファイル上で下記のような感じで読み込まれる。

<link rel='stylesheet' id='add-editor-style-css' href='https://example.com/wp-content/themes/my-theme/add-editor-style.css?ver=1.0.0' media='all' />

第1引数で渡した文字列の末尾に-cssが追加された文字列でIDが設定される。

まとめ（感想文）

管理画面のデザインをゴニョゴニョしたい時に使えるかもね！