WordPressの管理画面にCSSファイルやJSファイルを読み込む方法

WordPress

三上龍志｜株式会社シンシエイト

投稿日： 2020.05.08

最終更新日： 2020.05.11

WordPressをクライアント向けにカスタマイズする時に、特定の項目を非表示にしたかったり、サイズを変更したかったりということがあります。

これらの対策に管理画面にCSSファイルやJSファイルを読み込む方法を共有します。

やりたいこと

WordPressの管理画面（/wp-admin/*）にCSSファイルとJSファイルを読み込む。

結論

add_action('admin_enqueue_scripts', function()
{
    // CSSとJSのファイル名
    $cssFile = 'css/admin.min.css';
    $jsFile = 'js/admin.min.js';

    // 各ファイルのURL
    $cssFileUrl = sprintf('%s/%s', get_template_directory_uri(), $cssFile);
    $jsFileUrl = sprintf('%s/%s', get_template_directory_uri(), $jsFile);

    // 各ファイルの更新日時を取得
    $cssFileModified = filemtime(sprintf('%s/%s', get_template_directory(), $cssFile));
    $jsFileModified = filemtime(sprintf('%s/%s', get_template_directory(), $jsFile));

    // 各ファイルの読み込み
    wp_enqueue_style('app-admin-style', $cssFileUrl . '?' . $cssFileModified);
    wp_enqueue_script('app-admin-script', $jsFileUrl . '?' . $jsFileModified, ['jquery']);
});

このPHPをfunction.phpなどに追記すれば管理画面にCSSとJSファイルが読み込まれます。コピペでOKという方はコピペでそのまま使ってください。