【WordPress】管理画面のみにCSS・JavaScriptのファイルを追加する方法｜admin_enqueue_scripts

今回は、WordPressの管理画面のみにCSS・JavaScriptファイルを読み込むタグを追加する方法となります。

管理画面のみにCSS・JavaScriptファイルを読み込むタグを追加する方法

管理画面のみでCSSやJavaScriptの外部ファイルを読み込むタグを追加するには、アクションフックadmin_enqueue_scriptsを利用します。

以下、管理画面に指定した外部ファイルを追加する例となり、functions.phpに記述します。

function mytheme_admin_enqueue() {
    // cssファイルを追加
    wp_enqueue_style( 'my_admin_css', get_template_directory_uri() . '/css/my-admin-style.css' );
}
add_action( 'admin_enqueue_scripts', 'mytheme_admin_enqueue' );

管理画面の指定したページのみに外部ファイルを追加する方法

また、管理画面の指定したページにのみ外部ファイルを読み込むタグを追加することも可能です。

以下は、管理画面のedit.phpページのみに指定した外部ファイルを追加する例となり、functions.phpに記述します。

function mytheme_admin_enqueue($hook) {
    if ( 'edit.php' != $hook ) {
        return;
    }
    // jsファイルを追加
    wp_enqueue_script( 'my_admin_script', get_template_directory_uri() . '/js/my-admin-script.js' );
}
add_action( 'admin_enqueue_scripts', 'mytheme_admin_enqueue' );

admin_enqueue_scriptsフックのコールバック関数の引数には、管理画面のページを識別するphpファイル名やパラメータの文字列がセットされるので、その引数を利用し管理画面の指定したページにのみに、CSSやJavaScriptの外部ファイルを追加できます。

また、ページを識別する文字列がわからない場合には、PHPの処理を停止できるwp_die()を利用し、コールバック関数の引数を出力することで確認できます。

CSS・JavaScriptファイルを追加する関数について

また、フックのコールバック関数内で利用している、外部ファイルを読み込むタグを追加するwp_enqueue_style()、wp_enqueue_script()ついては、以下のリンク先を参考にしてみてください。

【WordPress】CSS・JavaScriptの外部ファイルを追加・削除する方法｜wp_enqueue_scripts