Notes / 実践記録

WordPress管理画面に独自CSS・JavaScriptを読み込む方法

本ページはアフィリエイトプログラムを利用しています

WordPressの管理画面は、そのままでも十分に使えます。
ただ、クライアントワークや自分用の運用では、投稿画面の見た目を少し整えたいことがあります。
特定の注意書きを目立たせたい。
入力欄の余白を調整したい。
管理画面だけで動く小さなJavaScriptを読み込みたい。
そういう場面です。

この記事を最初に書いた2017年当時は、admin_print_styles で <style> を直接出す方法を紹介していました。
小さな調整なら動きますが、今から書くなら admin_enqueue_scripts でCSSやJavaScriptファイルを読み込む方が整理しやすいです。
WordPressの公式リファレンスでも、管理画面用のスクリプト読み込みには admin_enqueue_scripts フックが用意されています。

管理画面だけにCSSを読み込ませる

管理画面に独自CSSを読み込ませるなら、まずは admin_enqueue_scripts と wp_enqueue_style() を使います。
テーマの functions.php に書く場合は、子テーマ側で管理するのが無難です。
本格的に使い回すなら、小さな自作プラグインにしておく方がテーマ変更の影響を受けにくくなります。

function taupe_admin_assets( $hook_suffix ) {
  wp_enqueue_style(
    'taupe-admin-style',
    get_stylesheet_directory_uri() . '/admin.css',
    array(),
    '1.0.0'
  );
}
add_action( 'admin_enqueue_scripts', 'taupe_admin_assets' );

この例では、子テーマ内の admin.css を管理画面で読み込ませています。
get_stylesheet_directory_uri() は子テーマのURLを返すので、子テーマで運用している場合に扱いやすいです。

WordPressの管理画面に手書きのCSS・JavaScriptを反映させる方法

特定の管理画面だけに絞る

すべての管理画面で読み込ませる必要がない場合は、$hook_suffix を見て対象画面を絞れます。
たとえば投稿編集画面と新規投稿画面だけで読み込ませるなら、以下のようにします。

function taupe_admin_assets( $hook_suffix ) {
  if ( 'post.php' !== $hook_suffix && 'post-new.php' !== $hook_suffix ) {
    return;
  }

  wp_enqueue_style(
    'taupe-admin-style',
    get_stylesheet_directory_uri() . '/admin.css',
    array(),
    '1.0.0'
  );
}
add_action( 'admin_enqueue_scripts', 'taupe_admin_assets' );

管理画面全体に読み込むと、意図しない画面に影響することがあります。
投稿編集画面だけ、固定ページ編集画面だけ、特定のプラグイン画面だけ、というように絞れるなら絞った方が扱いやすいです。

JavaScriptも同じフックで読み込める

管理画面用のJavaScriptも、同じ admin_enqueue_scripts で読み込めます。
CSSは wp_enqueue_style()、JavaScriptは wp_enqueue_script() を使います。

function taupe_admin_assets( $hook_suffix ) {
  if ( 'post.php' !== $hook_suffix && 'post-new.php' !== $hook_suffix ) {
    return;
  }

  wp_enqueue_script(
    'taupe-admin-script',
    get_stylesheet_directory_uri() . '/admin.js',
    array( 'jquery' ),
    '1.0.0',
    array( 'in_footer' => true )
  );
}
add_action( 'admin_enqueue_scripts', 'taupe_admin_assets' );

管理画面はWordPress本体やプラグインのスクリプトも多く動いています。
そのため、何でもグローバルに書くより、必要な画面だけに読み込ませる方がトラブルを減らしやすいです。

小さなCSSだけならインラインでも動くが、基本は分ける

ちょっとした確認用なら、管理画面に <style> を直接出す方法でも動きます。
この記事の古い版で紹介していたのも、その考え方でした。

function taupe_admin_inline_style() {
  echo '<style>
    .editor-post-title__input {
      font-size: 24px;
    }
  </style>';
}
add_action( 'admin_head', 'taupe_admin_inline_style' );

ただ、調整が増えると functions.php の中にCSSやJavaScriptが散らかっていきます。
後から見直すことを考えると、CSSは admin.css、JavaScriptは admin.js のようにファイルを分け、wp_enqueue_* で読み込む方が管理しやすいです。