【WordPress】管理画面に独自のstyle/scriptを当てる方法
前回、wordpressの管理画面（ダッシュボード）に独自のメニュー・サブメニューを追加する方法を説明しましたが、
・管理画面に独自メニューを作る方法①
・管理画面に独自メニューを作る方法②
今回は、その作成した管理画面に独自の style や script を当てる方法を説明します。
管理画面に独自のstyle/scriptを当てる
functions.php に下記を追加します。
■CSS ファイルを読み込む
function my_admin_style(){
//CSSを追加
wp_enqueue_style( 'my_admin_style', get_template_directory_uri().'/css/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().'/js/my_admin_script.js' );
// jQuery のコードだった場合
wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/js/my_admin_script.js', array('jquery'));
// body 終了タグ直前で読み込みたい場合（読み込み位置をフッターにするには第4引数を true にします）
wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/js/my_admin_script.js', '', '', true);
// body 終了タグ直前で jQuery のファイルを読み込みたい場合
wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/js/my_admin_script.js', array('jquery'), '', true);
}
add_action( 'admin_enqueue_scripts', 'my_admin_script' );
管理画面の特定したページのみに独自のstyle/scriptを当てる
※前回の「wordpressの管理画面（ダッシュボード）に独自のメニュー・サブメニューを追加する方法」では、追加する画面の HTML(PHP) を直接 function.php に書き込んでいたが、
管理画面の特定したページのみに独自のstyle/scriptを当てるには、直接書き込むのではなく、include で PHP ファイルを読み込む必要があります。まず、その方法について説明します。
functions.php に下記を追加します。
add_action( 'admin_menu', 'menu_page' );
function menu_page(){
add_menu_page( 'お知らせ・ブログ記載方法', 'お知らせ・ブログ記載方法',
'edit_posts', 'info_menu', 'banner_options_page', 'dashicons-info', 3 );
}
function banner_options_page() {
//別に用意した PHP ファイルを読み込ませる
//ファイル名は、上記関数の引数のスラッグ名と同じにする
include 'info_menu.php';
}
これで追加したページのみに、CSS/JavaScript を当てます。
functions.php に下記を追加します。
function my_admin_style(){
wp_enqueue_style( 'my_admin_style', get_template_directory_uri().'/css/my_admin_style.css' );
}
add_action( 'admin_head-toplevel_page_info_menu', 'my_admin_style' );
function my_admin_script(){
wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/js/my_admin_script.js' );
}
add_action( 'admin_head-toplevel_page_info_menu', 'my_admin_script' );
add_action の引数の admin_head-toplevel_ の後に、追加したページのスラッグ名（画面の名前）を付ける。
■追加したページのスラッグ名（画面の名前）が分からない場合は、次のように「wp_die()」を使用して確認することができます。
function my_admin_style($custom){
wp_die( '<pre>' . var_export( $custom, true ) . '</pre>' );
}
add_action( 'admin_enqueue_scripts', 'my_admin_style' );
