当記事では、管理画面にCSSやJavaScriptを反映させる方法を解説していきます。
管理画面でCSSやJavaScriptを使いたいという場面もあるかと思います。
管理画面をカスタマイズしたい方はぜひ参考にしてください。
目次
管理画面にCSSやJavaScriptを反映させる方法
基本的な読み込み方法
管理画面にCSSやJavaScriptを反映させるには、以下のコードをfunctions.phpに記述します。
function my_theme_add_admin_scripts() {
$template_uri = get_template_directory_uri();
wp_enqueue_style( 'admin-style', $template_uri . '/assets/css/admin.css', array(), false );
wp_enqueue_script( 'admin-script', $template_uri . '/assets/js/admin.js', array(), false, array( 'in_footer' => true ) );
}
add_action( 'admin_enqueue_scripts', 'my_theme_add_admin_scripts' );これで管理画面でadmin.cssとadmin.jsが読み込まれます。ファイル名やパスは適宜書き換えてください。
jQueryを使う場合
JavaScriptにjQueryのコードがある場合は、以下のように記述します。
function my_theme_add_admin_scripts() {
$template_uri = get_template_directory_uri();
wp_enqueue_style( 'admin-style', $template_uri . '/assets/css/admin.css', array(), false );
wp_enqueue_script( 'admin-script', $template_uri . '/assets/js/admin.js', array( 'jquery' ), false, array( 'in_footer' => true ) );
}
add_action( 'admin_enqueue_scripts', 'my_theme_add_admin_scripts' );こうすると、jQueryを読み込んだ後にadmin.jsが読み込まれます。
CSS/JavaScriptのバージョンをテーマに合わせる
wp_enqueue_style関数とwp_enqueue_script関数は第四引数でバージョンを指定することができます。
バージョンを記述しないとファイルを編集した後にブラウザキャッシュの影響で、編集内容が反映されないkとがあります。
バージョンの記述には、以下の方法がおすすめです。
function my_theme_add_admin_scripts() {
$template_uri = get_template_directory_uri();
$theme = wp_get_theme( get_template() );
$theme_version = $theme->Version;
wp_enqueue_style( 'admin-style', $template_uri . '/assets/css/admin.css', array(), $theme_version );
wp_enqueue_script( 'admin-script', $template_uri . '/assets/js/admin.js', array(), $theme_version, array( 'in_footer' => true ) );
}
add_action('admin_enqueue_scripts', 'my_theme_add_admin_scripts');CSS/JSファイルを編集した後に、style.cssのバージョンを変更すれば、CSS/JSファイルのバージョンも変わるので、ブラウザキャッシュの影響を受けなくなります。
JavaScriptを非同期で読み込む
JavaScriptを非同期で読み込むと、HTMLのパースがJSファイルの読み込みで妨げられないので、サイトのパフォーマンスが向上します。
function my_theme_add_admin_scripts() {
$template_uri = get_template_directory_uri();
wp_enqueue_style( 'admin-style', $template_uri . '/assets/css/admin.css', array(), false );
wp_enqueue_script( 'admin-script', $template_uri . '/assets/js/admin.js', array(), false, array( 'in_footer' => true, 'strategy' => 'async' ) );
}
add_action('admin_enqueue_scripts', 'my_theme_add_admin_scripts');注意点としては、asyncは非同期なのでjQueryのように依存するファイルがある場合は使えません。
admin.jsが依存ファイルよりも先に読み込まれる可能性があるからです。
コードの解説
ここでは、コードの解説をしていきます。
wp_enqueue_style関数
function my_theme_add_admin_scripts() {
$template_uri = get_template_directory_uri();
wp_enqueue_style( 'admin-style', $template_uri . '/assets/css/admin.css', array(), false );
wp_enqueue_script( 'admin-script', $template_uri . '/assets/js/admin.js', array(), false, array( 'in_footer' => true ) );
}
add_action( 'admin_enqueue_scripts', 'my_theme_add_admin_scripts' );wp_enqueue_style関数でCSSを読み込みます。
wp_enqueue_style関数には、以下の引数が入ります。
wp_enqueue_style( $handle, $src, $deps, $ver, $media );第一引数（string $handle）には、識別するための名前を付けます。ここの名前は他と被らないようにしましょう。
第二引数（string $src）には、読み込むファイルの絶対パスを入れます。
第三引数（string[] $deps）には、先に読み込んで欲しいCSSのハンドル名を、配列で記述します。指定が不要な場合は、空の配列array()を記述します。
第四引数（string|bool|null $ver）には、CSSファイルのバージョンを記述します。
第五引数（string $media）には、CSSを適用させるメディアを記述します。'all'、'print'、 'screen'や、'(max-width: 640px)'のような記述もできます。デフォルトは'all'です。
wp_enqueue_script関数
function my_theme_add_admin_scripts() {
$template_uri = get_template_directory_uri();
wp_enqueue_style( 'admin-style', $template_uri . '/assets/css/admin.css', array(), false );
wp_enqueue_script( 'admin-script', $template_uri . '/assets/js/admin.js', array(), false, array( 'in_footer' => true ) );
}
add_action( 'admin_enqueue_scripts', 'my_theme_add_admin_scripts' );wp_enqueue_script関数でCSSを読み込みます。
wp_enqueue_script関数には、以下の引数が入ります。
wp_enqueue_script( $handle, $src, $deps, $ver, $args );第一引数（string $handle）には、識別するための名前を付けます。ここの名前は他と被らないようにしましょう。
第二引数（string $src）には、読み込むファイルの絶対パスを入れます。
第三引数（string[] $deps）には、先に読み込んで欲しいJavaScriptのハンドル名を、配列で記述します。指定が不要な場合は、空の配列array()を記述します。
第四引数（string|bool|null $ver）には、JSファイルのバージョンを記述します。
第五引数（array|bool $args）には、配列が入ります。配列の中身には、'strategy'と'in_footer'があります。
'strategy'は、JavaScriptを非同期で読み込む場合に、'defer'または'async'を記述します。
'in_footer'は、ファイルの読み込みをフッターで読み込みたい時にtrueを指定します。