WordPressの管理画面ページに独自のCSS・JSを追加する方法

WordPressの管理画面ページに独自のCSS・JSを追加したい。
特定の管理画面ページだけに適用したい。
本記事ではこのような悩みを解決。
実装方法について解説します。
テーマフォルダ内にCSS・JSファイルを作成
テーマフォルダ内に管理画面に追加したいCSS・JSファイルを作成します。
管理画面ページ共通でCSS・JSを追加
function mytheme_admin_enqueue() {
// cssを追加
wp_enqueue_style( 'my_admin_css', get_template_directory_uri() . '/css/style.css' );
// jsを追加
wp_enqueue_script( 'my_admin_script', get_template_directory_uri() . '/js/function.js' );
}
add_action( 'admin_enqueue_scripts', 'mytheme_admin_enqueue' );
管理画面ページ共通でCSS、JSファイルを追加するコード例です。
アクションフックwp_enqueue_scriptを使います。
上記アクションフックを使う事で管理画面ページにコードを追記する事が出来ます。
functions.phpに上記コードを記述。
wp_enqueue_style関数を使う事でlinkタグを生成。
wp_enqueue_script関数を使う事でscriptタグを生成出来ます。
それぞれ第二引数に前章で作成したCSS・JSファイルへのパスを記述すればOKです。
ブラウザ検証ツールを使って管理画面ページのソースを確認。
CSS・JSファイルが追加されていたら成功です。
特定の管理画面ページだけに追加
function mytheme_admin_enqueue($hook) {
// 新規投稿・編集画面のみ
if( 'post.php' === $hook || 'post-new.php' === $hook ) {
return;
}
// jsを追加
wp_enqueue_script( 'my_admin_script', get_template_directory_uri() . '/js/function.js' );
}
add_action( 'admin_enqueue_scripts', 'mytheme_admin_enqueue' );
特定の管理画面ページだけにJSを追加するコード例です。
新規投稿・編集画面のみJSが追加されます。
admin_enqueue_scriptsの引数には現在開いてる管理画面ページのファイルが割り当てられてます。
if文を使い、条件式にCSS・JSを追加したい管理画面ページで使われてるファイルの時だけwp_enqueue_script関数が動作するようにすればO Kです。
まとめ
WordPressの管理画面ページに独自のCSS・JSを追加する方法について紹介しました。
以上で解説を終わります。