WP管理画面に独自のCSS・JSを適用させる方法

WordPress管理画面をカスタマイズしていくにあたり、自分で用意したCSSやJSを適用させたい場合があると思います。

もちろんSimple Custom CSS and JSなどのプラグインを利用する方法もありますが、実は簡単なコードで適用できます。

• CSSファイル・JSファイルを読み込む
• CSS・JSを直接記述する

のどちらでも適用できますので、ぜひ試してみてください。

管理画面に独自のCSS・JSファイルを読み込ませる方法

テーマフォルダ内にCSSファイル・JSファイルを用意します。

今回は以下の場所にファイルを作成しました。

• テーマフォルダ/assets/css/admin.css
• テーマフォルダ/assets/js/admin.js

CSS・JSファイルを読み込む

function add_admin_style(){
  $path_css = get_template_directory_uri().'/assets/css/admin.css';
  wp_enqueue_style('admin_style', $path_css);
  $path_js = get_template_directory_uri().'/assets/js/admin.js';
  wp_enqueue_script('admin_script', $path_js);
}
add_action('admin_enqueue_scripts', 'add_admin_style');

関数add_admin_styleを用意して、add_actionにて各種スクリプトを読み込むタイミングで実行させています。

CSSファイルであればwp_enqueue_style、JSファイルであればwp_enqueue_scriptで読み込み実行。

wp_enqueue_style

wp_enqueue_style(ハンドル名, ファイルパス, 依存関係, バージョン, メディア属性);

ハンドル名・ファイルパスのみ必須です。

wp_enqueue_script

wp_enqueue_script(ハンドル名, ファイルパス, 依存関係, バージョン, フッター読み込み);

ハンドル名・ファイルパスのみ必須です。

管理画面に独自のCSS・JSを直接記述する方法

個別のファイルを用意せず、PHP内に直接記述する方法もあります。

CSSを直接記述する

function my_admin_style() {
  echo '<style>
  body {
    background: #dfdfdf;
  }
  </style>'.PHP_EOL;
}
add_action('admin_print_styles', 'my_admin_style');

上記のようにechoを使って出力します。

JSを直接記述する

function my_admin_script() {
  echo '<script>
  alert('注意してください');
  </script>'.PHP_EOL;
}
add_action('admin_print_scripts', 'my_admin_script');

こちらもCSS同様、上記のようにechoを使って出力します。

まとめ

管理画面にCSS・JSファイルは簡単に適用ができます。

自分でカスタムフィールドを用意した際など、画面の装飾やクリックイベントの設定が楽になりますので、ぜひ活用してください。