memocarilog

WordPress の管理画面に独自の CSS や JavaScript を適用させる方法のメモです。管理画面全てのページで読み込む場合と、投稿画面のみなど場所を限定して読み込む場合でコードをまとめてみました。

管理画面全てのページで独自の CSS・JavaScript を読み込む

head 内に CSS・JavaScript コードを直接書き込む

functions.php へ以下のように記入します。

CSS コードを書き込む

function my_admin_style() {
  echo '<style>
  〜適用したいスタイルを記入〜
  </style>'.PHP_EOL;
}
add_action('admin_print_styles', 'my_admin_style');

JavaScript コードを書き込む

function my_admin_script() {
  echo '<script>
  〜適用したいスクリプトを記入〜
  </script>'.PHP_EOL;
}
add_action('admin_print_scripts', 'my_admin_script');

body 終了タグ直前に JavaScript コードを直接書き込む

functions.php へ以下のように記入します。

function my_admin_footer_script() {
  echo '<script>
  〜適用したいスクリプトを記入〜
  </script>'.PHP_EOL;
}
add_action('admin_print_footer_scripts', 'my_admin_footer_script');

head 内もしくは、body 終了タグ直前へ CSS・JavaScript のファイルを読み込む

functions.php へ以下のように記入します。

CSS ファイルを読み込む

function my_admin_style(){
	wp_enqueue_style( 'my_admin_style', get_template_directory_uri().'/my_admin_style.css' );
}
add_action( 'admin_enqueue_scripts', 'my_admin_style' );

JavaScript ファイルを読み込む

function my_admin_script(){
	wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/my_admin_script.js' );
	
	// jQuery のコードだった場合
	wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/my_admin_script.js', array('jquery'));
	
	// body 終了タグ直前で読み込みたい場合（読み込み位置をフッターにするには第4引数を true にします）
	wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/my_admin_script.js', '', '', true);
	
	// body 終了タグ直前で jQuery のファイルを読み込みたい場合
	wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/my_admin_script.js', array('jquery'), '', true);
}
add_action( 'admin_enqueue_scripts', 'my_admin_script' );

投稿画面のみなど場所を限定して独自の CSS・JavaScript を読み込む

場所を限定して読み込む場合は以下のように、admin_head や admin_print_styles のフック名の後にファイルを読み込みたい管理画面ページのアドレス wp-admin/ 以下のファイル名を付けるとそのページにのみファイルを読み込みことができます。

// ファイルを読み込む
add_action('admin_head-ページファイル名', 'my_admin_script');

// スタイルを直接書き込む
add_action("admin_print_styles-ページファイル名", 'my_admin_css');

// スクリプトを直接書き込む
add_action("admin_print_scripts-ページファイル名", 'my_admin_script');

例えば、メディアのアップロード画面でのみファイルを読み込みたいとすると、アップロード画面のアドレスは次のようになっています。

http://ドメイン/wp-admin/media-new.php

wp-admin/ 以下のファイル名「media-new.php」を admin_head の後に続けて以下のようにアクションフック名にすると、メディアのアップロード画面でのみファイルを読み込むことができます。

add_action("admin_head-media-new.php", "my_admin_script");

以下、投稿画面でのみファイルなどを読み込むコード例です。

記事の新規投稿画面でのみ JS ファイル・CSS ファイル・コードを読み込む

投稿画面・投稿一覧ページは固定ページなども含む全ての投稿画面ページでファイルが読み込まれてしまう為、post タイプを取得し一致する場合にのみファイルを読み込むという形にしています。

読み込みページを限定した場合は、何故か wp_enqueue_script の第4引数に true を渡してもフッターでの読み込みはしてくれませんでした…。

functions.php へ以下のように記入します。

CSS コードを直接書き込む

function my_admin_style() {
    if(get_post_type() === 'post'){
        echo '<style>
         〜適用したいスタイルを記入〜
        </style>'.PHP_EOL;
    }
}
add_action("admin_print_styles-post-new.php", "my_admin_style");

JavaScript コードを直接書き込む

function my_admin_script(){
    if(get_post_type() === 'post'){
        echo '<script>
                〜適用したいスクリプトを記入〜
        </script>'.PHP_EOL;
    }
}
add_action("admin_print_scripts-post-new.php", "my_admin_script");

CSS ファイルを読み込む

function my_admin_style(){
	if( get_post_type() === 'post' ){
		wp_enqueue_style( 'my_admin_style', get_template_directory_uri().'/my_admin_style.css' );
	}
}
add_action("admin_head-post-new.php", "my_admin_style");

JavaScript ファイルを読み込む

function my_admin_script(){
	if( get_post_type() === 'post' ){
		wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/my_admin_script.js');
	}
}
add_action("admin_head-post-new.php", "my_admin_script");

もし、「固定ページでのみ」にしたい場合は get_post_type() === ‘post’ の部分を get_post_type() === ‘page’ にすれば、固定ページでのみファイルなどを読み込むことができます。